From 336101f2b33c0cf184ecc94e002be9a59167d2f0 Mon Sep 17 00:00:00 2001 From: Sergii Miroshnychenko Date: Thu, 9 Nov 2023 12:45:01 +0200 Subject: [PATCH 1/3] cookies consent popup --- _includes/cookies-consent.liquid | 24 ++++++++ _layouts/page.html | 2 + _sass/blocks/_popup.scss | 63 ++++++++++++--------- _sass/blocks/cookies-consent.scss | 43 +++++++++++++++ _sass/style.scss | 1 + assets/js/script.js | 92 +++++++++++++++++++++++++++---- index.md | 4 +- 7 files changed, 188 insertions(+), 41 deletions(-) create mode 100644 _includes/cookies-consent.liquid create mode 100644 _sass/blocks/cookies-consent.scss diff --git a/_includes/cookies-consent.liquid b/_includes/cookies-consent.liquid new file mode 100644 index 00000000..ebff8b9b --- /dev/null +++ b/_includes/cookies-consent.liquid @@ -0,0 +1,24 @@ +{%- if include.data -%} + {% assign data = page[include.data] %} +{% else %} + {% assign data = page.popup %} +{% endif %} + + \ No newline at end of file diff --git a/_layouts/page.html b/_layouts/page.html index 3d2a7190..c6c56544 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -21,5 +21,7 @@ {%- include download-popup.liquid id="download-app" -%} + {%- include cookies-consent.liquid id="cookies-consent" -%} + \ No newline at end of file diff --git a/_sass/blocks/_popup.scss b/_sass/blocks/_popup.scss index 649ee580..783a10cc 100644 --- a/_sass/blocks/_popup.scss +++ b/_sass/blocks/_popup.scss @@ -32,6 +32,11 @@ right: 10px; z-index: 10; cursor: pointer; + @include media-breakpoint-down(xss) { + + .popup__header { + margin-top: 30px; + } + } @include media-breakpoint-up(lg) { top: 20px; right: 20px; @@ -54,6 +59,31 @@ &::after {transform: rotate(-45deg);} } + &__header { + font-size: 14px; + margin-bottom: 20px; + @include media-breakpoint-up(xss) { + font-size: 15px; + } + @include media-breakpoint-up(md) { + margin-bottom: 24px; + font-size: 16px; + } + @include media-breakpoint-up(xl) { + margin-bottom: 30px; + font-size: 18px; + } + + h2, h3 {margin-bottom: .25em;} + h3 { + @include media-breakpoint-down(xss) { + font-size: 22px; + } + } + &:last-child {margin-bottom: 0;} + + } + &__space { height: 100%; padding: 15px; @@ -66,7 +96,7 @@ position: relative; z-index: 5; transition: opacity $effect; - background: rgba(black, .8); + background: rgba(black, .5); opacity: 0; -webkit-overflow-scrolling: touch; @@ -80,7 +110,7 @@ &__content { max-width: 100%; - padding: 50px 15px 20px; + padding: 20px 15px; margin-right: auto; margin-left: auto; position: relative; @@ -89,41 +119,22 @@ @include media-breakpoint-up(xss) { padding: 30px 20px; } - @include media-breakpoint-up(xss) { - padding-right: 25px; - padding-left: 25px; - } @include media-breakpoint-up(xsl) { max-width: 560px; - padding-right: 30px; - padding-left: 30px; + padding-right: 25px; + padding-left: 25px; } @include media-breakpoint-up(md) { max-width: 680px; + padding-right: 30px; + padding-left: 30px; } @include media-breakpoint-up(lg) { max-width: 840px; + #cookies-consent & {max-width: 680px;} } @include media-breakpoint-up(xl) { max-width: 920px; } } - - &__header { - font-size: 14px; - margin-bottom: 30px; - @include media-breakpoint-up(xss) { - font-size: 15px; - } - @include media-breakpoint-up(md) { - font-size: 16px; - } - @include media-breakpoint-up(xl) { - font-size: 18px; - } - - h2 {margin-bottom: .25em;} - &:last-child {margin-bottom: 0;} - - } } diff --git a/_sass/blocks/cookies-consent.scss b/_sass/blocks/cookies-consent.scss new file mode 100644 index 00000000..5e6be280 --- /dev/null +++ b/_sass/blocks/cookies-consent.scss @@ -0,0 +1,43 @@ +/* ========================================================================== + COOKIES CONSENT + ========================================================================== */ +.cookies-consent { + font-size: 14px; + line-height: 1.428em; + @include media-breakpoint-up(md) { + font-size: 16px; + } + @include media-breakpoint-up(xl) { + font-size: 17px; + } + + hr { + margin: 1.5em 0 2em; + } + + &__buttons { + display: flex; + justify-content: center; + gap: 10px; + @include media-breakpoint-up(sm) { + gap: 20px; + } + @include media-breakpoint-up(xl) { + gap: 30px; + } + + .btn { + cursor: pointer; + @include media-breakpoint-down(sm) { + min-width: 120px; + padding-right: 10px; + padding-left: 10px; + } + @include media-breakpoint-up(xl) { + min-width: 220px; + padding-right: 40px; + padding-left: 40px; + } + } + } +} diff --git a/_sass/style.scss b/_sass/style.scss index c85ff444..9e9fca3a 100644 --- a/_sass/style.scss +++ b/_sass/style.scss @@ -27,6 +27,7 @@ 'blocks/features', 'blocks/download', 'blocks/download-popup', + 'blocks/cookies-consent', 'blocks/pricing', 'blocks/three', 'blocks/video', diff --git a/assets/js/script.js b/assets/js/script.js index 020c91be..0a2c3fff 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -61,8 +61,7 @@ function initPopup() { } } - function toggleClick(event) { - + function togglePopup(event) { var target = event.currentTarget.area, isNavbar = event.currentTarget.navbar; if (target) { if (target.classList.contains('visible')) { @@ -92,35 +91,106 @@ function initPopup() { return false; } + function showPopup(target) { + target.classList.add('visible'); + setTimeout(function () { + target.classList.add('open'); + }, 25); + setTimeout(function () { + if (isNavbar) { + document.body.classList.add('menu-open'); + } + }, 300); + return false; + } + + function closePopups(event) { + var target = event.target.closest('.popup'); + setTimeout(function () { + target.classList.remove('open'); + setTimeout(function () { + target.classList.remove('visible'); + }, 250); + }, 25); + return false; + } + + function setCookie(cname, cvalue, exdays) { + const d = new Date(); + d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); + let expires = "expires=" + d.toUTCString(); + document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; + } + + function getCookie(cname) { + let name = cname + "="; + let decodedCookie = decodeURIComponent(document.cookie); + let ca = decodedCookie.split(';'); + for (let i = 0; i < ca.length; i++) { + let c = ca[i]; + while (c.charAt(0) === ' ') { + c = c.substring(1); + } + if (c.indexOf(name) === 0) { + return c.substring(name.length, c.length); + } + } + return ""; + } + + function acceptConsent(event) { + setCookie('acceptCookies', true, 90); + closePopups.call(this, event); + } + + function rejectConsent(event) { + setCookie('acceptCookies', false, 90); + closePopups.call(this, event); + } + var navbar = document.querySelector('.header__nav'), toggle = document.querySelector('.header__toggle'), close = navbar.querySelector('.header__close'); toggle.area = navbar; toggle.navbar = true; - toggle.addEventListener('click', toggleClick, false); + toggle.addEventListener('click', togglePopup, false); close.area = navbar; close.navbar = true; - close.addEventListener('click', toggleClick, false); + close.addEventListener('click', togglePopup, false); document.querySelectorAll('.close-nav').forEach((link) => { link.area = navbar; - link.addEventListener('click', toggleClick, false); + link.addEventListener('click', togglePopup, false); link.navbar = true; }); document.querySelectorAll('.popup-open').forEach((link) => { var target = link.getAttribute('href'), popup = document.querySelector(target); - link.area = popup; - link.addEventListener('click', toggleClick, false); + link.addEventListener('click', togglePopup, false); + }); - var close = popup.querySelector('.popup__close'); - close.area = popup; - close.addEventListener('click', toggleClick, false); + document.querySelectorAll('.popup').forEach((popup) => { + let link = popup.querySelector('.popup__close'); + if (link) { + link.area = popup; + link.addEventListener('click', closePopups, false); + } }); + + let c = getCookie('acceptCookies'); + if (!c) { + document.querySelectorAll('.cookies-consent').forEach((consent) => { + consent.querySelector('.cookie-accept').addEventListener('click', acceptConsent, false); + consent.querySelector('.cookie-reject').addEventListener('click', rejectConsent, false); + }); + + let t = document.querySelector('#cookies-consent'); + showPopup(t); + } } function initTestimonials() { @@ -212,9 +282,7 @@ function initTags() { let updating = false const handleScroll = () => { if (window.scrollY >= offsetTop || window.pageYOffset >= offsetTop) { - console.log(offsetTop, allHeight); tags.classList.add(fixedClass); - console.log(window.scrollY, allHeight) if (window.scrollY >= allHeight || window.pageYOffset >= allHeight) { tags.classList.add(fixedClassBottom); } else { diff --git a/index.md b/index.md index 4930c697..47fed542 100644 --- a/index.md +++ b/index.md @@ -266,6 +266,4 @@ partners: {%- include box.liquid data="how-works" -%} -{%- include partners.liquid -%} - -{%- include download-popup.liquid id="download-app" -%} +{%- include partners.liquid -%} \ No newline at end of file From bbfc65fd7894bb760ad445807597e1134bfc69f7 Mon Sep 17 00:00:00 2001 From: Sergii Miroshnychenko Date: Mon, 26 Feb 2024 19:30:35 +0200 Subject: [PATCH 2/3] cookies consent popup update --- _sass/blocks/cookies-consent.scss | 14 ++++++++++++-- assets/js/script.js | 6 +++--- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/_sass/blocks/cookies-consent.scss b/_sass/blocks/cookies-consent.scss index 5e6be280..fd9f7b4e 100644 --- a/_sass/blocks/cookies-consent.scss +++ b/_sass/blocks/cookies-consent.scss @@ -12,7 +12,7 @@ } hr { - margin: 1.5em 0 2em; + margin: 1em 0; } &__buttons { @@ -23,7 +23,7 @@ gap: 20px; } @include media-breakpoint-up(xl) { - gap: 30px; + gap: 50px; } .btn { @@ -41,3 +41,13 @@ } } } +#cookies-consent { + .popup__space { + padding: 0; + justify-content: flex-end; + } + + .popup__content { + max-width: none; + } +} diff --git a/assets/js/script.js b/assets/js/script.js index 0a2c3fff..476203d2 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -139,12 +139,12 @@ function initPopup() { } function acceptConsent(event) { - setCookie('acceptCookies', true, 90); + setCookie('Consent_Status', 'granted', 90); closePopups.call(this, event); } function rejectConsent(event) { - setCookie('acceptCookies', false, 90); + setCookie('Consent_Status', 'denied', 90); closePopups.call(this, event); } @@ -181,7 +181,7 @@ function initPopup() { } }); - let c = getCookie('acceptCookies'); + let c = getCookie('Consent_Status'); if (!c) { document.querySelectorAll('.cookies-consent').forEach((consent) => { consent.querySelector('.cookie-accept').addEventListener('click', acceptConsent, false); From de0b3c6fd71aaaf7ae12d609e98b5eaba033ad7f Mon Sep 17 00:00:00 2001 From: hansr Date: Wed, 28 Feb 2024 09:23:50 -0700 Subject: [PATCH 3/3] language update --- _includes/cookies-consent.liquid | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/_includes/cookies-consent.liquid b/_includes/cookies-consent.liquid index ebff8b9b..c04173d3 100644 --- a/_includes/cookies-consent.liquid +++ b/_includes/cookies-consent.liquid @@ -8,15 +8,15 @@