From 719905872b3baee56fc81c7c6d1c86fc0d7845d9 Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Wed, 7 Jan 2026 10:58:11 -0500 Subject: [PATCH] Phase 6: Add comprehensive responsive design for ASCII frames MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Tablet Breakpoint (1024px) - Simplify ASCII corners from heavy double (╔╗╚╝) to light single (┌┐└┘) - Reduce corner font size from 1.5rem to 1.2rem - Simplify section headers from ╠═══ to ├─ - Simplify dividers from ╞═══╡ to ├─┤ - Maintain visual hierarchy while reducing complexity ## Mobile Breakpoint (768px) - Remove ALL ASCII corner decorations (::before, ::after, corner spans) - Remove inner frame corner decorations - Simplify section headers to simple "> " prefix - Simplify subsection headers to "• " bullet point - Remove all ASCII dividers completely - Reduce padding: ascii-content to 0.5rem, ascii-frame-inner to 0.5rem - Reduce border width to 1px on inner frames - Font size reduction for section headers: 0.9rem - Maintain functionality while maximizing screen space ## Very Small Mobile Breakpoint (480px) - Remove ALL pseudo-element decorations globally - Collapse nested frames to minimal borders (1px) - Minimal padding everywhere (0.25rem) - Section headers without decorations, normal text transform - Simplified font sizes (0.85rem for headers) - Re-enable only essential pseudo-elements (search prompt) - Maximum compatibility for small screens ## Progressive Enhancement Strategy - Desktop: Full elaborate ASCII decorations with heavy borders - Tablet: Simplified single-line ASCII decorations - Mobile: Minimal decorations, focus on content - Very Small: No decorations, pure functionality ## Design Philosophy - Maintain terminal aesthetic at all sizes - Progressive simplification as screen shrinks - Never sacrifice functionality for decoration - Ensure readability on all devices - Optimize for touch targets on mobile ## Files Modified - assets/css/dashboard.css: Added ~140 lines of responsive rules * Enhanced existing 1024px breakpoint with ASCII frame rules * Enhanced existing 768px breakpoint with complete mobile simplification * Enhanced existing 480px breakpoint with minimal frame collapsing ## Testing Checklist - [ ] Desktop (1920x1080): Full decorations visible - [ ] Tablet (1024x768): Simplified single-line decorations - [ ] Mobile (768x1024): No corners, simple headers - [ ] Small Mobile (480x800): Minimal UI, maximum content - [ ] Touch targets adequate on all mobile sizes - [ ] All functionality preserved across breakpoints 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 --- assets/css/dashboard.css | 154 ++++++++++++++++++++++++++++++++++----- 1 file changed, 134 insertions(+), 20 deletions(-) diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css index 2beddf7..5d35437 100644 --- a/assets/css/dashboard.css +++ b/assets/css/dashboard.css @@ -1769,16 +1769,55 @@ body.dark-mode select option { .ascii-banner { font-size: 0.6rem !important; } - + /* Reduce table padding */ th, td { padding: 8px 12px; } - + /* Stack bulk actions */ .bulk-actions-buttons { flex-direction: column; } + + /* Simplify ASCII corners - use single-line chars */ + .ascii-frame-outer::before { + content: '┌'; + font-size: 1.2rem; + } + + .ascii-frame-outer::after { + content: '┐'; + font-size: 1.2rem; + } + + .bottom-left-corner { + content: '└'; + font-size: 1.2rem; + } + + .bottom-right-corner { + content: '┘'; + font-size: 1.2rem; + } + + /* Simplify section headers */ + .ascii-section-header::before { + content: '├─ '; + } + + .ascii-section-header::after { + content: ' ─┤'; + } + + /* Simplify dividers */ + .ascii-divider::before { + content: '├'; + } + + .ascii-divider::after { + content: '┤'; + } } /* Mobile */ @@ -1787,8 +1826,61 @@ body.dark-mode select option { .ascii-banner { font-size: 0.5rem !important; } - - /* Hide decorative ASCII corners on small screens */ + + /* Remove all ASCII corners for mobile */ + .ascii-frame-outer::before, + .ascii-frame-outer::after, + .bottom-left-corner, + .bottom-right-corner { + display: none !important; + } + + /* Simplify inner frames - remove corners */ + .ascii-frame-inner::before, + .ascii-frame-inner::after { + display: none !important; + } + + /* Keep section headers but simplify */ + .ascii-section-header::before { + content: '> '; + } + + .ascii-section-header::after { + content: ''; + } + + .ascii-section-header { + font-size: 0.9rem; + padding: 0.5rem 1rem; + } + + /* Simplify subsection headers */ + .ascii-subsection-header::before { + content: '• '; + } + + .ascii-subsection-header::after { + content: ''; + } + + /* Remove dividers on mobile */ + .ascii-divider { + display: none; + } + + /* Reduce padding in ascii-content */ + .ascii-content { + padding: 0.5rem; + } + + .ascii-frame-inner { + padding: 0.5rem; + margin: 0.5rem; + border-width: 1px; + } + + /* Hide decorative ASCII corners on small screens (legacy) */ table::before, table::after, .ticket-container::before, @@ -1797,22 +1889,22 @@ body.dark-mode select option { .settings-modal::after { display: none; } - + /* Simplify borders */ .ticket-header::before { display: none; } - + /* Full-width hamburger menu */ .hamburger-content { width: 100%; left: -100%; } - + .hamburger-content.open { left: 0; } - + /* Reduce padding everywhere */ .ascii-box, .terminal-form-group, @@ -1820,31 +1912,31 @@ body.dark-mode select option { .timeline-content { padding: 10px; } - + /* Smaller glow effects */ .glow-text, [class*="glow-"] { text-shadow: 0 0 3px currentColor; } - + /* Stack buttons vertically */ .btn, button { width: 100%; margin: 5px 0; } - + /* Reduce font size slightly */ body { font-size: 14px; } - + /* Smaller table text */ th, td { font-size: 0.85rem; padding: 6px 8px; } - + /* Hide some table columns on mobile */ th:nth-child(n+6), td:nth-child(n+6) { @@ -1858,37 +1950,59 @@ body.dark-mode select option { .ascii-banner { font-size: 0.4rem !important; } - - /* Remove all pseudo-element decorations */ + + /* Remove all pseudo-element decorations except essential ones */ *::before, *::after { content: none !important; } - + + /* Collapse nested frames - minimal borders */ + .ascii-frame-outer, + .ascii-frame-inner { + border-width: 1px; + padding: 0.25rem; + margin: 0.25rem; + } + + /* Section headers without decorations */ + .ascii-section-header, + .ascii-subsection-header { + font-size: 0.85rem; + padding: 0.4rem 0.5rem; + text-transform: none; + letter-spacing: normal; + } + + /* Minimal content padding */ + .ascii-content { + padding: 0.25rem; + } + /* Re-enable essential pseudo-elements */ .search-form::before { content: '$ ' !important; } - + /* Simplify modals */ .settings-modal, .modal-content { width: 95%; max-width: 95%; } - + /* Reduce ticket container size */ .ticket-container { width: 95%; min-width: unset; margin: 20px auto; } - + /* Stack tabs vertically */ .ticket-tabs { flex-direction: column; } - + .tab-btn { width: 100%; margin-bottom: 5px;