diff options
author | Louise Crow <louise.crow@gmail.com> | 2014-07-15 14:29:56 +0100 |
---|---|---|
committer | Louise Crow <louise.crow@gmail.com> | 2014-07-15 14:29:56 +0100 |
commit | 411b537c0eb570b544e4c087a2ccd8a2dec5a56f (patch) | |
tree | f63efc7fc2080a4ca4441c3e02e1ebb657f51864 | |
parent | 6035dae0eee9f7e0b28f3fcceb35af2a7d766faf (diff) | |
parent | cb2237b222bb7016843d20cbe7247b22d8a1afaa (diff) |
Merge branch 'gh-pages-feedback' into gh-pages
-rw-r--r-- | _includes/feedback_form.html | 31 | ||||
-rw-r--r-- | _layouts/default.html | 3 | ||||
-rw-r--r-- | _layouts/page.html | 1 | ||||
-rw-r--r-- | assets/css/alaveteli-org.css | 28 | ||||
-rw-r--r-- | assets/sass/alaveteli-org.scss | 12 | ||||
-rw-r--r-- | assets/scripts/feedback-form.js | 84 | ||||
-rw-r--r-- | assets/scripts/jquery.cookie.js | 117 |
7 files changed, 249 insertions, 27 deletions
diff --git a/_includes/feedback_form.html b/_includes/feedback_form.html new file mode 100644 index 000000000..b6dc936ac --- /dev/null +++ b/_includes/feedback_form.html @@ -0,0 +1,31 @@ +<form id="feedback_form"> + <h3>Mini survey</h3> + <div id="form_elements"> + <p>Did you find what you were looking for on this page?</p> + <ul> + <li> + <label> + <input id="found_yes" name="found" type="radio" class="field radio" value="Yes" tabindex="1" onclick="$('#feedback-further-details').hide()"/>Yes + </label> + </li> + <li> + <label> + <input id="found_no" name="found" type="radio" class="field radio" value="No" tabindex="2" onclick="$('#feedback-further-details').show()"/>No + </label> + </li> + </ul> + <div id="feedback-further-details" hidden> + <p> + <label for="looking_for">What were you looking for?</label><br/> + <input id="id_looking_for" name="looking_for" /> + </p> + </div> + <input id="url" name="url" type="hidden" /> + <input type="hidden" name="question_no" value="1"> + </div> + + <p id="result"></p> + <input type="submit" value="Send"/> + <a href="" id="hide_survey">hide</a> + +</form> diff --git a/_layouts/default.html b/_layouts/default.html index 3c4a9db0f..c8c18c111 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -13,6 +13,9 @@ <!--[if lt IE 9]> <script src="{{ site.baseurl }}assets/scripts/respond.js"></script> <![endif]--> + <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> + <script src="{{ site.baseurl }}assets/scripts/jquery.cookie.js"></script> + <script src="{{ site.baseurl }}assets/scripts/feedback-form.js"></script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), diff --git a/_layouts/page.html b/_layouts/page.html index f1faa3950..732532106 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -32,6 +32,7 @@ layout: default <div class="secondary-content-column"> <nav class="sidebar"> <ul> + <li>{% include feedback_form.html %}</li> <li> <gcse:searchbox-only></gcse:searchbox-only> diff --git a/assets/css/alaveteli-org.css b/assets/css/alaveteli-org.css index 4919a7569..bd4cf8634 100644 --- a/assets/css/alaveteli-org.css +++ b/assets/css/alaveteli-org.css @@ -1,27 +1 @@ -.image-replacement{text-indent:-1000%;white-space:nowrap;overflow:hidden}.container{max-width:63.333333333em;padding:0 1em;margin:0 auto;position:relative}.unstyled-list,.unstyled,.site-nav ul{margin-left:0;padding-left:0;list-style:none outside none}.inline-list{margin-left:-0.5em;margin-bottom:0}.inline-list li{display:inline-block;margin-left:0.5em}.text--center{text-align:center}html{background-color:#333;height:100%;min-height:100%}body{background-color:transparent}.no-svg .site-title{background-image:url("../img/alaveteli-logo.png")}.hero,.what-is-alaveteli,.how-does-it-work,.features,.get-started,.about__intro,.deployments__intro{padding:2em 0}@media (min-width: 40em){.hero,.what-is-alaveteli,.how-does-it-work,.features,.get-started,.about__intro,.deployments__intro{padding:3.5em 0}} -.hero,.how-does-it-work,.get-started,.about__intro,.deployments__intro{background-color:#333;color:#fff}.hero a,.how-does-it-work a,.get-started a,.about__intro a,.deployments__intro a{color:#fff;border-bottom:1px dotted rgba(255,255,255,0.3)}.hero a:hover,.how-does-it-work a:hover,.get-started a:hover,.about__intro a:hover,.deployments__intro a:hover,.hero a:active,.how-does-it-work a:active,.get-started a:active,.about__intro a:active,.deployments__intro a:active,.hero a:focus,.how-does-it-work a:focus,.get-started a:focus,.about__intro a:focus,.deployments__intro a:focus{border-color:rgba(255,255,255,0.6);background-color:#863c83;text-decoration:none}.hero .button,.how-does-it-work .button,.get-started .button,.about__intro .button,.deployments__intro .button{color:#fff;border:1px solid rgba(255,255,255,0.3);width:100%;margin-bottom:1em}@media (min-width: 30em){.hero .button,.how-does-it-work .button,.get-started .button,.about__intro .button,.deployments__intro .button{width:auto;margin-bottom:0}}.hero .button:hover,.how-does-it-work .button:hover,.get-started .button:hover,.about__intro .button:hover,.deployments__intro .button:hover,.hero .button:active,.how-does-it-work .button:active,.get-started .button:active,.about__intro .button:active,.deployments__intro .button:active,.hero .button:focus,.how-does-it-work .button:focus,.get-started .button:focus,.about__intro .button:focus,.deployments__intro .button:focus{background-color:rgba(0,0,0,0.1);border-color:rgba(0,0,0,0.1)}.what-is-alaveteli__grid-unit,.features__grid-unit,.get-started__grid-unit{display:inline-block;vertical-align:top}.grid-row:before,.grid-row:after{content:" ";display:table}.grid-row:after{clear:both}.grid-row{*zoom:1}h1,h2,h4,h5,h6{font-weight:700}h3{font-weight:600}.button{display:inline-block;padding:0.4em 2.4em;border:1px solid #e4e3dd;vertical-align:middle;border-radius:7px;text-align:center}.button:hover,.button:active,.button:focus{background-color:#3a3a3a;border-color:rgba(255,255,255,0.2);text-decoration:none}@media (min-width: 47.5em){.nav-position{position:absolute;top:0.4em;left:180px}}@media (min-width: 56.88889em){.nav-position{left:240px;top:0.35em}} -.site-nav ul{margin-top:0;margin-bottom:0}@media (min-width: 47.5em){.site-nav li{display:inline-block}}.site-nav a{color:#fff;margin-right:0.33em;display:block;padding:0.33em;border-bottom:1px solid rgba(255,255,255,0.1)}@media (min-width: 47.5em){.site-nav a{display:inline-block;border-bottom:none}}@media (min-width: 56.88889em){.site-nav a{font-size:1.125em;margin-right:0.66em}} -/*! responsive-nav.js 1.0.32 by @viljamis */.js .nav-collapse{clip:rect(0 0 0 0);max-height:0;position:absolute;display:block;overflow:hidden;zoom:1}.nav-collapse.opened{max-height:9999px}.disable-pointer-events{pointer-events:none !important}.nav-toggle{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;position:absolute;top:0.4em;right:5em;display:inline-block;padding:0.3em 0.75em;border:1px solid rgba(255,255,255,0.1);border-radius:5px;color:#fff;font-size:0.875em}@media (min-width: 30em){.nav-toggle{right:10em}} -@media screen and (min-width: 47.5em){.js .nav-collapse{position:relative}.js .nav-collapse.closed{max-height:none}.nav-toggle{display:none}}.hero{background-color:#974495}.hero h1{display:inline-block;font-weight:600;width:auto;border-bottom:1px solid rgba(255,255,255,0.2);padding-bottom:0.5em;margin-bottom:0.25em;text-shadow:0px 2px 1px rgba(0,0,0,0.3)}@media (min-width: 56.88889em){.hero h1{font-size:4em}}.hero span{opacity:0.7;display:block}.hero p{font-size:1.125em;max-width:25em}.action-buttons{margin-top:2em}.action-buttons .button{font-weight:600;margin-right:1em}.what-is-alaveteli{position:relative}@media (min-width: 56.88889em){.what-is-alaveteli__items-grid{width:66.666%}} -@media (min-width: 30em){.what-is-alaveteli__grid-unit{width:46%;margin-right:4%}} -.what-is-alaveteli__item{padding-left:3.625em;background-position:top left;background-size:50px 50px;background-repeat:no-repeat}.what-is-alaveteli__item--foi{background-image:url("../img/scales.svg")}.no-svg .what-is-alaveteli__item--foi{background-image:url("../img/scales.png")}.what-is-alaveteli__item--help{background-image:url("../img/pointer.svg")}.no-svg .what-is-alaveteli__item--help{background-image:url("../img/pointer.png")}.what-is-alaveteli__item--published{background-image:url("../img/binoculars.svg")}.no-svg .what-is-alaveteli__item--published{background-image:url("../img/binoculars.png")}.what-is-alaveteli__item--open{background-image:url("../img/open.svg")}.no-svg .what-is-alaveteli__item--open{background-image:url("../img/open.png")}@media (min-width: 56.88889em){.what-is-alaveteli__international-reach-position{width:33.3333%;position:absolute;top:-13em;right:0}} -.what-is-alaveteli__international-reach{background-color:#f3f1eb;background-image:url("../img/worldmap.svg");background-position:center 1.5em;background-repeat:no-repeat;background-size:280px 158px;padding:10em 1.25em 1em}@media (min-width: 30em){.what-is-alaveteli__international-reach{background-size:360px 204px;padding:11.5em 2em 1em}}@media (min-width: 40em){.what-is-alaveteli__international-reach{background-size:360px 204px;padding:1em 2em 1em 22em;background-position:left center}}@media (min-width: 56.88889em){.what-is-alaveteli__international-reach{background-size:360px 204px;padding:12.5em 2em 1em;background-position:center 1.5em}}.what-is-alaveteli__international-reach .message{font-size:1.4em}.what-is-alaveteli__international-reach strong{color:#a94ca6}.what-is-alaveteli__international-reach a{color:#787774;border-bottom:1px dotted #e4e3dd}.what-is-alaveteli__international-reach a:hover,.what-is-alaveteli__international-reach a:active,.what-is-alaveteli__international-reach a:focus{text-decoration:none;border-color:#2b8cdb;color:#2b8cdb}.no-svg .what-is-alaveteli__international-reach{background-image:url("../img/worldmap.png")}.how-does-it-work{background-color:#974495;overflow:hidden}.how-does-it-work img{position:relative}@media (min-width: 56.88889em){.how-does-it-work img{bottom:-1px}}@media (min-width: 30em){.how-does-it-work{padding-top:0;padding-bottom:0}.how-does-it-work .how-does-it-work__slide{border-top:4em solid #fff;padding-top:4.7em}.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: 43.5em){.how-does-it-work .how-does-it-work__slide{border-top:4em solid #fff;padding-top:4.7em}.how-does-it-work h2,.how-does-it-work p{width:33.333%}.how-does-it-work img{margin-right:-5em;margin-top:-15em}}@media (min-width: 56.88889em){.how-does-it-work h2,.how-does-it-work p,.how-does-it-work .how-does-it-work__slide__nav{width:33.333%;margin-left:66.666%}.how-does-it-work img{float:left;width:63.666%;margin-top:-15em}} -.how-does-it-work__slide:before,.how-does-it-work__slide:after{content:" ";display:table}.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;text-align:center}@media (min-width: 30em){.how-does-it-work__slide__nav{text-align:left}} -.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:0.8em;height:0.8em;background-color:rgba(0,0,0,0.3)}.how-does-it-work__slide__skip.active span{background-color:rgba(255,255,255,0.3)}.how-does-it-work__slide__skip:hover span,.how-does-it-work__slide__skip:focus span,.how-does-it-work__slide__skip:active span{background-color:rgba(0,0,0,0.3)}@media (min-width: 40em){.features__grid-unit{width:48.5%}.features__grid-unit:nth-child(n){margin-right:3%}.features__grid-unit:nth-child(2n){margin-right:0}}@media (min-width: 56.88889em){.features__grid-unit{width:22.75%}.features__grid-unit:nth-child(n){margin-right:3%}.features__grid-unit:nth-child(4n){margin-right:0}} -@media (min-width: 40em){.features__grid-unit--wide{width:48.5%}.features__grid-unit--wide:nth-child(n){margin-right:3%}.features__grid-unit--wide:last-child{margin-right:0}} -.features__item{margin-top:1em;margin-bottom:1em}.features__item--primary{background-position:center top;background-repeat:no-repeat;padding-top:11.5em}@media (min-width: 56.88889em){.features__item--primary{background-position:left center;padding:1em 0}.features__item--primary h3,.features__item--primary p{padding-left:63%}}@media (min-width: 65em){.features__item--primary h3,.features__item--primary p{padding-left:53%}}.features__item--primary h3{font-size:1.4em}.features__item--devices{background-image:url("../img/devices.svg");background-size:258px 188px}.no-svg .features__item--devices{background-image:url("../img/devices.png")}.features__item--messaging{background-image:url("../img/signs.svg");background-size:200px 166px}@media (min-width: 56.88889em){.features__item--messaging{background-position:3em center}} -.no-svg .features__item--messaging{background-image:url("../img/signs.png")}.get-started{border-bottom:1px solid rgba(255,255,255,0.1)}@media (min-width: 30em){.get-started__grid-unit{width:48.5%;margin-right:3%}.get-started__grid-unit:last-child{margin-right:0}}@media (min-width: 56.88889em){.get-started__grid-unit{width:23.5%;margin-right:3%}.get-started__grid-unit:last-child{margin-right:0}} -.get-started__grid-unit--wide{width:100%;margin-right:0}@media (min-width: 56.88889em){.get-started__grid-unit--wide{width:47%;margin-right:3%}} -.get-started__item--primary p{margin-top:0;font-size:1.25em;margin-bottom:1.9em}@media (min-width: 56.88889em){.push-top{margin-top:2.4em}} -.delegate-bio{clear:left;padding-bottom:1em;border-top:1px solid #e4e3dd;padding-top:1.2em}.about__intro{background-color:#974495;margin-bottom:4em}.about__intro h1{font-weight:600;color:#fff;text-shadow:0px 2px 1px rgba(0,0,0,0.3);margin-bottom:0.25em}@media (min-width: 56.88889em){.about__intro h1{font-size:4em}}.about__intro p{color:#fff}@media (min-width: 40em){.about__intro p{font-size:1.25em}} -@media (min-width: 40em){.about__column{float:left;padding-left:1.5%;padding-right:1.5%;width:50%;padding:0 3%}.about__column:nth-child(odd),.about__column:first-child{padding-left:0}.about__column:nth-child(even),.about__column:last-child{padding-right:0}} -.content-in-columns{margin-bottom:1.5em;border-top:3px dashed #f3f1eb;padding-top:1.5em}.content-in-columns:first-of-type{border-top:none;padding-top:0}.stamp-graphic{position:absolute;width:24%;right:2em;-webkit-transform:rotate(9deg);-moz-transform:rotate(9deg);-o-transform:rotate(9deg);transform:rotate(9deg)}@media (min-width: 45.4375em){.stamp-graphic{top:20em}}@media (min-width: 50.6875em){.stamp-graphic{top:19em}}@media (min-width: 66.875em){.stamp-graphic{top:9em}} -@media (min-width: 50.6875em){.about__intro p{max-width:27em}}@media (min-width: 66.875em){.about__intro p{max-width:34em}} -.deployments__intro{background-color:#974495;margin-bottom:4em;color:#fff;text-align:center;background-image:url("../img/worldmap-pale.svg");background-position:center center;background-repeat:no-repeat;background-size:600px 325px}@media (min-width: 30em){.deployments__intro{padding:8.1em 0;background-size:1000px 541px}}.deployments__intro h1{font-size:1.2em;font-weight:600;text-shadow:0px 2px 1px rgba(0,0,0,0.3);margin-bottom:1em}@media (min-width: 30em){.deployments__intro h1{font-size:1.666666667em}}.deployments__intro h1 span{display:block;font-size:1.5em;margin-top:0.25em;font-weight:700;line-height:1em}@media (min-width: 30em){.deployments__intro h1 span{margin-top:0.15em;font-size:1.8em}}@media (min-width: 56.88889em){.deployments__intro h1 span{font-size:2.4em}}.deployments__intro p{font-size:1em;max-width:23em;margin:0 auto}@media (min-width: 30em){.deployments__intro p{font-size:1.666666667em}} -.no-svg .deployments__intro{background-image:url("../img/worldmap-pale.png")}.deployments__content h2{margin-bottom:1.5em}.deployments__list--minor{margin-bottom:2em}@media (min-width: 30em){.deployments__list--minor{margin-bottom:4em}} -@media (min-width: 40em){.deployments__unit--major{display:inline-block;width:48.5%;margin-right:3%;vertical-align:top}}.deployments__unit--major:nth-child(even){margin-right:0}.deployments__unit--minor{display:inline-block;width:47.5%;vertical-align:top}.deployments__unit--minor:nth-child(n){margin-right:5%}.deployments__unit--minor:nth-child(even){margin-right:0}@media (min-width: 37.22222em){.deployments__unit--minor{width:30%}.deployments__unit--minor:nth-child(n){margin-right:5%}.deployments__unit--minor:nth-child(3n+3){margin-right:0}}@media (min-width: 56.88889em){.deployments__unit--minor{width:22.25%}.deployments__unit--minor:nth-child(n){margin-right:3%}.deployments__unit--minor:nth-child(4n+4){margin-right:0}}@media (min-width: 77.77778em){.deployments__unit--minor{width:14.166666667%}.deployments__unit--minor:nth-child(n){margin-right:3%}.deployments__unit--minor:nth-child(6n+6){margin-right:0}} -.deployment,.deployment--minor,.deployment--major{margin-bottom:2em}@media (min-width: 40em){.deployment,.deployment--minor,.deployment--major{margin-bottom:3em}} -.deployment__title{font-weight:600;font-size:1.3em;margin-bottom:0.1em;padding-top:0.2em}@media (min-width: 56.88889em){.deployment__title{font-size:1.5em}} -.deployment__country{font-weight:600;font-size:1em;color:#787774;margin-top:0;margin-bottom:0.1em}@media (min-width: 56.88889em){.deployment__country{font-size:1.1em}} -.deployment__link{margin-top:0;margin-bottom:0.5em;font-size:0.888888889em}.deployment__link a{display:block;text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (min-width: 56.88889em){.deployment__link{font-size:1em}} -.deployment__description{font-size:0.888888889em;clear:both}.deployment__screenshot{border:1px solid #e4e3dd}.deployment--minor .deployment__title{padding-top:0;font-size:1.1em}.deployment--minor .deployment__country{font-size:1em}.deployment--minor .deployment__link{font-size:0.777777778em}.deployment--major .deployment__screenshot{width:33%;float:left;margin-bottom:1em}.deployment--major .deployment__title,.deployment--major .deployment__country,.deployment--major .deployment__link{margin-left:37%}.blog-title{line-height:1.3em}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.clearfix{*zoom:1}.header-link{padding-left:0.2em;opacity:0;-webkit-transition:opacity 0.2s ease-in-out 0.1s;-moz-transition:opacity 0.2s ease-in-out 0.1s;-ms-transition:opacity 0.2s ease-in-out 0.1s}h2:hover .header-link,h3:hover .header-link,h4:hover .header-link,h5:hover .header-link,h6:hover .header-link{opacity:1} +.image-replacement{text-indent:-1000%;white-space:nowrap;overflow:hidden}.container{max-width:63.333333333em;padding:0 1em;margin:0 auto;position:relative}.unstyled-list,.unstyled,.site-nav ul{margin-left:0;padding-left:0;list-style:none outside none}.inline-list{margin-left:-0.5em;margin-bottom:0}.inline-list li{display:inline-block;margin-left:0.5em}.text--center{text-align:center}html{background-color:#333;height:100%;min-height:100%}body{background-color:transparent}.no-svg .site-title{background-image:url("../img/alaveteli-logo.png")}.hero,.what-is-alaveteli,.how-does-it-work,.features,.get-started,.about__intro,.deployments__intro{padding:2em 0}@media (min-width: 40em){.hero,.what-is-alaveteli,.how-does-it-work,.features,.get-started,.about__intro,.deployments__intro{padding:3.5em 0}}.hero,.how-does-it-work,.get-started,.about__intro,.deployments__intro{background-color:#333;color:#fff}.hero a,.how-does-it-work a,.get-started a,.about__intro a,.deployments__intro a{color:#fff;border-bottom:1px dotted rgba(255,255,255,0.3)}.hero a:hover,.how-does-it-work a:hover,.get-started a:hover,.about__intro a:hover,.deployments__intro a:hover,.hero a:active,.how-does-it-work a:active,.get-started a:active,.about__intro a:active,.deployments__intro a:active,.hero a:focus,.how-does-it-work a:focus,.get-started a:focus,.about__intro a:focus,.deployments__intro a:focus{border-color:rgba(255,255,255,0.6);background-color:#863c83;text-decoration:none}.hero .button,.how-does-it-work .button,.get-started .button,.about__intro .button,.deployments__intro .button{color:#fff;border:1px solid rgba(255,255,255,0.3);width:100%;margin-bottom:1em}@media (min-width: 30em){.hero .button,.how-does-it-work .button,.get-started .button,.about__intro .button,.deployments__intro .button{width:auto;margin-bottom:0}}.hero .button:hover,.how-does-it-work .button:hover,.get-started .button:hover,.about__intro .button:hover,.deployments__intro .button:hover,.hero .button:active,.how-does-it-work .button:active,.get-started .button:active,.about__intro .button:active,.deployments__intro .button:active,.hero .button:focus,.how-does-it-work .button:focus,.get-started .button:focus,.about__intro .button:focus,.deployments__intro .button:focus{background-color:rgba(0,0,0,0.1);border-color:rgba(0,0,0,0.1)}.what-is-alaveteli__grid-unit,.features__grid-unit,.get-started__grid-unit{display:inline-block;vertical-align:top}.grid-row:before,.grid-row:after{content:" ";display:table}.grid-row:after{clear:both}.grid-row{*zoom:1}h1,h2,h4,h5,h6{font-weight:700}h3{font-weight:600}.button{display:inline-block;padding:0.4em 2.4em;border:1px solid #e4e3dd;vertical-align:middle;border-radius:7px;text-align:center}.button:hover,.button:active,.button:focus{background-color:#3a3a3a;border-color:rgba(255,255,255,0.2);text-decoration:none}@media (min-width: 47.5em){.nav-position{position:absolute;top:0.4em;left:180px}}@media (min-width: 56.88889em){.nav-position{left:240px;top:0.35em}}.site-nav ul{margin-top:0;margin-bottom:0}@media (min-width: 47.5em){.site-nav li{display:inline-block}}.site-nav a{color:#fff;margin-right:0.33em;display:block;padding:0.33em;border-bottom:1px solid rgba(255,255,255,0.1)}@media (min-width: 47.5em){.site-nav a{display:inline-block;border-bottom:none}}@media (min-width: 56.88889em){.site-nav a{font-size:1.125em;margin-right:0.66em}}/*! responsive-nav.js 1.0.32 by @viljamis */.js .nav-collapse{clip:rect(0 0 0 0);max-height:0;position:absolute;display:block;overflow:hidden;zoom:1}.nav-collapse.opened{max-height:9999px}.disable-pointer-events{pointer-events:none !important}.nav-toggle{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;position:absolute;top:0.4em;right:5em;display:inline-block;padding:0.3em 0.75em;border:1px solid rgba(255,255,255,0.1);border-radius:5px;color:#fff;font-size:0.875em}@media (min-width: 30em){.nav-toggle{right:10em}}@media screen and (min-width: 47.5em){.js .nav-collapse{position:relative}.js .nav-collapse.closed{max-height:none}.nav-toggle{display:none}}.hero{background-color:#974495}.hero h1{display:inline-block;font-weight:600;width:auto;border-bottom:1px solid rgba(255,255,255,0.2);padding-bottom:0.5em;margin-bottom:0.25em;text-shadow:0px 2px 1px rgba(0,0,0,0.3)}@media (min-width: 56.88889em){.hero h1{font-size:4em}}.hero span{opacity:0.7;display:block}.hero p{font-size:1.125em;max-width:25em}.action-buttons{margin-top:2em}.action-buttons .button{font-weight:600;margin-right:1em}.what-is-alaveteli{position:relative}@media (min-width: 56.88889em){.what-is-alaveteli__items-grid{width:66.666%}}@media (min-width: 30em){.what-is-alaveteli__grid-unit{width:46%;margin-right:4%}}.what-is-alaveteli__item{padding-left:3.625em;background-position:top left;background-size:50px 50px;background-repeat:no-repeat}.what-is-alaveteli__item--foi{background-image:url("../img/scales.svg")}.no-svg .what-is-alaveteli__item--foi{background-image:url("../img/scales.png")}.what-is-alaveteli__item--help{background-image:url("../img/pointer.svg")}.no-svg .what-is-alaveteli__item--help{background-image:url("../img/pointer.png")}.what-is-alaveteli__item--published{background-image:url("../img/binoculars.svg")}.no-svg .what-is-alaveteli__item--published{background-image:url("../img/binoculars.png")}.what-is-alaveteli__item--open{background-image:url("../img/open.svg")}.no-svg .what-is-alaveteli__item--open{background-image:url("../img/open.png")}@media (min-width: 56.88889em){.what-is-alaveteli__international-reach-position{width:33.3333%;position:absolute;top:-13em;right:0}}.what-is-alaveteli__international-reach{background-color:#f3f1eb;background-image:url("../img/worldmap.svg");background-position:center 1.5em;background-repeat:no-repeat;background-size:280px 158px;padding:10em 1.25em 1em}@media (min-width: 30em){.what-is-alaveteli__international-reach{background-size:360px 204px;padding:11.5em 2em 1em}}@media (min-width: 40em){.what-is-alaveteli__international-reach{background-size:360px 204px;padding:1em 2em 1em 22em;background-position:left center}}@media (min-width: 56.88889em){.what-is-alaveteli__international-reach{background-size:360px 204px;padding:12.5em 2em 1em;background-position:center 1.5em}}.what-is-alaveteli__international-reach .message{font-size:1.4em}.what-is-alaveteli__international-reach strong{color:#a94ca6}.what-is-alaveteli__international-reach a{color:#787774;border-bottom:1px dotted #e4e3dd}.what-is-alaveteli__international-reach a:hover,.what-is-alaveteli__international-reach a:active,.what-is-alaveteli__international-reach a:focus{text-decoration:none;border-color:#2b8cdb;color:#2b8cdb}.no-svg .what-is-alaveteli__international-reach{background-image:url("../img/worldmap.png")}.how-does-it-work{background-color:#974495;overflow:hidden}.how-does-it-work img{position:relative}@media (min-width: 56.88889em){.how-does-it-work img{bottom:-1px}}@media (min-width: 30em){.how-does-it-work{padding-top:0;padding-bottom:0}.how-does-it-work .how-does-it-work__slide{border-top:4em solid #fff;padding-top:4.7em}.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: 43.5em){.how-does-it-work .how-does-it-work__slide{border-top:4em solid #fff;padding-top:4.7em}.how-does-it-work h2,.how-does-it-work p{width:33.333%}.how-does-it-work img{margin-right:-5em;margin-top:-15em}}@media (min-width: 56.88889em){.how-does-it-work h2,.how-does-it-work p,.how-does-it-work .how-does-it-work__slide__nav{width:33.333%;margin-left:66.666%}.how-does-it-work img{float:left;width:63.666%;margin-top:-15em}}.how-does-it-work__slide:before,.how-does-it-work__slide:after{content:" ";display:table}.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;text-align:center}@media (min-width: 30em){.how-does-it-work__slide__nav{text-align:left}}.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:0.8em;height:0.8em;background-color:rgba(0,0,0,0.3)}.how-does-it-work__slide__skip.active span{background-color:rgba(255,255,255,0.3)}.how-does-it-work__slide__skip:hover span,.how-does-it-work__slide__skip:focus span,.how-does-it-work__slide__skip:active span{background-color:rgba(0,0,0,0.3)}@media (min-width: 40em){.features__grid-unit{width:48.5%}.features__grid-unit:nth-child(n){margin-right:3%}.features__grid-unit:nth-child(2n){margin-right:0}}@media (min-width: 56.88889em){.features__grid-unit{width:22.75%}.features__grid-unit:nth-child(n){margin-right:3%}.features__grid-unit:nth-child(4n){margin-right:0}}@media (min-width: 40em){.features__grid-unit--wide{width:48.5%}.features__grid-unit--wide:nth-child(n){margin-right:3%}.features__grid-unit--wide:last-child{margin-right:0}}.features__item{margin-top:1em;margin-bottom:1em}.features__item--primary{background-position:center top;background-repeat:no-repeat;padding-top:11.5em}@media (min-width: 56.88889em){.features__item--primary{background-position:left center;padding:1em 0}.features__item--primary h3,.features__item--primary p{padding-left:63%}}@media (min-width: 65em){.features__item--primary h3,.features__item--primary p{padding-left:53%}}.features__item--primary h3{font-size:1.4em}.features__item--devices{background-image:url("../img/devices.svg");background-size:258px 188px}.no-svg .features__item--devices{background-image:url("../img/devices.png")}.features__item--messaging{background-image:url("../img/signs.svg");background-size:200px 166px}@media (min-width: 56.88889em){.features__item--messaging{background-position:3em center}}.no-svg .features__item--messaging{background-image:url("../img/signs.png")}.get-started{border-bottom:1px solid rgba(255,255,255,0.1)}@media (min-width: 30em){.get-started__grid-unit{width:48.5%;margin-right:3%}.get-started__grid-unit:last-child{margin-right:0}}@media (min-width: 56.88889em){.get-started__grid-unit{width:23.5%;margin-right:3%}.get-started__grid-unit:last-child{margin-right:0}}.get-started__grid-unit--wide{width:100%;margin-right:0}@media (min-width: 56.88889em){.get-started__grid-unit--wide{width:47%;margin-right:3%}}.get-started__item--primary p{margin-top:0;font-size:1.25em;margin-bottom:1.9em}@media (min-width: 56.88889em){.push-top{margin-top:2.4em}}.delegate-bio{clear:left;padding-bottom:1em;border-top:1px solid #e4e3dd;padding-top:1.2em}.about__intro{background-color:#974495;margin-bottom:4em}.about__intro h1{font-weight:600;color:#fff;text-shadow:0px 2px 1px rgba(0,0,0,0.3);margin-bottom:0.25em}@media (min-width: 56.88889em){.about__intro h1{font-size:4em}}.about__intro p{color:#fff}@media (min-width: 40em){.about__intro p{font-size:1.25em}}@media (min-width: 40em){.about__column{float:left;padding-left:1.5%;padding-right:1.5%;width:50%;padding:0 3%}.about__column:nth-child(odd),.about__column:first-child{padding-left:0}.about__column:nth-child(even),.about__column:last-child{padding-right:0}}.content-in-columns{margin-bottom:1.5em;border-top:3px dashed #f3f1eb;padding-top:1.5em}.content-in-columns:first-of-type{border-top:none;padding-top:0}.stamp-graphic{position:absolute;width:24%;right:2em;-webkit-transform:rotate(9deg);-moz-transform:rotate(9deg);-o-transform:rotate(9deg);transform:rotate(9deg)}@media (min-width: 45.4375em){.stamp-graphic{top:20em}}@media (min-width: 50.6875em){.stamp-graphic{top:19em}}@media (min-width: 66.875em){.stamp-graphic{top:9em}}@media (min-width: 50.6875em){.about__intro p{max-width:27em}}@media (min-width: 66.875em){.about__intro p{max-width:34em}}.deployments__intro{background-color:#974495;margin-bottom:4em;color:#fff;text-align:center;background-image:url("../img/worldmap-pale.svg");background-position:center center;background-repeat:no-repeat;background-size:600px 325px}@media (min-width: 30em){.deployments__intro{padding:8.1em 0;background-size:1000px 541px}}.deployments__intro h1{font-size:1.2em;font-weight:600;text-shadow:0px 2px 1px rgba(0,0,0,0.3);margin-bottom:1em}@media (min-width: 30em){.deployments__intro h1{font-size:1.666666667em}}.deployments__intro h1 span{display:block;font-size:1.5em;margin-top:0.25em;font-weight:700;line-height:1em}@media (min-width: 30em){.deployments__intro h1 span{margin-top:0.15em;font-size:1.8em}}@media (min-width: 56.88889em){.deployments__intro h1 span{font-size:2.4em}}.deployments__intro p{font-size:1em;max-width:23em;margin:0 auto}@media (min-width: 30em){.deployments__intro p{font-size:1.666666667em}}.no-svg .deployments__intro{background-image:url("../img/worldmap-pale.png")}.deployments__content h2{margin-bottom:1.5em}.deployments__list--minor{margin-bottom:2em}@media (min-width: 30em){.deployments__list--minor{margin-bottom:4em}}@media (min-width: 40em){.deployments__unit--major{display:inline-block;width:48.5%;margin-right:3%;vertical-align:top}}.deployments__unit--major:nth-child(even){margin-right:0}.deployments__unit--minor{display:inline-block;width:47.5%;vertical-align:top}.deployments__unit--minor:nth-child(n){margin-right:5%}.deployments__unit--minor:nth-child(even){margin-right:0}@media (min-width: 37.22222em){.deployments__unit--minor{width:30%}.deployments__unit--minor:nth-child(n){margin-right:5%}.deployments__unit--minor:nth-child(3n+3){margin-right:0}}@media (min-width: 56.88889em){.deployments__unit--minor{width:22.25%}.deployments__unit--minor:nth-child(n){margin-right:3%}.deployments__unit--minor:nth-child(4n+4){margin-right:0}}@media (min-width: 77.77778em){.deployments__unit--minor{width:14.166666667%}.deployments__unit--minor:nth-child(n){margin-right:3%}.deployments__unit--minor:nth-child(6n+6){margin-right:0}}.deployment,.deployment--minor,.deployment--major{margin-bottom:2em}@media (min-width: 40em){.deployment,.deployment--minor,.deployment--major{margin-bottom:3em}}.deployment__title{font-weight:600;font-size:1.3em;margin-bottom:0.1em;padding-top:0.2em}@media (min-width: 56.88889em){.deployment__title{font-size:1.5em}}.deployment__country{font-weight:600;font-size:1em;color:#787774;margin-top:0;margin-bottom:0.1em}@media (min-width: 56.88889em){.deployment__country{font-size:1.1em}}.deployment__link{margin-top:0;margin-bottom:0.5em;font-size:0.888888889em}.deployment__link a{display:block;text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (min-width: 56.88889em){.deployment__link{font-size:1em}}.deployment__description{font-size:0.888888889em;clear:both}.deployment__screenshot{border:1px solid #e4e3dd}.deployment--minor .deployment__title{padding-top:0;font-size:1.1em}.deployment--minor .deployment__country{font-size:1em}.deployment--minor .deployment__link{font-size:0.777777778em}.deployment--major .deployment__screenshot{width:33%;float:left;margin-bottom:1em}.deployment--major .deployment__title,.deployment--major .deployment__country,.deployment--major .deployment__link{margin-left:37%}.blog-title{line-height:1.3em}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.clearfix{*zoom:1}.header-link{padding-left:0.2em;opacity:0;-webkit-transition:opacity 0.2s ease-in-out 0.1s;-moz-transition:opacity 0.2s ease-in-out 0.1s;-ms-transition:opacity 0.2s ease-in-out 0.1s}h2:hover .header-link,h3:hover .header-link,h4:hover .header-link,h5:hover .header-link,h6:hover .header-link{opacity:1}#feedback_form{display:none;border:1px solid #ccc;padding:0.5em;font-size:0.85em;text-align:center}#feedback_form input{margin-right:4px} diff --git a/assets/sass/alaveteli-org.scss b/assets/sass/alaveteli-org.scss index 8a87f6bef..284e14201 100644 --- a/assets/sass/alaveteli-org.scss +++ b/assets/sass/alaveteli-org.scss @@ -884,3 +884,15 @@ h5:hover .header-link, h6:hover .header-link { opacity: 1; } + +/* Feedback form */ +#feedback_form { + display: none; + border: 1px solid #ccc; + padding: 0.5em; + font-size: 0.85em; + text-align: center; + input { + margin-right: 4px; + } +} diff --git a/assets/scripts/feedback-form.js b/assets/scripts/feedback-form.js new file mode 100644 index 000000000..4b5d1559f --- /dev/null +++ b/assets/scripts/feedback-form.js @@ -0,0 +1,84 @@ +$( document ).ready(function( $ ) { + + window.setTimeout(function(){ + if ( $('#feedback_form').length ) { + lastAnswered = $.cookie('survey'); + current = $('input[name="question_no"]').attr('value'); + if ( lastAnswered == null || lastAnswered < current ) { + $('#feedback_form').show('slow'); + } + } + }, 2000); + + // Set the current url to a hidden form value + $("#feedback_form #url").val(window.location.pathname); + + // Hide the form - don't show for 30 days + $("#hide_survey").click(function(event){ + $('#feedback_form').hide('slow'); + set_survey_cookie(); + event.preventDefault(); + }); + + function set_survey_cookie(){ + // Set the cookie to show that the survey has been answered + $.cookie('survey', current, { expires: 30, path: '/' }); + } + + // variable to hold request + var request; + // bind to the submit event of our form + $("#feedback_form").submit(function(event){ + // abort any pending request + if (request) { + request.abort(); + } + // setup some local variables + var $form = $(this); + // let's select and cache all the fields + var $inputs = $form.find("input, select, button, textarea"); + // serialize the data in the form + var serializedData = $form.serialize(); + + // let's disable the inputs for the duration of the ajax request + // Note: we disable elements AFTER the form data has been serialized. + // Disabled form elements will not be serialized. + $inputs.prop("disabled", true); + $('#result').text('Sending data...'); + + // fire off the request to /form.php + request = $.ajax({ + url: "https://script.google.com/macros/s/AKfycbyC2oAdyaAY3StdEKX5zKOln9vt-HX1Eq05nqPmAgUPcpkzqY2K/exec", + type: "post", + data: serializedData + }); + + // callback handler that will be called on success + request.done(function (response, textStatus, jqXHR){ + // log a message to the console + $('#result').html('Thanks for helping us improve!'); + $('#feedback_form #form_elements').hide('slow'); + $('#feedback_form input[type=submit]').hide('slow'); + }); + + // callback handler that will be called on failure + request.fail(function (jqXHR, textStatus, errorThrown){ + // log the error to the console + console.error( + "The following error occured: "+ + textStatus, errorThrown + ); + }); + + // callback handler that will be called regardless + // if the request failed or succeeded + request.always(function () { + // reenable the inputs + $inputs.prop("disabled", false); + set_survey_cookie(); + }); + + // prevent default posting of form + event.preventDefault(); + }); +}); diff --git a/assets/scripts/jquery.cookie.js b/assets/scripts/jquery.cookie.js new file mode 100644 index 000000000..c7f3a59b5 --- /dev/null +++ b/assets/scripts/jquery.cookie.js @@ -0,0 +1,117 @@ +/*! + * jQuery Cookie Plugin v1.4.1 + * https://github.com/carhartl/jquery-cookie + * + * Copyright 2013 Klaus Hartl + * Released under the MIT license + */ +(function (factory) { + if (typeof define === 'function' && define.amd) { + // AMD + define(['jquery'], factory); + } else if (typeof exports === 'object') { + // CommonJS + factory(require('jquery')); + } else { + // Browser globals + factory(jQuery); + } +}(function ($) { + + var pluses = /\+/g; + + function encode(s) { + return config.raw ? s : encodeURIComponent(s); + } + + function decode(s) { + return config.raw ? s : decodeURIComponent(s); + } + + function stringifyCookieValue(value) { + return encode(config.json ? JSON.stringify(value) : String(value)); + } + + function parseCookieValue(s) { + if (s.indexOf('"') === 0) { + // This is a quoted cookie as according to RFC2068, unescape... + s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\'); + } + + try { + // Replace server-side written pluses with spaces. + // If we can't decode the cookie, ignore it, it's unusable. + // If we can't parse the cookie, ignore it, it's unusable. + s = decodeURIComponent(s.replace(pluses, ' ')); + return config.json ? JSON.parse(s) : s; + } catch(e) {} + } + + function read(s, converter) { + var value = config.raw ? s : parseCookieValue(s); + return $.isFunction(converter) ? converter(value) : value; + } + + var config = $.cookie = function (key, value, options) { + + // Write + + if (value !== undefined && !$.isFunction(value)) { + options = $.extend({}, config.defaults, options); + + if (typeof options.expires === 'number') { + var days = options.expires, t = options.expires = new Date(); + t.setTime(+t + days * 864e+5); + } + + return (document.cookie = [ + encode(key), '=', stringifyCookieValue(value), + options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE + options.path ? '; path=' + options.path : '', + options.domain ? '; domain=' + options.domain : '', + options.secure ? '; secure' : '' + ].join('')); + } + + // Read + + var result = key ? undefined : {}; + + // To prevent the for loop in the first place assign an empty array + // in case there are no cookies at all. Also prevents odd result when + // calling $.cookie(). + var cookies = document.cookie ? document.cookie.split('; ') : []; + + for (var i = 0, l = cookies.length; i < l; i++) { + var parts = cookies[i].split('='); + var name = decode(parts.shift()); + var cookie = parts.join('='); + + if (key && key === name) { + // If second argument (value) is a function it's a converter... + result = read(cookie, value); + break; + } + + // Prevent storing a cookie that we couldn't decode. + if (!key && (cookie = read(cookie)) !== undefined) { + result[name] = cookie; + } + } + + return result; + }; + + config.defaults = {}; + + $.removeCookie = function (key, options) { + if ($.cookie(key) === undefined) { + return false; + } + + // Must not alter options, thus extending a fresh object... + $.cookie(key, '', $.extend({}, options, { expires: -1 })); + return !$.cookie(key); + }; + +})); |