diff --git a/private/js/modules/privacy.js b/private/js/modules/privacy.js new file mode 100644 index 0000000..6b9eeb2 --- /dev/null +++ b/private/js/modules/privacy.js @@ -0,0 +1,33 @@ +$(function() { + var $body = $('body'); + var $privacy_message = $('#privacy-message'); + + var cookie_name = 'tracking-accepted'; + + window.privacy_accepted = getCookie(cookie_name); + + if (window.privacy_accepted === null) { + $privacy_message.removeAttr('style'); + + $body.on('click', '.privacy_action--accept', function(event) { + event.preventDefault(); + setCookie(cookie_name, true, 360); + $privacy_message.remove(); + $body.trigger('enable_tracking'); + }); + + $body.on('click', '.privacy_action--decline', function(event) { + event.preventDefault(); + setCookie(cookie_name, false, 360); + $privacy_message.remove(); + }); + + $body.on('click', '.privacy_action--close', function(event) { + event.preventDefault(); + $privacy_message.remove(); + }); + } else { + window.privacy_accepted = window.privacy_accepted === 'true'; + $privacy_message.remove(); + } +}); \ No newline at end of file diff --git a/private/scss/main.scss b/private/scss/main.scss index f34e98c..051789a 100644 --- a/private/scss/main.scss +++ b/private/scss/main.scss @@ -19,6 +19,7 @@ @import "modules/_content.scss"; @import "modules/_admin_editor.scss"; @import "modules/_control-panel.scss"; +@import "modules/_privacy.scss"; @import "modules/plugins/_quote.scss"; @import "modules/plugins/_slider.scss"; @import "modules/plugins/_section.scss"; @@ -36,4 +37,4 @@ @import "modules/plugins/_highlight_list.scss"; @import "modules/plugins/_timetable.scss"; @import "modules/plugins/_reference_list.scss"; -@import "modules/plugins/_form.scss"; \ No newline at end of file +@import "modules/plugins/_form.scss"; diff --git a/private/scss/modules/_privacy.scss b/private/scss/modules/_privacy.scss new file mode 100644 index 0000000..ccb6a92 --- /dev/null +++ b/private/scss/modules/_privacy.scss @@ -0,0 +1,103 @@ +#privacy-message { + position: fixed; + left: 0; + bottom: 0; + right: 0; + background-color: rgba($white, 0.9); + z-index: 10; + padding: em(20px) em(60px); + @media screen and (max-width: $large_breakpoint) { + padding: em(20px); + } +} + +.privacy-message__close { + position: absolute; + top: 0; + right: 0; + width: em(60px); + height: 100%; + transform: none; + transition: transform 0.3s; + &:before, &:after { + content: ''; + display: block; + position: absolute; + top: 50%; + left: 50%; + height: 2px; + margin-top: -1px; + margin-left: em(-10px); + width: em(20px); + background: $black; + transform: rotate(45deg); + } + &:after { + transform: rotate(-45deg); + } + &:hover { + transform: scale(1.1); + } + @media screen and (max-width: $large_breakpoint) { + height: em(60px); + &:before, &:after { + height: 1px; + margin-top: 0; + } + } +} + +.privacy-message__frame { + max-width: em(1200px); + margin: 0 auto; + width: 100%; + position: relative; + padding-right: em(400px); + p { + margin: 0; + color: $black; + font-size: em(14px); + padding-right: em(40px); + line-height: 1.4; + a { + color: $green; + transition: color 0.3s; + &:hover { + color: $black; + } + } + } + @media screen and (max-width: $large_breakpoint) { + padding-right: 0; + } +} + +.privacy-message__actions { + position: absolute; + top: 50%; + right: 0; + width: 100%; + max-width: em(400px); + font-size: 0; + transform: translateY(-50%); + .button { + display: inline-block; + width: 48%; + &:first-child { + margin-right: 4%; + } + } + @media screen and (max-width: $large_breakpoint) { + position: relative; + margin-top: em(20px); + transform: none; + } + @media screen and (max-width: $small_breakpoint) { + .button { + width: 100%; + &:first-child { + margin-bottom: em(10px); + } + } + } +} \ No newline at end of file diff --git a/private/scss/modules/plugins/_form.scss b/private/scss/modules/plugins/_form.scss index 565386c..06c6f05 100644 --- a/private/scss/modules/plugins/_form.scss +++ b/private/scss/modules/plugins/_form.scss @@ -59,6 +59,7 @@ text-align: center; font-size: em(16px); text-transform: uppercase; + text-decoration: none; background: $green; border-radius: 0; color: $white; diff --git a/src/project/templates/main.html b/src/project/templates/main.html index 956181d..e3e9669 100644 --- a/src/project/templates/main.html +++ b/src/project/templates/main.html @@ -167,6 +167,30 @@ +
+ @@ -174,5 +198,35 @@ {% render_block "js" %} {{ ALDRYN_SNAKE.render_tail }} + +