feat: nano-style footer bar, missing utility classes, CSS semantic vars

- layout_footer.php: add lt-footer with context-sensitive keyboard hint bar
  ([ ~ ] HOME | [ / ] SEARCH | [ + ] NEW | [ * ] CFG | [ ? ] HELP)
  Context adapts for dashboard, ticket, and admin pages
- layout_footer.php: wire show-keyboard-help and open-settings for all pages
- base.css: body { display:flex; flex-direction:column } + lt-main { flex:1 }
  so footer sticks to bottom of viewport on short pages
- base.css: add lt-flex-gap-xs/sm/md/lg and lt-flex-align-start/center/end
  (were used across all views but never defined — causing broken layouts)
- base.css: add --lt-danger/amber/cyan/success/text-primary CSS variables
  (referenced in ticket.css and dashboard.css fallbacks but never declared)
- base.css: add lt-text-danger/warning/success/info/primary utility classes
  (used in TicketView, DashboardView, admin views but not defined in base.css)
- DashboardView.php: remove ascii-banner.js (loaded but never called)
- TemplatesView.php: fix priority badge from lt-p* to lt-chip component

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-27 20:16:05 -04:00
parent 9bdeaf7731
commit 51f6991f9d
4 changed files with 134 additions and 5 deletions
+71 -1
View File
@@ -79,6 +79,13 @@
--accent-purple: #BF5FFF;
--accent-purple-dim: rgba(191,95,255,0.10);
/* ── App semantic aliases (used in ticket.css, dashboard.css) ── */
--lt-danger: var(--accent-red);
--lt-amber: var(--accent-amber);
--lt-cyan: var(--accent-cyan);
--lt-success: var(--accent-green);
--lt-text-primary: var(--accent-green);
/* Legacy aliases — keeps all existing component HTML working */
--terminal-green: var(--accent-green);
--terminal-green-dim: var(--accent-green-dim);
@@ -216,6 +223,8 @@ body {
min-height: 100vh;
overflow-x: hidden;
position: relative;
display: flex;
flex-direction: column;
}
a {
@@ -349,6 +358,7 @@ hr {
.lt-main {
padding-top: calc(var(--header-height) + var(--space-lg));
flex: 1;
}
.lt-layout {
@@ -369,6 +379,17 @@ hr {
.lt-flex-col { display: flex; flex-direction: column; }
.lt-flex-wrap { flex-wrap: wrap; }
/* Flex gap modifiers (used with lt-flex) */
.lt-flex-gap-xs { gap: var(--space-xs); }
.lt-flex-gap-sm { gap: var(--space-sm); }
.lt-flex-gap-md { gap: var(--space-md); }
.lt-flex-gap-lg { gap: var(--space-lg); }
/* Flex align modifiers */
.lt-flex-align-start { align-items: flex-start; }
.lt-flex-align-center { align-items: center; }
.lt-flex-align-end { align-items: flex-end; }
.lt-gap-sm { gap: var(--space-sm); }
.lt-gap-md { gap: var(--space-md); }
.lt-gap-lg { gap: var(--space-lg); }
@@ -2294,6 +2315,12 @@ select option:checked {
.lt-text-red { color: var(--accent-red); text-shadow: var(--glow-red); }
.lt-text-muted { color: var(--text-muted); }
.lt-text-dim { color: var(--text-dim); }
/* Semantic aliases */
.lt-text-danger { color: var(--accent-red); text-shadow: var(--glow-red); }
.lt-text-warning { color: var(--accent-amber); text-shadow: var(--glow-amber); }
.lt-text-success { color: var(--accent-green); text-shadow: var(--glow-green); }
.lt-text-info { color: var(--accent-cyan); text-shadow: var(--glow-cyan); }
.lt-text-primary { color: var(--accent-green); text-shadow: var(--glow-green); }
.lt-text-xs { font-size: 0.63rem; }
.lt-text-sm { font-size: 0.78rem; }
@@ -5477,7 +5504,7 @@ body.lt-is-offline .lt-main { margin-top: 2rem; transition: margin-top 0.25s eas
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
padding: var(--space-sm) var(--space-lg);
border-top: 1px solid var(--border-dim);
margin-top: auto;
background: var(--bg-secondary);
@@ -5485,6 +5512,49 @@ body.lt-is-offline .lt-main { margin-top: 2rem; transition: margin-top 0.25s eas
font-size: 0.7rem;
font-family: var(--font-mono);
}
/* Keyboard hint bar */
.lt-footer-hints {
display: flex;
gap: 0.75rem;
align-items: center;
flex-wrap: wrap;
}
.lt-footer-hint {
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: var(--text-muted);
font-size: 0.68rem;
letter-spacing: 0.03em;
text-decoration: none;
background: none;
border: none;
padding: 0;
font-family: inherit;
cursor: default;
transition: color 0.12s;
}
a.lt-footer-hint,
button.lt-footer-hint {
cursor: pointer;
}
a.lt-footer-hint:hover,
button.lt-footer-hint:hover {
color: var(--accent-green);
text-shadow: var(--glow-green);
}
.lt-footer-key {
color: var(--accent-green);
opacity: 0.75;
font-weight: 700;
}
.lt-footer-sep {
opacity: 0.25;
user-select: none;
}
@media (max-width: 479px) {
.lt-footer { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.lt-footer-hints { gap: 0.5rem; }
}