From 2b9f8d8c9993731ca95aa3029c5255409850632d Mon Sep 17 00:00:00 2001 From: gersanco Date: Thu, 26 Mar 2020 13:35:15 +0100 Subject: [PATCH 01/13] Add a popup for cookie consent --- _includes/cookie-consent.html | 45 ++++++++++++++++++++++++++++++++++ _includes/sections/header.html | 2 ++ 2 files changed, 47 insertions(+) create mode 100644 _includes/cookie-consent.html diff --git a/_includes/cookie-consent.html b/_includes/cookie-consent.html new file mode 100644 index 0000000000..804b663acd --- /dev/null +++ b/_includes/cookie-consent.html @@ -0,0 +1,45 @@ + + + diff --git a/_includes/sections/header.html b/_includes/sections/header.html index a3a57b9927..dacd640d5f 100644 --- a/_includes/sections/header.html +++ b/_includes/sections/header.html @@ -30,3 +30,5 @@

{{ page.sub_title }}

{% endunless %} + +{% include cookie-consent.html %} From daa8418b06f8ae74de01863dafd5ad9934c90d05 Mon Sep 17 00:00:00 2001 From: gersanco Date: Thu, 23 Apr 2020 10:31:23 +0200 Subject: [PATCH 02/13] Show popup --- _includes/cookie-consent.html | 45 ------------------------- _includes/cookie_notice.html | 23 +++++++++++++ _includes/head.html | 11 ++++++ _includes/sections/header.html | 2 -- _layouts/default.html | 1 + _sass/2-components/_all-components.sass | 1 + _sass/2-components/_cookie_notice.sass | 17 ++++++++++ assets/js/cookie-notice.js | 37 ++++++++++++++++++++ 8 files changed, 90 insertions(+), 47 deletions(-) delete mode 100644 _includes/cookie-consent.html create mode 100644 _includes/cookie_notice.html create mode 100644 _sass/2-components/_cookie_notice.sass create mode 100644 assets/js/cookie-notice.js diff --git a/_includes/cookie-consent.html b/_includes/cookie-consent.html deleted file mode 100644 index 804b663acd..0000000000 --- a/_includes/cookie-consent.html +++ /dev/null @@ -1,45 +0,0 @@ - - - diff --git a/_includes/cookie_notice.html b/_includes/cookie_notice.html new file mode 100644 index 0000000000..655c223e96 --- /dev/null +++ b/_includes/cookie_notice.html @@ -0,0 +1,23 @@ +
+ +
+ +

Cookie settings

+ +
+ This developer portal uses cookies to improve your user experience. + Some cookies are required for the basic functionality of the portal + while other cookies help us to improve our content and layout. + You can agree to all cookies by selecting "Accept all" or you can select + "Accept required" to confirm only the required ones. Further information + can be found in our Data protection declaration. +
+ +
+ Accept required + Accept all +
+ +
+ +
diff --git a/_includes/head.html b/_includes/head.html index fcb9eb71c0..43e2ae2434 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -42,4 +42,15 @@ + + + + diff --git a/_includes/sections/header.html b/_includes/sections/header.html index dacd640d5f..a3a57b9927 100644 --- a/_includes/sections/header.html +++ b/_includes/sections/header.html @@ -30,5 +30,3 @@

{{ page.sub_title }}

