Skip to content

GitLab

Commit b6282f8f authored by Jacek Lebioda's avatar Jacek Lebioda
Browse files

Merge branch 'add-gdpr' into 'latest' 

Add GDPR banner for analytics

See merge request core-services/jekyll-theme-lcsb-default!44
parents 7cec7c19 c8bc8758
Expand all Show whitespace changes
Inline Side-by-side
Showing with 662 additions and 145 deletions
.gitignore
View file @ b6282f8f
# 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
Gemfile
View file @ b6282f8f
......@@ -7,6 +7,9 @@ group :jekyll_plugins do
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"
......@@ -16,4 +19,3 @@ group :jekyll_plugins do
:git => "https://git-r3lab.uni.lu/core-services/jekyll-theme-lcsb-frozen-components.git",
:tag => "0.0.2"
end
\ No newline at end of file
_config.yml
View file @ b6282f8f
......@@ -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
_includes/footer.html
View file @ b6282f8f
......@@ -9,29 +9,42 @@
</div>
{% comment %}This is used to generate share URL for howto-pages{% endcomment %}
<div class="footer-text-container">
{% if page.shortcut %}
<p class="site-footer-share">Share this page:
<p>
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:
<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>
© <a href="https://wwwen.uni.lu/" target="_parent">
&copy; <a href="https://wwwen.uni.lu/" target="_parent">
<strong>Université du Luxembourg</strong>,
</a>
{{ 'now' | date: "%Y" }}. All rights reserved.
</p>
{% if site.siteID > 0 %}
{%- include policy.html -%}
{% endif %}
</div>
<div class="social-container">
{%- include social.html -%}
</p>
</div>
</div>
</div>
</footer>
{% if site.siteID > 0 %}
{%- include gdpr-banner.html -%}
{% endif %}
\ No newline at end of file
_includes/gdpr-banner.html 0 → 100644
View file @ b6282f8f
<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
_includes/google-analytics.html deleted 100644 → 0
View file @ 7cec7c19
<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>
_includes/head.html
View file @ b6282f8f
<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 -%}
<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 }}">
......@@ -14,21 +13,23 @@
<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">
<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 -%}
{%- 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>
\ No newline at end of file
_includes/policy.html 0 → 100644
View file @ b6282f8f
<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
_includes/scripts.html
View file @ b6282f8f
......@@ -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
_layouts/external.html
View file @ b6282f8f
......@@ -15,9 +15,6 @@
{%- include css-imports.html -%}
{%- if jekyll.environment == 'production' and site.google_analytics -%}
{%- include google-analytics.html -%}
{%- endif -%}
</head>
<body>
......
_sass/minima.scss
View file @ b6282f8f
......@@ -56,5 +56,6 @@ $footer-height: 50px;
"minima/syntax-highlighting",
"minima/lcsb",
"minima/boxes",
"minima/search"
"minima/search",
"minima/gdpr"
;
_sass/minima/_gdpr.scss 0 → 100644
View file @ b6282f8f
#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
_sass/minima/_layout.scss
View file @ b6282f8f
......@@ -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
*/
......
_sass/minima/_lcsb.scss
View file @ b6282f8f
......@@ -89,31 +89,34 @@ div.alert.primary {
right: 0px;
}
.r3-logo-container {
.footer-text-container {
margin-bottom: 4px;
left: 0;
width: 100%;
position: absolute;
text-align: center;
}
.r3-logo {
.r3-logo-container {
float: left;
position: relative;
top: -10px;
left: 100px;
left: 11%;
}
.r3-logo {
height: 30px;
}
.lcsb-logo {
float: left;
position: relative;
top: -10px;
left: 100px;
height: 30px;
padding-left: 1em;
}
}
.social-media-list {
.social-container {
float: right;
padding-right: 7%;
position: relative;
top: -2.4em;
padding-top: 0.5em;
}
.svg-icon {
......@@ -148,6 +151,42 @@ div.alert.primary {
}
}
@media (max-width: 680px) {
.lcsb-logo {
height: 32px;
margin: 0px auto;
float: none;
position: initial;
top: unset;
left: unset;
}
.r3-logo-container {
position: relative;
left:0;
width: 100%;
text-align: center;
padding-bottom: 1em;
}
.footer-text-container {
margin-bottom: 4px;
left: 0;
width: 100%;
position: relative;
text-align: center;
}
.social-container {
position: relative;
left:0;
width: 100%;
text-align: center;
float: unset;
}
}
@media (max-width: 640px) {
.img-uni-lu {
}
......@@ -165,37 +204,11 @@ div.alert.primary {
width: 120px;
display: none;
}
.r3-logo {
height: 32px;
margin: 0px auto;
float: none;
position: initial;
top: unset;
left: unset;
}
.lcsb-logo {
height: 32px;
margin: 0px auto;
float: none;
position: initial;