LAB/ArchiveBox_ArchiveBox
1
0
Fork 0
mirror of https://github.com/ArchiveBox/ArchiveBox.git synced 2026-01-24 05:53:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

perfect snapshot detail cards

Browse Source
This commit is contained in:
Nick Sweeting 2026-01-19 14:56:15 -08:00
parent 86e7973334
commit f3f55d3395
No known key found for this signature in database
3 changed files with 102 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
archivebox/core/models.py
View File

@ -2484,15 +2484,19 @@ class ArchiveResult(ModelWithOutputDir, ModelWithConfig, ModelWithNotes, ModelWi
'mp4', 'webm', 'mp3', 'opus', 'ogg', 'wav',
}
for name in ('index.html', 'index.htm'):
candidate = dir_path / name
if candidate.exists() and candidate.is_file():
return candidate
plugin_lower = (plugin_name or '').lower()
prefer_media = plugin_lower in ('ytdlp', 'yt-dlp', 'youtube-dl')
if not prefer_media:
for name in ('index.html', 'index.htm'):
candidate = dir_path / name
if candidate.exists() and candidate.is_file():
return candidate
candidates = []
file_count = 0
max_scan = 200
plugin_lower = (plugin_name or '').lower()
media_exts = {'mp4', 'webm', 'mp3', 'opus', 'ogg', 'wav'}
for file_path in dir_path.rglob('*'):
file_count += 1
if file_count > max_scan:
@ -2514,6 +2518,8 @@ class ArchiveResult(ModelWithOutputDir, ModelWithConfig, ModelWithNotes, ModelWi
priority = 60
elif ext in ('html', 'htm', 'pdf'):
priority = 40
elif ext in media_exts:
priority = 50 if prefer_media else 10
elif ext in ('png', 'jpg', 'jpeg', 'webp', 'svg', 'gif', 'ico'):
priority = 30
elif ext in ('json', 'jsonl', 'txt', 'md', 'csv', 'tsv'):

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

File diff suppressed because one or more lines are too long

64
archivebox/templates/core/snapshot_live.html
View File

@ -5,14 +5,32 @@
<head>
<title>{{title}}</title>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<link href="{% static 'bootstrap.min.css' %}" rel="stylesheet">
<style>
/* 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 */
* { box-sizing: border-box; }
html, body {
width: 100%;
height: 100%;
background-color: #ddd;
margin: 0;
padding: 0;
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
.container-fluid { width: 100%; margin: 0 auto; padding: 0 12px; }
.row { display: flex; flex-wrap: wrap; width: 100%; margin: 0; }
.col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-lg-12 { flex: 0 0 100%; max-width: 100%; }
.badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 12px; line-height: 1.2; }
.badge-default { background: rgba(255,255,255,0.2); color: #f6f6f6; }
.badge-info { background: #dbe7ff; color: #2b4aa0; }
.badge-success { background: #d4edda; color: #1e7e34; }
.badge-warning { background: #fff3cd; color: #856404; }
.badge-danger { background: #f8d7da; color: #721c24; }
.alert { padding: 6px 10px; border-radius: 6px; background: #f5f5f5; color: #333; }
header {
background-color: #aa1e55;
}
@ -345,10 +363,28 @@
}
.thumb-grid {
display: block;
column-width: 180px;
column-gap: 6px;
align-content: start;
width: 100%;
width: 100vw;
margin-left: calc(50% - 50vw);
padding: 0 6px;
column-fill: balance;
column-count: 2;
}
@media (min-width: 720px) {
.thumb-grid { column-count: 3; }
}
@media (min-width: 1024px) {
.thumb-grid { column-count: 4; }
}
@media (min-width: 1280px) {
.thumb-grid { column-count: 5; }
}
@media (min-width: 1600px) {
.thumb-grid { column-count: 6; }
}
@media (min-width: 1920px) {
.thumb-grid { column-count: 7; }
}
.thumb-card {
box-shadow: 2px 2px 7px 0px rgba(0, 0, 0, 0.1);
@ -364,6 +400,8 @@
height: 138px;
min-height: 138px;
max-height: 138px;
display: flex;
flex-direction: column;
}
.thumb-card:has([data-compact]) {
height: 46px;
@ -379,6 +417,7 @@
text-overflow: ellipsis;
color: #222;
background-color: #f6f6f6;
flex: 0 0 auto;
}
.thumb-card .thumb-body h4 {
font-size: 0.8em;
@ -394,6 +433,14 @@
.thumb-card iframe.card-img-top {
display: block;
width: 100%;
flex: 1 1 auto;
min-height: 0;
}
.thumb-card .thumbnail-wrapper > *,
.thumb-card iframe.card-img-top {
width: 100%;
height: 100%;
object-fit: cover;
}
.thumb-card:has([data-compact]) .thumbnail-wrapper,
.thumb-card:has([data-compact]) .thumbnail-wrapper.compact {
@ -666,17 +713,6 @@
{% endwith %}
</div>
{% endfor %}
<div class="thumb-card">
<div class="thumb-body">
<a href="./" target="preview">
<h4>Headers, JSON, etc.</h4>
</a>
<!--<a href="{{result.path|urlencode}}" target="preview"><h4 class="card-title">{{result.name}}</h4></a>-->
</div>
<iframe class="card-img-top" src="./" sandbox="" scrolling="no" loading="lazy"></iframe>
</div>
</div>
</div>
</header>