diff --git a/static/app.js b/static/app.js index f546ef7..78d5d3d 100644 --- a/static/app.js +++ b/static/app.js @@ -170,15 +170,6 @@ function escHtml(s) { } -// ---- Mobile More Panel ---- - -function toggleMobileMore() { - const panel = document.getElementById('mobile-more-panel'); - const btn = document.getElementById('mobile-more-btn'); - if (panel) panel.classList.toggle('open'); - if (btn) btn.classList.toggle('active'); -} - // ---- Timer Pill (topbar running timer) ---- let timerStartAt = null; @@ -243,3 +234,19 @@ document.addEventListener('DOMContentLoaded', () => { pollTimer(); setInterval(pollTimer, 30000); }); + +// ---- Mobile More Panel ---- +document.addEventListener('DOMContentLoaded', function() { + var btn = document.getElementById('mobMoreBtn'); + var panel = document.getElementById('mobMore'); + var overlay = document.getElementById('mobOverlay'); + if (!btn || !panel || !overlay) return; + btn.addEventListener('click', function() { + panel.classList.toggle('open'); + overlay.classList.toggle('open'); + }); + overlay.addEventListener('click', function() { + panel.classList.remove('open'); + overlay.classList.remove('open'); + }); +}); diff --git a/static/style.css b/static/style.css index a99d6b1..4d22214 100644 --- a/static/style.css +++ b/static/style.css @@ -750,6 +750,25 @@ a:hover { color: var(--accent-hover); } gap: 20px; } +.stat-card-link { + text-decoration: none; + color: inherit; + display: block; +} + +.stat-card-link .stat-card { + transition: border-color 0.15s; +} + +.stat-card-link:hover .stat-card { + border-color: var(--accent); + cursor: pointer; +} + +.stat-card-link:hover { + color: inherit; +} + .stat-card { background: var(--surface); border: 1px solid var(--border); @@ -1079,129 +1098,6 @@ a:hover { color: var(--accent-hover); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } -/* ---- Mobile Bottom Nav ---- */ -.mobile-bottom-bar { - display: none; - position: fixed; - bottom: 0; - left: 0; - right: 0; - height: 56px; - background: var(--surface); - border-top: 1px solid var(--border); - z-index: 1000; - flex-direction: row; - flex-wrap: nowrap; - overflow: hidden; - align-items: center; - justify-content: space-around; - padding: 0 4px; - padding-bottom: env(safe-area-inset-bottom, 0); -} - -.mobile-nav-item { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 2px; - flex: 1; - min-width: 0; - padding: 6px 0; - color: var(--muted); - text-decoration: none; - background: none; - border: none; - font-family: var(--font-body); - cursor: pointer; - transition: color var(--transition); - -webkit-tap-highlight-color: transparent; -} - -.mobile-nav-item svg { - width: 24px; - height: 24px; - flex-shrink: 0; -} - -.mobile-nav-item span { - font-size: 10px; - font-weight: 500; - line-height: 1; -} - -.mobile-nav-item.active { - color: var(--accent); -} - -/* Mobile More Panel */ -.mobile-more-panel { - display: none; -} - -.mobile-more-panel.open { - display: block; -} - -.mobile-more-backdrop { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.5); - z-index: 998; -} - -.mobile-more-content { - position: fixed; - bottom: 56px; - left: 0; - right: 0; - background: var(--surface); - border-top: 1px solid var(--border); - border-radius: var(--radius-lg) var(--radius-lg) 0 0; - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 0; - padding: 16px; - padding-bottom: calc(16px + env(safe-area-inset-bottom, 0)); - z-index: 999; -} - -.mobile-more-item { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 6px; - padding: 12px 4px; - min-height: 48px; - color: var(--text-secondary); - text-decoration: none; - font-size: 0.78rem; - font-weight: 500; - border-radius: var(--radius); - transition: background var(--transition); - -webkit-tap-highlight-color: transparent; -} - -.mobile-more-item:hover { - background: var(--surface2); - color: var(--text); -} - -.mobile-more-item svg { - width: 24px; - height: 24px; - color: var(--muted); - flex-shrink: 0; -} - -.mobile-more-item span { - line-height: 1; -} - /* ---- Responsive ---- */ @media (max-width: 768px) { body { padding-bottom: 60px; } @@ -1210,57 +1106,77 @@ a:hover { color: var(--accent-hover); } .form-grid { grid-template-columns: 1fr; } .dashboard-grid { grid-template-columns: 1fr; } .page-content { padding: 16px; padding-bottom: 72px; } - .mobile-bottom-bar { display: flex; } - - /* Topbar: allow wrapping for quick capture row */ + /* Topbar: stack vertically on mobile */ .topbar { height: auto; - min-height: var(--topbar-height); - flex-wrap: wrap; - padding: 8px 16px; + min-height: auto; + flex-direction: column; + align-items: stretch; + padding: 8px 12px; gap: 8px; } - .quick-capture-form { - order: 10; - width: 100%; - flex: 0 0 100%; + .topbar-env { + align-self: flex-start; } - .quick-capture-input { + .topbar-spacer { + display: none; + } + + .quick-capture-form { + order: unset; width: 100%; - flex: 1; - min-height: 44px; - font-size: 16px; - padding: 10px 12px 10px 32px; + flex: unset; + display: flex; + align-items: center; + gap: 8px; + padding: 0; } .quick-capture-icon { - left: 12px; - font-size: 1rem; + display: none; + } + + .quick-capture-input { + flex: 1; + width: auto; + height: 36px; + min-height: auto; + background: var(--surface2); + border: 1px solid var(--border); + border-left: 1px solid var(--border); + border-radius: 4px; + padding: 0 10px; + font-size: 16px; } .quick-capture-submit { display: flex; align-items: center; justify-content: center; - width: 44px; - height: 44px; + width: 36px; + height: 36px; background: var(--accent); color: #fff; border: none; - border-radius: var(--radius); + border-radius: 4px; font-size: 1.2rem; font-weight: 700; cursor: pointer; - margin-left: 8px; flex-shrink: 0; + margin-left: 0; } .quick-capture-submit:hover { background: var(--accent-hover); } + .search-trigger { + width: 100%; + min-width: unset; + } + /* Capture form mobile */ .capture-form-card { padding: 12px; } .capture-form-card .form-textarea { @@ -1677,3 +1593,126 @@ a:hover { color: var(--accent-hover); } .eisenhower-x-spacer { display: none; } .eisenhower-quadrant { min-height: 120px; } } + +/* === MOBILE NAV BAR === */ +.mob-nav { + display: none !important; +} + +@media (max-width: 768px) { + .mob-nav { + display: flex !important; + position: fixed !important; + bottom: 0 !important; + left: 0 !important; + right: 0 !important; + height: 56px !important; + background: var(--surface) !important; + border-top: 1px solid var(--border) !important; + z-index: 9999 !important; + flex-direction: row !important; + flex-wrap: nowrap !important; + align-items: center !important; + justify-content: space-around !important; + padding: 0 !important; + margin: 0 !important; + overflow: hidden !important; + } + + .mob-nav__item { + display: flex !important; + flex-direction: column !important; + align-items: center !important; + justify-content: center !important; + flex: 1 1 0 !important; + min-width: 0 !important; + max-width: 20% !important; + height: 56px !important; + padding: 6px 0 !important; + margin: 0 !important; + color: var(--muted) !important; + text-decoration: none !important; + background: none !important; + border: none !important; + font-family: inherit !important; + font-size: 10px !important; + font-weight: 500 !important; + line-height: 1 !important; + cursor: pointer !important; + -webkit-tap-highlight-color: transparent !important; + gap: 2px !important; + } + + .mob-nav__item svg { + width: 22px !important; + height: 22px !important; + flex-shrink: 0 !important; + } + + .mob-nav__item span { + font-size: 10px !important; + line-height: 1 !important; + } + + .mob-nav__item--active { + color: var(--accent) !important; + } + + .mob-overlay { + display: none !important; + position: fixed !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + background: rgba(0,0,0,0.5) !important; + z-index: 10000 !important; + } + + .mob-overlay.open { + display: block !important; + } + + .mob-more { + display: none !important; + position: fixed !important; + bottom: 56px !important; + left: 0 !important; + right: 0 !important; + background: var(--surface) !important; + border-top: 1px solid var(--border) !important; + border-radius: 12px 12px 0 0 !important; + z-index: 10001 !important; + padding: 16px !important; + grid-template-columns: repeat(3, 1fr) !important; + gap: 8px !important; + } + + .mob-more.open { + display: grid !important; + } + + .mob-more__item { + display: flex !important; + flex-direction: column !important; + align-items: center !important; + justify-content: center !important; + gap: 6px !important; + padding: 12px 4px !important; + color: var(--text) !important; + text-decoration: none !important; + font-size: 0.78rem !important; + font-weight: 500 !important; + border-radius: 8px !important; + } + + .mob-more__item:hover { + background: var(--surface2) !important; + } + + .mob-more__item svg { + width: 22px !important; + height: 22px !important; + color: var(--muted) !important; + } +} diff --git a/templates/base.html b/templates/base.html index 2981376..aa237da 100644 --- a/templates/base.html +++ b/templates/base.html @@ -5,6 +5,17 @@