Skip to content
GitLab
Verified Commit 62d8dec0 authored by Laurent Heirendt's avatar Laurent Heirendt ✈
Browse files

remove sliders and simplify banner

parent a4ee3ac7
Hide whitespace changes
Inline Side-by-side
_config.yml
View file @ 62d8dec0
......@@ -91,7 +91,7 @@ banner_text: >-
banner_accept_text: >-
Accept
banner_refuse_text: >-
No thanks
Decline
banner_more_text: >-
More information
cookies_expire: 180 # days
......@@ -102,4 +102,5 @@ accept_all_text: >-
Aggregate statistics cookies accepted
only_necessary_text: >-
Only necessary cookies accepted
path_policy: privacyPolicy
\ No newline at end of file
path_policy: privacyPolicy
timeout_hidebanner: 500 # milliseconds
\ No newline at end of file
_includes/gdpr-banner.html
View file @ 62d8dec0
......@@ -7,19 +7,6 @@
<div class="banner-text">{{ site.banner_text }}</div>
</div>
<div class="banner-checkboxes">
<label class="input-toggle">
<input type="checkbox" checked disabled>
<span></span>
</label>
<span class="checkbox-label">Necessary</span>
<label class="input-toggle analytics">
<input id="checkbox-1" type="checkbox">
<span></span>
</label>
<span class="checkbox-label">Analytics</span>
</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>
......
_includes/head.html
View file @ 62d8dec0
<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">
{%- include css-imports.html -%}
{% if site.siteID > 0 %}
<script>
<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.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;
</script>
<script src="{{ '/assets/js/jquery.min.js' | relative_url }}"></script>
<script src="{{ '/assets/js/gdpr.js' | relative_url }}"></script>
{%- endif -%}
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>
{%- 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 -%}
{%- 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 -%}
</head>
\ No newline at end of file
_sass/minima/_gdpr.scss
View file @ 62d8dec0
......@@ -51,8 +51,9 @@
#lap-cookies-banner .banner-buttons .banner-buttons-more {
position: relative;
left: 20%;
left: 55%;
top: -28px;
width: 20%;
}
#lap-cookies-banner .banner-buttons .lap-accept,
......@@ -195,9 +196,6 @@ label.input-toggle {
left: 5%;
text-align: left;
}
}
@media(max-width: 850px) {
#lap-cookies-banner .banner-buttons {
float: center;
padding-top: 5px;
......@@ -206,7 +204,8 @@ label.input-toggle {
}
#lap-cookies-banner .banner-buttons .banner-buttons-more {
position: relative;
left: unset;
left: 40%;
top: 10px;
width: 20%;
}
}
\ No newline at end of file
assets/js/gdpr.js
View file @ 62d8dec0
......@@ -52,7 +52,7 @@ function showBanner() {
*/
function hideBanner() {
var popup = $('#lap-cookies-banner');
setTimeout(() => { popup.slideUp('slow'); }, 1200);
setTimeout(() => { popup.slideUp('slow'); }, settings.timeout_hidebanner);
}
/*
......@@ -120,7 +120,8 @@ function accept() {
$('.lap-accept').addClass('selected');
$('.lap-refuse').removeClass('selected');
$("input[id^=check]").not(this).prop('checked', true);
// hide banner
hideBanner();
}
/*
......@@ -143,21 +144,11 @@ function refuse(doNotTrack) {
$('.lap-refuse').addClass('selected');
$('.lap-accept').removeClass('selected');
$("input[id^=check]").not(this).prop('checked', false);
}
/*
* toggleBox: refuse/accept based on checkbox with boxID
*/
function toggleBox(boxID) {
if ($('input#checkbox-' + boxID)[0].checked === true) {
refuse(false);
} else {
accept();
}
// hide banner
hideBanner();
}
/*
* main function
*/
......@@ -166,19 +157,12 @@ $(document).ready(function() {
$('.lap-accept').click(function(e) {
e.preventDefault(true);
accept();
hideBanner();
});
// refuse
$('.lap-refuse').click(function(e) {
e.preventDefault(true);
refuse(false);
hideBanner();
});
$('.analytics').click(function(e) {
e.preventDefault(true);
toggleBox(1); // this ID matches with the checkbox-1 input
});
// detect if the visitor is a bot or not
......@@ -194,14 +178,12 @@ $(document).ready(function() {
if (isBot || !isToTrack || hasConsent() === false) {
doNotTrack = true;
refuse(doNotTrack);
hideBanner();
}
if (doNotTrack === false) {
if (hasConsent() === true) {
// user has already given consent to use cookies to tracking
accept();
hideBanner();
} else if (hasConsent() === false || hasConsent() === null) {
// all other cases considered, show banner
showBanner();
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment