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

style: implement modern grid layout, compact sidebar, keyboard accessibility, and hide global header in zen mode
Build Curio HMS / build-and-deploy (push) Successful in 45s Details

This commit is contained in:
Deep Koluguri 2026-05-23 11:41:09 -04:00
parent 78e95bfc17
commit fa3eafb072
3 changed files with 58 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
dashboard.css
View File

@ -1347,14 +1347,16 @@
.zen-layout-3col {
display: grid;
grid-template-columns: 15% 60% 25%;
/* 1fr handles the queue; minmax blocks ensure typing canvas and context remain readable */
grid-template-columns: 1fr minmax(450px, 2.5fr) minmax(300px, 1.2fr);
gap: 1.5rem;
align-items: start;
transition: grid-template-columns 0.3s ease;
padding: 1rem;
height: calc(100vh - 120px); /* Fill screen height perfectly without overflow strings */
}
.zen-layout-3col.collapsed-queue {
grid-template-columns: 5% 70% 25%;
grid-template-columns: 5% minmax(450px, 3fr) minmax(300px, 1.2fr);
}
.zen-pipeline {
@ -1398,14 +1400,16 @@
}
.soap-container {
display: flex;
flex-direction: column;
gap: 1.25rem;
overflow-y: auto; /* Allow independent scrolling for documentation */
max-height: 100%;
background: white;
border-radius: 30px;
padding: 2.5rem;
box-shadow: 0 10px 40px rgba(0,0,0,0.02);
border: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.soap-field {
@ -1429,24 +1433,33 @@
.zen-textarea-small {
width: 100%;
min-height: 100px;
border: 1px solid var(--border);
border-radius: 12px;
padding: 1rem;
font-size: 1.1rem;
line-height: 1.6;
color: var(--text-main);
font-family: 'Inter', sans-serif;
min-height: 110px;
resize: vertical;
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
line-height: 1.5;
padding: 0.75rem;
border: 1px solid #cbd5e1;
border-radius: 6px;
transition: border-color 0.2s ease;
background: #F8FAFC;
transition: all 0.2s;
color: var(--text-main);
}
.zen-textarea-small:focus {
border-color: #3b82f6;
outline: none;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
background: white;
border-color: var(--secondary);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.lang-select {
height: 56px;
border-radius: 12px;
border: 1px solid var(--border);
padding: 0 1rem;
font-family: 'Inter', sans-serif;
font-weight: 500;
}
.btn-sync {
@ -1544,3 +1557,18 @@
/* Utility Hidden */
.hidden { display: none !important; }
/* Maximize vertical canvas during live examinations */
body.zen-mode-active .dash-header {
display: none;
}
/* Compact Sidebar Rail */
.sidebar.compact-rail {
width: 70px;
}
.sidebar.compact-rail .logo-text,
.sidebar.compact-rail nav a span:not(:first-child),
.sidebar.compact-rail .user-profile .info {
display: none;
}

14
dashboard.html
View File

@ -14,7 +14,7 @@
</head>
<body class="dashboard-body">
<div class="sidebar-mobile-toggle" onclick="toggleSidebar()">☰ Menu</div>
<aside class="sidebar" id="sidebar">
<aside class="sidebar compact-rail" id="sidebar">
<div class="logo">
<span class="logo-icon">C</span>
<span class="logo-text" data-tenant-name>Curio</span>
@ -161,22 +161,22 @@
<div class="soap-container">
<div class="soap-field">
<label for="soap-s">Subjective</label>
<textarea id="soap-s" class="zen-textarea-small" placeholder="Patient reports..."></textarea>
<textarea id="soap-s" class="zen-textarea-small" placeholder="Patient reports..." tabindex="1"></textarea>
</div>
<div class="soap-field">
<div class="field-header">
<label for="soap-o">Objective</label>
<button class="btn-small btn-sync" onclick="syncVitals()">⬇️ Sync Vitals</button>
<button class="btn-small btn-sync" onclick="syncVitals()" tabindex="-1">⬇️ Sync Vitals</button>
</div>
<textarea id="soap-o" class="zen-textarea-small" placeholder="Observations, vitals, exam findings..."></textarea>
<textarea id="soap-o" class="zen-textarea-small" placeholder="Observations, vitals, exam findings..." tabindex="2"></textarea>
</div>
<div class="soap-field">
<label for="soap-a">Assessment</label>
<textarea id="soap-a" class="zen-textarea-small" placeholder="Diagnosis, reasoning..."></textarea>
<textarea id="soap-a" class="zen-textarea-small" placeholder="Diagnosis, reasoning..." tabindex="3"></textarea>
</div>
<div class="soap-field">
<label for="soap-p">Plan</label>
<textarea id="soap-p" class="zen-textarea-small" placeholder="Treatment, Rx, follow-up..."></textarea>
<textarea id="soap-p" class="zen-textarea-small" placeholder="Treatment, Rx, follow-up..." tabindex="4"></textarea>
</div>
</div>
@ -532,6 +532,6 @@
</div>
</main>
<script src="dashboard.js?v=22"></script>
<script src="dashboard.js?v=23"></script>
</body>
</html>

6
dashboard.js
View File

@ -269,6 +269,12 @@ window.showSection = (sectionId) => {
const targetEl = document.getElementById(target);
if (targetEl) targetEl.classList.remove('hidden');
if (target === 'doctor-zen-section') {
document.body.classList.add('zen-mode-active');
} else {
document.body.classList.remove('zen-mode-active');
}
if (sectionId === 'queue' && target === 'overview-section') {
document.getElementById('queue-section')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
}