Merge branch 'add-banner' into 'develop'

Add GDPR banner

See merge request !32

_config.yml

 title: ELIXIR.LU jekyll template
 email: jacek.lebioda@uni.lu
-description: >- 
-  This gem contains a jekyll theme for the Luxembourgish ELIXIR Node's website 
+description: >-
+  This gem contains a jekyll theme for the Luxembourgish ELIXIR Node's website
 footer-text: >-
   This is a text in the footer
 baseurl: ""
-url: "" 
+url: ""
 
 # Build settings
-markdown: kramdown
\ No newline at end of file
+markdown: kramdown
+
+# GDPR banner settings
+banner_title: >-
+  This website needs some cookies and similar means to function.
+banner_text: >-
+  If you permit us, we will use those means to collect data on your visits for aggregated statistics to improve our service.
+banner_accept_text: >-
+  Accept cookies for aggregated statistics
+banner_refuse_text: >-
+  No thanks, only technically necessary cookies
+doNotTrack_text: >-
+  Do Not Track is enabled
+banner_more_text: >-
+  More information
+cookies_expire: 180 # days
+analyticsurl: https://analytics.lcsb.uni.lu/hub/
+lapurl: https://analytics.lcsb.uni.lu/lap/
+siteID: 4 # you get this siteID by sending an email to lcsb-r3@uni.lu
+cookieName: lap
+accept_all_text: >-
+  Aggregate statistics cookies accepted
+only_necessary_text: >-
+  Only necessary cookies accepted
+path_policy: privacy-policy
+logo_policy: /assets/ELIXIR_LU.svg
+timeout_hidebanner: 500 # milliseconds
+cookieDomain: '*' # track visitors across all subdomains of a given domain; set to * to ignore

_includes/footer.html

@@ -34,10 +34,15 @@
         </div>
         <div>
             <h3>
-              <a href="{{ '/privacy/' | relative_url }}">Privacy</a>
+                <a href="{{ '/privacy/' | relative_url }}">Privacy</a>
             </h3>
+
             <ul>
+                <li><a href="{{ '/privacy/policy' | relative_url }}">Privacy policy</a></li>
                 <li><a href="{{ '/privacy/cookies' | relative_url }}">Cookies</a></li>
+                {% if site.siteID > 0 %}
+                {%- include policy.html -%}
+                {% endif %}
                 <li><a href="{{ '/privacy/terms_of_use' | relative_url }}">Terms of use</a></li>
             </ul>
         </div>
@@ -62,3 +67,7 @@
         </div>
     </div>
 </footer>
+
+{% if site.siteID > 0 %}
+{%- include gdpr-banner.html -%}
+{% endif %}
\ No newline at end of file

_includes/gdpr-banner.html

+<div id="lap-cookies-banner">
+    <div class="banner-intro">
+        <div class="close-button">
+            <a class="lap-refuse"><i class="fa fa-times" aria-hidden="true"></i></a>
+        </div>
+        <div class="banner-img">
+            <img src="{{ site.logo_policy }}" type="image/svg+xml" />
+        </div>
+        <div class="banner-title">{{ site.banner_title }}</div>
+        <div class="banner-text">{{ site.banner_text }}</div>
+    </div>
+
+    <div class="banner-buttons">
+        <a class="btn lap-accept">{{ site.banner_accept_text }}</a>
+        <a class="btn lap-refuse">{{ site.banner_refuse_text }}</a>
+        <a class="btn lap-cookies-more" href="{{ site.path_policy | relative_url }}">{{ site.banner_more_text }}</a>
+    </div>
+</div>
\ No newline at end of file

_includes/policy.html

+<li>- <span id="doNotTrack-text"><span id="gdpr-result-text"></span> - <a href="javascript: showBanner();">change</a></span></li>
\ No newline at end of file

_layouts/default.html

@@ -5,6 +5,26 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
+        {% if site.siteID > 0 %}
+        <script>
+            const settings = {
+                expires: "{{ site.cookies_expire }}",
+                matomoURL: "{{ site.analyticsurl }}",
+                siteID: "{{ site.siteID }}",
+                accept_all_text: "{{ site.accept_all_text }}",
+                only_necessary_text: "{{ site.only_necessary_text }}",
+                doNotTrack_text: "{{ site.doNotTrack_text }}",
+                cookieName: "{{ site.cookieName }}",
+                bots: /bot|crawler|spider|crawling/i,
+                timeout_hidebanner: "{{ site.timeout_hidebanner }}",
+                cookieDomain: "{{ site.cookieDomain }}",
+            }
+        </script>
+        <script src="{{ site.lapurl }}/static/js/jquery.min.js"></script>
+        <script src="{{ site.lapurl }}/static/js/lap.js"></script>
+        <link rel="stylesheet" href="{{ '/assets/fontawesome/css/fontawesome-all.min.css' | relative_url }}">
+        {%- endif -%}
+
         <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
         <link rel="shortcut icon" href="{{ "/assets/favicon.png" | relative_url }}" />
         <link type="text/css" rel="stylesheet" href="{{ "/assets/lato.css" | relative_url }}" media="all">

