Skip to content

Style app shell and route partials in admin dashboard #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fallofpheonix wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Style app shell and route partials in admin dashboard #10

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
192 changes: 191 additions & 1 deletion dashboard-admin/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -687,4 +687,194 @@ body {
transform: translate(-50%, 0);
opacity: 1;
}
}
}
/* ------------------------------------------------------------------ */
/* Shell layout patch: styles for the index.html app shell and the */
/* route partials (dashboard.html etc.), which use newer class names */
/* than the original map-centric layout above. */
/* ------------------------------------------------------------------ */

.app {
display: flex;
flex-direction: column;
height: 100vh;
}

.topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 28px;
background: var(--sidebar-bg);
border-bottom: 1px solid var(--glass-border);
}

.topbar .logo {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.15rem;
letter-spacing: 0.04em;
background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.status-pill {
font-size: 0.78rem;
padding: 6px 14px;
border-radius: 999px;
color: var(--success-green);
border: 1px solid rgba(0, 242, 96, 0.35);
background: rgba(0, 242, 96, 0.08);
}

.layout {
display: flex;
flex: 1;
min-height: 0;
}

.layout .sidebar {
width: var(--sidebar-width);
flex-shrink: 0;
gap: 6px;
Comment on lines +738 to +741

@sourcery-ai sourcery-ai Bot Jul 5, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (bug_risk): The gap property on .layout .sidebar will have no effect unless the sidebar is a flex or grid container.

Confirm whether .layout .sidebar is defined as a flex or grid container elsewhere. If not, gap will be ignored. If the goal is vertical spacing between sidebar items, consider making the sidebar a flex/grid container or applying margins to the child elements instead.

}

.layout .sidebar a {
color: var(--text-secondary);
text-decoration: none;
padding: 10px 14px;
border-radius: 10px;
font-size: 0.92rem;
transition: background 0.2s, color 0.2s;
}

.layout .sidebar a:hover {
background: var(--card-bg);
color: var(--text-primary);
}

.layout .content {
flex: 1;
overflow-y: auto;
padding: 28px 32px;
}

.loader {
color: var(--text-secondary);
padding: 40px;
text-align: center;
}

/* Route partials share the .dashboard-grid root class; inside the
shell content pane it is a card grid, not the full-page grid. */
.content .dashboard-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
height: auto;
}

.content .overview-header {
grid-column: 1 / -1;
display: flex;
align-items: baseline;
justify-content: space-between;
}

.content .overview-header h2 {
font-family: var(--font-heading);
font-size: 1.5rem;
}

.risk-index {
font-family: var(--font-heading);
font-size: 1.6rem;
color: var(--warning-orange);
}

.risk-index span {
font-size: 0.8rem;
color: var(--text-secondary);
margin-left: 6px;
}

.summary-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}

.content .card {
background: var(--card-bg);
border: 1px solid var(--glass-border);
border-radius: 16px;
padding: 22px;
}

.content .card h3 {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 10px;
}

.content .metric {
font-family: var(--font-heading);
font-size: 2.2rem;
font-weight: 700;
}
Comment on lines +825 to +829

@chatgpt-codex-connector chatgpt-codex-connector Bot Jul 5, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Scope metric styling to dashboard metrics

When the Diagnostics route is loaded into <main class="content">, system-health.html also contains several <div class="metric"> rows for the service details, so this broad selector turns those label/value rows into 2.2rem bold headline text. This selector appears intended for the dashboard summary numbers; scoping it to .risk-card .metric or .summary-cards .metric would avoid breaking the health page layout.

Useful? React with 👍 / 👎.


.content .metric.high {
color: var(--emergency-red);
}

.content .metric.medium {
color: var(--warning-orange);
}

.placeholder-map {
height: 180px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
color: var(--text-secondary);
border: 1px dashed var(--glass-border);
background:
radial-gradient(circle at 30% 40%, rgba(255, 78, 80, 0.25), transparent 34%),
radial-gradient(circle at 62% 60%, rgba(249, 212, 35, 0.18), transparent 30%),
radial-gradient(circle at 78% 30%, rgba(0, 210, 255, 0.18), transparent 26%),
linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03));
}

.feed-item {
padding: 10px 0;
color: var(--text-secondary);
font-size: 0.9rem;
border-bottom: 1px solid var(--glass-border);
}

.quick-actions {
grid-column: 1 / -1;
display: flex;
gap: 12px;
}

.quick-actions button {
padding: 12px 22px;
border-radius: 12px;
border: 1px solid var(--glass-border);
background: linear-gradient(110deg, rgba(0, 210, 255, 0.18), rgba(157, 80, 187, 0.18));
color: var(--text-primary);
font-size: 0.9rem;
cursor: pointer;
transition: filter 0.2s;
Comment on lines +867 to +875

@sourcery-ai sourcery-ai Bot Jul 5, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Buttons have a hover state but no focus-visible treatment, which can hurt keyboard accessibility.

Only :hover is styled, so keyboard users may rely on inconsistent or overridden default focus styles. Please add a clear :focus-visible treatment (e.g., outline or box-shadow) aligned with the design to make these actions accessible to keyboard navigation.

Suggested implementation:

.quick-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 12px;
}

.quick-actions button {
    padding: 12px 22px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: linear-gradient(110deg, rgba(0, 210, 255, 0.18), rgba(157, 80, 187, 0.18));
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: filter 0.2s, box-shadow 0.2s;
}

/* Mouse hover state */
.quick-actions button:hover {
    filter: brightness(1.08);
}

/* Keyboard focus-visible state for accessibility */
.quick-actions button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 210, 255, 0.75);
}

.app {
  1. If there is already a .quick-actions button rule or .quick-actions button:hover rule elsewhere in base.css, merge these declarations instead of duplicating them to avoid conflicting styles.
  2. You may want to replace the hard-coded rgba(0, 210, 255, 0.75) with a design token (e.g., var(--accent) or a dedicated focus color variable) if such a variable exists in your design system to keep the focus ring consistent with the rest of the app.

}

.quick-actions button:hover {
filter: brightness(1.25);
}
Loading