deepkoluguri
/
curaflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: apply responsive CSS grid layout across all portals
Build Curio HMS / build-and-deploy (push) Failing after 20s Details

This commit is contained in:
Deep Koluguri 2026-07-10 13:04:21 -04:00
parent 51690a803d
commit 12b44584aa
3 changed files with 42 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
admin.css
View File

@ -10,15 +10,20 @@
body.admin-body {
background: var(--admin-bg);
font-family: 'Inter', sans-serif;
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
min-height: 100vh;
}
.admin-sidebar {
width: var(--sidebar-width);
background: var(--admin-primary);
position: sticky;
top: 0;
height: 100vh;
position: fixed;
padding: 2rem;
color: white;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.admin-sidebar .logo,
@ -72,7 +77,6 @@ body.admin-body {
}
.admin-main {
margin-left: var(--sidebar-width);
padding: 3rem;
}
@ -239,20 +243,15 @@ body.admin-body {
}
@media (max-width: 768px) {
body.admin-body {
grid-template-columns: 1fr;
}
.admin-main {
margin-left: 0;
padding: 1.5rem;
padding-top: 2rem;
}
.admin-sidebar {
position: relative;
width: 100%;
height: auto;
}
.admin-sidebar .user-profile {
position: static;
margin-top: 2rem;
}
}

61
dashboard.css
View File

@ -5,23 +5,25 @@
/* Layout Foundation */
.dashboard-body {
display: flex;
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
min-height: 100vh;
}
.sidebar {
width: var(--sidebar-width);
background: var(--sidebar-bg);
color: white;
padding: 2.5rem 1.5rem;
display: flex;
flex-direction: column;
position: fixed;
position: sticky;
top: 0;
height: 100vh;
border-right: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 10px 0 30px rgba(0, 0, 0, 0.2);
z-index: 100;
overflow: hidden;
overflow-y: auto;
overflow-x: hidden;
}
.sidebar-footer {
@ -49,10 +51,9 @@
}
.dashboard-main {
margin-left: var(--sidebar-width);
flex: 1;
padding: 2.5rem 3rem;
min-height: 100vh;
overflow-x: hidden;
}
.logo {
@ -1652,52 +1653,38 @@
display: none !important;
}
.sidebar {
transform: translateX(0) !important;
}
.sidebar-backdrop {
display: none !important;
}
}
@media (max-width: 768px) {
.dashboard-body {
grid-template-columns: 1fr;
}
.sidebar-mobile-toggle {
display: block;
}
.sidebar {
transform: translateX(-100%);
transition: transform 0.3s ease;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 1050;
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
width: 280px !important;
border-right: none;
box-shadow: 20px 0 50px rgba(0,0,0,0.5);
}
.sidebar.open {
transform: translateX(0);
}
.sidebar.compact-rail {
width: var(--sidebar-width);
padding: 2.5rem 1.5rem;
align-items: stretch;
}
.sidebar.compact-rail .logo-text,
.sidebar.compact-rail .user-profile .info,
.sidebar.compact-rail .nav-text {
display: block !important;
}
.sidebar.compact-rail .side-nav a {
width: auto;
height: auto;
padding: 0.75rem 1rem;
justify-content: flex-start;
}
.sidebar.compact-rail + .dashboard-main,
.dashboard-main {
margin-left: 0;
padding: 1.25rem;
padding-top: 4.5rem;
}
@ -1760,8 +1747,11 @@ body.zen-mode-active .dash-header {
}
/* Compact Sidebar Rail */
.dashboard-body:has(.sidebar.compact-rail) {
grid-template-columns: 70px 1fr;
}
.sidebar.compact-rail {
width: 70px;
padding: 2.5rem 0.5rem;
align-items: center;
overflow-x: hidden;
@ -1811,9 +1801,6 @@ body.zen-mode-active .dash-header {
font-size: 1.25rem;
margin: 0;
}
.sidebar.compact-rail + .dashboard-main {
margin-left: 70px;
}
@media (min-width: 769px) {
body.zen-mode-active {

12
super-admin.html
View File

@ -14,11 +14,11 @@
<script src="tenantLoader.js"></script>
<style>
:root { --sidebar-w: 230px; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text-main); display: flex; min-height: 100vh; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text-main); display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
/* ── Sidebar ── */
.sa-sidebar { width: var(--sidebar-w); background: var(--primary); color: white; display: flex; flex-direction: column;
position: fixed; top: 0; left: 0; height: 100vh; z-index: 100; }
/* 🟦 Sidebar 🟦 */
.sa-sidebar { background: var(--primary); color: white; display: flex; flex-direction: column;
position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sa-logo { padding: 1.5rem 1.25rem; display: flex; align-items: center; gap: 0.75rem;
border-bottom: 1px solid rgba(255,255,255,0.1); }
.sa-logo-icon { width: 36px; height: 36px; background: rgba(255,255,255,0.15); border-radius: 10px;
@ -45,8 +45,8 @@
text-decoration: none; font-size: 0.8rem; padding: 0.4rem 0; transition: color 0.2s; }
.sa-logout:hover { color: white; }
/* ── Main area ── */
.sa-main { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
/* 🟦 Main area 🟦 */
.sa-main { display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; }
.sa-header { background: white; border-bottom: 1px solid var(--border); padding: 1rem 2rem;
display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; }
.sa-header h1 { font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 700; }