_sass/elixir.scss

@@ -7,5 +7,6 @@
     "elixir/header",
     "elixir/helpers",
     "elixir/layout",
-    "elixir/responsive"
+    "elixir/responsive",
+    "elixir/lap"
 ;

_sass/elixir/_footer.scss

@@ -40,6 +40,7 @@
           width: auto;
           float: none;
           min-width: 0;
+          color: #ebebeb;
 
           @media only screen and (max-width: $FOOTER_RESPONSIVENESS_THRESHOLD) {
               padding-bottom: 9px;

_sass/elixir/_lap.scss

+#lap-cookies-banner {
+    position: fixed;
+    bottom: 0;
+    background-color: #fff;
+    padding-top: 1em;
+    padding-bottom: 1em;
+    z-index: 1000;
+    left: 0;
+    text-align: center;
+    border-top: 1px solid #023452;
+    width: 100%;
+    display: none;
+
+    /* hidden by default */
+}
+
+#lap-cookies-banner .banner-intro {
+    width: 40%;
+    position: relative;
+    left: 30%;
+    text-align: left;
+}
+
+#lap-cookies-banner .banner-img {
+    width: 90px;
+    padding-top: 0;
+    height: 90px;
+    position: absolute;
+    padding-left: 10px;
+}
+
+#lap-cookies-banner .banner-title {
+    padding-left: 110px;
+}
+
+#lap-cookies-banner .banner-text {
+    padding-left: 110px;
+    padding-bottom: 1em;
+}
+
+#lap-cookies-banner .banner-buttons {
+    padding-top: 5px;
+    height: 20px;
+    margin-bottom: 10px;
+}
+
+#lap-cookies-banner .close-button {
+    position: absolute;
+    left: 100%;
+}
+
+#lap-cookies-banner .banner-buttons .lap-accept,
+#lap-cookies-banner .banner-buttons .lap-refuse,
+#lap-cookies-banner .banner-buttons .lap-cookies-more,
+#lap-cookies-banner .banner-buttons .btn.active {
+    border: 1px solid #023452;
+    font-weight: bold;
+    background-color: #023452;
+    color: #ffffff !important;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+}
+
+#lap-cookies-banner .banner-buttons .lap-accept:hover,
+#lap-cookies-banner .banner-buttons .lap-refuse:hover,
+#lap-cookies-banner .banner-buttons .lap-cookies-more:hover,
+#lap-cookies-banner .banner-buttons .btn.selected {
+    background: white;
+    color: #023452 !important;
+    border: 1px solid #023452;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    text-decoration: none;
+}
+
+#lap-cookies-banner .btn {
+    text-decoration: none;
+    display: inline-block;
+    margin-bottom: 0;
+    text-align: center;
+    vertical-align: middle;
+    touch-action: manipulation;
+    background-image: none;
+    white-space: nowrap;
+    padding: 3px 10px;
+    font-size: 9pt;
+    line-height: 20px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    cursor: pointer;
+}
+
+#lap-cookies-banner .banner-checkboxes {
+    font-size: 80%;
+    margin-top: 1em;
+}
+
+#lap-cookies-banner .checkbox-label {
+    margin-left: 0.3em;
+    margin-right: 1.5em;
+    top: -0.2em;
+    position: relative;
+}
+
+@media(max-width: 500px) {
+    #lap-cookies-banner {
+        position: fixed;
+        bottom: 0;
+        background-color: #fff;
+        padding-top: 1em;
+        padding-bottom: 1em;
+        z-index: 1000;
+        left: 0;
+        text-align: center;
+        border-top: 1px solid #023452;
+        width: 100%;
+        display: none;
+        height: 280px;
+        overflow: auto;
+        /* hidden by default */
+    }
+
+    #lap-cookies-banner .banner-intro {
+        width: 60%;
+        position: relative;
+        left: 20%;
+        text-align: left;
+    }
+}
+
+@media(max-width: 1100px) {
+    #lap-cookies-banner .banner-intro {
+        width: 90%;
+        position: relative;
+        left: 5%;
+        text-align: left;
+    }
+    #lap-cookies-banner .banner-buttons {
+        padding-top: 5px;
+        height: 60px;
+        margin-bottom: 10px;
+    }
+}
+
+@media(max-width: 1600px) {
+    #lap-cookies-banner .banner-intro {
+        width: 60%;
+        position: relative;
+        left: 20%;
+        text-align: left;
+    }
+}
+
+/* ultra-wide screen */
+@media(min-width: 2400px) {
+    #lap-cookies-banner .banner-intro {
+        position: relative;
+        text-align: left;
+        max-width: 800px;
+        left: 35%;
+    }
+}