{% endunless %} - -{% include cookie-consent.html %} diff --git a/_layouts/default.html b/_layouts/default.html index 1631476fd6..2bb95bf604 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -10,6 +10,7 @@ {{ content }} + {% include cookie_notice.html %} {% include sections/footer.html %} diff --git a/_sass/2-components/_all-components.sass b/_sass/2-components/_all-components.sass index fd35bd6cf4..15163579f8 100644 --- a/_sass/2-components/_all-components.sass +++ b/_sass/2-components/_all-components.sass @@ -21,3 +21,4 @@ @import 'sidebars' @import 'newsletter' @import 'quotes' +@import 'cookie_notice' diff --git a/_sass/2-components/_cookie_notice.sass b/_sass/2-components/_cookie_notice.sass new file mode 100644 index 0000000000..799c27f951 --- /dev/null +++ b/_sass/2-components/_cookie_notice.sass @@ -0,0 +1,17 @@ +.cookie-notice + background-color: white + max-width: 70rem + padding: 2rem + color: #3e3e3e + + &__backdrop + +position(fixed, 0 0 0 0) + background-color: rgba(0,0,0,.3) + z-index: 99 + display: none + justify-content: center + align-items: center + + &__actions + display: flex + justify-content: space-between diff --git a/assets/js/cookie-notice.js b/assets/js/cookie-notice.js new file mode 100644 index 0000000000..41f18bc67f --- /dev/null +++ b/assets/js/cookie-notice.js @@ -0,0 +1,37 @@ +function createCookie(name,value,days) { + var expires = ''; + if (days) { + var date = new Date(); + date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); + expires = '; expires=' + date.toUTCString(); + } + document.cookie = name + '=' + value + expires + '; path=/'; +} + +function readCookie(name) { + var nameEQ = name + '='; + var ca = document.cookie.split(';'); + + for (var i=0; i < ca.length; i++) { + var c = ca[i]; + while (c.charAt(0)==' ') c = c.substring(1,c.length); + if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); + } + return null; +} + +function eraseCookie(name) { + createCookie(name, '', -1); +} + +$(document).on('click', '.cookie-notice__actions--accept', function() { + createCookie('cookie-notice-dismissed', 'true', 31); + $('.cookie-notice__backdrop').hide(); + location.reload(); +}); + +$(document).on('click', '.cookie-notice__actions--reject', function() { + createCookie('cookie-notice-dismissed', 'false', 31); + $('.cookie-notice__backdrop').hide(); + location.reload(); +}); From 58ebb0b5132bc0dabfa38d1b57495c6f10d83db5 Mon Sep 17 00:00:00 2001 From: gersanco Date: Thu, 23 Apr 2020 11:56:29 +0200 Subject: [PATCH 03/13] Add styles to popup --- _sass/2-components/_cookie_notice.sass | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/_sass/2-components/_cookie_notice.sass b/_sass/2-components/_cookie_notice.sass index 799c27f951..cc70661f95 100644 --- a/_sass/2-components/_cookie_notice.sass +++ b/_sass/2-components/_cookie_notice.sass @@ -12,6 +12,19 @@ justify-content: center align-items: center + &__title + padding-bottom: 15px + font-family: $base-font-family + font-size: 16px + + &__actions display: flex justify-content: space-between + padding-top: 20px + + &--accept + background-color: #56b0ef + + &--reject + background-color: #8f8f8f From 065b707c32a1f4d4899112793fb1fb5b9205fdd4 Mon Sep 17 00:00:00 2001 From: gersanco Date: Thu, 23 Apr 2020 14:33:25 +0200 Subject: [PATCH 04/13] Add responsive styles --- _sass/2-components/_cookie_notice.sass | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/_sass/2-components/_cookie_notice.sass b/_sass/2-components/_cookie_notice.sass index cc70661f95..74131a6ad2 100644 --- a/_sass/2-components/_cookie_notice.sass +++ b/_sass/2-components/_cookie_notice.sass @@ -3,11 +3,12 @@ max-width: 70rem padding: 2rem color: #3e3e3e + margin: 2rem &__backdrop +position(fixed, 0 0 0 0) background-color: rgba(0,0,0,.3) - z-index: 99 + z-index: 9999 display: none justify-content: center align-items: center @@ -19,12 +20,21 @@ &__actions - display: flex + display: grid justify-content: space-between - padding-top: 20px + padding-top: 2rem + + +grid-media($grid-medium) + display: flex &--accept - background-color: #56b0ef + background-color: $beyond-green &--reject - background-color: #8f8f8f + background-color: $gray-light + margin-bottom: 1rem + width: 29rem + + +grid-media($grid-medium) + margin-bottom: 0 + width: auto From 854f96c17383f667b88c5db8eb0f167f23ed3a9d Mon Sep 17 00:00:00 2001 From: gersanco Date: Thu, 23 Apr 2020 15:23:31 +0200 Subject: [PATCH 05/13] Change popup informative text --- _includes/cookie_notice.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/_includes/cookie_notice.html b/_includes/cookie_notice.html index 655c223e96..8a34f9a03d 100644 --- a/_includes/cookie_notice.html +++ b/_includes/cookie_notice.html @@ -5,12 +5,12 @@

Cookie settings

