Phase 6: Add comprehensive responsive design for ASCII frames
## 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 <noreply@anthropic.com>
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user