ZDDC
677ac01b32
Three tools (archive, browse, classifier) independently implemented
an empty-state pattern with three different CSS class naming
conventions and slightly different rules:
archive: .empty-state + .empty-state-content (BEM-less)
browse: .empty-state + .empty-state__inner (BEM)
classifier: .empty-state + .empty-state-content (BEM-less)
Same visual intent ("nothing's loaded yet — here's a welcome card
with instructions"), implemented three times with subtly different
spacing, no shared body styling for h2/p/ul/li, and incompatible
class names that prevented a future tool from copy-pasting the
pattern.
Promote a single consolidated rule set to shared/base.css using
BEM naming throughout:
.empty-state — base (flex centered, padding)
.empty-state--overlay — modifier: position absolute,
top 50px to clear app-header,
z-index 10. Used by archive
and classifier (their empty
states sit OVER the main
layout).
.empty-state__inner — content card (left-aligned,
text-muted, max-width 640)
.empty-state__inner--centered — modifier: tighter max-width
500, centered text, 2rem
padding. Used by tools whose
welcome screen reads as a
centered card.
.empty-state__inner h2/p/ul/ol/li — typography defaults
.empty-state__inner .note — italic small-print
.welcome-list — bullet list with left-aligned
text + auto margins; safe to
nest inside a centered card.
Per-tool changes:
- archive/template.html, archive/js/app.js: rename
.empty-state-content → .empty-state__inner empty-state__inner--centered;
add .empty-state--overlay to the outer .empty-state container.
Also the runtime-injected unsupported-browser markup in
showUnsupportedBrowserMessage() and the showHttpErrorState
selector.
- classifier/template.html: same renames.
- archive/css/layout.css + components.css: delete .empty-state*
and .welcome-list rules (now in shared).
- classifier/css/layout.css: same. Keep .empty-state.drag-over
locally — classifier is the only tool whose empty state acts
as a drop target.
- browse/css/base.css: delete .empty-state* (shared covers it).
browse's template was already using .empty-state__inner so no
template change needed.
LOC: shared/base.css gains ~70 lines; per-tool overrides lose ~85
combined. Net -15. More importantly, future tools can reuse the
pattern by adding two divs and (optionally) the --centered or
--overlay modifiers; no copy-paste required.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
240 lines
4.8 KiB
CSS
240 lines
4.8 KiB
CSS
/* Archive layout — tokens from shared/base.css */
|
|
|
|
/* Header — shared/base.css provides base .app-header; add archive-specific overrides */
|
|
.app-header {
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
.preview-toggle-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
font-size: 0.875rem;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Main Container */
|
|
.main-container {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Navigation Pane */
|
|
.nav-pane {
|
|
width: 300px;
|
|
min-width: 200px;
|
|
background: var(--bg);
|
|
border-right: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.nav-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--border);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
/* Grouping section - larger default size */
|
|
.nav-section:first-child {
|
|
flex: 0 0 auto;
|
|
height: 250px;
|
|
min-height: 50px;
|
|
}
|
|
|
|
/* Grouping section when collapsed */
|
|
.nav-section:first-child.collapsed {
|
|
height: auto;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
/* Transmittal section takes remaining space */
|
|
.nav-section:last-child {
|
|
flex: 1;
|
|
min-height: 150px;
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Nav section content wrapper */
|
|
.nav-section-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Hide content when collapsed */
|
|
.nav-section.collapsed .nav-section-content {
|
|
display: none;
|
|
}
|
|
|
|
/* Resize handles — persistent 1px divider; grab cursor on hover */
|
|
.resize-handle-horizontal {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 5px;
|
|
cursor: ew-resize;
|
|
z-index: 10;
|
|
/* Persistent 1px right-edge indicator */
|
|
border-right: 1px solid var(--border-dark);
|
|
}
|
|
|
|
.resize-handle-horizontal:hover,
|
|
.resize-handle-horizontal.resizing {
|
|
background: rgba(42, 90, 138, 0.25);
|
|
cursor: col-resize;
|
|
}
|
|
|
|
.resize-handle-vertical {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: -3px;
|
|
height: 6px;
|
|
cursor: ns-resize;
|
|
z-index: 10;
|
|
/* Persistent 1px bottom-edge indicator */
|
|
border-bottom: 1px solid var(--border-dark);
|
|
}
|
|
|
|
.resize-handle-vertical:hover,
|
|
.resize-handle-vertical.resizing {
|
|
background: rgba(42, 90, 138, 0.25);
|
|
cursor: row-resize;
|
|
}
|
|
|
|
.nav-section h3 {
|
|
font-size: 1em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
margin-bottom: 0.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.nav-section h3 {
|
|
font-size: 1em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
margin-bottom: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.folder-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
margin-top: 0.5rem;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Content Area */
|
|
.content-area {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--bg-secondary);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.content-header {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
background: var(--bg);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.content-header .content-actions {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.content-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Table Container */
|
|
.table-container {
|
|
flex: 1;
|
|
overflow: auto;
|
|
background: var(--bg);
|
|
margin: 1rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
/* Status Bar */
|
|
.status-bar {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
padding: 0.35rem 1rem;
|
|
background: var(--bg);
|
|
border-top: 1px solid var(--border);
|
|
font-size: 0.85em;
|
|
color: var(--text-muted);
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* Empty State — positioned below the app header */
|
|
/* .empty-state / .empty-state__inner / .welcome-list live in shared/base.css. */
|
|
|
|
/* Project warning banner */
|
|
.project-warning-banner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 16px;
|
|
background: #fff3cd;
|
|
border-bottom: 1px solid #ffc107;
|
|
color: #664d03;
|
|
font-size: 0.875rem;
|
|
gap: 12px;
|
|
}
|
|
.project-warning-banner.hidden { display: none; }
|
|
.project-warning-dismiss {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: #664d03;
|
|
font-size: 1rem;
|
|
padding: 0 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Project access warning banner */
|
|
.project-warning-banner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 16px;
|
|
background: #fff3cd;
|
|
border-bottom: 1px solid #ffc107;
|
|
color: #664d03;
|
|
font-size: 0.875rem;
|
|
gap: 12px;
|
|
}
|
|
.project-warning-banner.hidden { display: none; }
|
|
.project-warning-dismiss {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: #664d03;
|
|
font-size: 1rem;
|
|
padding: 0 4px;
|
|
flex-shrink: 0;
|
|
}
|