a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Functional carousel, update bg colours

Browse Source
This commit is contained in:
Tom Russell 2018-04-13 12:48:06 +01:00
parent 3905ea9439
commit 2cee19b6cd
3 changed files with 83 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
html/index.html
View File

@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<h1 class="logo" id="top"> <a href="index.html" class="logo" id="top">
<div class="grid"> <div class="grid">
<div class="row"> <div class="row">
<div class="cell"></div> <div class="cell"></div>
@ -30,11 +30,11 @@
<div class="cell"></div> <div class="cell"></div>
</div> </div>
</div> </div>
<div class="logotype"> <h1 class="logotype">
<span>Colouring</span> <span>Colouring</span>
<span>London</span> <span>London</span>
</div>
</h1> </h1>
</a>
<article> <article>
@ -62,7 +62,7 @@ will look like.
<div class="carousel"> <div class="carousel">
<button class="carousel-control offscreen-text back">Back</button> <button class="carousel-control offscreen-text back">Back</button>
<ul class="carousel-content"> <ul class="carousel-content">
<li class="active"><img src="images/slide-1-welcome.png" alt="Welcome"></li> <li><img src="images/slide-1-welcome.png" alt="Welcome"></li>
<li><img src="images/slide-2-categories.png" alt="Categories"></li> <li><img src="images/slide-2-categories.png" alt="Categories"></li>
<li><img src="images/slide-3-edit.png" alt="Add/edit data"></li> <li><img src="images/slide-3-edit.png" alt="Add/edit data"></li>
<li><img src="images/slide-4-view.png" alt="View maps"></li> <li><img src="images/slide-4-view.png" alt="View maps"></li>
@ -158,6 +158,7 @@ research.
<h2>Once built, our platform will allow you to:</h2> <h2>Once built, our platform will allow you to:</h2>
<section class="pale-pink">
<h3>View maps</h3> <h3>View maps</h3>
<p> <p>
@ -168,7 +169,9 @@ interests you.
</p> </p>
<img src="images/slide-4-view.png" alt="Preview of view maps page"> <img src="images/slide-4-view.png" alt="Preview of view maps page">
</section>
<section class="pale-yellow">
<h3>Add and edit data</h3> <h3>Add and edit data</h3>
<p> <p>
@ -178,7 +181,9 @@ Find a building and add or edit data for any of the 12 core categories.
</p> </p>
<img src="images/slide-3-edit.png" alt="Preview of add/edit data page"> <img src="images/slide-3-edit.png" alt="Preview of add/edit data page">
</section>
<section class="pale-orange">
<h3>See how people are using our data</h3> <h3>See how people are using our data</h3>
<p> <p>
@ -190,7 +195,9 @@ history&mdash;or something we haven’t imagined yet.
</p> </p>
<img src="images/slide-6-showcase.png" alt="Preview of data showcase page"> <img src="images/slide-6-showcase.png" alt="Preview of data showcase page">
</section>
<section class="pale-green">
<h3>Download, remix and reuse</h3> <h3>Download, remix and reuse</h3>
<p> <p>
@ -202,7 +209,7 @@ projects on the Colouring London site.
</p> </p>
<img src="images/slide-5-download.png" alt="Preview of download page"> <img src="images/slide-5-download.png" alt="Preview of download page">
</section>
<form id="sign-up" action="https://tinyletter.com/colouringlondon" method="post" target="popupwindow" <form id="sign-up" action="https://tinyletter.com/colouringlondon" method="post" target="popupwindow"
onsubmit="window.open('https://tinyletter.com/colouringlondon', 'popupwindow', 'scrollbars=yes,width=800,height=600');return true"> onsubmit="window.open('https://tinyletter.com/colouringlondon', 'popupwindow', 'scrollbars=yes,width=800,height=600');return true">
@ -260,5 +267,6 @@ projects on the Colouring London site.
</a> </a>
</footer> </footer>
<script src="main.js"></script>
</body> </body>
</html> </html>

35
html/main.css
View File

@ -29,6 +29,17 @@ h1, h2, h3, h4 {
color: #878d96 !important; color: #878d96 !important;
} }
/**
* Form
*/
input[type="text"],
input[type="email"] {
display: block;
width: 100%;
border: 1px solid #222;
padding: 0.5em 0.25em;
}
/** /**
* Colours * Colours
*/ */
@ -41,15 +52,24 @@ h1, h2, h3, h4 {
.bright-yellow { .bright-yellow {
background-color: #f0d106; background-color: #f0d106;
} }
.pale-yellow {
background-color: #fff021;
}
.bold-orange { .bold-orange {
background-color: #eb7905; background-color: #eb7905;
} }
.pale-orange {
background-color: #ffc04e;
}
.red { .red {
background-color: #e96762; background-color: #e96762;
} }
.pastel-pink { .pastel-pink {
background-color: #e099c1; background-color: #e099c1;
} }
.pale-pink {
background-color: #ffcde5;
}
.pastel-purple { .pastel-purple {
background-color: #7d6f94; background-color: #7d6f94;
} }
@ -62,6 +82,9 @@ h1, h2, h3, h4 {
.pastel-green { .pastel-green {
background-color: #72b889; background-color: #72b889;
} }
.pale-green {
background-color: #73ebaf;
}
.bright-blue { .bright-blue {
background-color: #72b2fe; background-color: #72b2fe;
} }
@ -86,6 +109,8 @@ h1, h2, h3, h4 {
text-decoration: none; text-decoration: none;
} }
.logo .logotype { .logo .logotype {
font-size: 1em;
margin: 0;
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
} }
@ -257,10 +282,14 @@ img {
} }
.carousel-control { .carousel-control {
position: absolute; position: absolute;
display: none;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 1em; width: 1em;
} }
.carousel.active .carousel-control {
display: block;
}
.carousel-control.next { .carousel-control.next {
right: 0; right: 0;
} }
@ -272,10 +301,12 @@ img {
list-style: none; list-style: none;
} }
.carousel-content li { .carousel-content li {
display: none;
text-align: center; text-align: center;
} }
.carousel-content li.active { .carousel.active .carousel-content li {
display: none;
}
.carousel.active .carousel-content li.current {
display: block; display: block;
} }

36
html/main.js Normal file
View File

@ -0,0 +1,36 @@
carousel = (function(){
var box = document.querySelector('.carousel');
var next = box.querySelector('.next');
var prev = box.querySelector('.back');
// Define the global counter, the items and the
// current item
var counter = 0;
var items = box.querySelectorAll('.carousel-content li');
var amount = items.length;
var current = items[0];
box.classList.add('active');
// navigate through the carousel
function navigate(direction) {
// hide the old current list item
current.classList.remove('current');
// calculate the new position
counter = (counter + direction) % amount;
counter = counter < 0 ? amount - 1 : counter;
// set new current element
// and add CSS class
current = items[counter];
current.classList.add('current');
}
// add event handlers to buttons
next.addEventListener('click', function(ev) {
navigate(1);
});
prev.addEventListener('click', function(ev) {
navigate(-1);
});
// show the first element
// (when direction is 0 counter doesn't change)
navigate(0);
})();