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:
NW
2026-07-08 14:00:20 +01:00
parent f0afada884
commit 4997ca75ab
4 changed files with 36 additions and 11 deletions

View File

@@ -82,6 +82,28 @@
.apex-charts.sparkline { .apex-charts.sparkline {
min-height: 50px; 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> </style>
</head> </head>

View File

@@ -1,9 +1,9 @@
<header class="app-header"> <header class="app-header">
<!-- Collapse icon --> <!-- App logo (shown when sidebar logo is hidden) -->
<div class="d-flex flex-grow-1 w-100 me-auto align-items-center"> <%- include('./app-logo') %>
<!-- App logo --> <!-- Left section: menu toggle, collapse, search -->
<%- include('./app-logo') %> <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"> <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"> <svg class="sa-icon">
@@ -41,14 +41,14 @@
</button> </button>
<!-- Sidebar --> <!-- 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"> <svg class="sa-icon sa-icon-2x">
<use href="/icons/sprite.svg#aperture"></use> <use href="/icons/sprite.svg#aperture"></use>
</svg> </svg>
</button> </button>
<!-- Full Screen Mode --> <!-- 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"> <svg class="sa-icon sa-icon-2x sa-fullscreen-on">
<use href="/icons/sprite.svg#minimize"></use> <use href="/icons/sprite.svg#minimize"></use>
</svg> </svg>

View File

@@ -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"> <svg class="sa-icon sa-icon-2x">
<use href="/icons/sprite.svg#box"></use> <use href="/icons/sprite.svg#box"></use>
</svg> </svg>
<span class="ms-2 fw-bold">Shop Admin</span> <span class="logo-text ms-2 fw-500">Shop Admin</span>
</a> </a>

View File

@@ -24,9 +24,12 @@
</nav> </nav>
<div class="nav-footer"> <div class="nav-footer">
<svg class="sa-icon sa-thin"> <div class="d-flex align-items-center gap-2">
<use href="/icons/sprite.svg#wifi"></use> <svg class="sa-icon sa-thin">
</svg> <use href="/icons/sprite.svg#tag"></use>
</svg>
<span class="fs-xs opacity-70">v1.0</span>
</div>
</div> </div>
</aside> </aside>