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>
274 lines
5 KiB
CSS
274 lines
5 KiB
CSS
/* Classifier layout — tokens from shared/base.css */
|
|
|
|
/* .empty-state / .empty-state__inner / .welcome-list live in
|
|
shared/base.css. Classifier keeps the .drag-over modifier locally
|
|
because it's the only tool whose empty state is a drop target. */
|
|
.empty-state.drag-over {
|
|
background: var(--primary-light);
|
|
outline: 2px dashed var(--primary);
|
|
outline-offset: -4px;
|
|
}
|
|
|
|
/* Browser Warning */
|
|
.browser-warning {
|
|
background-color: rgba(217, 119, 6, 0.08);
|
|
border: 2px solid var(--warning);
|
|
border-radius: var(--radius);
|
|
padding: 1.5rem;
|
|
margin: 1.5rem 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.browser-warning h3 {
|
|
color: var(--warning);
|
|
margin-top: 0;
|
|
}
|
|
|
|
.browser-warning ul {
|
|
margin: 0.5rem 0;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
/* Main App */
|
|
.main-app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
background-color: var(--bg);
|
|
position: relative;
|
|
}
|
|
|
|
/* Header — shared/base.css provides .app-header base */
|
|
.app-header {
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
.header-divider {
|
|
color: var(--border);
|
|
margin: 0 0.25rem;
|
|
}
|
|
|
|
/* Main Content */
|
|
.main-content {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Folder Tree Pane */
|
|
.folder-tree-pane {
|
|
width: 300px;
|
|
min-width: 150px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: var(--bg-secondary);
|
|
border-right: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
transition: width 0.2s ease, min-width 0.2s ease;
|
|
}
|
|
|
|
.folder-tree-pane.collapsed {
|
|
width: 40px !important;
|
|
min-width: 40px !important;
|
|
max-width: 40px !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.folder-tree-pane.collapsed .pane-header-controls,
|
|
.folder-tree-pane.collapsed .folder-tree,
|
|
.folder-tree-pane.collapsed .pane-header h3 {
|
|
display: none;
|
|
}
|
|
|
|
.folder-tree-pane.collapsed .pane-header {
|
|
padding: 0.5rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.folder-tree-pane.collapsed .pane-header-title {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.pane-header-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.collapse-tree-btn {
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* Resize Handle */
|
|
.resize-handle {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 5px;
|
|
cursor: col-resize;
|
|
background-color: transparent;
|
|
z-index: 10;
|
|
}
|
|
|
|
.resize-handle:hover {
|
|
background-color: var(--primary);
|
|
}
|
|
|
|
.pane-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.75rem 1rem;
|
|
background-color: var(--bg);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.pane-header-left,
|
|
.pane-header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.pane-header h3 {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.pane-header-controls {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.folder-stats,
|
|
.file-stats {
|
|
display: flex;
|
|
gap: 1rem;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.folder-tree {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
/* Folder Item */
|
|
.folder-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.5rem;
|
|
cursor: pointer;
|
|
border-radius: var(--radius);
|
|
user-select: none;
|
|
transition: background-color 0.15s;
|
|
}
|
|
|
|
.folder-item:hover {
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
.folder-item.selected {
|
|
background-color: var(--bg-selected);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.folder-item.folder-hover-highlight {
|
|
background-color: rgba(217, 119, 6, 0.12);
|
|
border-left: 3px solid var(--warning);
|
|
transition: background-color 0.2s, border-left 0.2s;
|
|
}
|
|
|
|
.folder-item.has-unsaved {
|
|
border-left: 3px solid var(--warning);
|
|
}
|
|
|
|
.folder-toggle {
|
|
width: 20px;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.folder-icon {
|
|
margin-right: 0.5rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.folder-name {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.folder-count {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.folder-children {
|
|
margin-left: 1.5rem;
|
|
}
|
|
|
|
/* Spreadsheet Pane */
|
|
.spreadsheet-pane {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.spreadsheet-container {
|
|
flex: 1;
|
|
overflow: auto;
|
|
background-color: var(--bg);
|
|
}
|
|
|
|
/* ZIP Extract Button in Tree */
|
|
.zip-extract-btn {
|
|
margin-left: auto;
|
|
padding: 0.15rem 0.4rem;
|
|
font-size: 0.7rem;
|
|
opacity: 0;
|
|
transition: opacity 0.15s;
|
|
}
|
|
|
|
.folder-item:hover .zip-extract-btn {
|
|
opacity: 1;
|
|
}
|
|
|
|
.zip-extract-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: wait;
|
|
}
|
|
|
|
/* ZIP Extract All Button */
|
|
.zip-extract-all-btn {
|
|
margin-left: auto;
|
|
padding: 0.15rem 0.4rem;
|
|
font-size: 0.7rem;
|
|
opacity: 0;
|
|
transition: opacity 0.15s;
|
|
}
|
|
|
|
.folder-item:hover .zip-extract-all-btn {
|
|
opacity: 1;
|
|
}
|
|
|
|
.zip-extract-all-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: wait;
|
|
}
|