thegeneralist01/archivr
1
Fork 0
mirror of https://github.com/thegeneralist01/archivr synced 2026-07-21 18:55:36 +02:00
Code Issues Activity

fix(frontend): index-based stripes for root and child rows

Browse source 
Root rows: EntriesView passes rowIndex from entries.map to EntryRow,
which applies entry-row-outer--light/dark. Retires both nth-child stripe
blocks so skeleton rows can never shift the first real entry to dark.
Skeleton rows keep a :not(.entry-row-outer) nth-child fallback.

Child rows: colours changed from the warm root palette (paper-3/#f2ede5)
to cooler near-whites (#fafaf8/#f2f0ec) so children are visually distinct
from their parent row regardless of which stripe the parent sits on.
This commit is contained in:
TheGeneralist 2026-07-21 14:07:14 +02:00
parent b5be4436d7
commit e7104cf29d
Signed by: thegeneralist01
SSH key fingerprint: SHA256:pp9qddbCNmVNoSjevdvQvM5z0DHN7LTa8qBMbcMq/R4
7 changed files with 21 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

1
crates/archivr-server/static/assets/index-CBH4Eq76.css
View file

File diff suppressed because one or more lines are too long

1
crates/archivr-server/static/assets/index-D8ic-z4p.css Normal file
View file

File diff suppressed because one or more lines are too long

12
crates/archivr-server/static/assets/index-KOO2O4ar.js → crates/archivr-server/static/assets/index-DMYakNuy.js
View file

File diff suppressed because one or more lines are too long

4
crates/archivr-server/static/index.html
View file

@ -4,8 +4,8 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Archivr</title>
<script type="module" crossorigin src="/assets/index-KOO2O4ar.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-CBH4Eq76.css">
<script type="module" crossorigin src="/assets/index-DMYakNuy.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-D8ic-z4p.css">
</head>
<body>
<div id="root"></div>

3
frontend/src/components/EntriesView.jsx
View file

@ -18,10 +18,11 @@ export default function EntriesView({ entries, selectedUids, onRowClick, archive
{pendingCaptures.filter(c => c.archiveId === archiveId).reverse().map(cap => (
<SkeletonEntryRow key={cap.id} />
))}
{entries.map(entry => (
{entries.map((entry, idx) => (
<EntryRow
key={entry.entry_uid}
entry={entry}
rowIndex={idx}
archiveId={archiveId}
isSelected={selectedUids.size === 1 && selectedUids.has(entry.entry_uid)}
isMultiSelected={selectedUids.size >= 2 && selectedUids.has(entry.entry_uid)}

3
frontend/src/components/EntryRow.jsx
View file

@ -40,7 +40,7 @@ function ChildRow({ entry, index, onRowClick, selectedUids }) {
);
}
export default function EntryRow({ entry, archiveId, isSelected, isMultiSelected, onRowClick, selectedUids, deletedUids }) {
export default function EntryRow({ entry, archiveId, rowIndex, isSelected, isMultiSelected, onRowClick, selectedUids, deletedUids }) {
const [favFailed, setFavFailed] = useState(false);
const [expanded, setExpanded] = useState(false);
const [children, setChildren] = useState(null);
@ -96,6 +96,7 @@ export default function EntryRow({ entry, archiveId, isSelected, isMultiSelected
const outerClass = [
'entry-row-outer',
rowIndex % 2 === 0 ? 'entry-row-outer--light' : 'entry-row-outer--dark',
isSelected && 'is-selected',
isMultiSelected && 'is-multi-selected',
].filter(Boolean).join(' ');

15
frontend/src/styles.css
View file

@ -299,8 +299,12 @@ select {
border-bottom: 1px solid var(--line-soft);
}
#entries-body > div > div { padding: 7px 10px; flex-shrink: 0; overflow: hidden; }
#entries-body > div:nth-child(even) { background: #f2ede5; }
#entries-body > div:nth-child(odd) { background: var(--paper-3); }
/* Skeleton rows (no index class) fall back to nth-child; real rows use explicit classes. */
#entries-body > div:not(.entry-row-outer):nth-child(even) { background: #f2ede5; }
#entries-body > div:not(.entry-row-outer):nth-child(odd) { background: var(--paper-3); }
/* Index-based stripes for real entry rows — immune to skeleton sibling count. */
#entries-body > .entry-row-outer--light { background: var(--paper-3); }
#entries-body > .entry-row-outer--dark { background: #f2ede5; }
#entries-body > div.is-selected {
background: #eee2d2;
box-shadow: inset 0 0 0 2px var(--accent);
@ -2756,9 +2760,6 @@ body.has-audio-bar { padding-bottom: 56px; }
#entries-body > .entry-row-outer > .entry-row-main > div:last-child { padding-right: 22px; }
#entries-body > .entry-row-outer > .entry-row-main .col-added { padding-left: 22px; }
/* Striping: one outer wrapper per entry, so nth-child alternation is preserved. */
#entries-body > .entry-row-outer:nth-child(even) { background: #f2ede5; }
#entries-body > .entry-row-outer:nth-child(odd) { background: var(--paper-3); }
/* Selection: class lives on outer wrapper; background + stroke scoped to inner row
so expanded child entries don't inherit the selection highlight. */
@ -2796,8 +2797,8 @@ body.has-audio-bar { padding-bottom: 56px; }
}
.child-entry-row:hover { opacity: 1; }
.child-entry-row:last-child { border-bottom: none; }
.child-entry-row--light { background: var(--paper-3); }
.child-entry-row--dark { background: #f2ede5; }
.child-entry-row--light { background: #fafaf8; }
.child-entry-row--dark { background: #f2f0ec; }
.child-entry-row.is-selected {
background: #eee2d2;
box-shadow: inset 0 0 0 2px var(--accent);