Skip to content

Commit f3f55d3

Browse files
piratepirate
committed
perfect snapshot detail cards
1 parent 86e7973 commit f3f55d3

File tree

3 files changed

+103
-30
lines changed

3 files changed

+103
-30
lines changed

‎archivebox/core/models.py‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2484,15 +2484,19 @@ def _find_best_output_file(dir_path: Path, plugin_name: str | None = None) -> Op
24842484
'mp4', 'webm', 'mp3', 'opus', 'ogg', 'wav',
24852485
}
24862486

2487-
for name in ('index.html', 'index.htm'):
2488-
candidate = dir_path / name
2489-
if candidate.exists() and candidate.is_file():
2490-
return candidate
2487+
plugin_lower = (plugin_name or '').lower()
2488+
prefer_media = plugin_lower in ('ytdlp', 'yt-dlp', 'youtube-dl')
2489+
2490+
if not prefer_media:
2491+
for name in ('index.html', 'index.htm'):
2492+
candidate = dir_path / name
2493+
if candidate.exists() and candidate.is_file():
2494+
return candidate
24912495

24922496
candidates = []
24932497
file_count = 0
24942498
max_scan = 200
2495-
plugin_lower = (plugin_name or '').lower()
2499+
media_exts = {'mp4', 'webm', 'mp3', 'opus', 'ogg', 'wav'}
24962500
for file_path in dir_path.rglob('*'):
24972501
file_count += 1
24982502
if file_count > max_scan:
@@ -2514,6 +2518,8 @@ def _find_best_output_file(dir_path: Path, plugin_name: str | None = None) -> Op
25142518
priority = 60
25152519
elif ext in ('html', 'htm', 'pdf'):
25162520
priority = 40
2521+
elif ext in media_exts:
2522+
priority = 50 if prefer_media else 10
25172523
elif ext in ('png', 'jpg', 'jpeg', 'webp', 'svg', 'gif', 'ico'):
25182524
priority = 30
25192525
elif ext in ('json', 'jsonl', 'txt', 'md', 'csv', 'tsv'):

‎archivebox/templates/core/snapshot.html‎

Lines changed: 41 additions & 10 deletions
Large diffs are not rendered by default.

‎archivebox/templates/core/snapshot_live.html‎

Lines changed: 51 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,32 @@
55
<head>
66
<title>{{title}}</title>
77
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
8-
<link href="{% static 'bootstrap.min.css' %}" rel="stylesheet">
98
<style>
109
/* Keep this inline, don't move to external css file because this template is used to generate static exports that need to be usable as-is without an accompanying staticfiles dir */
10+
* { box-sizing: border-box; }
1111
html, body {
1212
width: 100%;
1313
height: 100%;
1414
background-color: #ddd;
15-
}
15+
margin: 0;
16+
padding: 0;
17+
}
18+
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
19+
a { color: inherit; text-decoration: none; }
20+
a:hover { text-decoration: underline; }
21+
.container-fluid { width: 100%; margin: 0 auto; padding: 0 12px; }
22+
.row { display: flex; flex-wrap: wrap; width: 100%; margin: 0; }
23+
.col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
24+
.col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
25+
.col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
26+
.col-lg-12 { flex: 0 0 100%; max-width: 100%; }
27+
.badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 12px; line-height: 1.2; }
28+
.badge-default { background: rgba(255,255,255,0.2); color: #f6f6f6; }
29+
.badge-info { background: #dbe7ff; color: #2b4aa0; }
30+
.badge-success { background: #d4edda; color: #1e7e34; }
31+
.badge-warning { background: #fff3cd; color: #856404; }
32+
.badge-danger { background: #f8d7da; color: #721c24; }
33+
.alert { padding: 6px 10px; border-radius: 6px; background: #f5f5f5; color: #333; }
1634
header {
1735
background-color: #aa1e55;
1836
}
@@ -345,10 +363,28 @@
345363
}
346364
.thumb-grid {
347365
display: block;
348-
column-width: 180px;
349366
column-gap: 6px;
350367
align-content: start;
351-
width: 100%;
368+
width: 100vw;
369+
margin-left: calc(50% - 50vw);
370+
padding: 0 6px;
371+
column-fill: balance;
372+
column-count: 2;
373+
}
374+
@media (min-width: 720px) {
375+
.thumb-grid { column-count: 3; }
376+
}
377+
@media (min-width: 1024px) {
378+
.thumb-grid { column-count: 4; }
379+
}
380+
@media (min-width: 1280px) {
381+
.thumb-grid { column-count: 5; }
382+
}
383+
@media (min-width: 1600px) {
384+
.thumb-grid { column-count: 6; }
385+
}
386+
@media (min-width: 1920px) {
387+
.thumb-grid { column-count: 7; }
352388
}
353389
.thumb-card {
354390
box-shadow: 2px 2px 7px 0px rgba(0, 0, 0, 0.1);
@@ -364,6 +400,8 @@
364400
height: 138px;
365401
min-height: 138px;
366402
max-height: 138px;
403+
display: flex;
404+
flex-direction: column;
367405
}
368406
.thumb-card:has([data-compact]) {
369407
height: 46px;
@@ -379,6 +417,7 @@
379417
text-overflow: ellipsis;
380418
color: #222;
381419
background-color: #f6f6f6;
420+
flex: 0 0 auto;
382421
}
383422
.thumb-card .thumb-body h4 {
384423
font-size: 0.8em;
@@ -394,6 +433,14 @@
394433
.thumb-card iframe.card-img-top {
395434
display: block;
396435
width: 100%;
436+
flex: 1 1 auto;
437+
min-height: 0;
438+
}
439+
.thumb-card .thumbnail-wrapper > *,
440+
.thumb-card iframe.card-img-top {
441+
width: 100%;
442+
height: 100%;
443+
object-fit: cover;
397444
}
398445
.thumb-card:has([data-compact]) .thumbnail-wrapper,
399446
.thumb-card:has([data-compact]) .thumbnail-wrapper.compact {
@@ -666,17 +713,6 @@ <h4>{% plugin_icon result.name %} {{result.name|plugin_name|truncatechars:20}} <
666713
{% endwith %}
667714
</div>
668715
{% endfor %}
669-
670-
671-
<div class="thumb-card">
672-
<div class="thumb-body">
673-
<a href="./" target="preview">
674-
<h4>Headers, JSON, etc.</h4>
675-
</a>
676-
<!--<a href="{{result.path|urlencode}}" target="preview"><h4 class="card-title">{{result.name}}</h4></a>-->
677-
</div>
678-
<iframe class="card-img-top" src="./" sandbox="" scrolling="no" loading="lazy"></iframe>
679-
</div>
680716
</div>
681717
</div>
682718
</header>

0 commit comments

Comments
 (0)