Merge branch 'add-gdpr' into 'latest'

Add GDPR banner for analytics See merge request core-services/jekyll-theme-lcsb-default!44

Merge branch 'add-gdpr' into 'latest'
Add GDPR banner for analytics See merge request core-services/jekyll-theme-lcsb-default!44
b6282f8f · Jacek Lebioda · 7cec7c19 · c8bc8758 · b6282f8f · b6282f8f
Commit b6282f8f authored Jun 10, 2020 by Jacek Lebioda
19 changed files
--- a/.gitignore
+++ b/.gitignore
 # IDE-generated files
 .idea/*
+/.idea

 # Jekyll's files
 .sass-cache
 .jekyll-cache
 _site
+.jekyll-metadata
+*.lock

 # Ruby related files
 .bundle
@@ -14,3 +17,5 @@ Gemfile.lock
 # OS-related files
 .DS_Store
 test/*
+/Thumbs.db
+/.DS_Store
\ No newline at end of file
--- a/Gemfile
+++ b/Gemfile
@@ -4,16 +4,18 @@ source "https://rubygems.org"
 gemspec

 group :jekyll_plugins do
-  gem "jekyll-feed", 
+  gem "jekyll-feed",
      "~> 0.6"

+  gem 'jekyll-email-protect',
+      "~> 1.1"
+
  gem "jekyll-paginate-v2",
      "~> 3",
      :git => "https://github.com/LCSB-BioCore/jekyll-paginate-v2.git"

-  gem 'jekyll-theme-lcsb-frozen-components', 
-      '~> 0.0.2', 
-      :git => "https://git-r3lab.uni.lu/core-services/jekyll-theme-lcsb-frozen-components.git", 
+  gem 'jekyll-theme-lcsb-frozen-components',
+      '~> 0.0.2',
+      :git => "https://git-r3lab.uni.lu/core-services/jekyll-theme-lcsb-frozen-components.git",
      :tag => "0.0.2"
-end
-
+end
\ No newline at end of file
--- a/_config.yml
+++ b/_config.yml
@@ -82,3 +82,26 @@ kramdown:
  footnote_nr:   1
  show_warnings: true
 # parse_block_html: true
+
+# GDPR banner settings
+banner_title: >-
+  This website uses cookies
+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
+banner_refuse_text: >-
+  Decline
+banner_more_text: >-
+  More information
+cookies_expire: 180 # days
+analyticsurl: https://analytics.lcsb.uni.lu/hub/
+siteID: -1 # 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/banners/r3-logo.svg
+timeout_hidebanner: 500 # milliseconds
--- a/_includes/css-imports.html
+++ b/_includes/css-imports.html
 {% comment %}
  Insert here CSS <link/> tags, and <style/> tags if needed.
-{% endcomment %}
\ No newline at end of file
+{% endcomment %}
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -3,35 +3,48 @@
    <data class="u-url" href="{{ "/" | relative_url }}"></data>

    <div class="footer-cp">
-      <div class="r3-logo-container">
-        <img class="r3-logo" src="{{ '/assets/banners/r3-logo.svg' | relative_url }}" type="image/svg+xml" />
-        <img class="lcsb-logo" src="{{ '/assets/banners/lcsb-compact.svg' | relative_url }}" type="image/svg+xml" />
-      </div>
+        <div class="r3-logo-container">
+            <img class="r3-logo" src="{{ '/assets/banners/r3-logo.svg' | relative_url }}" type="image/svg+xml" />
+            <img class="lcsb-logo" src="{{ '/assets/banners/lcsb-compact.svg' | relative_url }}" type="image/svg+xml" />
+        </div>

-      {% comment %}This is used to generate share URL for howto-pages{% endcomment %}
-      {% if page.shortcut %}
-      <p class="site-footer-share">Share this page:
-        <a href="{{ site.share_url }}{{ page.shortcut }}">
-          {{ site.share_url }}{{ page.shortcut }}
-        </a>
-      </p>
-      {% elsif page.include_link %}
-        {% assign parts = page.url | absolute_url | replace: ".html", "" | replace: "http://", "" | replace: "https://", "" | split: "/" %}
-      <p class="site-footer-share">Share this page:
-        <a href="{{ site.share_url }}{{ parts[site.include_link_index] }}">
-          {{ site.share_url }}{{ parts[site.include_link_index] }}
-        </a>
-      </p>
-      {% endif %}
+        {% comment %}This is used to generate share URL for howto-pages{% endcomment %}
+        <div class="footer-text-container">
+        {% if page.shortcut %}
+            <p>
+                Share this page:
+                <a href="{{ site.share_url }}{{ page.shortcut }}">
+                {{ site.share_url }}{{ page.shortcut }}
+                </a>
+            </p>

-      <p>
-        © <a href="https://wwwen.uni.lu/" target="_parent">
-            <strong>Université du Luxembourg</strong>,
-          </a>
-        {{ 'now' | date: "%Y" }}. All rights reserved.
+        {% elsif page.include_link %}
+            {% assign parts = page.url | absolute_url | replace: ".html", "" | replace: "http://", "" | replace: "https://", "" | split: "/" %}
+            <p>
+                Share this page:
+                <a href="{{ site.share_url }}{{ parts[site.include_link_index] }}">
+                {{ site.share_url }}{{ parts[site.include_link_index] }}
+                </a>
+            </p>
+        {% endif %}
+            <p>
+                &copy; <a href="https://wwwen.uni.lu/" target="_parent">
+                    <strong>Université du Luxembourg</strong>,
+                </a>
+                {{ 'now' | date: "%Y" }}. All rights reserved.
+            </p>

-        {%- include social.html -%}
-      </p>
+        {% if site.siteID > 0 %}
+            {%- include policy.html -%}
+        {% endif %}
+        </div>
+
+        <div class="social-container">
+            {%- include social.html -%}
+        </div>
    </div>
  </div>
 </footer>
+{% if site.siteID > 0 %}
+    {%- include gdpr-banner.html -%}
+{% endif %}
\ No newline at end of file
--- a/_includes/gdpr-banner.html
+++ b/_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 | relative_url }}" 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>
+        <div class="banner-buttons-more">
+            <a class="btn lap-cookies-more" href="{{ site.path_policy | relative_url }} ">{{ site.banner_more_text }}</a>
+        </div>
+    </div>
+</div>
\ No newline at end of file
--- a/_includes/google-analytics.html
+++ b/_includes/google-analytics.html
-<script>
-if(!(window.doNotTrack === "1" || navigator.doNotTrack === "1" || navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1")) {
-  (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),
-  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-  ga('create', '{{ site.google_analytics }}', 'auto');
-  ga('send', 'pageview');
-}
-</script>
-  
--- a/_includes/head.html
+++ b/_includes/head.html
 <head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  {%- seo -%}
-  <link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}">
-  <link rel="stylesheet" href="{{ '/assets/fontawesome/css/fontawesome-all.min.css' | relative_url }}">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1"> {%- seo -%}
+    <link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}">
+    <link rel="stylesheet" href="{{ '/assets/fontawesome/css/fontawesome-all.min.css' | relative_url }}">

-  <link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/favicon/apple-touch-icon.png' | relative_url }}">
-  <link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/favicon/favicon-32x32.png' | relative_url }}">
-  <link rel="icon" type="image/png" sizes="16x16" href="{{ '/assets/favicon/favicon-16x16.png' | relative_url }}">
-  <link rel="manifest" href="{{ '/assets/favicon/site.webmanifest' | relative_url }}">
-  <link rel="mask-icon" href="{{ '/assets/favicon/safari-pinned-tab.svg' | relative_url }}" color="#5bbad5">
-  <link rel="shortcut icon" href="{{ '/assets/favicon/favicon.ico' | relative_url }}">
-  <meta name="msapplication-TileColor" content="#da532c">
-  <meta name="msapplication-config" content="{{ '/assets/favicon/browserconfig.xml' | relative_url }}">
-  <meta name="theme-color" content="#ffffff">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/favicon/apple-touch-icon.png' | relative_url }}">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/favicon/favicon-32x32.png' | relative_url }}">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ '/assets/favicon/favicon-16x16.png' | relative_url }}">
+    <link rel="manifest" href="{{ '/assets/favicon/site.webmanifest' | relative_url }}">
+    <link rel="mask-icon" href="{{ '/assets/favicon/safari-pinned-tab.svg' | relative_url }}" color="#5bbad5">
+    <link rel="shortcut icon" href="{{ '/assets/favicon/favicon.ico' | relative_url }}">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="msapplication-config" content="{{ '/assets/favicon/browserconfig.xml' | relative_url }}">
+    <meta name="theme-color" content="#ffffff"> {%- include css-imports.html -%} {% if site.siteID > 0 %}
+    <script>
+        var settings = [];
+        settings.expires = "{{ site.cookies_expire }}";
+        settings.matomoURL = "{{ site.analyticsurl }}";
+        settings.siteID = "{{ site.siteID }}";
+        settings.accept_all_text = "{{ site.accept_all_text }}";
+        settings.only_necessary_text = "{{ site.only_necessary_text }}";
+        settings.cookieName = "{{ site.cookieName }}";
+        settings.bots = /bot|crawler|spider|crawling/i;
+        settings.timeout_hidebanner = "{{ site.timeout_hidebanner }}";
+    </script>
+    <script src="{{ '/assets/js/jquery.min.js' | relative_url }}"></script>
+    <script src="{{ '/assets/js/gdpr.js' | relative_url }}"></script>

-  {%- include css-imports.html -%}
+    {%- endif -%} {%- if jekyll.environment == "review" -%}
+    <script defer data-project-id='{{site.project_id}}' data-project-path='{{site.project_namespace}}' data-merge-request-id='{{site.mr_id}}' data-mr-url='{{site.gitlab_host}}' id='review-app-toolbar-script' src='{{site.gitlab_host}}/assets/webpack/visual_review_toolbar.js'></script>
+    {%- endif -%}

-  {%- if jekyll.environment == "review" -%}
-    <script defer
-      data-project-id='{{site.project_id}}'
-      data-project-path='{{site.project_namespace}}'
-      data-merge-request-id='{{site.mr_id}}'
-      data-mr-url='{{site.gitlab_host}}'
-      id='review-app-toolbar-script'
-      src='{{site.gitlab_host}}/assets/webpack/visual_review_toolbar.js'></script>
-  {%- endif -%}
-
-  {%- if jekyll.environment == 'production' and site.google_analytics -%}
-    {%- include google-analytics.html -%}
-  {%- endif -%}
-</head>
+</head>
\ No newline at end of file
--- a/_includes/policy.html
+++ b/_includes/policy.html
+<p>
+    <a href="{{ site.path_policy | relative_url }}">Privacy Policy</a>
+     (<span id="gdpr-result-text"></span> - <a href="javascript: showBanner();">change</a>)
+</p>
\ No newline at end of file
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@@ -2,8 +2,3 @@
   Add here additional javascript libraries and code.
   Uncomment those if needed.
 {% endcomment %}
-
-{% comment %}
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
-{% endcomment %}
\ No newline at end of file
--- a/_layouts/external.html
+++ b/_layouts/external.html
@@ -15,9 +15,6 @@

  {%- include css-imports.html -%}

-  {%- if jekyll.environment == 'production' and site.google_analytics -%}
-    {%- include google-analytics.html -%}
-  {%- endif -%}
 </head>

 <body>

--- a/_sass/minima.scss
+++ b/_sass/minima.scss
@@ -56,5 +56,6 @@ $footer-height: 50px;
  "minima/syntax-highlighting",
  "minima/lcsb",
  "minima/boxes",
-  "minima/search"
+  "minima/search",
+  "minima/gdpr"
 ;
--- a/_sass/minima/_gdpr.scss
+++ b/_sass/minima/_gdpr.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 #198cdc;
+    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: 50px;
+    position: absolute;
+    padding-top: 5px;
+    height: 50px;
+}
+
+#lap-cookies-banner .banner-title {
+    font-size: 120%;
+    font-weight: bold;
+    text-align: left;
+    padding-left: 60px;
+}
+
+#lap-cookies-banner .banner-text {
+    float: center;
+    min-height: 40px;
+    padding-left: 60px;
+    font-size: 80%;
+    text-align: left;
+}
+
+#lap-cookies-banner .banner-buttons {
+    float: center;
+    padding-top: 5px;
+    height: 20px;
+    margin-bottom: 10px;
+}
+
+#lap-cookies-banner .close-button {
+    position: absolute;
+    left: 100%;
+}
+
+#lap-cookies-banner .banner-buttons .banner-buttons-more {
+    position: relative;
+    left: 55%;
+    top: -28px;
+    width: 20%;
+}
+
+#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 #198cdc;
+    font-weight: bold;
+    background-color: #198cdc;
+    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: #198cdc !important;
+    border: 1px solid #198cdc;
+    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;
+}
+
+// Small component to show a Material Design style input toggle
+// ref: https://codepen.io/FezVrasta/pen/yNRgrB - MIT licensed
+$toggle-w: 32px;
+$toggle-h: 14px;
+$handle-size: 18px;
+$unchecked-handle-bg: #F1F1F1;
+$checked-handle-bg: #198cdc;
+$disabled-handle-bg: #BDBDBD;
+$unchecked-toggle-bg: #848484;
+$checked-toggle-bg: desaturate(lighten($checked-handle-bg, 28%), 32%); // kind of magic recipe
+$disabled-toggle-bg: #D5D5D5;
+label.input-toggle {
+    line-height: 0;
+    font-size: 0;
+    display: inline-block;
+    margin: 0;
+    >span {
+        display: inline-block;
+        position: relative;
+        background-image: linear-gradient( to right, $unchecked-toggle-bg 0%, $unchecked-toggle-bg 50%, $checked-toggle-bg 50%, $checked-toggle-bg 100%);
+        background-size: $toggle-w*2 $toggle-h;
+        background-position: 0%;
+        border-radius: $toggle-w;
+        width: $toggle-w;
+        height: $toggle-h;
+        cursor: pointer;
+        transition: background-position 0.2s ease-in;
+    }
+    >input:checked+span {
+        background-position: -100%;
+    }
+    >span:after {
+        content: "";
+        display: block;
+        position: absolute;
+        width: $handle-size;
+        height: $handle-size;
+        background: $unchecked-handle-bg;
+        align-self: center;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        border-radius: 100%;
+        //box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+        transition: left 0.2s ease-in, background-color 0.2s ease-in, transform 0.3s ease;
+    }
+    >input:checked+span:after {
+        left: $handle-size;
+        background-color: $checked-handle-bg;
+    }
+    // Jelly effect on click
+    >span:active:after {
+        //transform: translateY(-50%) scale3d(1.15, 0.85, 1);
+    }
+    // No jelly effect on disabled toggles
+    >input:disabled+span:active:after {
+        transform: translateY(-50%);
+    }
+    >input:disabled+span {
+        cursor: default;
+    }
+    >input:disabled+span {
+        background: $disabled-toggle-bg;
+    }
+    >input:disabled+span:after {
+        background: $disabled-handle-bg;
+    }
+    // Hide original checkbox, but don't use `display: none` to allow focus on it using keyboard
+    >input {
+        display: block;
+        position: absolute;
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+}
+
+#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 .banner-intro {
+        width: 60%;
+        position: relative;
+        left: 20%;
+        text-align: left;
+    }
+    #lap-cookies-banner .banner-buttons .banner-buttons-more {
+        position: relative;
+        left: 25%;
+        top: 10px;
+        width: 50%;
+    }
+}
+
+@media(max-width: 1100px) {
+    #lap-cookies-banner .banner-intro {
+        width: 90%;
+        position: relative;
+        left: 5%;
+        text-align: left;
+    }
+    #lap-cookies-banner .banner-buttons {
+        float: center;
+        padding-top: 5px;
+        height: 60px;
+        margin-bottom: 10px;
+    }
+    #lap-cookies-banner .banner-buttons .banner-buttons-more {
+        position: relative;
+        left: 25%;
+        top: 10px;
+        width: 50%;
+    }
+}
+
+@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%;
+    }
+
+    #lap-cookies-banner .banner-buttons .banner-buttons-more {
+        position: relative;
+        left: 50%;
+        top: -28px;
+        width: 20%;
+    }
+}
\ No newline at end of file
--- a/_sass/minima/_layout.scss
+++ b/_sass/minima/_layout.scss
@@ -254,7 +254,7 @@ html {
  width:100%;
  margin-top: -$footer-height + $spacing-unit;
  flex-shrink: 0;
-  height: $footer-height;
+  min-height: $footer-height;
  line-height: 15px;

  @media print {
@@ -311,12 +311,6 @@ html {
  }
 }

-.site-footer-share {
-  margin-bottom: 4px;
-}
-
-
-
 /**
 * Page content
 */

--- a/_sass/minima/_lcsb.scss
+++ b/_sass/minima/_lcsb.scss
@@ -89,31 +89,34 @@ div.alert.primary {
  right: 0px;
 }

+.footer-text-container {
+    margin-bottom: 4px;
+    left: 0;
+    width: 100%;
+    position: absolute;
+    text-align: center;
+}
+
+
 .r3-logo-container {
+    float: left;
+    position: relative;
+    left: 11%;
 }

 .r3-logo {
-  float: left;
-  position: relative;
-  top: -10px;
-  left: 100px;
-  height: 30px;
+    height: 30px;
 }

 .lcsb-logo {
-    float: left;
-    position: relative;
-    top: -10px;
-    left: 100px;
    height: 30px;
    padding-left: 1em;
-  }
+}

-.social-media-list {
-  float: right;
-  padding-right: 7%;
-  position: relative;
-  top: -2.4em;
+.social-container {
+    float: right;