Redesign cookie consent as centered glass modal
This commit is contained in:
192
mandelstudio/static/mandelstudio/scss/layout_overrides.scss
Normal file
192
mandelstudio/static/mandelstudio/scss/layout_overrides.scss
Normal file
@@ -0,0 +1,192 @@
|
||||
header {
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
.language-dropdown,
|
||||
.basket-dropdown,
|
||||
> 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;
|
||||
}
|
||||
|
||||
.menu-circle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
i,
|
||||
svg {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.language-dropdown {
|
||||
.dropdown-toggle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.language-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.language-chevron {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.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-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-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_content p {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
line-height: 1.5;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.cookie-consent-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
#cookie_popup_acceptButton,
|
||||
#cookie_popup_settingsButton {
|
||||
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_acceptButton {
|
||||
background: #2f80ed;
|
||||
border-color: #2f80ed;
|
||||
color: #fff;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background: #1f6fd8;
|
||||
border-color: #1f6fd8;
|
||||
}
|
||||
}
|
||||
|
||||
#cookie_popup_settingsButton {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
border-color: rgba(255, 255, 255, 0.48);
|
||||
color: #fff;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
}
|
||||
|
||||
.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-consent-modal {
|
||||
padding: 18px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.cookie-banner-title {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
#cookie_popup_content p {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.cookie-consent-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
52
mandelstudio/templates/cookie_jar/cookie_banner.html
Normal file
52
mandelstudio/templates/cookie_jar/cookie_banner.html
Normal file
@@ -0,0 +1,52 @@
|
||||
{% load i18n %}
|
||||
{% load wagtailcore_tags ocyanjson %}
|
||||
|
||||
{% with settings.cookie_jar.CookieSettings as cookie_settings %}
|
||||
{% if cookie_jar.needs_approval or cookie_jar.site_settings.strict_cookies %}
|
||||
{% if cookie_jar.needs_display or cookie_jar.site_settings.strict_cookies and not cookie_jar.cookie %}
|
||||
<div id="cookie_popup_body" class="cookie-consent-overlay" role="region" aria-label="{% trans 'Cookie settings' %}">
|
||||
<div class="cookie-consent-modal" role="dialog" aria-modal="true" aria-labelledby="cookie-consent-title">
|
||||
<div class="cookie-banner-title" id="cookie-consent-title">
|
||||
<i class="fa fa-shield-halved" aria-hidden="true"></i>
|
||||
<span>{% trans 'Privacy & Cookies' %}</span>
|
||||
</div>
|
||||
<div id="cookie_popup_content">
|
||||
{% if cookie_settings.cookie_message %}{{ cookie_settings.cookie_message|richtext }}{% endif %}
|
||||
</div>
|
||||
<div id="cookie_buttons" class="cookie-consent-actions">
|
||||
<button type="button" id="cookie_popup_acceptButton" data-cookie-key="{{ cookie_jar.cookie_key }}">{% trans 'Accept' %}</button>
|
||||
<button type="button" data-toggle="modal" data-bs-toggle="modal" data-bs-target="#CookiesOptions" id="cookie_popup_settingsButton" data-backdrop="static" data-keyboard="false">{% trans 'Settings' %}</button>
|
||||
</div>
|
||||
<div class="cookie-consent-hint">
|
||||
{% trans 'You can update your cookie preferences at any time.' %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="modal fade" id="CookiesOptions" tabindex="-1" role="dialog" aria-labelledby="CookiesOptionsLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<p class="h2 modal-title modal_cookie_header" id="CookiesOptionsLabel">{% trans 'Cookie settings' %}</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
||||
<div id="cookie_popup_content_modal">
|
||||
{% if cookie_settings.popup_cookie_message %}{{ cookie_settings.popup_cookie_message|richtext }}{% endif %}
|
||||
</div>
|
||||
|
||||
{% include "cookie_jar/partials/cookie_checkboxes.html" %}
|
||||
</div>
|
||||
|
||||
<div class="modal-footer" data-cookie-key="{{ cookie_jar.cookie_key }}" id="cookie_model_saveButton">
|
||||
<button type="button" data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close" class="btn btn-primary">
|
||||
{% trans 'Save and accept' %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
@@ -15,6 +15,7 @@
|
||||
{{ block.super }}
|
||||
{# Ensure Carbasa webshop styling is present so responsive header/footer render correctly. #}
|
||||
<link rel="stylesheet" type="text/x-scss" href="{% static 'carbasa/webshop_base.scss' %}">
|
||||
<link rel="stylesheet" type="text/x-scss" href="{% static 'mandelstudio/scss/layout_overrides.scss' %}">
|
||||
{% endblock %}
|
||||
|
||||
{% block extrahead %}
|
||||
@@ -25,43 +26,7 @@
|
||||
<link rel="preconnect" href="https://www.google-analytics.com/">
|
||||
{% endif %}
|
||||
{{ block.super }}
|
||||
<style>
|
||||
header .header-right { display: flex; align-items: center; gap: .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::after { display: none; }
|
||||
header .language-dropdown .dropdown-toggle { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
|
||||
header .language-dropdown .language-icon,
|
||||
header .basket-dropdown .dropdown-toggle svg { width: 18px; height: 18px; font-size: 18px; line-height: 18px; }
|
||||
header .language-dropdown .language-icon { color: #fff; }
|
||||
header .language-dropdown .language-chevron { display: none !important; }
|
||||
</style>
|
||||
{% if cookie_jar.needs_approval %}
|
||||
{% if cookie_jar.needs_approval or cookie_jar.site_settings.strict_cookies %}
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'cookie_jar/css/cookie_jar.css' %}">
|
||||
{% endif %}
|
||||
{% for header_snippet in cookie_jar.activated_snippet_header_templates %}
|
||||
@@ -97,7 +62,7 @@ header .language-dropdown .language-chevron { display: none !important; }
|
||||
{% block extrascripts %}
|
||||
{% include "oscar/partials/extrascripts.html" %}
|
||||
{{ block.super }}
|
||||
{% if cookie_jar.needs_approval %}
|
||||
{% if cookie_jar.needs_approval or cookie_jar.site_settings.strict_cookies %}
|
||||
<script src="{% static 'cookie_jar/js/cookie_jar.js' %}"></script>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@@ -129,8 +94,11 @@ oxyan.initImageZoom()
|
||||
{% for footer_snippet in cookie_jar.activated_snippet_footer_templates %}
|
||||
{% include footer_snippet %}
|
||||
{% endfor %}
|
||||
{% if cookie_jar.needs_approval or cookie_jar.site_settings.strict_cookies %}
|
||||
<script src="{% static 'cookie_jar/js/cookie_jar.js' %}"></script>
|
||||
{% endif %}
|
||||
{% include "cookie_jar/cookie_banner.html" %}
|
||||
{% if cookie_jar.needs_approval %}
|
||||
{% if cookie_jar.needs_approval or cookie_jar.site_settings.strict_cookies %}
|
||||
{% include "cookie_jar/partials/preferences_saved_toast.html" %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user