salt/mandelstudio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile header: ship CSS without SCSS

Browse Source
This commit is contained in:
Mandel Olaiya
2026-05-03 00:23:02 +02:00
parent c5601cfe79
commit b7cb932359
3 changed files with 113 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
mandelstudio/static/mandelstudio/header_mobile.css Normal file
View File

@@ -0,0 +1,111 @@
/* Scoped mobile header fixes for MandelBlog Studio.
Keep changes local to the Carbasa mega header to avoid desktop regressions. */
@media (max-width: 991.98px) {
header.mega_header .header-inner .container {
flex-wrap: nowrap;
align-items: center;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
header.mega_header .header-inner .navbar-brand {
margin: 0;
padding: 0;
position: relative;
z-index: 30;
}
header.mega_header .header-inner .navbar-brand .logo.big_brand img,
header.mega_header .header-inner .navbar-brand .logo img {
max-height: 36px;
width: auto;
height: auto;
}
header.mega_header .header-inner .header-right {
padding-left: 0;
margin-left: auto;
gap: 0.5rem;
position: relative;
z-index: 30;
}
header.mega_header .header-inner .header-right .user-button {
margin-right: 0;
}
header.mega_header .header-inner .navbar-toggler {
position: static;
inset: auto;
width: 42px;
height: 42px;
margin: 0 0 0 0.5rem;
box-shadow: none;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.12);
z-index: 35;
}
header.mega_header .header-inner #navbarSupportedContent.show {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100%;
overflow: auto;
background: #fff;
padding: 5.25rem 1.25rem 6rem;
z-index: 40;
}
header.mega_header .header-inner #navbarSupportedContent.show ~ .header-right {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
header.mega_header .header-inner #navbarSupportedContent .brand-wrapper {
display: none;
}
header.mega_header .header-inner #navbarSupportedContent .navbar-nav {
width: 100%;
align-items: stretch;
gap: 0.25rem;
}
header.mega_header .header-inner #navbarSupportedContent .navbar-nav > li {
width: 100%;
}
header.mega_header .header-inner #navbarSupportedContent .navbar-nav > li > a.nav-link,
header.mega_header .header-inner #navbarSupportedContent .navbar-nav > li > a.toggler.nav-link {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0.85rem 0.25rem;
font-size: 1.1rem;
}
header.mega_header .header-inner #navbarSupportedContent .dropdown-menu {
position: static;
float: none;
width: 100%;
border: 0;
padding: 0.25rem 0 0.75rem;
margin: 0;
background: transparent;
}
header.mega_header .header-inner #navbarSupportedContent .dropdown-menu .nav-link {
justify-content: flex-start;
padding: 0.6rem 0.25rem;
font-size: 1rem;
opacity: 0.9;
}
}

121
mandelstudio/static/mandelstudio/header_mobile.scss
View File

@@ -1,121 +0,0 @@
/* Scoped mobile header fixes for MandelBlog Studio.
Keep changes local to the Carbasa mega header to avoid desktop regressions. */
header.mega_header {
@media (max-width: 991.98px) {
.header-inner {
.container {
flex-wrap: nowrap;
align-items: center;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.navbar-brand {
margin: 0;
padding: 0;
position: relative;
z-index: 30;
.logo.big_brand img,
.logo img {
max-height: 36px;
width: auto;
height: auto;
}
}
.header-right {
padding-left: 0;
margin-left: auto;
gap: 0.5rem;
position: relative;
z-index: 30;
.user-button {
margin-right: 0;
}
}
/* Move the mobile menu toggle into the header (not floating at the bottom). */
.navbar-toggler {
position: static;
inset: auto;
width: 42px;
height: 42px;
margin: 0 0 0 0.5rem;
box-shadow: none;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.12);
z-index: 35;
}
/* Fullscreen mobile menu that sits above header icons. */
#navbarSupportedContent.show {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100%;
overflow: auto;
background: #fff;
padding: 5.25rem 1.25rem 6rem;
z-index: 40;
}
/* Prevent header action icons overlapping the open menu. */
#navbarSupportedContent.show ~ .header-right {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Make mobile menu items look consistent and aligned. */
#navbarSupportedContent {
.brand-wrapper {
display: none;
}
.navbar-nav {
width: 100%;
align-items: stretch;
gap: 0.25rem;
}
.navbar-nav > li {
width: 100%;
}
.navbar-nav > li > a.nav-link,
.navbar-nav > li > a.toggler.nav-link {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0.85rem 0.25rem;
font-size: 1.1rem;
}
.dropdown-menu {
position: static;
float: none;
width: 100%;
border: 0;
padding: 0.25rem 0 0.75rem;
margin: 0;
background: transparent;
}
.dropdown-menu .nav-link {
justify-content: flex-start;
padding: 0.6rem 0.25rem;
font-size: 1rem;
opacity: 0.9;
}
}
}
}
}

4
mandelstudio/templates/layout.html
View File

@@ -15,8 +15,8 @@
{{ 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' %}">
{# Project-scoped header mobile fixes (no Bootstrap overrides). #}
<link rel="stylesheet" type="text/x-scss" href="{% static 'mandelstudio/header_mobile.scss' %}">
{# Project-scoped header mobile fixes (plain CSS to avoid SCSS compilation at runtime). #}
<link rel="stylesheet" href="{% static 'mandelstudio/header_mobile.css' %}">
{% endblock %}
{% block extrahead %}