fixed mobile
This commit is contained in:
Mark Gregory
+196
-1
@@ -173,7 +173,20 @@ select:focus[data-flux-control] {
|
||||
border: 1px solid rgb(228 228 231);
|
||||
background: white;
|
||||
color: rgb(63 63 70);
|
||||
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
|
||||
box-shadow: 0 10px 24px rgb(0 0 0 / 0.08);
|
||||
transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
|
||||
}
|
||||
|
||||
.wms-mobile-menu {
|
||||
border-color: rgb(14 116 144 / 0.22);
|
||||
background: linear-gradient(135deg, rgb(255 255 255), rgb(236 254 255));
|
||||
color: rgb(14 116 144);
|
||||
}
|
||||
|
||||
.dark .wms-mobile-menu {
|
||||
border-color: rgb(103 232 249 / 0.22);
|
||||
background: linear-gradient(135deg, rgb(24 24 27), rgb(8 47 73));
|
||||
color: rgb(165 243 252);
|
||||
}
|
||||
|
||||
.wms-sidebar-toggle {
|
||||
@@ -643,6 +656,27 @@ select:focus[data-flux-control] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wms-mobile-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 3.1rem;
|
||||
height: 2rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgb(14 116 144 / 0.24);
|
||||
background: linear-gradient(135deg, rgb(14 116 144 / 0.14), rgb(37 99 235 / 0.12));
|
||||
color: rgb(14 116 144);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
.dark .wms-mobile-badge {
|
||||
border-color: rgb(103 232 249 / 0.26);
|
||||
background: linear-gradient(135deg, rgb(8 145 178 / 0.26), rgb(37 99 235 / 0.20));
|
||||
color: rgb(165 243 252);
|
||||
}
|
||||
|
||||
.wms-page-hero {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
@@ -676,3 +710,164 @@ select:focus[data-flux-control] {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@layer components {
|
||||
body.wms-mobile-nav-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.wms-app-shell {
|
||||
display: block !important;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.wms-main-panel {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.wms-mobile-header {
|
||||
position: sticky !important;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
display: flex !important;
|
||||
min-height: 4.25rem;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
border-bottom: 1px solid rgb(228 228 231);
|
||||
background: rgb(255 255 255 / 0.94);
|
||||
padding: 0.75rem 1rem;
|
||||
box-shadow: 0 14px 34px rgb(15 23 42 / 0.08);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.dark .wms-mobile-header {
|
||||
border-bottom-color: rgb(63 63 70);
|
||||
background: rgb(24 24 27 / 0.94);
|
||||
box-shadow: 0 14px 34px rgb(0 0 0 / 0.28);
|
||||
}
|
||||
|
||||
.wms-mobile-menu {
|
||||
display: inline-grid !important;
|
||||
width: 2.65rem;
|
||||
height: 2.65rem;
|
||||
flex: 0 0 auto;
|
||||
place-items: center;
|
||||
border-radius: 0.9rem;
|
||||
border: 1px solid rgb(14 116 144 / 0.28);
|
||||
background: linear-gradient(135deg, rgb(255 255 255), rgb(236 254 255));
|
||||
color: rgb(14 116 144);
|
||||
font-size: 1.05rem;
|
||||
box-shadow: 0 12px 28px rgb(14 116 144 / 0.16);
|
||||
}
|
||||
|
||||
.dark .wms-mobile-menu {
|
||||
border-color: rgb(103 232 249 / 0.30);
|
||||
background: linear-gradient(135deg, rgb(24 24 27), rgb(8 47 73));
|
||||
color: rgb(165 243 252);
|
||||
}
|
||||
|
||||
.wms-mobile-title {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: rgb(24 24 27);
|
||||
font-size: 0.98rem;
|
||||
font-weight: 850;
|
||||
letter-spacing: -0.02em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.dark .wms-mobile-title {
|
||||
color: rgb(244 244 245);
|
||||
}
|
||||
|
||||
.wms-mobile-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 3.15rem;
|
||||
height: 2rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgb(14 116 144 / 0.24);
|
||||
background: linear-gradient(135deg, rgb(14 116 144 / 0.14), rgb(37 99 235 / 0.12));
|
||||
color: rgb(14 116 144);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
.dark .wms-mobile-badge {
|
||||
border-color: rgb(103 232 249 / 0.26);
|
||||
background: linear-gradient(135deg, rgb(8 145 178 / 0.26), rgb(37 99 235 / 0.20));
|
||||
color: rgb(165 243 252);
|
||||
}
|
||||
|
||||
.wms-sidebar {
|
||||
position: fixed !important;
|
||||
inset: 0 auto 0 0;
|
||||
z-index: 70;
|
||||
width: min(23.5rem, calc(100vw - 2.25rem)) !important;
|
||||
min-width: min(23.5rem, calc(100vw - 2.25rem)) !important;
|
||||
height: 100dvh;
|
||||
transform: translateX(-110%);
|
||||
box-shadow: 28px 0 70px rgb(0 0 0 / 0.30);
|
||||
}
|
||||
|
||||
html[data-wms-mobile-sidebar='open'] .wms-sidebar {
|
||||
transform: translateX(0) !important;
|
||||
}
|
||||
|
||||
.wms-mobile-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 60;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html[data-wms-mobile-sidebar='open'] .wms-mobile-overlay {
|
||||
display: block !important;
|
||||
background: rgb(0 0 0 / 0.52);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
.wms-mobile-close {
|
||||
display: inline-grid !important;
|
||||
}
|
||||
|
||||
.wms-sidebar-toggle {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar='collapsed'] [data-wms-sidebar-label],
|
||||
html[data-wms-sidebar='collapsed'] .wms-brand-copy,
|
||||
html[data-wms-sidebar='collapsed'] .wms-sidebar-heading,
|
||||
html[data-wms-sidebar='collapsed'] .wms-sidebar-link span {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar='collapsed'] .wms-sidebar-link {
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
|
||||
.wms-content {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.wms-mobile-header,
|
||||
.wms-mobile-overlay,
|
||||
.wms-mobile-close {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,10 +5,10 @@
|
||||
</head>
|
||||
|
||||
<body class="min-h-screen bg-white text-zinc-950 antialiased dark:bg-zinc-950 dark:text-zinc-100">
|
||||
<div class="wms-app-shell" data-wms-shell>
|
||||
<div class="wms-mobile-overlay" data-wms-mobile-close></div>
|
||||
<div class="wms-app-shell" data-wms-shell data-wms-mobile-shell>
|
||||
<button type="button" class="wms-mobile-overlay" data-wms-mobile-close aria-label="{{ __('Close navigation menu') }}"></button>
|
||||
|
||||
<aside class="wms-sidebar" data-wms-sidebar aria-label="{{ __('Main navigation') }}">
|
||||
<aside id="wms-main-sidebar" class="wms-sidebar" data-wms-sidebar aria-label="{{ __('Main navigation') }}">
|
||||
<div class="wms-sidebar-header">
|
||||
<a href="{{ auth()->user()?->isMpbaPlatformAdmin() && Route::has('platform.dashboard') ? route('platform.dashboard') : route('dashboard') }}" wire:navigate class="wms-brand" aria-label="{{ __('Warehouse Management System') }}">
|
||||
<span class="wms-brand-mark" data-wms-brand-toggle title="{{ __('Expand sidebar') }}"><span class="wms-brand-mark-inner">W</span></span>
|
||||
@@ -34,7 +34,6 @@
|
||||
<i class="fa-solid fa-screwdriver-wrench wms-sidebar-icon" aria-hidden="true"></i>
|
||||
<span data-wms-sidebar-label>{{ __('Platform') }}</span>
|
||||
</a>
|
||||
|
||||
@elseif(Route::has('dashboard'))
|
||||
<a href="{{ route('dashboard') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('dashboard')) is-active @endif" title="{{ __('Dashboard') }}">
|
||||
<i class="fa-solid fa-gauge-high wms-sidebar-icon" aria-hidden="true"></i>
|
||||
@@ -231,6 +230,18 @@
|
||||
</aside>
|
||||
|
||||
<div class="wms-main-panel">
|
||||
<header class="wms-mobile-header" role="banner">
|
||||
<button type="button" class="wms-mobile-menu" data-wms-mobile-open aria-label="{{ __('Open navigation menu') }}" aria-controls="wms-main-sidebar" aria-expanded="false">
|
||||
<i class="fa-solid fa-bars" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
<a href="{{ auth()->user()?->isMpbaPlatformAdmin() && Route::has('platform.dashboard') ? route('platform.dashboard') : route('dashboard') }}" wire:navigate class="wms-mobile-title">
|
||||
{{ __('Warehouse Management System') }}
|
||||
</a>
|
||||
|
||||
<span class="wms-mobile-badge">MPBA</span>
|
||||
</header>
|
||||
|
||||
<main class="wms-content">
|
||||
{{ $slot }}
|
||||
</main>
|
||||
@@ -258,8 +269,32 @@
|
||||
});
|
||||
}
|
||||
|
||||
function closeMobileSidebar() { document.documentElement.dataset.wmsMobileSidebar = 'closed'; }
|
||||
function openMobileSidebar() { document.documentElement.dataset.wmsMobileSidebar = 'open'; }
|
||||
function setMobileToggleState(isOpen) {
|
||||
document.querySelectorAll('[data-wms-mobile-open]').forEach((button) => {
|
||||
button.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
|
||||
});
|
||||
|
||||
document.body.classList.toggle('wms-mobile-nav-open', isOpen);
|
||||
}
|
||||
|
||||
function closeMobileSidebar() {
|
||||
document.documentElement.dataset.wmsMobileSidebar = 'closed';
|
||||
setMobileToggleState(false);
|
||||
}
|
||||
|
||||
function openMobileSidebar() {
|
||||
document.documentElement.dataset.wmsMobileSidebar = 'open';
|
||||
setMobileToggleState(true);
|
||||
}
|
||||
|
||||
function toggleMobileSidebar() {
|
||||
if (document.documentElement.dataset.wmsMobileSidebar === 'open') {
|
||||
closeMobileSidebar();
|
||||
return;
|
||||
}
|
||||
|
||||
openMobileSidebar();
|
||||
}
|
||||
|
||||
function bindSidebarControls() {
|
||||
applySidebarState();
|
||||
@@ -287,10 +322,15 @@
|
||||
applySidebarState();
|
||||
});
|
||||
});
|
||||
closeMobileSidebar();
|
||||
|
||||
document.querySelectorAll('[data-wms-mobile-open]').forEach((button) => {
|
||||
if (button.dataset.wmsBound === '1') return;
|
||||
button.dataset.wmsBound = '1';
|
||||
button.addEventListener('click', openMobileSidebar);
|
||||
button.addEventListener('click', function (event) {
|
||||
event.preventDefault();
|
||||
toggleMobileSidebar();
|
||||
});
|
||||
});
|
||||
document.querySelectorAll('[data-wms-mobile-close]').forEach((button) => {
|
||||
if (button.dataset.wmsBound === '1') return;
|
||||
|
||||
Reference in New Issue
Block a user