The_Great_Archive/ArchiveBox
1
0
Fork 0
mirror of https://github.com/ArchiveBox/ArchiveBox.git synced 2026-09-14 11:06:13 +05:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: pack compact output cards in dense grid

Browse Source
This commit is contained in:
Nick Sweeting 2026-08-29 14:10:25 -07:00
parent e1434ab0a9
commit 6ed11bd04f
No known key found for this signature in database
2 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
archivebox/templates/core/snapshot.html
View File

@ -1054,9 +1054,11 @@
object-position: top center;
}
.thumb-grid {
display: block;
column-width: clamp(180px, 14vw, 250px);
column-gap: 6px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(clamp(180px, 14vw, 250px), 1fr));
grid-auto-flow: row dense;
grid-auto-rows: 42px;
gap: 6px;
width: 100%;
max-width: 100%;
margin-left: 0;
@ -1076,17 +1078,19 @@
display: inline-flex;
flex-direction: column;
align-items: stretch;
grid-row: span 3;
break-inside: avoid;
margin-bottom: 6px;
margin-bottom: 0;
vertical-align: top;
content-visibility: auto;
contain-intrinsic-size: 138px;
}
.thumb-card:has([data-compact]) {
height: 46px;
min-height: 46px;
max-height: 46px;
contain-intrinsic-size: 46px;
height: 42px;
min-height: 42px;
max-height: 42px;
grid-row: span 1;
contain-intrinsic-size: 42px;
}
.thumb-card .thumb-body {
display: grid;
@ -1246,7 +1250,7 @@
}
.thumb-card:has([data-compact]) .thumbnail-wrapper,
.thumb-card:has([data-compact]) .thumbnail-wrapper.compact {
height: 24px;
height: 20px;
flex: 0 0 auto;
}
.thumb-card:has([data-compact]) .thumb-body {

14
archivebox/tests/test_ui_admin_snapshot.py
View File

@ -745,14 +745,18 @@ class TestSnapshotProgressStats:
assert "event.preventDefault()" in rendered
assert rendered.count(".on('click', handleSnapshotHeaderToggle)") == 1
def test_compact_output_cards_pack_into_columns(self):
def test_compact_output_cards_pack_into_dense_grid_rows(self):
template = (REPO_ROOT / "archivebox" / "templates" / "core" / "snapshot.html").read_text()
thumb_grid_css = template.split(".thumb-grid {", 1)[1].split("}", 1)[0]
thumb_card_css = template.split(".thumb-card {", 1)[1].split("}", 1)[0]
compact_card_css = template.split(".thumb-card:has([data-compact]) {", 1)[1].split("}", 1)[0]
assert "display: block;" in thumb_grid_css
assert "column-width: clamp(180px, 14vw, 250px);" in thumb_grid_css
assert "column-gap: 6px;" in thumb_grid_css
assert "grid-template-columns" not in thumb_grid_css
assert "display: grid;" in thumb_grid_css
assert "grid-template-columns: repeat(auto-fit, minmax(clamp(180px, 14vw, 250px), 1fr));" in thumb_grid_css
assert "grid-auto-flow: row dense;" in thumb_grid_css
assert "grid-auto-rows: 42px;" in thumb_grid_css
assert "grid-row: span 3;" in thumb_card_css
assert "grid-row: span 1;" in compact_card_css
class TestSnapshotOutputDeletion: