reponsive
This commit is contained in:
@@ -43,11 +43,150 @@
|
||||
.modal-backdrop.open .modal-content {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
body.app-shell {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#mobileMenuBtn,
|
||||
#sidebarBackdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
body.app-shell {
|
||||
width: 100%;
|
||||
min-height: 100dvh;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#mobileMenuBtn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#sidebarBackdrop {
|
||||
display: block;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 70;
|
||||
background: rgba(15, 23, 42, 0.45);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
#appSidebar {
|
||||
position: fixed;
|
||||
inset: 0 auto 0 0;
|
||||
height: 100dvh;
|
||||
width: min(82vw, 16rem);
|
||||
z-index: 80;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.2s ease-in-out;
|
||||
box-shadow: 0 20px 45px rgba(15, 23, 42, 0.35);
|
||||
}
|
||||
|
||||
body.mobile-nav-open #sidebarBackdrop {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
body.mobile-nav-open #appSidebar {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#appMain {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 100dvh;
|
||||
}
|
||||
|
||||
#appMain > header {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.topbar-actions {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
#profileBtn {
|
||||
padding: 0.4rem 0.55rem;
|
||||
}
|
||||
|
||||
#profileBtn .profile-meta {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dashboard-header,
|
||||
.page-header,
|
||||
.page-filters,
|
||||
.users-controls {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.page-filters > div,
|
||||
.users-controls > div,
|
||||
.users-controls select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dashboard-actions,
|
||||
.page-header button,
|
||||
.page-header > button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dashboard-stats,
|
||||
.apps-stats {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table-wrap table {
|
||||
min-width: 700px;
|
||||
}
|
||||
|
||||
.page-pager {
|
||||
gap: 0.5rem;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.modal-backdrop .modal-content {
|
||||
width: calc(100% - 1rem);
|
||||
max-height: min(88dvh, 700px);
|
||||
margin: 0.5rem;
|
||||
overflow-y: auto;
|
||||
border-radius: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.dashboard-stats,
|
||||
.apps-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface antialiased flex h-screen w-screen">
|
||||
<body class="app-shell bg-background text-on-surface antialiased flex h-screen w-screen">
|
||||
<!-- SideNavBar -->
|
||||
<aside class="h-screen w-56 flex flex-col bg-slate-100 dark:bg-slate-900 font-manrope text-sm font-medium border-r border-outline-variant/10 shrink-0">
|
||||
<aside id="appSidebar" class="h-screen w-56 flex flex-col bg-slate-100 dark:bg-slate-900 font-manrope text-sm font-medium border-r border-outline-variant/10 shrink-0">
|
||||
<div class="flex flex-col h-full py-6">
|
||||
<!-- Header -->
|
||||
<div class="px-6 mb-8">
|
||||
@@ -80,17 +219,21 @@
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<button id="sidebarBackdrop" type="button" aria-label="Close navigation menu"></button>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 flex flex-col h-screen min-w-0">
|
||||
<main id="appMain" class="flex-1 flex flex-col h-screen min-w-0">
|
||||
<!-- TopAppBar -->
|
||||
<header class="h-14 flex items-center justify-between px-6 bg-slate-50/80 dark:bg-slate-950/80 backdrop-blur-xl border-b border-outline-variant/10 shrink-0">
|
||||
<div class="flex items-center gap-4 flex-1">
|
||||
|
||||
<button id="mobileMenuBtn" type="button" class="p-2 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" aria-label="Open navigation menu" aria-controls="appSidebar" aria-expanded="false">
|
||||
<span class="material-symbols-outlined">menu</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button id="profileBtn" type="button" class="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors" title="Edit profile">
|
||||
<div class="topbar-actions flex items-center gap-4">
|
||||
<button id="profileBtn" type="button" class="profile-btn flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors" title="Edit profile">
|
||||
<span class="material-symbols-outlined text-slate-600 dark:text-slate-400">account_circle</span>
|
||||
<div class="flex flex-col">
|
||||
<div class="profile-meta flex flex-col">
|
||||
<span id="accountUsername" class="text-xs font-semibold text-slate-900 dark:text-slate-50">User Account</span>
|
||||
<span id="accountRole" class="text-[10px] text-slate-500 dark:text-slate-400">Administrator</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user