fix(admin): header logo alignment + sidebar version tag
- Move app-logo out of flex-grow-1 div to be direct child of app-header (matches SmartAdmin CSS expectations for .app-header .app-logo) - Remove inline style padding-left from logo, rely on SCSS padding - Remove data-prefix attribute that positioned version text absolutely - Override .app-logo > svg.sa-icon min-width (was 11rem) to natural icon size (1.5rem) so icon and text align inline - Add .logo-text class for proper text sizing and nowrap - Fix conflicting responsive classes on header buttons (d-sm-block d-sm-none → d-none d-lg-block) - Fix fullscreen button aria-label (was 'Toggle Dark Mode') - Remove w-100 from header inner div that pushed buttons off-screen - Replace wifi icon in nav-footer with tag icon + version text v1.0
This commit is contained in:
@@ -82,6 +82,28 @@
|
||||
.apex-charts.sparkline {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
/* ====== Logo fix: icon + text inline alignment ====== */
|
||||
/* Override the smartapp default that stretches SVG logo to --logo-width (11rem) */
|
||||
.app-logo > svg.sa-icon {
|
||||
width: var(--sa-icon-size, 1.5rem);
|
||||
height: var(--sa-icon-size, 1.5rem);
|
||||
min-width: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.app-logo .logo-text {
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
/* Sidebar logo text: show on full nav, hide on minified */
|
||||
.set-nav-minified:not(.set-nav-collapsed) .app-sidebar:not(:hover) .app-logo .logo-text {
|
||||
display: none;
|
||||
}
|
||||
/* Header logo: always show text (logo is hidden in header when sidebar-full) */
|
||||
.app-header .app-logo .logo-text {
|
||||
display: inline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<header class="app-header">
|
||||
<!-- Collapse icon -->
|
||||
<div class="d-flex flex-grow-1 w-100 me-auto align-items-center">
|
||||
<!-- App logo (shown when sidebar logo is hidden) -->
|
||||
<%- include('./app-logo') %>
|
||||
|
||||
<!-- App logo -->
|
||||
<%- include('./app-logo') %>
|
||||
<!-- Left section: menu toggle, collapse, search -->
|
||||
<div class="d-flex flex-grow-1 me-auto align-items-center">
|
||||
|
||||
<button class="mobile-menu-icon me-2 d-flex d-sm-flex d-md-flex d-lg-none flex-shrink-0" data-action="toggle-swap" data-toggleclass="app-mobile-menu-open" aria-label="Toggle Mobile Menu">
|
||||
<svg class="sa-icon">
|
||||
@@ -41,14 +41,14 @@
|
||||
</button>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<button type="button" class="btn btn-system d-none d-sm-block d-sm-none d-md-none d-lg-block" data-action="toggle-swap" data-toggleclass="open" data-target="aside.js-app-drawer" aria-label="Open Sidebar">
|
||||
<button type="button" class="btn btn-system d-none d-lg-block" data-action="toggle-swap" data-toggleclass="open" data-target="aside.js-app-drawer" aria-label="Open Sidebar">
|
||||
<svg class="sa-icon sa-icon-2x">
|
||||
<use href="/icons/sprite.svg#aperture"></use>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Full Screen Mode -->
|
||||
<button type="button" class="btn btn-system d-none d-sm-block d-sm-none d-md-none d-lg-block" data-action="app-fullscreen" aria-label="Toggle Dark Mode" aria-pressed="false">
|
||||
<button type="button" class="btn btn-system d-none d-lg-block" data-action="app-fullscreen" aria-label="Toggle Fullscreen" aria-pressed="false">
|
||||
<svg class="sa-icon sa-icon-2x sa-fullscreen-on">
|
||||
<use href="/icons/sprite.svg#minimize"></use>
|
||||
</svg>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<a href="/" class="app-logo flex-shrink-0" data-prefix="v1.0" style="padding-left: 1.25rem;">
|
||||
<a href="/" class="app-logo flex-shrink-0">
|
||||
<svg class="sa-icon sa-icon-2x">
|
||||
<use href="/icons/sprite.svg#box"></use>
|
||||
</svg>
|
||||
<span class="ms-2 fw-bold">Shop Admin</span>
|
||||
<span class="logo-text ms-2 fw-500">Shop Admin</span>
|
||||
</a>
|
||||
|
||||
@@ -24,9 +24,12 @@
|
||||
</nav>
|
||||
|
||||
<div class="nav-footer">
|
||||
<svg class="sa-icon sa-thin">
|
||||
<use href="/icons/sprite.svg#wifi"></use>
|
||||
</svg>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<svg class="sa-icon sa-thin">
|
||||
<use href="/icons/sprite.svg#tag"></use>
|
||||
</svg>
|
||||
<span class="fs-xs opacity-70">v1.0</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user