diff options
| -rw-r--r-- | _layouts/default.html | 19 | ||||
| -rw-r--r-- | assets/css/alaveteli-org.css | 209 | ||||
| -rw-r--r-- | assets/sass/alaveteli-org.scss | 88 | ||||
| -rw-r--r-- | assets/scripts/how-it-works-slides.js | 32 | ||||
| -rw-r--r-- | index.md | 46 |
5 files changed, 297 insertions, 97 deletions
diff --git a/_layouts/default.html b/_layouts/default.html index 61d78f270..06c6cbae5 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -122,23 +122,6 @@ $('.reveal-all').trigger('click'); }); </script> - <script src="{{ site.baseurl }}assets/scripts/owl.carousel.min.js"></script> - <script> - $(document).ready(function() { - $("#owl-example").owlCarousel({ - navigation : true, // Show next and prev buttons - slideSpeed : 300, - paginationSpeed : 400, - singleItem:true - - // "singleItem:true" is a shortcut for: - // items : 1, - // itemsDesktop : false, - // itemsDesktopSmall : false, - // itemsTablet: false, - // itemsMobile : false - }); - }); - </script> + <script src="{{ site.baseurl }}assets/scripts/how-it-works-slides.js"></script> </body> </html> diff --git a/assets/css/alaveteli-org.css b/assets/css/alaveteli-org.css index bbcf26435..26c178507 100644 --- a/assets/css/alaveteli-org.css +++ b/assets/css/alaveteli-org.css @@ -138,7 +138,7 @@ h3 { pointer-events: none !important; } .nav-toggle { - -webkit-tap-highlight-color: transparent; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; @@ -265,71 +265,151 @@ h3 { .how-does-it-work { background-color: #974495; - position: relative; - padding-bottom: 0; - overflow: -x hidden; } + overflow: hidden; } @media (min-width: 40em) { .how-does-it-work { - margin-top: 2em; } } + padding-top: 0; + padding-bottom: 0; } + .how-does-it-work .how-does-it-work__slide { + border-top: 4em solid #fff; + padding-top: 3.5em; } + .how-does-it-work h2, .how-does-it-work p { + width: 50%; } + .how-does-it-work img { + float: right; + width: 30em; + margin-right: -15em; + margin-top: -13em; } } @media (min-width: 56.88889em) { - .how-does-it-work { - margin-top: 4em; - margin-bottom: 2em; } } - @media (min-width: 40em) { - .how-does-it-work .container { - padding-bottom: 3.5em; - min-height: 320px; } } + .how-does-it-work h2, .how-does-it-work p, .how-does-it-work .how-does-it-work__slide__nav { + width: 50%; + margin-left: 50%; } + .how-does-it-work img { + float: left; + width: 45%; + margin-right: 1em; + margin-left: 1em; + margin-top: -12em; } } + +.how-does-it-work__slide { + /** + * For IE 6/7 only + * Include this rule to trigger hasLayout and contain floats. + */ } + .how-does-it-work__slide:before, .how-does-it-work__slide:after { + content: " "; + /* 1 */ + display: table; + /* 2 */ } + .how-does-it-work__slide:after { + clear: both; } + .how-does-it-work__slide { + *zoom: 1; } + +.how-does-it-work__slide__nav { + margin-top: 0.5em; } + +.how-does-it-work__slide__skip { + display: inline-block; + padding: 0.3em; + cursor: pointer; } + .how-does-it-work__slide__skip span { + display: block; + border-radius: 1em; + width: 1em; + height: 1em; + background-color: rgba(0, 0, 0, 0.5); } + .how-does-it-work__slide__skip.active span { + background-color: transparent; + border: 0.2em solid rgba(0, 0, 0, 0.5); } + .how-does-it-work__slide__skip:hover span, .how-does-it-work__slide__skip:focus span { + background-color: rgba(0, 0, 0, 0.3); } + .how-does-it-work__slide__skip:hover.active span, .how-does-it-work__slide__skip:focus.active span { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.3); } + +/* .how-does-it-work { + @extend %full-width-section; + @extend %dark-section; + background-color: darken($colour_brand, 5%); + position: relative; + padding-bottom: 0; + overflow:-x hidden; + @media(min-width: $mediumish-screen) { + margin-top: 2em; + } + @media(min-width: $large-screen) { + margin-top: 4em; + margin-bottom: 2em; + } + .container { + @media(min-width: $mediumish-screen) { + padding-bottom: 3.5em; + min-height: 320px; + } + } +} .how-does-it-work__screenshot-position { - text-align: center; - overflow: hidden; - line-height: 0; } - @media (min-width: 56.88889em) { - .how-does-it-work__screenshot-position { - position: absolute; - bottom: -3px; - right: -40%; - width: 100%; } - .how-does-it-work__screenshot-position img { - width: 55%; - min-width: 665px; + text-align: center; + overflow: hidden; + line-height: 0; + @media(min-width: $large-screen) { + position: absolute; + bottom: -3px; // TODO: recrop the images and make this 0 + right: -40%; + width: 100%; + img { + width: 55%; + min-width: 665px; + left: 0; + bottom: 0; + position: absolute; + } + } + @media(min-width: 71.25em) { + right: auto; left: 0; - bottom: 0; - position: absolute; } } - @media (min-width: 71.25em) { - .how-does-it-work__screenshot-position { - right: auto; - left: 0; - width: 100%; } } + width: 100%; + } +} .screenshot-annotation { - position: absolute; - top: 50%; - right: 0; } + position: absolute; + top: 50%; + right: 0; +} .owl-item { - min-height: 500px; } - .owl-item div { - bottom: 0; } + min-height: 500px; + div { + bottom: 0; + } +} .owl-controls { - width: 100%; } + width: 100%; +} +.owl-buttons { + +} .owl-prev { - position: absolute; - top: 50%; - left: 0; - background-color: black; - padding: 0.75em; } + position: absolute; + top: 50%; + left: 0; + background-color: black; + padding: 0.75em; +} .owl-next { - position: absolute; - top: 50%; - right: 0; - left: auto; - background-color: black; - padding: 0.75em; } - + position: absolute; + top: 50%; + right: 0; + left: auto; + background-color: black; + padding: 0.75em; +} */ /** .how-does-it-work__content { @media(min-width: $mediumish-screen) { margin-right: 44%; @@ -380,7 +460,7 @@ h3 { -moz-user-select: none; -ms-user-select: none; user-select: none; - -webkit-tap-highlight-color: transparent; } + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* mouse grab icon */ .grabbing { @@ -459,48 +539,57 @@ h3 { @-webkit-keyframes empty { 0% { opacity: 1; } } + @-moz-keyframes empty { 0% { opacity: 1; } } + @keyframes empty { 0% { opacity: 1; } } + @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } + @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } + @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } + @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } + @-moz-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } + @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } + @-webkit-keyframes backSlideOut { 25% { opacity: .5; @@ -513,6 +602,7 @@ h3 { 100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } } + @-moz-keyframes backSlideOut { 25% { opacity: .5; @@ -525,6 +615,7 @@ h3 { 100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } } + @keyframes backSlideOut { 25% { opacity: .5; @@ -537,6 +628,7 @@ h3 { 100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } } + @-webkit-keyframes backSlideIn { 0%, 25% { opacity: .5; @@ -549,6 +641,7 @@ h3 { 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); } } + @-moz-keyframes backSlideIn { 0%, 25% { opacity: .5; @@ -561,6 +654,7 @@ h3 { 100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); } } + @keyframes backSlideIn { 0%, 25% { opacity: .5; @@ -573,51 +667,64 @@ h3 { 100% { opacity: 1; transform: translateZ(0) translateX(0); } } + @-webkit-keyframes scaleToFade { to { opacity: 0; -webkit-transform: scale(0.8); } } + @-moz-keyframes scaleToFade { to { opacity: 0; -moz-transform: scale(0.8); } } + @keyframes scaleToFade { to { opacity: 0; transform: scale(0.8); } } + @-webkit-keyframes goDown { from { -webkit-transform: translateY(-100%); } } + @-moz-keyframes goDown { from { -moz-transform: translateY(-100%); } } + @keyframes goDown { from { transform: translateY(-100%); } } + @-webkit-keyframes scaleUpFrom { from { opacity: 0; -webkit-transform: scale(1.5); } } + @-moz-keyframes scaleUpFrom { from { opacity: 0; -moz-transform: scale(1.5); } } + @keyframes scaleUpFrom { from { opacity: 0; transform: scale(1.5); } } + @-webkit-keyframes scaleUpTo { to { opacity: 0; -webkit-transform: scale(1.5); } } + @-moz-keyframes scaleUpTo { to { opacity: 0; -moz-transform: scale(1.5); } } + @keyframes scaleUpTo { to { opacity: 0; transform: scale(1.5); } } + @media (min-width: 40em) { .features__grid-unit { width: 48.5%; } diff --git a/assets/sass/alaveteli-org.scss b/assets/sass/alaveteli-org.scss index 285d5be93..363153a73 100644 --- a/assets/sass/alaveteli-org.scss +++ b/assets/sass/alaveteli-org.scss @@ -300,6 +300,92 @@ h3 { } .how-does-it-work { + + @extend %full-width-section; + @extend %dark-section; + background-color: darken($colour_brand, 5%); + + overflow: hidden; + + @media(min-width: $mediumish-screen) { + padding-top: 0; + padding-bottom: 0; + + .how-does-it-work__slide { + border-top: 4em solid #fff; + padding-top: 3.5em; + } + + h2, p { + width: 50%; + } + + img { + float: right; + width: 30em; + margin-right: -15em; + margin-top: -13em; + } + } + + @media (min-width: $large-screen) { + h2, p, .how-does-it-work__slide__nav { + width: 50%; + margin-left: 50%; + } + + img { + float: left; + width: 45%; + margin-right: 1em; + margin-left: 1em; + margin-top: -12em; + } + } + +} + +.how-does-it-work__slide { + @include clearfix(); +} + +.how-does-it-work__slide__nav { + margin-top: 0.5em; +} + +.how-does-it-work__slide__skip { + display: inline-block; + padding: 0.3em; + cursor: pointer; + + span { + display: block; + border-radius: 1em; // :TODO: cross-browser? + width: 1em; + height: 1em; + background-color: rgba(0,0,0,0.5); + } + + &.active { + span { + background-color: transparent; + border: 0.2em solid rgba(0,0,0,0.5); + } + } + + &:hover, + &:focus { + span { + background-color: rgba(0,0,0,0.3); + } + &.active span { + background-color: transparent; + border-color: rgba(0,0,0,0.3); + } + } +} + +/* .how-does-it-work { @extend %full-width-section; @extend %dark-section; background-color: darken($colour_brand, 5%); @@ -380,7 +466,7 @@ h3 { left: auto; background-color: black; padding: 0.75em; -} +} */ /** .how-does-it-work__content { @media(min-width: $mediumish-screen) { diff --git a/assets/scripts/how-it-works-slides.js b/assets/scripts/how-it-works-slides.js new file mode 100644 index 000000000..4145cf33e --- /dev/null +++ b/assets/scripts/how-it-works-slides.js @@ -0,0 +1,32 @@ +$(function(){ + var $container = $('div.how-does-it-work') + + if(!$container.length){ + return false; // bail out early if no slider on this page + } + + var showSlide = function(index){ + $('.how-does-it-work__slide:nth-child(' + (index+1) + ')', $container) + .show().siblings('.how-does-it-work__slide').hide() + + $('.how-does-it-work__slide__skip:nth-child(' + (index+1) + ')', $container) + .addClass('active').siblings('.how-does-it-work__slide__skip').removeClass('active') + } + + var makeSlideNavs = function(){ + var $slides = $('.how-does-it-work__slide', $container) + var $nav = $('<div class="how-does-it-work__slide__nav">') + for(var i=0; i<$slides.length; i++){ + $('<span class="how-does-it-work__slide__skip">').append('<span>') + .appendTo($nav) + } + $('.container', $slides).append($nav) + } + + makeSlideNavs() + showSlide(0) + + $container.on('click', '.how-does-it-work__slide__skip', function(){ + showSlide( $(this).prevAll().length ) + }) +}); @@ -44,33 +44,25 @@ title: Welcome </div> </div> <div class="how-does-it-work"> - <div class="container"> - <!--<div class="how-does-it-work__content"> - <h2>How does Alaveteli work?</h2> - <ul> - <li>A user makes a request for information from a public authority</li> - <li>Alaveteli notifies the authority, and handles any other workflow, like notifications and reminders</li> - <li>Alaveteli also publishes the request so that anyone can see it on the web</li> - <li>When the authority responds, the information is published too, so it’s accessible for everyone -</li> - </ul> - </div>--> - <div class="how-does-it-work__screenshot-position"> - <div id="owl-example" class="owl-carousel"> - <div> - <img src="{{ site.baseurl }}assets/img/alaveteli-demo-screen-find.svg" class="alaveteli-demo-screenshot"/> - <p class="screenshot-annotation">A user makes a request for information from a public authority</p> - </div> - <div> - <img src="{{ site.baseurl }}assets/img/alaveteli-demo-screen-ask.svg" class="alaveteli-demo-screenshot"/> - <p class="screenshot-annotation">A user makes a request for information from a public authority</p> - </div> - <div> - <img src="{{ site.baseurl }}assets/img/alaveteli-demo-screen-view.svg" class="alaveteli-demo-screenshot"/> - <p class="screenshot-annotation">A user makes a request for information from a public authority</p> - </div> - </div> - + <div class="how-does-it-work__slide"> + <div class="container"> + <h2>How Alaveteli works</h2> + <p>A user makes a request for information from a public authority.</p> + <img src="{{ site.baseurl }}assets/img/alaveteli-demo-screen-find.svg" class="alaveteli-demo-screenshot"/> + </div> + </div> + <div class="how-does-it-work__slide"> + <div class="container"> + <h2>How Alaveteli works</h2> + <p>Description of the second step goes here. It involves filling in a form.</p> + <img src="{{ site.baseurl }}assets/img/alaveteli-demo-screen-ask.svg" class="alaveteli-demo-screenshot"/> + </div> + </div> + <div class="how-does-it-work__slide"> + <div class="container"> + <h2>How Alaveteli works</h2> + <p>The third step in the process goes here. This is the last one.</p> + <img src="{{ site.baseurl }}assets/img/alaveteli-demo-screen-view.svg" class="alaveteli-demo-screenshot"/> </div> </div> </div> |