new branding an dnow scroll prpotection
This commit is contained in:
Mark Gregory
@@ -24,7 +24,7 @@
|
||||
})();
|
||||
</script>
|
||||
|
||||
<body class="min-h-screen bg-white font-sans text-zinc-950 antialiased dark:bg-zinc-950 dark:text-zinc-100">
|
||||
<body class="h-screen min-h-screen overflow-hidden bg-white font-sans text-zinc-950 antialiased dark:bg-zinc-950 dark:text-zinc-100">
|
||||
<style>
|
||||
:root {
|
||||
--wms-sidebar-width: 288px;
|
||||
@@ -37,13 +37,38 @@
|
||||
--wms-active-child-gold-dark: #e7b72f;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
overflow: hidden !important;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
body {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.wms-app-shell {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
grid-template-columns: var(--wms-sidebar-width) minmax(0, 1fr);
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
min-height: 0;
|
||||
overflow: hidden !important;
|
||||
transition-property: none;
|
||||
}
|
||||
|
||||
@supports (height: 100dvh) {
|
||||
.wms-app-shell {
|
||||
height: 100dvh;
|
||||
}
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="expanded"] .wms-app-shell {
|
||||
grid-template-columns: var(--wms-sidebar-width) minmax(0, 1fr);
|
||||
}
|
||||
@@ -54,16 +79,49 @@
|
||||
|
||||
.wms-sidebar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: var(--wms-sidebar-width);
|
||||
min-width: var(--wms-sidebar-width);
|
||||
max-width: var(--wms-sidebar-width);
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
max-height: 100%;
|
||||
overflow: hidden !important;
|
||||
transition-property: none;
|
||||
}
|
||||
|
||||
.wms-main-panel {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
overflow: hidden !important;
|
||||
transition-property: none;
|
||||
}
|
||||
|
||||
.wms-main-panel > header,
|
||||
.wms-main-panel > .wms-topbar,
|
||||
.wms-main-panel > [data-wms-topbar] {
|
||||
flex: 0 0 auto !important;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.wms-content {
|
||||
display: block;
|
||||
flex: 1 1 auto !important;
|
||||
min-width: 0;
|
||||
min-height: 0 !important;
|
||||
height: auto;
|
||||
max-height: none;
|
||||
overflow-y: auto !important;
|
||||
overflow-x: hidden !important;
|
||||
overscroll-behavior: contain;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
html[data-wms-sidebar="collapsed"] .wms-sidebar {
|
||||
width: var(--wms-sidebar-collapsed-width);
|
||||
min-width: var(--wms-sidebar-collapsed-width);
|
||||
@@ -108,7 +166,12 @@
|
||||
}
|
||||
|
||||
.wms-sidebar-nav {
|
||||
overflow-x: hidden;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow-y: auto !important;
|
||||
overflow-x: hidden !important;
|
||||
overscroll-behavior: contain;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.wms-sidebar-heading-button {
|
||||
@@ -166,7 +229,6 @@
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
.wms-sidebar-primary-link {
|
||||
margin-bottom: 0.35rem;
|
||||
min-height: 3.25rem;
|
||||
@@ -179,6 +241,7 @@
|
||||
.wms-sidebar-primary-link span {
|
||||
letter-spacing: 0.16em;
|
||||
}
|
||||
|
||||
.wms-sidebar-link.is-active {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
@@ -240,6 +303,20 @@
|
||||
@media (max-width: 1023px) {
|
||||
.wms-app-shell {
|
||||
display: block;
|
||||
height: 100vh;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
@supports (height: 100dvh) {
|
||||
.wms-app-shell {
|
||||
height: 100dvh;
|
||||
}
|
||||
}
|
||||
|
||||
.wms-main-panel {
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.wms-sidebar,
|
||||
@@ -247,6 +324,8 @@
|
||||
width: min(88vw, 22rem);
|
||||
min-width: min(88vw, 22rem);
|
||||
max-width: min(88vw, 22rem);
|
||||
height: 100%;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.wms-sidebar-resizer {
|
||||
@@ -284,7 +363,7 @@
|
||||
<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 id="wms-main-sidebar" class="wms-sidebar" data-wms-sidebar aria-label="{{ __('Main navigation') }}">
|
||||
<aside id="wms-main-sidebar" class="wms-sidebar" data-wms-sidebar data-test="desktop-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') }}">
|
||||
@@ -325,6 +404,7 @@
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="wms-sidebar-group" data-wms-menu-group="operations">
|
||||
<button type="button" class="wms-sidebar-heading wms-sidebar-heading-button" data-wms-menu-toggle data-wms-sidebar-label aria-expanded="false">
|
||||
<span class="wms-sidebar-heading-content">
|
||||
@@ -589,6 +669,7 @@
|
||||
</div>
|
||||
@endif
|
||||
</nav>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="wms-sidebar-resizer"
|
||||
@@ -598,10 +679,10 @@
|
||||
></button>
|
||||
</aside>
|
||||
|
||||
<div class="wms-main-panel">
|
||||
<div class="wms-main-panel" data-test="main-panel">
|
||||
@include("layouts.partials.topbar")
|
||||
|
||||
<main class="wms-content">
|
||||
<main class="wms-content" data-test="main-content" tabindex="-1">
|
||||
{{ $slot }}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user