feat: improve mobile responsiveness
- Add mobile navigation drawer with hamburger menu - Sidebar slides in as overlay on mobile (<768px) - Close button inside sidebar for mobile - Ensure touch targets are at least 44px on mobile - Make modals full-screen on mobile - Editor toolbar scrolls horizontally on mobile - Improve spacing and typography for small screens - Keep dark theme consistent across breakpoints - Projects page cards stack vertically on mobile - Document cards full-width on mobile
This commit is contained in:
Hiro
@@ -1239,10 +1239,90 @@ ul, ol {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* === Mobile Navigation Drawer === */
|
||||
.mobile-nav-btn {
|
||||
display: none;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 1.25rem;
|
||||
transition: var(--transition-fast);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mobile-nav-btn:hover {
|
||||
background: var(--color-hover);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.sidebar-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: calc(var(--z-sidebar) - 1);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar-overlay.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sidebar-close-btn {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: var(--space-3);
|
||||
right: var(--space-3);
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 1.25rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sidebar-close-btn:hover {
|
||||
background: var(--color-hover);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* === Responsive === */
|
||||
@media (max-width: 1024px) {
|
||||
.sidebar {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: var(--z-sidebar);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.25s ease;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.sidebar.mobile-open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.sidebar-scroll {
|
||||
padding-top: 56px;
|
||||
}
|
||||
|
||||
.sidebar-close-btn {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mobile-nav-btn {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar-overlay {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.doc-sidebar {
|
||||
@@ -1276,22 +1356,300 @@ ul, ol {
|
||||
}
|
||||
|
||||
.content-body {
|
||||
padding: var(--space-4);
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
.doc-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.doc-card {
|
||||
padding: var(--space-4);
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.doc-card-actions {
|
||||
opacity: 1;
|
||||
position: static;
|
||||
margin-top: var(--space-2);
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.modal {
|
||||
min-width: auto;
|
||||
margin: var(--space-4);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
padding: 0;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: var(--space-4);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
flex-shrink: 0;
|
||||
padding: var(--space-4);
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.login-card {
|
||||
margin: var(--space-4);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
/* === Projects Page Mobile === */
|
||||
.projects-page {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.projects-header {
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.projects-header h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.project-card {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.project-card-header {
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.project-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* === Header Mobile === */
|
||||
.app-header {
|
||||
padding: var(--space-2) var(--space-3);
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.app-header .logo {
|
||||
font-size: 1rem;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.header-actions .btn {
|
||||
padding: var(--space-2) var(--space-3);
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
/* === Content Header Mobile === */
|
||||
.content-header {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.content-header-left {
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.content-header-left h1 {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.content-header-right {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search-box-inline {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.search-box-inline input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* === Editor Mobile === */
|
||||
.editor-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.editor-header {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
}
|
||||
|
||||
.editor-form {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.editor-toolbar {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
gap: var(--space-1);
|
||||
padding: var(--space-2);
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toolbar-separator {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toolbar-tabs {
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: var(--space-2) var(--space-3);
|
||||
min-height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
min-height: 200px;
|
||||
font-size: 16px; /* Prevents zoom on iOS */
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
min-height: 44px;
|
||||
font-size: 16px; /* Prevents zoom on iOS */
|
||||
}
|
||||
|
||||
/* === Doc Card Mobile === */
|
||||
.doc-card-header {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.doc-title {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.doc-tags {
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.doc-meta {
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
/* === Touch Targets === */
|
||||
.btn {
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-icon-only {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.tree-item {
|
||||
min-height: 44px;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
}
|
||||
|
||||
.tree-item .tree-action {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
min-height: 44px;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
}
|
||||
|
||||
.quick-link {
|
||||
min-height: 44px;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
}
|
||||
|
||||
.doc-card {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* === Empty State Mobile === */
|
||||
.empty-state {
|
||||
padding: var(--space-8);
|
||||
}
|
||||
|
||||
/* === Breadcrumbs Mobile === */
|
||||
.breadcrumb-nav {
|
||||
margin-left: 0;
|
||||
flex-wrap: wrap;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
/* === Toast Mobile === */
|
||||
#toast-container {
|
||||
bottom: var(--space-4);
|
||||
right: var(--space-4);
|
||||
left: var(--space-4);
|
||||
}
|
||||
|
||||
.toast {
|
||||
min-width: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure minimum touch target size */
|
||||
@media (max-width: 768px) {
|
||||
a, button, [role="button"] {
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
font-size: 16px; /* Prevents iOS zoom */
|
||||
}
|
||||
}
|
||||
|
||||
/* === Projects Page === */
|
||||
|
||||
Reference in New Issue
Block a user