From e5382f620fd3de0dce7bb5f904f85a39432ec817 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Pu=CC=88rzl?= Date: Wed, 23 Nov 2022 12:46:11 +0100 Subject: [PATCH] Out theme in V2 --- assets/images/icons/discord.svg | 3 + assets/images/icons/instagram.svg | 50 +++ assets/images/icons/plus-simple.svg | 7 + assets/images/icons/plus.svg | 9 + assets/images/icons/tooltip.svg | 7 + assets/images/icons/twitter.svg | 21 + assets/images/icons/zoom.svg | 13 + assets/js/scripts.js | 36 -- assets/{js => scripts}/jquery-3.6.0.min.js | 0 assets/scripts/scripts.js | 89 ++++ assets/{js => scripts}/uikit-icons.min.js | 0 assets/{js => scripts}/uikit.min.js | 0 assets/styles/_layout.scss | 33 ++ assets/styles/_navigation.scss | 189 ++++++++ assets/styles/components/components.scss | 2 + assets/styles/components/gdpr-banner.scss | 229 ++++++++++ assets/styles/components/gdpr-manager.scss | 403 ++++++++++++++++++ assets/styles/styles.scss | 3 + assets/styles/variables.scss | 8 +- content/general/gdpr.de.htm | 3 + content/static-pages/dings.htm | 9 + layouts/default.htm | 83 ++-- layouts/static-default.htm | 31 ++ meta/menus/footer-social.yaml | 37 ++ meta/menus/footer.yaml | 59 +++ meta/menus/hauptmenue.yaml | 84 ---- meta/menus/main.yaml | 33 ++ meta/static-pages.yaml | 3 +- meta/static-types.yaml | 45 ++ pages/cookies.htm | 7 +- pages/{page3.htm => example.htm} | 8 +- pages/imprint.htm | 16 + pages/page1.htm | 36 -- pages/page2.htm | 19 - pages/privacy.htm | 16 + partials/components/cookie_js.htm | 9 + partials/components/cookies.htm | 6 + partials/components/footer.htm | 26 +- partials/components/gdpr.htm | 3 - partials/components/menu-mobile.htm | 38 ++ partials/components/menu.htm | 43 ++ partials/components/navigation.htm | 96 +---- partials/components/scripts.htm | 8 +- partials/cookiebanner/default.htm | 7 +- partials/cookiebanner/inner.htm | 6 +- partials/cookiebanner/message.htm | 3 - partials/cookiebanner/optin.htm | 1 - partials/cookiebanner/optout.htm | 2 +- partials/cookiebanner/settings.htm | 11 +- partials/cookiemanager/cookie.htm | 26 ++ partials/cookiemanager/cookies.htm | 11 + partials/cookiemanager/default.htm | 13 + partials/cookiemanager/details.htm | 59 +++ partials/cookiemanager/groups.htm | 19 + partials/cookiemanager/levels.htm | 22 + partials/cookiemanager/modal.htm | 16 + partials/cookiemanager/scripts.htm | 81 ++++ partials/cookiemanager/settingsbutton.htm | 12 + partials/cookiemanager/submitbutton.htm | 15 + partials/cookiemanager/toggle.htm | 9 + partials/cookiemanagerpage/cookie.htm | 26 ++ partials/cookiemanagerpage/cookies.htm | 11 + partials/cookiemanagerpage/default.htm | 21 + partials/cookiemanagerpage/details.htm | 59 +++ partials/cookiemanagerpage/groups.htm | 19 + partials/cookiemanagerpage/levels.htm | 22 + partials/cookiemanagerpage/modal.htm | 16 + partials/cookiemanagerpage/scripts.htm | 81 ++++ partials/cookiemanagerpage/settingsbutton.htm | 12 + partials/cookiemanagerpage/submitbutton.htm | 15 + partials/cookiemanagerpage/toggle.htm | 9 + theme.yaml | 18 +- 72 files changed, 2102 insertions(+), 340 deletions(-) create mode 100644 assets/images/icons/discord.svg create mode 100644 assets/images/icons/instagram.svg create mode 100644 assets/images/icons/plus-simple.svg create mode 100644 assets/images/icons/plus.svg create mode 100644 assets/images/icons/tooltip.svg create mode 100644 assets/images/icons/twitter.svg create mode 100644 assets/images/icons/zoom.svg delete mode 100644 assets/js/scripts.js rename assets/{js => scripts}/jquery-3.6.0.min.js (100%) create mode 100644 assets/scripts/scripts.js rename assets/{js => scripts}/uikit-icons.min.js (100%) rename assets/{js => scripts}/uikit.min.js (100%) create mode 100644 assets/styles/_layout.scss create mode 100644 assets/styles/_navigation.scss create mode 100644 assets/styles/components/components.scss create mode 100644 assets/styles/components/gdpr-banner.scss create mode 100644 assets/styles/components/gdpr-manager.scss create mode 100755 content/general/gdpr.de.htm create mode 100755 content/static-pages/dings.htm mode change 100644 => 100755 layouts/default.htm create mode 100644 layouts/static-default.htm create mode 100755 meta/menus/footer-social.yaml create mode 100755 meta/menus/footer.yaml delete mode 100644 meta/menus/hauptmenue.yaml create mode 100755 meta/menus/main.yaml mode change 100644 => 100755 meta/static-pages.yaml create mode 100644 meta/static-types.yaml rename pages/{page3.htm => example.htm} (93%) create mode 100644 pages/imprint.htm delete mode 100644 pages/page1.htm delete mode 100644 pages/page2.htm create mode 100644 pages/privacy.htm create mode 100644 partials/components/cookie_js.htm create mode 100644 partials/components/cookies.htm delete mode 100644 partials/components/gdpr.htm create mode 100644 partials/components/menu-mobile.htm create mode 100644 partials/components/menu.htm delete mode 100644 partials/cookiebanner/message.htm create mode 100644 partials/cookiemanager/cookie.htm create mode 100644 partials/cookiemanager/cookies.htm create mode 100644 partials/cookiemanager/default.htm create mode 100644 partials/cookiemanager/details.htm create mode 100644 partials/cookiemanager/groups.htm create mode 100644 partials/cookiemanager/levels.htm create mode 100644 partials/cookiemanager/modal.htm create mode 100644 partials/cookiemanager/scripts.htm create mode 100644 partials/cookiemanager/settingsbutton.htm create mode 100644 partials/cookiemanager/submitbutton.htm create mode 100644 partials/cookiemanager/toggle.htm create mode 100644 partials/cookiemanagerpage/cookie.htm create mode 100644 partials/cookiemanagerpage/cookies.htm create mode 100644 partials/cookiemanagerpage/default.htm create mode 100644 partials/cookiemanagerpage/details.htm create mode 100644 partials/cookiemanagerpage/groups.htm create mode 100644 partials/cookiemanagerpage/levels.htm create mode 100644 partials/cookiemanagerpage/modal.htm create mode 100644 partials/cookiemanagerpage/scripts.htm create mode 100644 partials/cookiemanagerpage/settingsbutton.htm create mode 100644 partials/cookiemanagerpage/submitbutton.htm create mode 100644 partials/cookiemanagerpage/toggle.htm diff --git a/assets/images/icons/discord.svg b/assets/images/icons/discord.svg new file mode 100644 index 0000000..5db6aa9 --- /dev/null +++ b/assets/images/icons/discord.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/icons/instagram.svg b/assets/images/icons/instagram.svg new file mode 100644 index 0000000..46cc921 --- /dev/null +++ b/assets/images/icons/instagram.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/icons/plus-simple.svg b/assets/images/icons/plus-simple.svg new file mode 100644 index 0000000..17d1c3b --- /dev/null +++ b/assets/images/icons/plus-simple.svg @@ -0,0 +1,7 @@ + + + Combined-Shape-path + + + + \ No newline at end of file diff --git a/assets/images/icons/plus.svg b/assets/images/icons/plus.svg new file mode 100644 index 0000000..9b3c7c6 --- /dev/null +++ b/assets/images/icons/plus.svg @@ -0,0 +1,9 @@ + + + Combined Shape + + + + + + diff --git a/assets/images/icons/tooltip.svg b/assets/images/icons/tooltip.svg new file mode 100644 index 0000000..ef1bf15 --- /dev/null +++ b/assets/images/icons/tooltip.svg @@ -0,0 +1,7 @@ + + + Combined Shape + + + + \ No newline at end of file diff --git a/assets/images/icons/twitter.svg b/assets/images/icons/twitter.svg new file mode 100644 index 0000000..6dc07aa --- /dev/null +++ b/assets/images/icons/twitter.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/assets/images/icons/zoom.svg b/assets/images/icons/zoom.svg new file mode 100644 index 0000000..ed60228 --- /dev/null +++ b/assets/images/icons/zoom.svg @@ -0,0 +1,13 @@ + + + Group + + + + + + + + + + \ No newline at end of file diff --git a/assets/js/scripts.js b/assets/js/scripts.js deleted file mode 100644 index d0d3165..0000000 --- a/assets/js/scripts.js +++ /dev/null @@ -1,36 +0,0 @@ -$(function () { -/* - $(window).on('ajaxError', function(event, c,message,d,e) { - UIkit.notification({ - message: message, - status: 'warning', - pos: 'top-center', - timeout: 5000 - }); - }); -*/ - $(window).on('ajaxConfirmMessage', function(event, message) { - event.preventDefault(); - UIkit.modal.confirm(message, {labels: {ok: 'JA', cancel: 'NEIN'}}).then(() => { - event.promise.resolve(); - }, () => {event.promise.reject()}); - return true; - }); - $(document).on('ajaxSetup', function (event, context) { - context.options.handleErrorMessage = function (message) { - UIkit.notification({ - message: message, - status: 'warning', - pos: 'top-center', - timeout: 5000 - }); - } - context.options.handleFlashMessage = function (message, type) { - UIkit.notification({ - message: message, - pos: 'top-center', - timeout: 5000 - }); - } - }) -}); diff --git a/assets/js/jquery-3.6.0.min.js b/assets/scripts/jquery-3.6.0.min.js similarity index 100% rename from assets/js/jquery-3.6.0.min.js rename to assets/scripts/jquery-3.6.0.min.js diff --git a/assets/scripts/scripts.js b/assets/scripts/scripts.js new file mode 100644 index 0000000..51ef205 --- /dev/null +++ b/assets/scripts/scripts.js @@ -0,0 +1,89 @@ +$(function () { +/* + $(window).on('ajaxError', function(event, c,message,d,e) { + UIkit.notification({ + message: message, + status: 'warning', + pos: 'top-center', + timeout: 5000 + }); + }); +*/ + $(window).on('ajaxConfirmMessage', function(event, message) { + event.preventDefault(); + UIkit.modal.confirm(message, {labels: {ok: 'JA', cancel: 'NEIN'}}).then(() => { + event.promise.resolve(); + }, () => {event.promise.reject()}); + return true; + }); + $(document).on('ajaxSetup', function (event, context) { + context.options.handleErrorMessage = function (message) { + UIkit.notification({ + message: message, + status: 'warning', + pos: 'top-center', + timeout: 5000 + }); + } + context.options.handleFlashMessage = function (message, type) { + UIkit.notification({ + message: message, + pos: 'top-center', + timeout: 5000 + }); + } + }) +}); + +var Smooth = { + init: function(el) { + if (!el.hasAttribute('data-height')) { + el.style.display = el.hasAttribute('data-flex') ? 'flex' : 'block'; + el.dataset.height = el.offsetHeight+"px"; + el.classList.add('smooth'); + el.style.height = 0; + } + return el; + }, + expand: function(element) { + var div = Smooth.init(element); + setTimeout(function() { div.style.height = div.dataset.height; }, 20); + }, + collapse: function(element) { + var div = Smooth.init(element); + div.style.height = 0; + } +} + +function toggleContent(element) { + element.closest('.toggle-content').classList.toggle('expanded') + if (element.closest('.toggle-content').classList.contains('expanded')) { + Smooth.expand(element.closest('.toggle-content').querySelector('.hidden-content')) + } else { + Smooth.collapse(element.closest('.toggle-content').querySelector('.hidden-content')) + } +} + +function initNavigationScroll() { + let lastScrollTop = 0; + const wrapper = document.querySelector(".autohide"); + const navHeight = wrapper.clientHeight; + window.addEventListener("scroll", function () { + const scrollTop = window.scrollY; + const safeArea = scrollTop < navHeight; + if (safeArea || scrollTop < lastScrollTop) { + wrapper.classList.remove("scrolled-down"); + wrapper.classList.add("scrolled-up"); + } else { + wrapper.classList.remove("scrolled-up"); + wrapper.classList.remove("expanded"); + wrapper.classList.add("scrolled-down"); + Smooth.collapse(wrapper.closest('.toggle-content').querySelector('.hidden-content')) + } + lastScrollTop = scrollTop; + }); +} + +document.addEventListener("DOMContentLoaded", function() { + initNavigationScroll(); +}); diff --git a/assets/js/uikit-icons.min.js b/assets/scripts/uikit-icons.min.js similarity index 100% rename from assets/js/uikit-icons.min.js rename to assets/scripts/uikit-icons.min.js diff --git a/assets/js/uikit.min.js b/assets/scripts/uikit.min.js similarity index 100% rename from assets/js/uikit.min.js rename to assets/scripts/uikit.min.js diff --git a/assets/styles/_layout.scss b/assets/styles/_layout.scss new file mode 100644 index 0000000..08783b4 --- /dev/null +++ b/assets/styles/_layout.scss @@ -0,0 +1,33 @@ +.uk-logo, .uk-navbar-toggle-icon { + padding-left: 0; +} + +@media (max-width: $container-max-width) { + footer { + img#logo { + width: 107px; + } + .uk-navbar-nav.footer { + margin-top: 10px !important; + display: block; + li { + width: 100%; + &:after { + display: none; + } + } + } + .uk-navbar-nav.footer-social { + a { + padding: 0 15px !important; + .icon { + width: 30px; + height: 30px; + } + } + } + .uk-container div:last-child { + font-size: 0.8em; + } + } +} diff --git a/assets/styles/_navigation.scss b/assets/styles/_navigation.scss new file mode 100644 index 0000000..eeeefd7 --- /dev/null +++ b/assets/styles/_navigation.scss @@ -0,0 +1,189 @@ +.navigation { + transition: all 0.3s ease-in-out, box-shadow .7s; + &.scrolled-down { + transform: translateY(-100%); + } + &.scrolled-up { + transform: translateY(0); + } + .logo-link { + padding: 10px 0; + color: #fff; + } + #logo { + height: 65px; + } + .icon-nav { + a { + padding-left: 13px; + padding-right: 13px; + } + } + .uk-container { + position: relative; + } + li:hover .icon, li.uk-active .icon { + border-color: $global-primary-background; + } + .uk-navbar-dropdown { + border-radius: 3px; + padding: 0; + width: auto; + font-weight: 100; + a { + font-size: .8em; + color: #fff; + white-space: nowrap; + } + li { + padding: 5px 8px; + &:hover, &.uk-active { + background-color: rgba(#999, .5); + a { + color: #fff; + } + } + } + .dropdown-item { + display: flex; + } + .icon { + display: flex; + margin-right: 10px; + position: relative; + top: -2px; + width: 18px; + height: 18px; + justify-content: center; + svg { + width: 27px; + height: 25px; + } + } + &:before { + content: ""; + height: 0; + position: absolute; + border-style: solid; + border-color: transparent transparent $dropdown-background transparent; + border-width: 0 14px 18px 14px; + top: -18px; + right: 15px; + z-index: 100; + } + } + .burger-menu { + $width:30px; + $height:3px; + width:$width; + height:$height; + display:block; + // margin-left:-$width/2; + margin-top:-$height/2; + cursor: pointer; + position: relative; + & > span { + width: $width; + height: 2.5px; + background: $navbar-nav-item-color; + display: block; + position: absolute; + top: 50%; + left: 50%; + margin-left: -4.5px; + margin-top: 0; + transition: background .3s; + } + $hamburger-spacing:10px; + .burger-menu-1{ + transform:translate3d(0,-$hamburger-spacing,0); + } + .burger-menu-2{ + transform:translate3d(0,0,0); + } + .burger-menu-3{ + transform:translate3d(0,$hamburger-spacing,0); + } + } + #mobile-navigation { + .uk-navbar-nav.mobile { + &.main { + margin: 10px 0; + display: block; + } + a { + font-size: 1.45em; + line-height: 2.2em; + font-weight: 300; + min-height: 50px; + text-transform: uppercase; + } + .uk-navbar-dropdown { + svg { + width: 27px; + height: 52px !important; + } + &:before { + right: calc(50% - 13px); + } + } + } + } + &.expanded { + box-shadow: 0 10px 10px rgba(#808080, .4); + .uk-container { + &:after { + opacity: 0; + } + li.visible-menu-toggle { + display: block !important; + } + } + } +} +footer { + .uk-navbar-nav.footer { + margin-top: 30px; + li { + a { + padding: 0 13px; + min-height: inherit; + } + &:not(:last-child) { + position: relative; + + &:after { + position: absolute; + right: -5px; + top: -3px; + content: "|"; + } + } + } + } + .uk-navbar-nav.footer-social { + a { + padding: 0 20px; + } + .icon { + padding: 5px !important; + width: 35px; + height: 35px; + color: #fff; + background-color: $global-primary-background; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: background-color .3s; + &:hover { + background-color: #fff; + color: $global-primary-background; + } + svg { + width: 24px; + height: auto; + } + } + } +} diff --git a/assets/styles/components/components.scss b/assets/styles/components/components.scss new file mode 100644 index 0000000..76de798 --- /dev/null +++ b/assets/styles/components/components.scss @@ -0,0 +1,2 @@ +@import "gdpr-banner"; +@import "gdpr-manager"; diff --git a/assets/styles/components/gdpr-banner.scss b/assets/styles/components/gdpr-banner.scss new file mode 100644 index 0000000..ba5860a --- /dev/null +++ b/assets/styles/components/gdpr-banner.scss @@ -0,0 +1,229 @@ +.gdpr-banner { + z-index: 1000; + .gdpr-overlay { + z-index: 1001; + background-color: rgba(#000, .3); + } + .banner { + background-color: #fff; + position: fixed; + bottom: 0; + z-index: 1010; + } +} + +.gdpr-banner__column { + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} + +.message p:last-child { + margin-bottom: 0; +} + +.gdpr-banner__row + .gdpr-banner__row { + margin-top: .5rem; +} + +.gdpr-banner__column--1 { + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.gdpr-banner__column--2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: 20px; +} + +.gdpr-banner__message { + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + line-height: 1.3; + text-align: left; + hyphens: auto; +} + +.gdpr-banner__settings a { + color: inherit; + border-bottom: 1px solid currentColor; + display: inline-block; + padding: 2px 0; + text-decoration: none; +} + +.gdpr-banner__button { + -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); + padding: .5em 1em; + cursor: pointer; + border-radius: 2px; + border: none; +} + +.gdpr-banner__button--dismiss { + position: static; + cursor: pointer; + color: #fff; + background: inherit; + line-height: 0; + font-size: 20px; + font-weight: bold; + border: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 100%; +} + +.gdpr-banner__dismiss { + width: 20px; + height: 20px; + margin-left: 20px; + z-index: 1000; +} + +@media screen and (min-width: 1340px) { + .gdpr-banner__dismiss { + position: absolute; + right: 30px; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + } +} + +@media screen and (min-width: 450px) { + .gdpr-banner__button--opt-in { + margin-left: 20px; + } + + .gdpr-banner__settings { + margin: 0 25px; + } +} + +@media screen and (max-width: 510px) { + .gdpr-banner__button { + width: 90%; + line-height: 1.2; + } + + .gdpr-banner__opt-out, .gdpr-banner__opt-in { + -webkit-box-flex: 50%; + -webkit-flex: 50%; + -ms-flex: 50%; + flex: 50%; + } + + .gdpr-banner__settings { + -webkit-box-flex: 100%; + -webkit-flex: 100%; + -ms-flex: 100%; + flex: 100%; + margin-bottom: 15px; + margin-left: 0; + margin-right: 0; + } +} + +@media screen and (max-width: 560px) { + .gdpr-banner { + padding: 10px; + } + + .gdpr-banner__dismiss { + position: absolute; + right: 10px; + top: -13px; + } + + .gdpr-banner__button--dismiss { + background: #333; + height: 26px; + width: 26px; + padding-bottom: 1px; + border: 1px solid #fff; + border-radius: 50%; + } +} + +@media screen and (max-width: 300px) { + .gdpr-banner__button { + width: 100%; + } + + .gdpr-banner__opt-out, .gdpr-banner__opt-in { + -webkit-box-flex: 100%; + -webkit-flex: 100%; + -ms-flex: 100%; + flex: 100%; + margin-top: 5px; + } +} + +@media screen and (max-width: 600px) { + .gdpr-banner__column--2 { + margin-top: 8px; + } +} + +@media screen and (max-width: 900px) { + .gdpr-banner { + text-align: center; + } + + .gdpr-banner__wrapper { + display: block; + } + + .gdpr-banner__settings { + margin-left: 0; + } + + .gdpr-banner__column--2 { + margin-top: 6px; + margin-left: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + } +} + +@media screen and (min-width: 900px) and (max-width: 1200px) { + .gdpr-banner__column--2 { + margin-right: 10px; + } +} + +@media screen and (min-width: 1200px) { + .gdpr-banner__button--dismiss { + margin-right: 10px; + } + + .gdpr-banner { + width: 100%; + } +} diff --git a/assets/styles/components/gdpr-manager.scss b/assets/styles/components/gdpr-manager.scss new file mode 100644 index 0000000..e07573d --- /dev/null +++ b/assets/styles/components/gdpr-manager.scss @@ -0,0 +1,403 @@ +.gdpr-cookie-manager { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +@media screen and (max-width: 1100px) { + .gdpr-cookie-manager { + display: block; + } +} + +.gdpr-cookie-manager__groups { + -webkit-box-flex: 0; + -ms-flex: 0 0 300px; + flex: 0 0 300px; +} + +.gdpr-cookie-manager__group-list { + list-style: none; + margin: 0; + padding: 0; +} + +.gdpr-cookie-manager__consent_expiry { + display: block; + width: 100%; + padding: .15em .5em; + font-size: .9rem; +} + +.gdpr-cookie-manager .gdpr-cookie-manager__group-list a { + text-decoration: none; +} + +.gdpr-cookie-manager__group-list li { + margin: 0; + padding: 0; + + &:first-child .gdpr-cookie-manager__group-list-entry { + border-top: 1px solid #e3e3e3; + } +} + +.gdpr-cookie-manager__group-list-entry { + display: block; + padding: .5em 1em; + border-bottom: 1px solid #e3e3e3; + border-left: 1px solid #e3e3e3; + position: relative; + color: inherit; + box-shadow: inset -5px 0px 5px rgba(#000, .08); +} + +.gdpr-cookie-manager__group-list-entry--active { + background-color: #fff; + box-shadow: none; + &:after { + content: ""; + top: 0; + right: -2px; + width: 4px; + height: 100%; + position: absolute; + background-color: #fff; + } +} + +@media screen and (max-width: 1100px) { + .gdpr-cookie-manager__group-list-entry { + border-right: 1px solid #e3e3e3; + } + + .gdpr-cookie-manager__group-list-entry--active { + border-right: 1px solid #e3e3e3; + + &:after { + display: none; + } + } +} + +.gdpr-cookie-manager__group-list-name { + font-weight: bold; +} + +.gdpr-cookie-manager__group-list-description { + font-size: .85rem; + color: #666; + + p { + margin: 0; + } +} + +.gdpr-cookie-manager__content { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + padding: 1em 2em; + border: 1px solid #e3e3e3; + background: white; + + p { + margin: 0; + } +} + +.gdpr-cookie-manager__cookie-group { + display: none; +} + +.gdpr-cookie-manager__cookie-group--active { + display: block; +} + +.gdpr-cookie-manager__cookie { + margin-bottom: 2rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + + &:last-child { + margin-bottom: 0; + } +} + +@media screen and (max-width: 980px) { + .gdpr-cookie-manager__cookie { + flex-direction: column; + } +} + +.gdpr-cookie-manager__cookie-name { + margin: 0; + font-size: 1rem; +} + +.gdpr-cookie-manager__cookie-description { + font-size: 1rem; +} + +.gdpr-cookie-manager__cookie-toggle { + -webkit-box-flex: 0; + -ms-flex: 0 0 100px; + flex: 0 0 100px; + margin-top: .5rem; +} + +@media screen and (max-width: 980px) { + .gdpr-cookie-manager__cookie-toggle { + -webkit-box-flex: 0; + -ms-flex: 0 0 60px; + flex: 0 0 60px; + } +} + +.gdpr-cookie-manager__cookie-details { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.gdpr-cookie-manager__cookie-levels { + margin-top: 1rem; + + input[type="range"] { + width: 100%; + } +} + +.gdpr-cookie-manager__cookie-level { + display: none; + margin-top: 1rem; +} + +.gdpr-cookie-manager__cookie-level--active { + display: block; +} + +.gdpr-cookie-manager__cookie-level-name { + font-weight: bold; + font-size: .8rem; + margin: 0; +} + +.gdpr-cookie-manager__cookie-level-description { + font-size: .8rem; + + p { + margin: 0; + } +} + +.gdpr-cookie-manager__submit-button { + background: #e0e0e0; + display: block; + outline: none; + border: none; + margin: 0; + padding: .5em 1em; + width: 100%; + cursor: pointer; + font-weight: bold; +} + +.gdpr-cookie-manager__cookie-item-details { + margin-top: 2rem; +} + +.gdpr-cookie-manager__cookie-items { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + flex-wrap: wrap; +} + +.gdpr-cookie-manager__cookie-item { + position: relative; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + padding-right: 2rem; + + &:after { + content: ""; + position: absolute; + top: 0; + right: 1rem; + bottom: 0; + width: 1px; + display: block; + background: #e3e3e3; + } + + &:nth-child(2n):after { + content: none; + } + + &:nth-child(1n + 3):before { + content: ""; + display: block; + height: 1px; + margin: 1rem 0; + background: #e3e3e3; + } +} + +@media screen and (max-width: 980px) { + .gdpr-cookie-manager__cookie-item { + -ms-flex: 0 0 100%; + flex: 0 0 100%; + margin-bottom: 1rem; + padding-bottom: 1rem; + border-bottom: 1px solid #e3e3e3; + + &:last-child { + border-bottom: none; + } + + &:before, &:after { + content: none !important; + } + } +} + +.gdpr-cookie-manager__contact-details { + display: flex; + flex-wrap: wrap; + margin-top: 2rem; + + div { + flex: 0 0 50%; + } +} + +@media screen and (max-width: 980px) { + .gdpr-cookie-manager__contact-details div { + flex: 0 0 100%; + margin-bottom: 1rem; + } +} + +.gdpr-cookie-manager__contact-details-heading { + margin: 0; + font-size: 1rem; +} + +.gdpr-cookie-manager__contact-list { + list-style: none; + margin: 0; + padding: 0; +} + +/** + * @credits to Mauricio Allende + * @see https://codepen.io/mallendeo/pen/eLIiG + */ + +.tgl { + -webkit-box-sizing: border-box; + box-sizing: border-box; + + &:after, &:before { + -webkit-box-sizing: border-box; + box-sizing: border-box; + } + + * { + -webkit-box-sizing: border-box; + box-sizing: border-box; + + &:after, &:before { + -webkit-box-sizing: border-box; + box-sizing: border-box; + } + } + + + .tgl-btn { + -webkit-box-sizing: border-box; + box-sizing: border-box; + } + + &::-moz-selection, &:after::-moz-selection, &:before::-moz-selection { + background: none; + } + + * { + &::-moz-selection, &:after::-moz-selection, &:before::-moz-selection { + background: none; + } + } + + + .tgl-btn::-moz-selection, &::selection, &:after::selection, &:before::selection { + background: none; + } + + * { + &::selection, &:after::selection, &:before::selection { + background: none; + } + } + + + .tgl-btn { + &::selection { + background: none; + } + + outline: 0; + display: block; + width: 4em; + height: 2em; + position: relative; + cursor: pointer; + background: #e0e0e0; + border-radius: 2em; + padding: 2px; + -webkit-transition: all .4s ease; + -o-transition: all .4s ease; + transition: all .4s ease; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + &:after, &:before { + position: relative; + display: block; + content: ""; + width: 50%; + height: 100%; + } + + &:after { + left: 0; + border-radius: 50%; + background: #fff; + -webkit-transition: all .2s ease; + -o-transition: all .2s ease; + transition: all .2s ease; + } + + &:before { + display: none; + } + } + + display: none; + + &:checked { + + .tgl-btn { + &:after { + left: 50%; + } + + background: $global-primary-background; + } + + &:disabled + .tgl-btn { + background: $global-primary-background; + cursor: not-allowed; + } + } +} diff --git a/assets/styles/styles.scss b/assets/styles/styles.scss index 7070ba9..779a3f6 100644 --- a/assets/styles/styles.scss +++ b/assets/styles/styles.scss @@ -3,3 +3,6 @@ @import "fonts"; @import "general"; +@import "layout"; +@import "navigation"; +@import "components/components"; diff --git a/assets/styles/variables.scss b/assets/styles/variables.scss index a011a9c..1806be1 100644 --- a/assets/styles/variables.scss +++ b/assets/styles/variables.scss @@ -1,5 +1,5 @@ -$global-primary-background: #8618c2; -$global-secondary-background: #055554; +$global-primary-background: $primaryColor; +$global-secondary-background: $secondaryColor; $global-font-family: 'Open Sans', sans-serif; $base-body-font-weight: 300; @@ -10,9 +10,9 @@ $offcanvas-bar-width: 340px; $global-link-color: lighten($global-primary-background, 10); $dropdown-padding: 10px; +$global-link-color: $global-primary-background; +$global-link-hover-color: $global-primary-background; @import "uikit/variables-theme"; $dropdown-nav-font-size: $global-font-size; -$section-padding-vertical: $global-margin; -$section-padding-vertical-m: $global-medium-margin; diff --git a/content/general/gdpr.de.htm b/content/general/gdpr.de.htm new file mode 100755 index 0000000..b98b4c9 --- /dev/null +++ b/content/general/gdpr.de.htm @@ -0,0 +1,3 @@ +

+ Wir verwenden Cookies um Inhalte zu personalisieren und unsere Besucherstatistik zu führen. Bitte entscheiden Sie sich, ob Sie unsere Cookies akzeptieren möchten. +

\ No newline at end of file diff --git a/content/static-pages/dings.htm b/content/static-pages/dings.htm new file mode 100755 index 0000000..1b98a59 --- /dev/null +++ b/content/static-pages/dings.htm @@ -0,0 +1,9 @@ +[viewBag] +title = "Dings" +url = "/dings" +layout = "static-default" +is_hidden = 0 +navigation_hidden = 0 +sections[0][title] = "Menno" +sections[0][_group] = "title" +== \ No newline at end of file diff --git a/layouts/default.htm b/layouts/default.htm old mode 100644 new mode 100755 index e63fa9f..1099b51 --- a/layouts/default.htm +++ b/layouts/default.htm @@ -1,41 +1,42 @@ -description = "Standard-Layout" - -[contenteditor] - -[imageuploader] - -[localePicker] -forceUrl = 0 - -[cookieBanner] -include_css = 1 -update_partial = "gdpr" -update_selector = "#gdpr-reload" -cookie_manager_page = "cookies" - -[consentManager] -include_assets = 1 -== - - - - {% partial 'components/meta.htm' %} - {% partial 'components/styles.htm' %} - - - -
- {% partial 'components/navigation' %} - {% partial 'components/keyvisual' %} -
- -
- {% page %} -
- - - {% partial 'components/scripts.htm' %} - - +description = "Standard-Layout" + +[contenteditor] + +[imageuploader] + +[localePicker] +forceUrl = 0 + +[cookieBanner] +include_css = 0 +update_partial = "components/cookie_js" +update_selector = "#gdpr-reload" +cookie_manager_page = "cookies" + +[cookieManager] +include_css = 0 +include_js = 1 +deferred = 0 +== + + + + {% partial 'components/meta.htm' %} + {% partial 'components/styles.htm' %} + + + +
+ {% partial 'components/navigation' %} + {% partial 'components/keyvisual' %} +
+ +
+ {% page %} +
+ + {% partial "components/footer" %} + {% partial "components/cookies" %} + {% partial 'components/scripts.htm' %} + + diff --git a/layouts/static-default.htm b/layouts/static-default.htm new file mode 100644 index 0000000..1aa05f3 --- /dev/null +++ b/layouts/static-default.htm @@ -0,0 +1,31 @@ +description = "Standard-Layout" + +[staticPage] +useContent = 0 +default = 0 +== + + + + {% partial 'components/meta.htm' %} + {% partial 'components/styles.htm' %} + + + +
+ {% partial 'components/navigation' %} + {% partial 'components/keyvisual' %} +
+ +
+ {variable name="sections" type="repeater" tab="Segments" prompt="Seiten-Element hinzufügen" groups="themes/kosmoskosmos-starter/meta/static-types.yaml"} {/variable} + + {% for section in sections %} + {{section | json_encode}} + {% endfor %} +
+ +{% partial "components/footer" %} +{% partial 'components/scripts.htm' %} + + diff --git a/meta/menus/footer-social.yaml b/meta/menus/footer-social.yaml new file mode 100755 index 0000000..5bfee45 --- /dev/null +++ b/meta/menus/footer-social.yaml @@ -0,0 +1,37 @@ +items: + - + title: Discord + nesting: null + type: url + url: https://discord.gg/xxxxxxx + code: icon + reference: null + cmsPage: null + replace: null + viewBag: + isHidden: '0' + cssClass: discord + isExternal: '1' + - + title: Twitter + type: url + url: https://twitter.com/xxxxxxx + code: icon + viewBag: + isHidden: '0' + cssClass: twitter + isExternal: '1' + - + title: Instagram + nesting: null + type: url + url: https://www.instagram.com/xxxxxxx/ + code: icon + reference: null + cmsPage: null + replace: null + viewBag: + isHidden: '0' + cssClass: instagram + isExternal: '1' +name: Footer-Social diff --git a/meta/menus/footer.yaml b/meta/menus/footer.yaml new file mode 100755 index 0000000..f4d4b81 --- /dev/null +++ b/meta/menus/footer.yaml @@ -0,0 +1,59 @@ +items: + - + title: HOME + nesting: null + type: cms-page + url: null + code: '' + reference: home + cmsPage: null + replace: null + viewBag: + isHidden: '0' + cssClass: '' + isExternal: '0' + - + title: PRESSE + nesting: null + type: url + url: /press-kit + code: '' + reference: null + cmsPage: null + replace: null + viewBag: + isHidden: '0' + cssClass: '' + isExternal: '0' + - + title: IMPRESSUM + nesting: null + type: url + url: /imprint + code: '' + reference: null + cmsPage: null + replace: null + viewBag: + isHidden: '0' + cssClass: '' + isExternal: '0' + - + title: DATENSCHUTZ + nesting: null + type: cms-page + reference: privacy + viewBag: + isHidden: '0' + cssClass: '' + isExternal: '0' + - + title: COOKIE-EINSTELLUNGEN + type: cms-page + code: uk-toggle + reference: cookies + viewBag: + isHidden: '0' + cssClass: '' + isExternal: '0' +name: Footer diff --git a/meta/menus/hauptmenue.yaml b/meta/menus/hauptmenue.yaml deleted file mode 100644 index 5cd684e..0000000 --- a/meta/menus/hauptmenue.yaml +++ /dev/null @@ -1,84 +0,0 @@ -name: Hauptmenü -items: - - - title: Start - type: cms-page - code: '' - reference: home - viewBag: - locale: - en: - title: Home - url: '' - simple: - title: '' - url: '' - isHidden: '0' - cssClass: '' - isExternal: '0' - - - title: Seite1 - nesting: '' - type: cms-page - url: '' - code: '' - reference: page1 - cmsPage: '' - replace: '' - viewBag: - locale: - en: - title: Page1 - url: '' - de: - title: Seite1 - url: '' - visibleIfLoggedIn: '0' - visibleIfNotLoggedIn: '0' - isHidden: '0' - cssClass: '' - isExternal: '0' - - - title: Seite2 - nesting: null - type: cms-page - url: null - code: '' - reference: page2 - cmsPage: null - replace: null - viewBag: - locale: - en: - title: Page2 - url: '' - de: - title: Seite2 - url: '' - visibleIfLoggedIn: '0' - visibleIfNotLoggedIn: '0' - isHidden: '0' - cssClass: '' - isExternal: '0' - - - title: Seite3 - nesting: '' - type: cms-page - url: '' - code: '' - reference: page3 - cmsPage: '' - replace: '' - viewBag: - locale: - en: - title: Page3 - url: '' - de: - title: Seite3 - url: '' - visibleIfLoggedIn: '0' - visibleIfNotLoggedIn: '0' - isHidden: '0' - cssClass: '' - isExternal: '0' diff --git a/meta/menus/main.yaml b/meta/menus/main.yaml new file mode 100755 index 0000000..1294e0f --- /dev/null +++ b/meta/menus/main.yaml @@ -0,0 +1,33 @@ +name: Hauptmenü +items: + - + title: Example + nesting: null + type: cms-page + url: null + code: '' + reference: example + cmsPage: null + replace: null + viewBag: + locale: + en: + title: Example + url: '' + de: + title: Beispiel + url: '' + isHidden: '0' + cssClass: '' + isExternal: '0' + - + title: Dings + nesting: 0 + type: static-page + code: '' + reference: dings + replace: 0 + viewBag: + isHidden: '0' + cssClass: '' + isExternal: '0' diff --git a/meta/static-pages.yaml b/meta/static-pages.yaml old mode 100644 new mode 100755 index 69beb95..0811404 --- a/meta/static-pages.yaml +++ b/meta/static-pages.yaml @@ -1 +1,2 @@ -static-pages: { } +static-pages: + dings: { } diff --git a/meta/static-types.yaml b/meta/static-types.yaml new file mode 100644 index 0000000..2aadef3 --- /dev/null +++ b/meta/static-types.yaml @@ -0,0 +1,45 @@ +title: + name: Titre + description: Champs texte + icon: icon-header + fields: + title: + label: Titre principal + type: text + +subtitle: + name: Sous-titre + description: Champs texte + icon: icon-italic + fields: + subtitle: + label: "Sous-titre (phrase d'accroche)" + type: text + +content: + name: Contenu textuel + description: Textarea + icon: icon-paragraph + fields: + text_area: + label: "Contenu" + type: richeditor + toolbarButtons: bold|italic|underline|strikeThrough|subscript|superscript|fontFamily|fontSize|color|emoticons|inlineStyle|paragraphStyle|paragraphFormat|align|formatOL|formatUL|outdent|indent|quote|insertHR|insertLink|insertTable|undo|redo|clearFormatting|selectAll|html|fullscreen + size: huge + span: full + text_area_position: + label: "Position du contenu sur la page" + type: radio + span: left + default: none + options: + none: [Aucune, Le contenu prendra toute la largeur de la page.] + left: [Aligné à gauche, Le contenu sera placé à gauche des autres éléments.] + right: [Aligné à droite, Le contenu sera placé à droite des autres éléments.] + text_area_image: + label: "Affiche une image liée" + commentAbove: "Si vous souhaitez ajouté une image à ce contenu, merci de l'ajouter ici" + type: mediafinder + mode: image + span: right + imageWidth: 40% diff --git a/pages/cookies.htm b/pages/cookies.htm index f115823..a186ef7 100644 --- a/pages/cookies.htm +++ b/pages/cookies.htm @@ -3,8 +3,11 @@ layout = "default" is_hidden = 0 -[cookieManager] +[cookieManager cookieManagerPage] +include_css = 0 +include_js = 1 +deferred = 0 ==
- {% component 'cookieManager' %} + {% component 'cookieManagerPage' %}
diff --git a/pages/page3.htm b/pages/example.htm similarity index 93% rename from pages/page3.htm rename to pages/example.htm index 4cbf8fb..29ac4ce 100644 --- a/pages/page3.htm +++ b/pages/example.htm @@ -1,11 +1,11 @@ -title = "Seite3" -url = "/page3" +title = "Beispiel" +url = "/example" layout = "default" is_hidden = 0 [viewBag] -localeTitle[en] = "Page3" -localeTitle[de] = "Seite3" +localeTitle[en] = "Example" +localeTitle[de] = "Beispiel" ==
diff --git a/pages/imprint.htm b/pages/imprint.htm new file mode 100644 index 0000000..73ba685 --- /dev/null +++ b/pages/imprint.htm @@ -0,0 +1,16 @@ +title = "Impressum" +url = "/imprint" +layout = "default" +is_hidden = 0 + +[viewBag] +localeTitle[en] = "Imprint" +localeUrl[en] = "/imprint" +localeTitle[de] = "Impressum" +localeUrl[de] = "/impressum" + +[imprint] +== +
+ {% component "imprint" %} +
diff --git a/pages/page1.htm b/pages/page1.htm deleted file mode 100644 index 5f400b6..0000000 --- a/pages/page1.htm +++ /dev/null @@ -1,36 +0,0 @@ -title = "Seite1" -url = "/page1" -layout = "default" -is_hidden = 0 - -[viewBag] -localeTitle[en] = "Page1" -localeTitle[de] = "Seite1" - -== -
- {% component 'contenteditor' file = this.page.id~'/text1.htm' %} - -
-
-
-
- {% component 'imageuploader' item=this.page.id~'-img1' class="uk-width-1-1" size=700 tag="img" %} -
-
- {% component 'contenteditor' file=this.page.id~'/text2.htm' %} -
-
-
-
-
-
- {% component 'contenteditor' file=this.page.id~'/text3.htm' %} -
-
- {% component 'imageuploader' item=this.page.id~'-img2' class="uk-width-1-1" size=700 tag="img" %} -
-
-
-
-
diff --git a/pages/page2.htm b/pages/page2.htm deleted file mode 100644 index 4149900..0000000 --- a/pages/page2.htm +++ /dev/null @@ -1,19 +0,0 @@ -title = "Seite2" -url = "/page2" -layout = "default" -is_hidden = 0 -robot_index = "index" -robot_follow = "follow" - -[kosmosContactForm] -file = "contact.yaml" -hideOnSubmit = 1 -twoColumns = 1 -== -
-
- {% component 'contenteditor' file = this.page.id~'/text1.htm' %} -
- - {% component "kosmosContactForm" %} -
diff --git a/pages/privacy.htm b/pages/privacy.htm new file mode 100644 index 0000000..98403f4 --- /dev/null +++ b/pages/privacy.htm @@ -0,0 +1,16 @@ +title = "Datenschutzerklärung" +url = "/privacy" +layout = "default" +is_hidden = 0 + +[viewBag] +localeTitle[en] = "Privacy" +localeUrl[en] = "/privacy" +localeTitle[de] = "Datenschutz" +localeUrl[de] = "/datenschutz" + +[privacy] +== +
+ {% component "privacy" %} +
diff --git a/partials/components/cookie_js.htm b/partials/components/cookie_js.htm new file mode 100644 index 0000000..b0b06e3 --- /dev/null +++ b/partials/components/cookie_js.htm @@ -0,0 +1,9 @@ +{# //execute code only if cookie allowed + +{% if gdprCookieAllowed('google') %} + +{% endif %} + +#} diff --git a/partials/components/cookies.htm b/partials/components/cookies.htm new file mode 100644 index 0000000..a8d6c2e --- /dev/null +++ b/partials/components/cookies.htm @@ -0,0 +1,6 @@ +{% component 'cookieBanner' %} + +
+ {% partial "components/cookie_js" %} +
+ diff --git a/partials/components/footer.htm b/partials/components/footer.htm index 487fb8d..9708e1d 100644 --- a/partials/components/footer.htm +++ b/partials/components/footer.htm @@ -1,10 +1,24 @@ -[viewBag] +[staticMenu footer] +code = "footer" + +[staticMenu footerSocial] +code = "footer-social" == -{% component 'cookieBanner' %} -
-
- {{'Copyright'|_}} {{app_name}} {{ 'now' | date('Y') }} +
+
+ + + +
{{'Copyright'|_}} {{app_name}} {{ 'now' | date('Y') }}
-
+ diff --git a/partials/components/gdpr.htm b/partials/components/gdpr.htm deleted file mode 100644 index 39f5f64..0000000 --- a/partials/components/gdpr.htm +++ /dev/null @@ -1,3 +0,0 @@ -
- {% partial 'components/gdpr' %} -
diff --git a/partials/components/menu-mobile.htm b/partials/components/menu-mobile.htm new file mode 100644 index 0000000..4073561 --- /dev/null +++ b/partials/components/menu-mobile.htm @@ -0,0 +1,38 @@ + diff --git a/partials/components/menu.htm b/partials/components/menu.htm new file mode 100644 index 0000000..ea84814 --- /dev/null +++ b/partials/components/menu.htm @@ -0,0 +1,43 @@ + diff --git a/partials/components/navigation.htm b/partials/components/navigation.htm index 361c922..026dbed 100644 --- a/partials/components/navigation.htm +++ b/partials/components/navigation.htm @@ -1,94 +1,36 @@ [viewBag] [staticMenu headerMenu] -code = "hauptmenue" +code = "main" == - -
+
-
-
- - -
-
- - +
+
+ {% partial 'components/menu-mobile' menu=headerMenu class="main" %} +
-
+ diff --git a/partials/components/scripts.htm b/partials/components/scripts.htm index e46e73a..72293ec 100644 --- a/partials/components/scripts.htm +++ b/partials/components/scripts.htm @@ -1,8 +1,8 @@ {% framework extras %} diff --git a/partials/cookiebanner/default.htm b/partials/cookiebanner/default.htm index 6360429..b0e92e5 100644 --- a/partials/cookiebanner/default.htm +++ b/partials/cookiebanner/default.htm @@ -1,7 +1,10 @@ {% if not __SELF__.hide %} -
-
+
+ +
+
{% endif %} diff --git a/partials/cookiebanner/inner.htm b/partials/cookiebanner/inner.htm index a491853..a34bf4a 100644 --- a/partials/cookiebanner/inner.htm +++ b/partials/cookiebanner/inner.htm @@ -1,6 +1,6 @@
-
- {% partial __SELF__ ~ '::message' %} +
+ {% component 'contenteditor' file='general/gdpr.htm' %}
@@ -8,4 +8,4 @@ {% partial __SELF__ ~ '::optout' %} {% partial __SELF__ ~ '::optin' %} {% partial __SELF__ ~ '::dismiss' %} -
\ No newline at end of file +
diff --git a/partials/cookiebanner/message.htm b/partials/cookiebanner/message.htm deleted file mode 100644 index 41174bd..0000000 --- a/partials/cookiebanner/message.htm +++ /dev/null @@ -1,3 +0,0 @@ -
- {{ 'offline.gdpr::lang.cookie_banner.message' | trans }} -
diff --git a/partials/cookiebanner/optin.htm b/partials/cookiebanner/optin.htm index cc22145..54b60b1 100644 --- a/partials/cookiebanner/optin.htm +++ b/partials/cookiebanner/optin.htm @@ -5,7 +5,6 @@ class="uk-button uk-button-primary" data-request="onAccept" data-request-success="$('.gdpr-banner').remove()" - data-request-update="'{{ __SELF__.updatePartial }}' : '{{ __SELF__.updateSelector }}'" > {{ 'offline.gdpr::lang.cookie_banner.accept' | trans }} diff --git a/partials/cookiebanner/optout.htm b/partials/cookiebanner/optout.htm index d15b170..6fc0546 100644 --- a/partials/cookiebanner/optout.htm +++ b/partials/cookiebanner/optout.htm @@ -2,7 +2,7 @@ + + {# + + {{ 'offline.gdpr::lang.cookie_banner.advanced_settings' | trans }} + + #} +
diff --git a/partials/cookiemanager/submitbutton.htm b/partials/cookiemanager/submitbutton.htm new file mode 100644 index 0000000..1763710 --- /dev/null +++ b/partials/cookiemanager/submitbutton.htm @@ -0,0 +1,15 @@ +

+ + + +

+ diff --git a/partials/cookiemanager/toggle.htm b/partials/cookiemanager/toggle.htm new file mode 100644 index 0000000..7ed8050 --- /dev/null +++ b/partials/cookiemanager/toggle.htm @@ -0,0 +1,9 @@ + + \ No newline at end of file diff --git a/partials/cookiemanagerpage/cookie.htm b/partials/cookiemanagerpage/cookie.htm new file mode 100644 index 0000000..1cac834 --- /dev/null +++ b/partials/cookiemanagerpage/cookie.htm @@ -0,0 +1,26 @@ +{% set consent = __SELF__.consent %} +{% set isChecked = consent ? (cookie.code in consent | keys) : cookie.group.required %} +{% set selectedLevel = consent[cookie.code] | default(cookie.default_level | default(0)) %} + +
+
+ {% partial __SELF__ ~ '::toggle' cookie=cookie isChecked=isChecked isRequired=group.required %} +
+
+ +

{{ cookie.name }}

+
+ {{ html_clean(cookie.description | raw) | raw }} +
+ + {% if cookie.levels %} + {% partial __SELF__ ~ '::levels' + cookie=cookie + selectedLevel=selectedLevel + isChecked=isChecked + isRequired=group.required %} + {% endif %} + + {% partial __SELF__ ~ '::details' cookie=cookie %} +
+
diff --git a/partials/cookiemanagerpage/cookies.htm b/partials/cookiemanagerpage/cookies.htm new file mode 100644 index 0000000..c23faaa --- /dev/null +++ b/partials/cookiemanagerpage/cookies.htm @@ -0,0 +1,11 @@ +{% for group in groups %} +
+
+ {% for cookie in group.cookies %} + {% partial __SELF__ ~ '::cookie' cookie=cookie group=group %} + {% endfor %} +
+
+{% endfor %} \ No newline at end of file diff --git a/partials/cookiemanagerpage/default.htm b/partials/cookiemanagerpage/default.htm new file mode 100644 index 0000000..85bb00a --- /dev/null +++ b/partials/cookiemanagerpage/default.htm @@ -0,0 +1,21 @@ +{% if __SELF__.cookieGroups | length %} + {{ form_open({'method':'post' }) }} + +
+ {% partial __SELF__ ~ '::groups' groups=__SELF__.cookieGroups %} +
+ {% partial __SELF__ ~ '::cookies' groups=__SELF__.cookieGroups %} +
+
+ {% partial __SELF__ ~ '::submitbutton' %} + {{ form_close() }} + + {% if __SELF__.includeJs %} + {% put scripts %} + + {% endput %} + {% endif %} +{% endif %} + diff --git a/partials/cookiemanagerpage/details.htm b/partials/cookiemanagerpage/details.htm new file mode 100644 index 0000000..1139f3d --- /dev/null +++ b/partials/cookiemanagerpage/details.htm @@ -0,0 +1,59 @@ +
+ + {% if cookie.item_details | length > 0 %} +
+ {% for entry in cookie.item_details %} +
+

+ {{ 'offline.gdpr::lang.cookie.fields.cookie_levels.name' | trans }}: + {{ entry.detail_name }} +

+ {% if loop.first %} +

+ {{ 'offline.gdpr::lang.cookie.fields.cookie_levels.provider' | trans }}: + {{ cookie.provider }} +

+ {% endif %} +

+ {{ 'offline.gdpr::lang.cookie.fields.cookie_levels.expiry' | trans }}: + {{ entry.detail_expiry }} +

+

+ {{ 'offline.gdpr::lang.cookie.fields.cookie_levels.type' | trans }}: + {{ entry.detail_type }} +

+
+ {% endfor %} +
+ {% endif %} + +
+ {% if cookie.contact_details_dpo %} +
+

+ {{ 'offline.gdpr::lang.common.contact_details' | trans }} +

+
+ {{ html_clean(cookie.contact_details_dpo | raw) | raw}} +
+
+ {% endif %} + + {% if cookie.contact_links_dpo | length > 0 %} +
+

+ {{ 'offline.gdpr::lang.common.links' | trans }} +

+ +
+ {% endif %} +
+
diff --git a/partials/cookiemanagerpage/groups.htm b/partials/cookiemanagerpage/groups.htm new file mode 100644 index 0000000..e868c53 --- /dev/null +++ b/partials/cookiemanagerpage/groups.htm @@ -0,0 +1,19 @@ +
+ +
diff --git a/partials/cookiemanagerpage/levels.htm b/partials/cookiemanagerpage/levels.htm new file mode 100644 index 0000000..736879a --- /dev/null +++ b/partials/cookiemanagerpage/levels.htm @@ -0,0 +1,22 @@ +
+ + {% for level in cookie.levels %} +
+

+ {{ level.level_name }} +

+
+ {{ html_clean(level.level_description | raw) }} +
+
+ {% endfor %} +
\ No newline at end of file diff --git a/partials/cookiemanagerpage/modal.htm b/partials/cookiemanagerpage/modal.htm new file mode 100644 index 0000000..90f9ac0 --- /dev/null +++ b/partials/cookiemanagerpage/modal.htm @@ -0,0 +1,16 @@ + diff --git a/partials/cookiemanagerpage/scripts.htm b/partials/cookiemanagerpage/scripts.htm new file mode 100644 index 0000000..5e94f7f --- /dev/null +++ b/partials/cookiemanagerpage/scripts.htm @@ -0,0 +1,81 @@ +var manager = { + classes: { + content: 'gdpr-cookie-manager__cookie-group--active', + level: 'gdpr-cookie-manager__cookie-level--active', + list: 'gdpr-cookie-manager__group-list-entry--active', + disabled: 'gdpr-cookie-manager__cookie--disabled', + }, + init: function () { + this.addGroupTabEvents(); + this.addSliderEvents(); + this.addToggleEvents(); + }, + addGroupTabEvents: function () { + var self = this + this._eachElement('[data-handle-group-id]', function (handler) { + handler.addEventListener('click', function (e) { + e.preventDefault() + self.resetState(self.classes.content) + self.resetState(self.classes.list) + handler.classList.add(self.classes.list) + var id = handler.dataset.handleGroupId + var target = document.querySelector('[data-group-id="' + id + '"]') + if (target) { + target.classList.add(self.classes.content) + } + }) + }); + }, + addSliderEvents: function () { + var self = this + this._eachElement('[data-handle-cookie-slider]', function (slider) { + slider.addEventListener('input', function (e) { + e.preventDefault() + self.resetState(self.classes.level, slider.parentNode) + var id = slider.dataset.handleCookieSlider + slider.value; + var target = document.querySelector('[data-cookie-level="' + id + '"]') + if (target) { + target.classList.add(self.classes.level) + } + }) + }); + }, + addToggleEvents: function () { + var self = this + this._eachElement('.js-cookie-toggle', function (toggle) { + var levels = toggle.parentNode.parentNode.querySelector('.gdpr-cookie-manager__cookie-levels') + if (!levels) { + return + } + toggle.addEventListener('change', function (e) { + e.preventDefault() + if (toggle.checked) { + levels.style.display = 'block' + toggle.parentNode.parentNode.classList.remove(self.classes.disabled) + } else { + levels.style.display = 'none' + toggle.parentNode.parentNode.classList.add(self.classes.disabled) + } + }) + }) + }, + resetState: function (cls, base) { + if (! base) base = document + var visible = base.querySelectorAll('.' + cls) + if (visible) { + Array.prototype.forEach.call(visible, function (element) { + element.classList.remove(cls) + }); + } + }, + _eachElement: function (selector, callback) { + var elements = document.querySelectorAll(selector) + if (elements) { + Array.prototype.forEach.call(elements, callback); + } + } +} + +document.addEventListener('DOMContentLoaded', function() { + manager.init(); +}); diff --git a/partials/cookiemanagerpage/settingsbutton.htm b/partials/cookiemanagerpage/settingsbutton.htm new file mode 100644 index 0000000..3e7c8b3 --- /dev/null +++ b/partials/cookiemanagerpage/settingsbutton.htm @@ -0,0 +1,12 @@ +
+ + + {# + + {{ 'offline.gdpr::lang.cookie_banner.advanced_settings' | trans }} + + #} +
diff --git a/partials/cookiemanagerpage/submitbutton.htm b/partials/cookiemanagerpage/submitbutton.htm new file mode 100644 index 0000000..1763710 --- /dev/null +++ b/partials/cookiemanagerpage/submitbutton.htm @@ -0,0 +1,15 @@ +

+ + + +

+ diff --git a/partials/cookiemanagerpage/toggle.htm b/partials/cookiemanagerpage/toggle.htm new file mode 100644 index 0000000..7ed8050 --- /dev/null +++ b/partials/cookiemanagerpage/toggle.htm @@ -0,0 +1,9 @@ + + \ No newline at end of file diff --git a/theme.yaml b/theme.yaml index cb3c8bc..c1c3236 100644 --- a/theme.yaml +++ b/theme.yaml @@ -5,12 +5,24 @@ authorCode: "KosmosKosmos" code: "Starter" homepage: 'https://kosmoskosmos.de' require: - - RainLab.Translate +# - RainLab.Translate - RainLab.Pages - Panakour.Translate - Luketowers.Essentialvars - - ToughDeveloper.ImageResizer +# - ToughDeveloper.ImageResizer # - DasRoteQuadrat.BetterContentEditor # - Indikator.News - - JanVince.SmallContactForm +# - JanVince.SmallContactForm +form: + fields: + primary_color: + label: Hauptfarbe + type: colorpicker + default: 8618c2 + assetVar: 'primaryColor' + secondary_color: + label: Zweitfarbe + type: colorpicker + default: 055554 + assetVar: 'secondaryColor'