LotusGuild/tinker_tickets
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance CSS/HTML with semantic elements, utility classes, and breakpoints

Browse Source 
- Move inline styles to CSS classes in ticket.css and dashboard.css
- Add intermediate responsive breakpoints (600px, 900px, 1200px)
- Convert HTML to semantic elements (header, section, article)
- Add ARIA attributes for modals and navigation
- Add utility classes for text styling and spacing
- Update cache-busting version numbers

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-01-31 10:29:20 -05:00
parent 73162d9a9b
commit 2657e86d24
4 changed files with 461 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
assets/css/dashboard.css
View File

@@ -7,13 +7,13 @@
/* Terminal Colors */
--terminal-green: #00ff41;
--terminal-green-dim: #00aa2a;
--terminal-green-dim: #00cc33;
--terminal-amber: #ffb000;
--terminal-cyan: #00ffff;
--terminal-red: #ff4444;
--text-primary: #00ff41;
--text-secondary: #00cc33;
--text-muted: #008822;
--text-muted: #00bb33; /* Improved contrast ratio for WCAG AA */
/* Border & UI */
--border-color: #00ff41;
@@ -58,6 +58,18 @@
/* Transitions */
--transition-default: all 0.3s ease;
/* Z-Index Scale - Centralized stacking context management */
--z-base: 1;
--z-dropdown: 100;
--z-sticky: 200;
--z-fixed: 300;
--z-modal-backdrop: 400;
--z-modal: 500;
--z-popover: 600;
--z-tooltip: 700;
--z-toast: 800;
--z-overlay: 9999;
}
/* Dark theme (now same as light for terminal aesthetic) */
@@ -105,7 +117,7 @@ body::before {
transparent 2px
);
pointer-events: none;
z-index: 9999;
z-index: var(--z-overlay);
animation: scanline 8s linear infinite;
}
@@ -521,6 +533,84 @@ h1 {
margin-left: 3px;
}
/* ===== INTERMEDIATE RESPONSIVE BREAKPOINTS ===== */
/* Large desktop (1200px+) */
@media (min-width: 1200px) {
.dashboard-layout {
max-width: 1800px;
margin: 0 auto;
}
.stats-widgets .stats-row {
grid-template-columns: repeat(6, 1fr);
}
.kanban-board {
grid-template-columns: repeat(4, 1fr);
}
}
/* Medium desktop (900px - 1199px) */
@media (min-width: 900px) and (max-width: 1199px) {
.stats-widgets .stats-row {
grid-template-columns: repeat(3, 1fr);
}
.dashboard-toolbar {
flex-wrap: wrap;
gap: 1rem;
}
.toolbar-center {
order: 3;
width: 100%;
justify-content: flex-start;
}
}
/* Tablet landscape (600px - 899px) */
@media (min-width: 600px) and (max-width: 899px) {
.stats-widgets .stats-row {
grid-template-columns: repeat(2, 1fr);
}
.dashboard-toolbar {
flex-direction: column;
align-items: stretch;
}
.toolbar-left,
.toolbar-center,
.toolbar-right {
width: 100%;
}
.toolbar-search {
width: 100%;
}
.search-box {
flex: 1;
}
.dashboard-sidebar {
width: 200px;
}
.kanban-board {
grid-template-columns: repeat(2, 1fr);
}
table {
font-size: 0.85rem;
}
th, td {
padding: 0.5rem;
}
}
/* Responsive design for smaller screens */
@media (max-width: 768px) {
.user-header {
@@ -597,7 +687,7 @@ h1 {
font-size: 1.5rem;
color: var(--terminal-green);
line-height: 1;
z-index: 10;
z-index: var(--z-base);
}
.ascii-frame-outer::after {
@@ -608,7 +698,7 @@ h1 {
font-size: 1.5rem;
color: var(--terminal-green);
line-height: 1;
z-index: 10;
z-index: var(--z-base);
}
/* Bottom corners as separate elements with enhanced glow */
@@ -620,7 +710,7 @@ h1 {
color: var(--terminal-green);
text-shadow: var(--glow-green);
line-height: 1;
z-index: 10;
z-index: var(--z-base);
animation: corner-pulse 4s ease-in-out infinite;
}
@@ -1068,7 +1158,7 @@ h1 {
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 100;
z-index: var(--z-dropdown);
font-family: var(--font-mono);
color: var(--terminal-green);
}
@@ -1323,7 +1413,7 @@ table::before {
color: var(--terminal-green);
text-shadow: var(--glow-green);
line-height: 1;
z-index: 10;
z-index: var(--z-base);
}
table::after {
@@ -1335,7 +1425,7 @@ table::after {
color: var(--terminal-green);
text-shadow: var(--glow-green);
line-height: 1;
z-index: 10;
z-index: var(--z-base);
}
th, td {
@@ -1833,7 +1923,7 @@ input[type="checkbox"]:checked {
box-shadow: var(--shadow);
border-radius: 0;
padding: 10px;
z-index: 100;
z-index: var(--z-dropdown);
border: 1px solid var(--border-color);
}
@@ -2295,7 +2385,7 @@ input[type="checkbox"]:checked {
width: 100%;
height: 100%;
background: var(--bg-primary);
z-index: 99999;
z-index: var(--z-modal-backdrop);
display: flex;
align-items: center;
justify-content: center;
@@ -2318,7 +2408,7 @@ input[type="checkbox"]:checked {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10000;
z-index: var(--z-modal);
background: var(--bg-primary);
border: 3px solid var(--terminal-green);
padding: 2rem;
@@ -2478,7 +2568,7 @@ body.dark-mode .btn-secondary {
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
z-index: var(--z-modal);
}
.modal-content {
@@ -2920,7 +3010,7 @@ body.dark-mode select option {
color: var(--terminal-green);
text-shadow: var(--glow-green);
box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
z-index: 10001;
z-index: var(--z-toast);
opacity: 0;
transform: translateX(400px);
transition: all 0.3s ease;
@@ -2994,7 +3084,7 @@ body.dark-mode select option {
left: 0;
width: 100vw;
height: 100vh;
z-index: 10000;
z-index: var(--z-modal);
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(5px);
display: flex;
@@ -3185,6 +3275,80 @@ body.dark-mode select option {
cursor: pointer;
}
/* Setting select width variants */
.setting-select-wide {
max-width: 70%;
}
.setting-select-full {
max-width: 100%;
}
.setting-select-narrow {
max-width: 90px;
}
/* Setting row layout variants */
.setting-row-right {
justify-content: flex-end;
}
/* Button size variants for settings */
.btn-setting {
padding: 0.5rem 1rem;
}
/* Utility text classes */
.text-muted {
color: var(--text-muted);
}
.text-small {
font-size: 0.85rem;
}
.text-center {
text-align: center;
}
/* Utility spacing classes */
.mt-sm {
margin-top: 0.25rem;
}
.display-block {
display: block;
}
/* Empty state styling */
.empty-state {
text-align: center;
padding: 3rem;
}
.empty-state-terminal {
color: var(--terminal-green);
text-shadow: var(--glow-green);
font-size: 0.8rem;
line-height: 1.2;
}
/* Separator text */
.separator-text {
color: var(--terminal-green);
}
/* Checkbox column width */
.checkbox-column {
width: 40px;
}
/* Actions column width */
.actions-column {
width: 100px;
text-align: center;
}
.setting-select:focus {
outline: none;
border-color: var(--terminal-amber);
@@ -3481,7 +3645,7 @@ code.inline-code {
left: 0;
width: 100vw;
height: 100vh;
z-index: 10000;
z-index: var(--z-modal);
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(5px);
display: flex;
@@ -3852,7 +4016,7 @@ tr:hover .quick-actions {
background: var(--bg-primary);
border: 2px solid var(--terminal-green);
min-width: 120px;
z-index: 100;
z-index: var(--z-dropdown);
box-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
}
@@ -3894,7 +4058,7 @@ tr:hover .quick-actions {
background: var(--bg-primary);
border: 2px solid var(--priority-1);
min-width: 180px;
z-index: 1000;
z-index: var(--z-popover);
box-shadow: 0 0 15px rgba(255, 77, 77, 0.3);
}
@@ -4033,7 +4197,7 @@ table td:nth-child(4) {
/* ===== INLINE TICKET PREVIEW POPUP ===== */
.ticket-preview-popup {
position: absolute;
z-index: 10000;
z-index: var(--z-modal);
width: 320px;
background: var(--bg-primary);
border: 2px solid var(--terminal-green);
@@ -4533,7 +4697,7 @@ table td:nth-child(4) {
.user-header {
position: sticky;
top: 0;
z-index: 100;
z-index: var(--z-dropdown);
padding: 0.5rem 0.75rem;
flex-wrap: nowrap;
gap: 0.5rem;
@@ -4684,7 +4848,7 @@ table td:nth-child(4) {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 1000;
z-index: var(--z-popover);
}
.mobile-sidebar-overlay.active {
@@ -4706,7 +4870,7 @@ table td:nth-child(4) {
cursor: pointer;
align-items: center;
justify-content: center;
z-index: 10;
z-index: var(--z-base);
}
/* ===== MAIN CONTENT AREA ===== */
@@ -5076,7 +5240,7 @@ table td:nth-child(4) {
height: 60px;
background: var(--bg-primary);
border-top: 2px solid var(--terminal-green);
z-index: 100;
z-index: var(--z-dropdown);
padding: 0;
}