Merge pull request #30 from mozilla/vote

Add banner to link to voting

layouts/_default/baseof.html

@@ -38,6 +38,7 @@
     <meta name="apple-itunes-app" content="app-id=1459862718&amp;ct=mozilla_smart_banner">
 
     <link rel="stylesheet" href="/css/{{ index .Site.Data.css.hash "irlpodcast.css" }}" />
+    <link rel="stylesheet" href="/css/{{ index .Site.Data.css.hash "survey.css" }}" />
     <link rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" href="https://hearthis.at/aweb/podcast/">
     <link rel="canonical" href="{{ .Permalink }}">
 
@@ -59,11 +60,18 @@
 
     {{ partial "footer.html" }}
 
+    {{ partial "survey.html" }}
+
     <script src="/js/{{ index .Site.Data.js.hash "jquery.3.2.1.min.js" }}"></script>
     <script src="/js/{{ index .Site.Data.js.hash "clipboard.min.js" }}"></script>
     <script src="/js/{{ index .Site.Data.js.hash "mozilla.modal-min.js" }}"></script>
     <script src="/js/{{ index .Site.Data.js.hash "mozilla.lazy-load-min.js" }}"></script>
     <script src="/js/{{ index .Site.Data.js.hash "newsletter-min.js" }}"></script>
     <script src="/js/{{ index .Site.Data.js.hash "main-min.js" }}"></script>
+    {{/*
+        survey related JS
+    */}}
+    <script src="/js/{{ index .Site.Data.js.hash "mozilla.cookies-min.js" }}"></script>
+    <script src="/js/{{ index .Site.Data.js.hash "survey-min.js" }}"></script>
 </body>
 </html>

layouts/partials/survey.html

@@ -0,0 +1,7 @@
+<div class="survey-banner" id="survey-banner">
+    <button type="button" id="survey-dismiss"><span>Schließen</span></button>
+    <div class="content">
+        <p>Yeah! aweb ist für den Deutschen Podcast Preis nominiert! Hilf uns mit deiner Stimme!</p>
+        <a class="mzp-c-button mzp-t-small" href="https://www.deutscher-podcastpreis.de/podcasts/aweb/" rel="external" target="_blank" rel="noopener noreferrer">Jetzt voten!</a>
+    </div>
+</div>

src/js/survey.js

@@ -0,0 +1,27 @@
+(function($) {
+    'use strict';
+
+    var cookieName = 'vote-dismiss';
+    var hasCookies = typeof Mozilla.Cookies !== 'undefined' && Mozilla.Cookies.enabled();
+
+    var $surveyBanner;
+
+    // ensure cookies are available and the visitors has not previously dismissed the banner
+    if (hasCookies && !Mozilla.Cookies.getItem(cookieName)) {
+        $surveyBanner = $('#survey-banner');
+
+        // show the banner
+        $('#survey-dismiss').one('click', function() {
+            // don't show the banner again for 7 days
+            var d = new Date();
+            var noShowDays = 7;
+
+            d.setTime(d.getTime() + (noShowDays * 24 * 60 * 60 * 1000));
+            Mozilla.Cookies.setItem(cookieName, true, d.toUTCString(), '/');
+
+            $surveyBanner.removeClass('visible');
+        });
+
+        $surveyBanner.addClass('visible');
+    }
+})(window.jQuery);

src/scss/survey.scss

@@ -0,0 +1,98 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+@import 'includes/mixins';
+@import 'includes/variables';
+
+.survey-banner {
+    bottom: 0;
+    background: #6a1887;
+    border-top: 2px solid #000;
+    box-shadow: 0 0 15px 0 rgba(0,0,0,0.3);
+    color: #fff;
+    display: none;
+    left: 0;
+    position: fixed;
+    text-align: center;
+    width: 100%;
+
+    a,
+    a:active,
+    a:link,
+    a:visited {
+        @include font-size(18px);
+        background-color: #ffffff;
+        border-radius: 2px;
+        border: 2px solid #000000;
+        box-shadow: 2px 2px 0 0 #000000;
+        box-sizing: border-box;
+        color: #000000;
+        display: inline-block;
+        font-weight: bold;
+        line-height: 1.5;
+        padding: 10px 30px;
+        text-decoration: none;
+        -webkit-transition: background-color 50ms, box-shadow 50ms, color 50ms, transform 50ms;
+        transition: background-color 50ms, box-shadow 50ms, color 50ms, transform 50ms;
+    }
+
+    a:focus,
+    a:hover,
+    a:visited:focus,
+    a:visited:hover {
+        -webkit-transform: translate(-2px, -2px);
+        transform: translate(-2px, -2px);
+        box-shadow: 4px 4px 0 0 #000000;
+    }
+
+    a:active {
+        -webkit-transform: translate(2px, 2px);
+        transform: translate(2px, 2px);
+        box-shadow: 0 0 0 0 #000000;
+    }
+
+    button {
+        background: url('/images/survey-close.svg') center center no-repeat;
+        background-size: 12px 12px;
+        box-sizing: border-box;
+        border-radius: 2px;
+        border: 1px solid #fff;
+        cursor: pointer;
+        height: 18px;
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        width: 18px;
+        z-index: 1;
+
+        &:focus {
+            background-color: #000;
+        }
+
+        span {
+            @include visually-hidden();
+        }
+    }
+
+    p {
+        margin: 0;
+        padding: 10px 0;
+    }
+
+    &.visible {
+        display: block;
+    }
+}
+
+@supports (transform: translateY(100px)) {
+    .survey-banner {
+        display: block;
+        transform: translateY(200px);
+        transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+        &.visible {
+            transform: translateY(0);
+        }
+    }
+}

static/images/survey-close.svg

@@ -0,0 +1 @@
+<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M1.174 16.61c.288.287.647.43 1.04.43.396 0 .755-.143 1.042-.43L9 10.867l5.744 5.743c.287.287.646.43 1.04.43.395 0 .754-.143 1.042-.43.574-.574.574-1.507 0-2.082l-5.744-5.743 5.744-5.744c.574-.573.574-1.507 0-2.08-.575-.575-1.508-.575-2.082 0L9 6.702 3.256.96C2.682.384 1.75.384 1.174.96c-.574.573-.574 1.507 0 2.08l5.744 5.745-5.744 5.743c-.574.575-.574 1.508 0 2.082z" fill-rule="nonzero" fill="#FFF"/></svg>