From 2cee19b6cd89dba3327564c15a4775d5936b9405 Mon Sep 17 00:00:00 2001 From: Tom Russell Date: Fri, 13 Apr 2018 12:48:06 +0100 Subject: [PATCH] Functional carousel, update bg colours --- html/index.html | 20 ++++++++++++++------ html/main.css | 35 +++++++++++++++++++++++++++++++++-- html/main.js | 36 ++++++++++++++++++++++++++++++++++++ 3 files changed, 83 insertions(+), 8 deletions(-) create mode 100644 html/main.js diff --git a/html/index.html b/html/index.html index c8874d38..5f0c87d7 100644 --- a/html/index.html +++ b/html/index.html @@ -9,7 +9,7 @@ -

+

@@ -62,7 +62,7 @@ will look like.
    -
  • Welcome
    • +
  • Welcome
  • Categories
  • Add/edit data
  • View maps
    • @@ -158,6 +158,7 @@ research.

    Once built, our platform will allow you to:

    +

    View maps

    @@ -168,7 +169,9 @@ interests you.

    Preview of view maps page +
    +

    Add and edit data

    @@ -178,7 +181,9 @@ Find a building and add or edit data for any of the 12 core categories.

    Preview of add/edit data page +
    +

    See how people are using our data

    @@ -190,7 +195,9 @@ history—or something we haven’t imagined yet.

    Preview of data showcase page +
    +

    Download, remix and reuse

    @@ -202,7 +209,7 @@ projects on the Colouring London site.

    Preview of download page - +
    @@ -260,5 +267,6 @@ projects on the Colouring London site. + diff --git a/html/main.css b/html/main.css index 3ad0b2ba..a6582942 100644 --- a/html/main.css +++ b/html/main.css @@ -29,6 +29,17 @@ h1, h2, h3, h4 { color: #878d96 !important; } +/** + * Form + */ +input[type="text"], +input[type="email"] { + display: block; + width: 100%; + border: 1px solid #222; + padding: 0.5em 0.25em; +} + /** * Colours */ @@ -41,15 +52,24 @@ h1, h2, h3, h4 { .bright-yellow { background-color: #f0d106; } +.pale-yellow { + background-color: #fff021; +} .bold-orange { background-color: #eb7905; } +.pale-orange { + background-color: #ffc04e; +} .red { background-color: #e96762; } .pastel-pink { background-color: #e099c1; } +.pale-pink { + background-color: #ffcde5; +} .pastel-purple { background-color: #7d6f94; } @@ -62,6 +82,9 @@ h1, h2, h3, h4 { .pastel-green { background-color: #72b889; } +.pale-green { + background-color: #73ebaf; +} .bright-blue { background-color: #72b2fe; } @@ -86,6 +109,8 @@ h1, h2, h3, h4 { text-decoration: none; } .logo .logotype { + font-size: 1em; + margin: 0; display: inline-block; vertical-align: bottom; } @@ -257,10 +282,14 @@ img { } .carousel-control { position: absolute; + display: none; top: 0; bottom: 0; width: 1em; } +.carousel.active .carousel-control { + display: block; +} .carousel-control.next { right: 0; } @@ -272,10 +301,12 @@ img { list-style: none; } .carousel-content li { - display: none; text-align: center; } -.carousel-content li.active { +.carousel.active .carousel-content li { + display: none; +} +.carousel.active .carousel-content li.current { display: block; } diff --git a/html/main.js b/html/main.js new file mode 100644 index 00000000..ad804d96 --- /dev/null +++ b/html/main.js @@ -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); +})();