From a6bab14970d537175d8ce3ba5219c2200317511e Mon Sep 17 00:00:00 2001 From: Mandel Olaiya Date: Wed, 13 May 2026 22:00:15 +0200 Subject: [PATCH] Fix header action alignment and language switcher spacing --- .../mandelstudio/css/header-overrides.css | 168 ++++++++++++++++++ mandelstudio/templates/layout.html | 64 +------ .../headers/partials/carbasa-user-bar.html | 27 ++- 3 files changed, 180 insertions(+), 79 deletions(-) create mode 100644 mandelstudio/static/mandelstudio/css/header-overrides.css diff --git a/mandelstudio/static/mandelstudio/css/header-overrides.css b/mandelstudio/static/mandelstudio/css/header-overrides.css new file mode 100644 index 0000000..d9080f0 --- /dev/null +++ b/mandelstudio/static/mandelstudio/css/header-overrides.css @@ -0,0 +1,168 @@ +header .header-inner .container { + display: flex; + align-items: center; + gap: 0.75rem; +} + +header .page-menu-bar { + flex: 1 1 auto; + min-width: 0; +} + +header .header-right { + flex: 0 0 auto; + margin-left: 0.5rem; + display: flex; + align-items: center; + gap: 0.5rem; +} + +header .header-right .language-dropdown, +header .header-right .basket-dropdown { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 40px; + width: 40px; + height: 40px; + min-width: 40px; + min-height: 40px; + margin: 0 !important; + padding: 0 !important; + box-sizing: border-box; +} + +header .header-right > a.user-button.menu-circle { + flex: 0 0 40px; + width: 40px; + height: 40px; + min-width: 40px; + min-height: 40px; + margin: 0; + padding: 0; + box-sizing: border-box; +} + +header .header-right .menu-circle i, +header .header-right .menu-circle svg { + display: block; + line-height: 1; +} + +header .header-right .menu-circle { + display: flex; + align-items: center; + justify-content: center; + flex-direction: row !important; + width: 40px; + height: 40px; + min-width: 40px; + min-height: 40px; + padding: 0; + line-height: 1; + align-self: center; + box-sizing: border-box; +} + +header .header-right .dropdown-toggle.nav-link.menu-circle, +header .header-right .dropdown-toggle.user-button.menu-circle { + padding: 0; +} + +@media (max-width: 1460px) and (min-width: 992px) { + header .page-menu-bar .navbar-nav > li > a, + header .page-menu-bar .navbar-nav > li > span, + header .page-menu-bar .navbar-nav > li > button { + font-size: 2.15rem; + padding-left: 0.7rem; + padding-right: 0.7rem; + white-space: nowrap; + } +} + +header .language-dropdown { + display: flex; + align-items: center; + justify-content: center; +} + +header .language-dropdown .dropdown-toggle::after { + display: none; +} + +header .language-dropdown .dropdown-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + flex-direction: row; + gap: 0; + width: 40px; + height: 40px; + padding: 0; + color: #fff; + line-height: 1; + transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease; +} + +header .language-dropdown .dropdown-toggle:hover, +header .language-dropdown .dropdown-toggle:focus-visible { + transform: translateY(-1px); + box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18); +} + +header .language-dropdown .dropdown-toggle .language-icon, +header .language-dropdown .dropdown-toggle .language-chevron { + display: block; +} + +header .language-dropdown .dropdown-toggle .language-icon { + width: 18px; + height: 18px; + font-size: 18px; + line-height: 18px; + transform: none; +} + +header .basket-dropdown .dropdown-toggle svg { + width: 18px; + height: 18px; +} + +header .language-dropdown .dropdown-toggle .language-chevron { + display: none; +} + +header .language-dropdown .dropdown-toggle.show .language-chevron { + transform: rotate(180deg); + opacity: 1; +} + +header .language-dropdown .dropdown-menu { + min-width: 15rem; + padding: 0.5rem; + border-radius: 0.9rem; + border: 1px solid rgba(15, 23, 42, 0.08); + box-shadow: 0 16px 44px rgba(15, 23, 42, 0.18); +} + +header .language-dropdown .dropdown-menu .dropdown-item { + border-radius: 0.65rem; + padding: 0.55rem 0.7rem; + font-weight: 600; + color: #0f172a; + transition: background-color 120ms ease, color 120ms ease; +} + +header .language-dropdown .dropdown-menu .dropdown-item:hover, +header .language-dropdown .dropdown-menu .dropdown-item:focus-visible { + background: rgba(2, 132, 199, 0.1); + color: #0b5aa3; +} + +header .language-dropdown .dropdown-menu svg { + width: 1.35rem; + height: auto; + border-radius: 0.2rem; + box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06); + flex: 0 0 auto; +} diff --git a/mandelstudio/templates/layout.html b/mandelstudio/templates/layout.html index 66f5789..9d24a02 100644 --- a/mandelstudio/templates/layout.html +++ b/mandelstudio/templates/layout.html @@ -15,6 +15,7 @@ {{ block.super }} {# Ensure Carbasa webshop styling is present so responsive header/footer render correctly. #} + {% endblock %} {% block extrahead %} @@ -25,69 +26,6 @@ {% endif %} {{ block.super }} - {% if cookie_jar.needs_approval %} {% endif %} diff --git a/mandelstudio/templates/oxyan/headers/partials/carbasa-user-bar.html b/mandelstudio/templates/oxyan/headers/partials/carbasa-user-bar.html index 84cecf4..691b2f3 100644 --- a/mandelstudio/templates/oxyan/headers/partials/carbasa-user-bar.html +++ b/mandelstudio/templates/oxyan/headers/partials/carbasa-user-bar.html @@ -5,7 +5,7 @@ {% get_available_languages as available_languages %} {% get_language_info_list for available_languages as languages %} -
+
+ {% endfor %}