- This developer portal uses cookies to improve your user experience. - Some cookies are required for the basic functionality of the portal - while other cookies help us to improve our content and layout. - You can agree to all cookies by selecting "Accept all" or you can select - "Accept required" to confirm only the required ones. Further information - can be found in our Data protection declaration. + Our website uses cookies to improve your user experience. Some cookies are + required for the basic functionality of the website while other cookies help + us to improve our content and layout. You can agree to all cookies by selecting + "Accept all" or you can select "Accept required" to confirm only the required ones. + Further information can be found in our + Data protection declaration.
From 610fd1ab5102ebfcffb82b3dafaa1f275375b9e6 Mon Sep 17 00:00:00 2001 From: gersanco Date: Thu, 23 Apr 2020 15:46:06 +0200 Subject: [PATCH 06/13] Set 1 year to save cookies --- assets/js/cookie-notice.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/js/cookie-notice.js b/assets/js/cookie-notice.js index 41f18bc67f..c35c4c30e3 100644 --- a/assets/js/cookie-notice.js +++ b/assets/js/cookie-notice.js @@ -25,13 +25,13 @@ function eraseCookie(name) { } $(document).on('click', '.cookie-notice__actions--accept', function() { - createCookie('cookie-notice-dismissed', 'true', 31); + createCookie('cookie-notice-dismissed', 'true', 365); $('.cookie-notice__backdrop').hide(); location.reload(); }); $(document).on('click', '.cookie-notice__actions--reject', function() { - createCookie('cookie-notice-dismissed', 'false', 31); + createCookie('cookie-notice-dismissed', 'false', 365); $('.cookie-notice__backdrop').hide(); location.reload(); }); From f58790cd126fce6933ac54022f40eeb5f2a8ddcf Mon Sep 17 00:00:00 2001 From: gersanco Date: Thu, 23 Apr 2020 16:30:24 +0200 Subject: [PATCH 07/13] Add google analytics --- _includes/cookie_notice_scripts.html | 21 +++++++++++++++++++++ _includes/head.html | 3 +++ 2 files changed, 24 insertions(+) create mode 100644 _includes/cookie_notice_scripts.html diff --git a/_includes/cookie_notice_scripts.html b/_includes/cookie_notice_scripts.html new file mode 100644 index 0000000000..9985003f61 --- /dev/null +++ b/_includes/cookie_notice_scripts.html @@ -0,0 +1,21 @@ +{% assign ga_paths = "['/', 'blog', 'devjobs']" %} + +{% if ga_paths contains base_url %} + (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','//www.google-analytics.com/analytics.js','ga'); + + {% case base_url %} + {%- when '/' -%} + ga('create', 'UA-71308214-1', 'auto'); + {%- when 'blog' -%} + ga('create', 'UA-71308214-2', 'auto'); + {%- when 'devjobs' -%} + ga('create', 'UA-71308214-3', 'auto'); + {% endcase %} + + ga('require', 'linkid'); + ga('send', 'pageview'); + +{% endif %} diff --git a/_includes/head.html b/_includes/head.html index 43e2ae2434..d14ada4dd9 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -50,6 +50,9 @@ $(document).ready(function() { $('.cookie-notice__backdrop').css('display', 'flex'); }); + } else if (readCookie('cookie-notice-dismissed') == 'true') { + /* Load user's custom scripts if cookie notice has been accepted */ + {% include cookie_notice_scripts.html %} } From 17fb49a7f04468c77ec1ecf71580af3359e4ec0e Mon Sep 17 00:00:00 2001 From: gersanco Date: Thu, 23 Apr 2020 16:39:45 +0200 Subject: [PATCH 08/13] Align text buttons on mobile view --- _sass/2-components/_cookie_notice.sass | 1 + 1 file changed, 1 insertion(+) diff --git a/_sass/2-components/_cookie_notice.sass b/_sass/2-components/_cookie_notice.sass index 74131a6ad2..6fb711271e 100644 --- a/_sass/2-components/_cookie_notice.sass +++ b/_sass/2-components/_cookie_notice.sass @@ -23,6 +23,7 @@ display: grid justify-content: space-between padding-top: 2rem + text-align: center +grid-media($grid-medium) display: flex From c06ce1bba75dc4736aed0d2cf4a686b5b9067103 Mon Sep 17 00:00:00 2001 From: gersanco Date: Fri, 24 Apr 2020 09:01:16 +0200 Subject: [PATCH 09/13] Changes px by rem --- _sass/2-components/_cookie_notice.sass | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_sass/2-components/_cookie_notice.sass b/_sass/2-components/_cookie_notice.sass index 6fb711271e..fb2ae0f88f 100644 --- a/_sass/2-components/_cookie_notice.sass +++ b/_sass/2-components/_cookie_notice.sass @@ -14,9 +14,9 @@ align-items: center &__title - padding-bottom: 15px + padding-bottom: 1.5rem font-family: $base-font-family - font-size: 16px + font-size: 1.6rem &__actions From e51dd49862299d4d655c86a0cb4646663d4614f5 Mon Sep 17 00:00:00 2001 From: gersanco Date: Thu, 2 Jul 2020 10:17:20 +0200 Subject: [PATCH 10/13] Show cookie notice in all pages --- _includes/sections/footer.html | 1 + _layouts/default.html | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/_includes/sections/footer.html b/_includes/sections/footer.html index 729b010489..f0512c7d30 100644 --- a/_includes/sections/footer.html +++ b/_includes/sections/footer.html @@ -1,3 +1,4 @@ +{% include cookie_notice.html %}