diff --git a/mandelstudio/static/mandelstudio/css/layout_overrides.css b/mandelstudio/static/mandelstudio/css/layout_overrides.css index e82263b..72b1dd2 100644 --- a/mandelstudio/static/mandelstudio/css/layout_overrides.css +++ b/mandelstudio/static/mandelstudio/css/layout_overrides.css @@ -1,2 +1 @@ -header .header-right{display:flex;align-items:center;gap:0.5rem}header .header-right .language-dropdown,header .header-right .basket-dropdown,header .header-right>a.user-button.menu-circle{flex:0 0 40px;width:40px;height:40px;min-width:40px;min-height:40px;margin:0 !important;padding:0 !important;display:flex;align-items:center;justify-content:center;box-sizing:border-box}header .header-right .menu-circle{width:40px;height:40px;min-width:40px;min-height:40px;padding:0;display:flex;align-items:center;justify-content:center}header .header-right .menu-circle i,header .header-right .menu-circle svg{display:block;line-height:1}header .language-dropdown .dropdown-toggle{width:40px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center}header .language-dropdown .dropdown-toggle::after{display:none}header .language-dropdown .language-icon{width:18px;height:18px;font-size:18px;line-height:18px;color:#fff}header .language-dropdown .language-chevron{display:none !important}header .basket-dropdown .dropdown-toggle svg{width:18px;height:18px;font-size:18px;line-height:18px}#cookie_popup_body.cookie-consent-overlay{position:fixed;inset:0;z-index:1080;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,0.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}#cookie_popup_body.cookie-consent-overlay .cookie-consent-modal{width:100%;max-width:680px;padding:24px;border-radius:16px;border:1px solid rgba(255,255,255,0.35);background:rgba(255,255,255,0.22);box-shadow:0 24px 64px rgba(0,0,0,0.25);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}#cookie_popup_body.cookie-consent-overlay .cookie-consent-panel{display:none}#cookie_popup_body.cookie-consent-overlay .cookie-consent-panel.is-active{display:block}#cookie_popup_body.cookie-consent-overlay .cookie-banner-title{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:24px;font-weight:700;line-height:1.2;color:#ffffff}#cookie_popup_body.cookie-consent-overlay #cookie_popup_content p{margin:0;font-size:17px;line-height:1.5;color:rgba(255,255,255,0.95)}#cookie_popup_body.cookie-consent-overlay .cookie-consent-actions{display:flex;gap:12px;margin-top:18px}#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton,#cookie_popup_body.cookie-consent-overlay #cookie_popup_settingsToggle,#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton_settings,#cookie_popup_body.cookie-consent-overlay #cookie_model_saveButton{flex:1 1 0;height:46px;border-radius:10px;border:1px solid transparent;font-size:17px;font-weight:600;line-height:1;transition:background-color 140ms ease, border-color 140ms ease, color 140ms ease}#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton{background:#2f80ed;border-color:#2f80ed;color:#fff}#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton:hover,#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton:focus-visible{background:#1f6fd8;border-color:#1f6fd8}#cookie_popup_body.cookie-consent-overlay #cookie_popup_settingsToggle,#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton_settings{background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.48);color:#fff}#cookie_popup_body.cookie-consent-overlay #cookie_popup_settingsToggle:hover,#cookie_popup_body.cookie-consent-overlay #cookie_popup_settingsToggle:focus-visible,#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton_settings:hover,#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton_settings:focus-visible{background:rgba(255,255,255,0.22)}#cookie_popup_body.cookie-consent-overlay #cookie_model_saveButton{background:#2f80ed;border-color:#2f80ed;color:#fff}#cookie_popup_body.cookie-consent-overlay #cookie_model_saveButton:hover,#cookie_popup_body.cookie-consent-overlay #cookie_model_saveButton:focus-visible{background:#1f6fd8;border-color:#1f6fd8}#cookie_popup_body.cookie-consent-overlay .cookie-consent-back{border:0;background:transparent;color:rgba(255,255,255,0.95);display:inline-flex;align-items:center;gap:8px;padding:0;margin-bottom:10px;font-size:14px;font-weight:600}#cookie_popup_body.cookie-consent-overlay .cookie-consent-hint{margin-top:10px;font-size:13px;line-height:1.4;color:rgba(255,255,255,0.82)}@media (max-width: 640px){#cookie_popup_body.cookie-consent-overlay{padding:12px}#cookie_popup_body.cookie-consent-overlay .cookie-consent-modal{padding:18px;border-radius:14px}#cookie_popup_body.cookie-consent-overlay .cookie-banner-title{font-size:21px}#cookie_popup_body.cookie-consent-overlay #cookie_popup_content p{font-size:15px}#cookie_popup_body.cookie-consent-overlay .cookie-consent-actions{flex-direction:column}} - +header .header-right{display:flex;align-items:center;gap:0.5rem}header .header-right .language-dropdown,header .header-right .basket-dropdown,header .header-right>a.user-button.menu-circle{flex:0 0 40px;width:40px;height:40px;min-width:40px;min-height:40px;margin:0 !important;padding:0 !important;display:flex;align-items:center;justify-content:center;box-sizing:border-box}header .header-right .menu-circle{width:40px;height:40px;min-width:40px;min-height:40px;padding:0;display:flex;align-items:center;justify-content:center}header .header-right .menu-circle i,header .header-right .menu-circle svg{display:block;line-height:1}header .language-dropdown .dropdown-toggle{width:40px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center}header .language-dropdown .dropdown-toggle::after{display:none}header .language-dropdown .language-icon{width:18px;height:18px;font-size:18px;line-height:18px;color:#fff}header .language-dropdown .language-chevron{display:none !important}header .basket-dropdown .dropdown-toggle svg{width:18px;height:18px;font-size:18px;line-height:18px}#cookie_popup_body.cookie-consent-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,0.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}#cookie_popup_body.cookie-consent-overlay .cookie-consent-modal{width:100%;max-width:680px;padding:24px;border-radius:16px;border:1px solid rgba(255,255,255,0.35);background:rgba(255,255,255,0.22);box-shadow:0 24px 64px rgba(0,0,0,0.25);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);position:relative;z-index:10000}#cookie_popup_body.cookie-consent-overlay .cookie-consent-panel{display:none}#cookie_popup_body.cookie-consent-overlay .cookie-consent-panel.is-active{display:block}#cookie_popup_body.cookie-consent-overlay .cookie-banner-title{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:24px;font-weight:700;line-height:1.2;color:#ffffff}#cookie_popup_body.cookie-consent-overlay #cookie_popup_content p{margin:0;font-size:17px;line-height:1.5;color:rgba(255,255,255,0.95)}#cookie_popup_body.cookie-consent-overlay .cookie-consent-actions{display:flex;gap:12px;margin-top:18px}#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton,#cookie_popup_body.cookie-consent-overlay #cookie_popup_settingsToggle,#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton_settings,#cookie_popup_body.cookie-consent-overlay #cookie_model_saveButton{flex:1 1 0;min-height:48px;height:auto;padding:12px 16px;border-radius:10px;border:1px solid transparent;font-size:17px;font-weight:600;line-height:1.2;transition:background-color 140ms ease, border-color 140ms ease, color 140ms ease}#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton{background:#2f80ed;border-color:#2f80ed;color:#fff}#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton:hover,#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton:focus-visible{background:#1f6fd8;border-color:#1f6fd8}#cookie_popup_body.cookie-consent-overlay #cookie_popup_settingsToggle,#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton_settings{background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.48);color:#fff}#cookie_popup_body.cookie-consent-overlay #cookie_popup_settingsToggle:hover,#cookie_popup_body.cookie-consent-overlay #cookie_popup_settingsToggle:focus-visible,#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton_settings:hover,#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton_settings:focus-visible{background:rgba(255,255,255,0.22)}#cookie_popup_body.cookie-consent-overlay #cookie_model_saveButton{background:#2f80ed;border-color:#2f80ed;color:#fff}#cookie_popup_body.cookie-consent-overlay #cookie_model_saveButton:hover,#cookie_popup_body.cookie-consent-overlay #cookie_model_saveButton:focus-visible{background:#1f6fd8;border-color:#1f6fd8}#cookie_popup_body.cookie-consent-overlay .cookie-consent-back{border:0;background:transparent;color:rgba(255,255,255,0.95);display:inline-flex;align-items:center;gap:8px;padding:0;margin-bottom:10px;font-size:14px;font-weight:600}#cookie_popup_body.cookie-consent-overlay .cookie-consent-hint{margin-top:10px;font-size:13px;line-height:1.4;color:rgba(255,255,255,0.82)}body.cookie-consent-open{overflow:hidden}body.cookie-consent-open .header-right,body.cookie-consent-open .theme-switcher-toggle,body.cookie-consent-open .wagtail-userbar,body.cookie-consent-open [class*="help"],body.cookie-consent-open [class*="assistant"],body.cookie-consent-open [class*="chat-widget"],body.cookie-consent-open [class*="cart"],body.cookie-consent-open [class*="basket"],body.cookie-consent-open [class*="floating"]{opacity:0 !important;pointer-events:none !important}@media (max-width: 991.98px){header .header-inner>.container{display:flex;flex-wrap:nowrap;align-items:center;column-gap:0.375rem;padding-top:0.625rem;padding-bottom:0.625rem}header .header-inner>.container>.navbar-brand{order:1;margin:0;flex:0 1 auto}header .header-inner>.container>.navbar-brand img{width:auto;height:auto;max-height:74px;max-width:190px}header .header-inner>.container>.header-right{order:2;margin-left:auto;flex:0 0 auto;gap:0.375rem}header .header-right .language-dropdown,header .header-right .basket-dropdown,header .header-right>a.user-button.menu-circle,header .header-right .menu-circle{width:36px;height:36px;min-width:36px;min-height:36px;flex-basis:36px}header .header-inner>.container>.navbar-toggler{order:3;margin-left:0.125rem;flex:0 0 auto}header .header-inner>.container>.navbar-collapse{order:4;display:none}header .header-inner>.container>.navbar-collapse.show,header .header-inner>.container>.navbar-collapse.collapsing{display:block;position:fixed;left:0;right:0;top:0;bottom:0;width:100%;height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;z-index:9000}header .header-inner .navbar-collapse .brand-wrapper{display:block}header .header-inner>.container>.navbar-collapse.show .brand-wrapper,header .header-inner>.container>.navbar-collapse.collapsing .brand-wrapper{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:auto;margin:0;z-index:2;text-align:center}header .header-inner>.container>.navbar-collapse.show .brand-wrapper .navbar-brand,header .header-inner>.container>.navbar-collapse.collapsing .brand-wrapper .navbar-brand{margin:0;display:inline-flex}header .header-inner>.container>.navbar-collapse.show .brand-wrapper img,header .header-inner>.container>.navbar-collapse.collapsing .brand-wrapper img{max-height:92px;width:auto}header .header-inner>.container>.navbar-collapse.show .navbar-nav,header .header-inner>.container>.navbar-collapse.collapsing .navbar-nav{padding-top:124px}header .header-inner>.container>.navbar-collapse.show .brand-wrapper::after,header .header-inner>.container>.navbar-collapse.collapsing .brand-wrapper::after{content:"";position:absolute;left:-80px;right:-80px;bottom:-14px;border-bottom:1px solid rgba(15,23,42,0.08)}header .header-right,header .header-right .basket-dropdown,header .header-right .menu-circle{position:relative;z-index:100}}@media (max-width: 991.98px){body.mobile-menu-open header .header-inner>.container>.navbar-brand{opacity:0;pointer-events:none}body.mobile-menu-open .header-right,body.mobile-menu-open .theme-switcher-toggle,body.mobile-menu-open .wagtail-userbar,body.mobile-menu-open [class*="help"],body.mobile-menu-open [class*="assistant"],body.mobile-menu-open [class*="chat-widget"],body.mobile-menu-open [class*="cart"],body.mobile-menu-open [class*="basket"],body.mobile-menu-open [class*="floating"]{opacity:0 !important;pointer-events:none !important}}@media (max-width: 640px){#cookie_popup_body.cookie-consent-overlay{padding:12px 14px 14px;padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:calc(14px + env(safe-area-inset-bottom))}#cookie_popup_body.cookie-consent-overlay .cookie-consent-modal{max-width:420px;max-height:82vh;overflow-y:auto;padding:18px 16px;border-radius:14px}#cookie_popup_body.cookie-consent-overlay .cookie-banner-title{margin-bottom:12px;font-size:21px}#cookie_popup_body.cookie-consent-overlay #cookie_popup_content p{font-size:16px;line-height:1.45}#cookie_popup_body.cookie-consent-overlay .cookie-consent-actions{flex-direction:column;gap:10px;margin-top:16px}#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton,#cookie_popup_body.cookie-consent-overlay #cookie_popup_settingsToggle,#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton_settings,#cookie_popup_body.cookie-consent-overlay #cookie_model_saveButton{width:100%;font-size:16px}#cookie_popup_body.cookie-consent-overlay .cookie-consent-hint{margin-top:12px;font-size:13px}} diff --git a/mandelstudio/static/mandelstudio/scss/layout_overrides.scss b/mandelstudio/static/mandelstudio/scss/layout_overrides.scss index fccf083..e5ba7bf 100644 --- a/mandelstudio/static/mandelstudio/scss/layout_overrides.scss +++ b/mandelstudio/static/mandelstudio/scss/layout_overrides.scss @@ -80,7 +80,7 @@ header { #cookie_popup_body.cookie-consent-overlay { position: fixed; inset: 0; - z-index: 1080; + z-index: 9999; display: flex; align-items: center; justify-content: center; @@ -99,6 +99,8 @@ header { box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); + position: relative; + z-index: 10000; } .cookie-consent-panel { @@ -138,12 +140,14 @@ header { #cookie_popup_acceptButton_settings, #cookie_model_saveButton { flex: 1 1 0; - height: 46px; + min-height: 48px; + height: auto; + padding: 12px 16px; border-radius: 10px; border: 1px solid transparent; font-size: 17px; font-weight: 600; - line-height: 1; + line-height: 1.2; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; } @@ -204,25 +208,207 @@ header { } } +body.cookie-consent-open { + overflow: hidden; + + .header-right, + .theme-switcher-toggle, + .wagtail-userbar, + [class*="help"], + [class*="assistant"], + [class*="chat-widget"], + [class*="cart"], + [class*="basket"], + [class*="floating"] { + opacity: 0 !important; + pointer-events: none !important; + } +} + +@media (max-width: 991.98px) { + header .header-inner > .container { + display: flex; + flex-wrap: nowrap; + align-items: center; + column-gap: 0.375rem; + padding-top: 0.625rem; + padding-bottom: 0.625rem; + } + + header .header-inner > .container > .navbar-brand { + order: 1; + margin: 0; + flex: 0 1 auto; + } + + header .header-inner > .container > .navbar-brand img { + width: auto; + height: auto; + max-height: 74px; + max-width: 190px; + } + + header .header-inner > .container > .header-right { + order: 2; + margin-left: auto; + flex: 0 0 auto; + gap: 0.375rem; + } + + header .header-right .language-dropdown, + header .header-right .basket-dropdown, + header .header-right > a.user-button.menu-circle, + header .header-right .menu-circle { + width: 36px; + height: 36px; + min-width: 36px; + min-height: 36px; + flex-basis: 36px; + } + + header .header-inner > .container > .navbar-toggler { + order: 3; + margin-left: 0.125rem; + flex: 0 0 auto; + } + + header .header-inner > .container > .navbar-collapse { + order: 4; + display: none; + } + + header .header-inner > .container > .navbar-collapse.show, + header .header-inner > .container > .navbar-collapse.collapsing { + display: block; + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100dvh; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + background: #fff; + z-index: 9000; + } + + header .header-inner .navbar-collapse .brand-wrapper { + display: block; + } + + header .header-inner > .container > .navbar-collapse.show .brand-wrapper, + header .header-inner > .container > .navbar-collapse.collapsing .brand-wrapper { + position: absolute; + top: 16px; + left: 50%; + transform: translateX(-50%); + width: auto; + margin: 0; + z-index: 2; + text-align: center; + } + + header .header-inner > .container > .navbar-collapse.show .brand-wrapper .navbar-brand, + header .header-inner > .container > .navbar-collapse.collapsing .brand-wrapper .navbar-brand { + margin: 0; + display: inline-flex; + } + + header .header-inner > .container > .navbar-collapse.show .brand-wrapper img, + header .header-inner > .container > .navbar-collapse.collapsing .brand-wrapper img { + max-height: 92px; + width: auto; + } + + header .header-inner > .container > .navbar-collapse.show .navbar-nav, + header .header-inner > .container > .navbar-collapse.collapsing .navbar-nav { + padding-top: 124px; + } + + header .header-inner > .container > .navbar-collapse.show .brand-wrapper::after, + header .header-inner > .container > .navbar-collapse.collapsing .brand-wrapper::after { + content: ""; + position: absolute; + left: -80px; + right: -80px; + bottom: -14px; + border-bottom: 1px solid rgba(15, 23, 42, 0.08); + } + + + header .header-right, + header .header-right .basket-dropdown, + header .header-right .menu-circle { + position: relative; + z-index: 100; + } +} + +@media (max-width: 991.98px) { + body.mobile-menu-open { + header .header-inner > .container > .navbar-brand { + opacity: 0; + pointer-events: none; + } + + .header-right, + .theme-switcher-toggle, + .wagtail-userbar, + [class*="help"], + [class*="assistant"], + [class*="chat-widget"], + [class*="cart"], + [class*="basket"], + [class*="floating"] { + opacity: 0 !important; + pointer-events: none !important; + } + + } +} + @media (max-width: 640px) { #cookie_popup_body.cookie-consent-overlay { - padding: 12px; + padding: 12px 14px 14px; + padding-top: calc(12px + env(safe-area-inset-top)); + padding-bottom: calc(14px + env(safe-area-inset-bottom)); .cookie-consent-modal { - padding: 18px; + max-width: 420px; + max-height: 82vh; + overflow-y: auto; + padding: 18px 16px; border-radius: 14px; } .cookie-banner-title { + margin-bottom: 12px; font-size: 21px; } #cookie_popup_content p { - font-size: 15px; + font-size: 16px; + line-height: 1.45; } .cookie-consent-actions { flex-direction: column; + gap: 10px; + margin-top: 16px; + } + + #cookie_popup_acceptButton, + #cookie_popup_settingsToggle, + #cookie_popup_acceptButton_settings, + #cookie_model_saveButton { + width: 100%; + font-size: 16px; + } + + .cookie-consent-hint { + margin-top: 12px; + font-size: 13px; } } } diff --git a/mandelstudio/templates/cookie_jar/cookie_banner.html b/mandelstudio/templates/cookie_jar/cookie_banner.html index 8debf3d..b647443 100644 --- a/mandelstudio/templates/cookie_jar/cookie_banner.html +++ b/mandelstudio/templates/cookie_jar/cookie_banner.html @@ -76,6 +76,31 @@ return document.getElementById(id); } + function setConsentOpenState(isOpen) { + if (!document.body) return; + document.body.classList.toggle("cookie-consent-open", !!isOpen); + } + + function setMobileMenuOpenState(isOpen) { + if (!document.body) return; + document.body.classList.toggle("mobile-menu-open", !!isOpen); + } + + function syncMobileMenuState(navbar) { + if (!navbar) return; + var isOpen = navbar.classList.contains("show") || navbar.classList.contains("collapsing"); + setMobileMenuOpenState(isOpen); + } + + function closeOpenMenus() { + document.querySelectorAll(".dropdown-menu.show").forEach(function (menu) { + menu.classList.remove("show"); + }); + document.querySelectorAll("[aria-expanded='true']").forEach(function (trigger) { + trigger.setAttribute("aria-expanded", "false"); + }); + } + function showSettings(event) { if (event) { event.preventDefault(); @@ -102,10 +127,31 @@ } document.addEventListener("DOMContentLoaded", function () { + var popupBody = byId("cookie_popup_body"); var settingsBtn = byId("cookie_popup_settingsToggle"); var backBtn = byId("cookie_popup_backButton"); var acceptSettingsBtn = byId("cookie_popup_acceptButton_settings"); var acceptBtn = byId("cookie_popup_acceptButton"); + var navbar = byId("navbarSupportedContent"); + + if (popupBody) { + setConsentOpenState(true); + closeOpenMenus(); + } + + if (navbar) { + syncMobileMenuState(navbar); + ["show.bs.collapse", "shown.bs.collapse", "hide.bs.collapse", "hidden.bs.collapse"].forEach(function (eventName) { + navbar.addEventListener(eventName, function () { + syncMobileMenuState(navbar); + }); + }); + + var observer = new MutationObserver(function () { + syncMobileMenuState(navbar); + }); + observer.observe(navbar, { attributes: true, attributeFilter: ["class"] }); + } if (settingsBtn) { settingsBtn.addEventListener("click", showSettings); @@ -119,6 +165,17 @@ acceptBtn.click(); }); } + + if (acceptBtn) { + acceptBtn.addEventListener("click", function () { + setConsentOpenState(false); + }); + } + + window.addEventListener("beforeunload", function () { + setConsentOpenState(false); + setMobileMenuOpenState(false); + }); }); })();