Dinarassan/clientos
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile drawer + responsive polish

Browse Source
This commit is contained in:
Dinarassan 2026-05-22 14:39:04 +05:00
parent 972d2be0d0
commit 19c11b6f24
1 changed files with 103 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
app.css
View File

@ -1207,19 +1207,116 @@ a { color: inherit; text-decoration: none; }
} }
/* ========================================================================= /* =========================================================================
Mobile responsive Mobile / tablet responsive
========================================================================= */ ========================================================================= */
.mobile-menu-btn { display: none; }
.sidebar-backdrop { display: none; }
@media (max-width: 900px) { @media (max-width: 900px) {
.shell { .shell {
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-areas: "topbar" "main"; grid-template-areas: "topbar" "main";
} }
.sidebar { display: none; } .sidebar {
.main { padding: 20px 16px 64px; } position: fixed;
top: 0; left: 0; bottom: 0;
width: 280px;
z-index: 200;
transform: translateX(-100%);
transition: transform 260ms var(--ease);
box-shadow: 0 0 40px rgba(0,0,0,0.4);
display: flex;
}
.shell.sidebar-open .sidebar { transform: translateX(0); }
.sidebar-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(11,14,19,0.55);
backdrop-filter: blur(2px);
z-index: 150;
animation: fadeIn 180ms var(--ease);
}
.mobile-menu-btn {
display: grid;
font-size: 20px;
margin-right: -4px;
}
.topbar { padding: 0 14px; gap: 10px; }
.topbar-search input { font-size: 14px; }
.main { padding: 20px 16px 80px; }
.page-header {
flex-direction: column;
align-items: stretch;
gap: 14px;
}
.page-title { font-size: 22px; } .page-title { font-size: 22px; }
.hero { padding: 22px; } .breadcrumb { font-size: 12px; }
.hero { padding: 22px; border-radius: var(--radius-lg); }
.hero h1 { font-size: 22px; } .hero h1 { font-size: 22px; }
.kanban { grid-template-columns: 1fr; } .hero p { font-size: 13.5px; }
.chat-layout { grid-template-columns: 1fr; height: auto; } .hero-stats { gap: 18px; }
.hero-stat .num { font-size: 22px; }
.kanban {
grid-template-columns: 1fr;
gap: 10px;
}
.kanban-column { min-height: auto; }
.chat-layout {
grid-template-columns: 1fr;
height: auto;
gap: 12px;
}
.chat-channels { max-height: 200px; } .chat-channels { max-height: 200px; }
.chat-pane { min-height: 480px; }
.chat-message .body { max-width: 80%; }
.calendar-day {
min-height: 70px;
padding: 4px 5px;
gap: 2px;
}
.calendar-day-num { font-size: 11px; }
.calendar-day.today .calendar-day-num { width: 20px; height: 20px; }
.cal-event {
font-size: 10px;
padding: 2px 5px;
border-left-width: 2px;
}
.calendar-dow { padding: 6px 4px; font-size: 9.5px; }
.calendar-toolbar { flex-wrap: wrap; padding: 10px; gap: 8px; }
.calendar-month-label { min-width: 0; flex: 1; font-size: 14px; }
.grid-cards { grid-template-columns: 1fr; }
.list-row { padding: 10px 12px; gap: 10px; }
.list-row .title { font-size: 13.5px; }
.list-row .sub { font-size: 12px; }
.modal { max-width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.modal-backdrop { align-items: flex-end; padding: 0; }
.modal-header, .modal-body, .modal-footer { padding-left: 16px; padding-right: 16px; }
.modal-footer { flex-wrap: wrap; }
.dropdown {
position: fixed;
top: var(--topbar-h);
left: 8px; right: 8px;
min-width: 0;
max-width: none;
}
.row { flex-wrap: wrap; }
}
@media (max-width: 480px) {
.topbar-search input::placeholder { font-size: 12px; }
.calendar-day { min-height: 56px; }
.hero { padding: 18px; }
.hero h1 { font-size: 20px; }
.hero-stats { gap: 14px; }
.hero-stat .num { font-size: 20px; }
.hero-stat .lbl { font-size: 10.5px; }
} }