assets/Elixir_LU.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1138.8099 631.61"><defs><style>.cls-1{fill:#ee7601;}.cls-2{fill:#544f4c;}</style></defs><title>ELIXIR_LU_Logo_white_background_Vector</title><g id="Layer_2" data-name="Layer 2"><path class="cls-1" d="M756.3626,26.28421a43.02771,43.02771,0,0,0-37.8041,63.5519c-4.2822,2.1328-14.2523,7.1354-28.2202,14.3891a31.99685,31.99685,0,1,0-56.368,30.1869c-7.1823,3.9629-14.6385,8.12269-22.2852,12.44769a25.14022,25.14022,0,0,0-43.425,25.20471q-11.8722,7.083-23.8708,14.4869a18.33617,18.33617,0,0,0-29.5967,18.7331c-32.1669,20.8967-62.9359,42.7956-87.8559,64.0709-29.0602-64.9833-71.9138-136.3157-131.5574-194.3928q-.0846-.08445-.1693-.1689c-6.9784-6.87691-12.7604-3.8437-4.7382,4.722.0995.1074.2039.22.3061.3299,50.6233,54.4698,90.3888,133.3029,117.49,205.1841C305.4593,372.82,192.1251,542.9244,316.3444,596.3759c18.0863,7.7835,26.3286-7.0966,18.5451-11.6766-1.3979-.8237-56.7221-30.7289-21.5528-122.604h88.5242a8.58575,8.58575,0,0,0,0-17.1715h-81.186a346.88274,346.88274,0,0,1,17.52-32.5103h63.6632a8.5857,8.5857,0,0,0,0-17.1714h-52.719c6.5707-9.8334,13.9465-20.1255,22.2344-30.9086h30.4846a8.58575,8.58575,0,0,0,0-17.1715H384.998c9.616-11.7491,20.2274-24.0213,31.971-36.8622.1019-.1113.2038-.2226.3033-.3341,23.3449,67.6032,34.6165,125.2482,32.1455,144.4777-1.3443,10.4639-8.0975,14.837-10.8128,16.1249-4.3492,2.0606-6.1306,8.0626.6868,10.0721,21.7514,6.4125,35.1399-15.1806,37.5492-32.5103,2.4281-17.4772-9.4658-81.4624-40.8733-157.74779,26.2427-26.1072,56.5262-51.0462,87.3971-73.90151a18.36049,18.36049,0,0,0,27.182-19.51529q12.30705-8.57806,24.4532-16.6466a25.10211,25.10211,0,0,0,40.0524-25.7144c8.0571-5.0011,15.8754-9.761,23.388-14.2616a31.99,31.99,0,0,0,53.8645-31.0695c13.6701-7.6118,23.6402-12.9902,28.5073-15.767a43.01247,43.01247,0,1,0,35.5504-67.2222Z"/><path class="cls-2" d="M266.9577,370.5663c1.5937-3.4826,2.9381-7.2282,4.5533-11.7895a115.55214,115.55214,0,0,0,4.5475-15.803l16.3505-70.72619c1.3361-7.2362,2.3933-12.5915,2.6832-15.8005a41.411,41.411,0,0,0,.5258-8.5722v-3.217h36.9694L310.3478,342.9738c-1.6097,6.9706-2.6669,12.3206-3.2115,16.0714a56.59585,56.59585,0,0,0-.8077,11.5211Z"/><path class="cls-2" d="M174.747,370.5663H65.1773c-10.9845,0-18.4729-2.4095-22.508-7.5019-2.1276-2.9405-3.209-6.9545-3.209-12.0521a57.04477,57.04477,0,0,1,1.8729-13.6729l13.6701-59.46529c2.9379-12.0536,7.22-20.6261,13.1198-25.7251,6.1551-5.0816,14.4696-7.4911,25.7223-7.4911H174.747c11.5184,0,19.0175,2.4095,22.763,7.4911,2.4093,2.9541,3.4986,6.9799,3.4986,12.33379a51.75055,51.75055,0,0,1-1.8833,13.39131l-8.8435,39.391H80.1756l-5.8974,25.7087a35.1434,35.1434,0,0,0-.7943,6.1656c0,1.3363,0,2.4095.5421,2.9353.7888,1.6152,3.2035,2.4202,6.965,2.4202h80.3516a97.46351,97.46351,0,0,0,20.9063-2.1304Zm-8.5722-98.31869a21.39412,21.39412,0,0,0,1.0731-6.4271,8.12845,8.12845,0,0,0-.5338-2.68171c-1.0839-1.60179-3.7483-2.40129-7.5019-2.40129H102.4097c-3.7373,0-6.4257.7995-8.0357,2.40129-1.8727,1.61661-3.2035,4.56231-3.7456,9.10881l-6.6993,28.9258H159.47Z"/><path class="cls-2" d="M202.0579,370.5663c1.7009-3.8959,3.123-8.103,4.8321-13.2113a133.34623,133.34623,0,0,0,4.8267-17.7297l28.1425-130.33509c1.7009-8.11341,2.8359-14.1223,3.4019-17.7201.2898-3.3095.5742-7.8104.5742-13.2195h39.2154L248.096,339.6253q-2.54355,11.71965-3.4129,18.03a67.663,67.663,0,0,0-.8478,12.911Z"/><path class="cls-2" d="M480.7126,370.5663c1.5938-3.4826,2.9327-7.2282,4.5396-11.7895a112.50816,112.50816,0,0,0,4.5533-15.803l16.353-70.72619c1.3361-7.2362,2.4013-12.5915,2.6642-15.8005a39.99287,39.99287,0,0,0,.5448-8.5722v-3.217H546.329L524.1028,342.9738q-2.4108,10.4559-3.209,16.0714a56.42464,56.42464,0,0,0-.8102,11.5211Z"/><path class="cls-2" d="M654.0557,265.82051c-4.0275-.2725-8.0384-.5368-12.5915-.5368H623.512c-3.464,0-6.4153.7998-8.025,2.1372-2.1438,1.6166-3.4881,4.2887-4.553,8.308L595.92749,342.9738c-2.67489,10.4477-3.74529,18.4861-3.74529,24.6464v2.9461H553.0687c1.5993-4.0192,3.209-7.781,4.2794-11.5211,1.0734-3.4771,2.4174-8.8431,4.2904-16.0714l16.0658-70.72619c1.8782-6.9639,2.6859-12.3192,3.4961-16.3371a79.081,79.081,0,0,0,.5366-11.2526h32.9423l-1.3361,12.853a22.85509,22.85509,0,0,1,8.3041-9.636c3.4799-2.1449,8.0357-3.217,14.1905-3.217h32.1589l7.7565,13.9182a30.30734,30.30734,0,0,0-4.553,5.0992c-1.8674,2.4082-3.2035,3.4813-4.0112,3.4813C662.3702,266.628,658.0642,266.08351,654.0557,265.82051Z"/><path class="cls-2" d="M338.7881,200.624a18.1347,18.1347,0,1,1-18.1295-18.1388A18.13082,18.13082,0,0,1,338.7881,200.624Z"/><path class="cls-2" d="M421.2767,585.59082l-2,8.2002H366.37679l16-64H401.1766l-14,55.7998Z"/><path class="cls-2" d="M503.9764,529.791,490.67611,582.8916a14.05108,14.05108,0,0,1-5.19971,7.64942,13.78481,13.78481,0,0,1-8.70019,3.25H436.9764a8.68978,8.68978,0,0,1-6.35009-2.39942,8.05307,8.05307,0,0,1-2.4502-6,11.102,11.102,0,0,1,.30029-2.5L441.77621,529.791H460.576l-13.2998,53.10058a4.58871,4.58871,0,0,0-.1001.89942q0,1.80029,2.3999,1.7998h28.8003a3.40554,3.40554,0,0,0,3.6997-2.69922l13.3003-53.10058Z"/><path class="cls-2" d="M576.17562,529.791l-29.30029,27.20019,15.5,36.79981h-22.2998l-9-22.2002L507.17562,593.791H496.37533l31.80029-29.5-14.40039-34.5h22.2002l8.20019,19.90039L565.27523,529.791Z"/><path class="cls-2" d="M638.87484,529.791l-2.1001,8.20019H602.67513l-4.80029,19.40039h31l-2.1001,8.19922h-31l-5,20h34.1001l-2,8.2002h-52.8999l16-64Z"/><path class="cls-2" d="M730.77474,529.791l-16,64H696.575l13.6997-54.79981h-.19921L674.47445,593.791h-13l-7.7998-54.79981h-.2002L639.77474,593.791h-8.60009l16-64h24l6.70019,46.5,30.20069-46.5Z"/><path class="cls-2" d="M798.97494,541.791l-2.5,9.90039q-1.30078,5.20018-4.75,7.0498-3.44971,1.85157-11.75,2.25l-.10059.29981q6.79981.30029,9.40039,1.5a4.6343,4.6343,0,0,1,3,4.60058,13.24093,13.24093,0,0,1-.5,3.29981l-2.90039,11.2998a15.91045,15.91045,0,0,1-5.09961,8.40039,15.69371,15.69371,0,0,1-10.20019,3.39942H723.77474l16-64h49.79981q9.90087,0,9.90039,8.2998A15.335,15.335,0,0,1,798.97494,541.791Zm-25.2002,28a8.52474,8.52474,0,0,0,.29981-2q0-2.19873-2.59961-2.2002H749.57455l-5,20h21.90039q3.39843,0,4.39941-4.09961Zm6.90039-27.59961a8.57687,8.57687,0,0,0,.29981-2q0-2.19873-2.60059-2.2002H756.47494l-4.79981,19.40039h21.89942q3.30028,0,4.2998-4.10058Z"/><path class="cls-2" d="M871.17416,542.3916l-9.7002,38.79981q-3.10107,12.59911-15.70019,12.59961h-38.2002q-10.10155,0-10.09961-8.29981a17.11792,17.11792,0,0,1,.59961-4.2998l9.7002-38.79981q3.09814-12.60059,15.7998-12.60058h38.2002q9.999,0,10,8.20019A18.28935,18.28935,0,0,1,871.17416,542.3916Zm-18.5-1a4.77108,4.77108,0,0,0,.20019-1.30078q0-2.09911-2.80078-2.09961h-19a4.03389,4.03389,0,0,0-4.19922,3.40039l-10.20019,40.79981a5.81028,5.81028,0,0,0-.2002,1.39941q0,2.00244,2.7002,2h19a4.0035,4.0035,0,0,0,4.2998-3.39941Z"/><path class="cls-2" d="M945.57357,529.791l-13.2998,53.10058a14.05213,14.05213,0,0,1-5.2002,7.64942,13.78481,13.78481,0,0,1-8.70019,3.25H878.57357a8.69016,8.69016,0,0,1-6.35058-2.39942,8.05409,8.05409,0,0,1-2.44922-6,11.10048,11.10048,0,0,1,.2998-2.5L883.37338,529.791h18.7998l-13.2998,53.10058a4.5843,4.5843,0,0,0-.09961.89942q0,1.80029,2.39941,1.7998H919.973a3.40607,3.40607,0,0,0,3.70019-2.69922L936.973,529.791Z"/><path class="cls-2" d="M1013.77279,541.69141l-3.4004,13.59961q-2.30126,9.30029-12.5,10.60058l4.1006,27.89942h-19.6006l-4-28.2002h-14l-7,28.2002H938.5726l16-64h49.79979q9.9009,0,9.9004,8.20019A15.335,15.335,0,0,1,1013.77279,541.69141Zm-18.2998.39941a7.176,7.176,0,0,0,.2998-1.7998q0-2.29835-2.7998-2.29981h-21.7002L966.473,557.3916H988.1722q3.39845,0,4.5-4.30078Z"/><path class="cls-2" d="M1087.1722,529.791l-2.10058,8.20019h-39.2002a4.03389,4.03389,0,0,0-4.19922,3.40039L1031.472,582.19141a5.81028,5.81028,0,0,0-.2002,1.39941q0,2.00244,2.7002,2h20.2998a3.11762,3.11762,0,0,0,3.40039-2.59961L1062.472,563.791h-21.2002l2-8.2002h39.40039l-9.5,38.2002H1056.472l1.39941-5.59961h-.19922q-2.20165,5.60156-8.90039,5.59961h-26.40039q-10.10155,0-10.09961-8.29981a17.11792,17.11792,0,0,1,.59961-4.2998l9.7002-38.79981q3.09815-12.60059,15.7998-12.60058Z"/></g></svg>
\ No newline at end of file