forks/archivebox
1
0
Fork 0
Code Releases Activity

Improve snapshot layout

Browse source
This commit is contained in:
Alex Kotov 2023-08-28 22:06:54 +04:00
parent 51d7532185
commit 6731fb9203
Signed by: kotovalexarian
GPG key ID: 553C0EBBEB5D5F08
2 changed files with 25 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
archivebox/templates/core/snapshot.html
View file

@ -1,5 +1,3 @@
{% load tz core_tags %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@ -43,12 +41,6 @@
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4">
<div class="info-chunk" style="max-width: 280px">
<h5>Tags <small title="Auto-guessed content type">({{extension}})</small></h5>
{% for tag in tags_str|split:',' %}
<div class="badge badge-info" style="word-break: break-all;">{{tag}}</div>
{% endfor %}
</div>
<div class="info-chunk"> <div class="info-chunk">
<h5>Status</h5> <h5>Status</h5>
<div class="badge badge-{{status_color}}">{{status}}</div> <div class="badge badge-{{status_color}}">{{status}}</div>
@ -84,7 +76,7 @@
</div> </div>
</div> </div>
<div class="row header-bottom-frames"> <div class="row header-bottom-frames">
<div class="col-lg-2"> <div class="col-sm-6 col-lg-2">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<a href="{{singlefile_path}}" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{singlefile_path}}" title="Open in new tab..." target="_blank" rel="noopener">
@ -94,7 +86,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-2"> <div class="col-sm-6 col-lg-2">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<a href="{{pdf_path}}" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{pdf_path}}" title="Open in new tab..." target="_blank" rel="noopener">
@ -104,7 +96,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-2"> <div class="col-sm-6 col-lg-2">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<a href="{{screenshot_path}}" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{screenshot_path}}" title="Open in new tab..." target="_blank" rel="noopener">
@ -114,7 +106,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-2"> <div class="col-sm-6 col-lg-2">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<a href="{{archive_url}}" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{archive_url}}" title="Open in new tab..." target="_blank" rel="noopener">
@ -125,11 +117,11 @@
</div> </div>
</div> </div>
{% if PREVIEW_ARCHIVE_DOT_ORG %} {% if PREVIEW_ARCHIVE_DOT_ORG %}
<div class="col-lg-2"> <div class="col-sm-6 col-lg-2">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<a href="{{archive_org_path}}" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{archive_org_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>🌐 web.archive.org/web/...</code></p> <p class="card-text"><code>🌐 archive.org/...</code></p>
</a> </a>
<a href="{{archive_org_path}}" target="preview"><h4 class="card-title" style="font-size: 14px">Archive.Org</h4></a> <a href="{{archive_org_path}}" target="preview"><h4 class="card-title" style="font-size: 14px">Archive.Org</h4></a>
</div> </div>
@ -137,7 +129,7 @@
</div> </div>
{% endif %} {% endif %}
{% if PREVIEW_ORIGINALS %} {% if PREVIEW_ORIGINALS %}
<div class="col-lg-2"> <div class="col-sm-6 col-lg-2">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<a href="{{url}}" title="Open in new tab..." target="_blank" rel="noopener" referrerpolicy="no-referrer"> <a href="{{url}}" title="Open in new tab..." target="_blank" rel="noopener" referrerpolicy="no-referrer">
@ -150,7 +142,7 @@
</div> </div>
</div> </div>
{% endif %} {% endif %}
<div class="col-lg-2"> <div class="col-sm-6 col-lg-2">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<a href="{{headers_path}}" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{headers_path}}" title="Open in new tab..." target="_blank" rel="noopener">
@ -160,7 +152,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-2"> <div class="col-sm-6 col-lg-2">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<a href="{{dom_path}}" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{dom_path}}" title="Open in new tab..." target="_blank" rel="noopener">
@ -170,7 +162,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-2"> <div class="col-sm-6 col-lg-2">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<a href="{{readability_path}}" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{readability_path}}" title="Open in new tab..." target="_blank" rel="noopener">
@ -181,7 +173,7 @@
</div> </div>
</div> </div>
<br/> <br/>
<div class="col-lg-2"> <div class="col-sm-6 col-lg-2">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<a href="{{mercury_path}}" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{mercury_path}}" title="Open in new tab..." target="_blank" rel="noopener">
@ -191,7 +183,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-2"> <div class="col-sm-6 col-lg-2">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<a href="{{media_path}}" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{media_path}}" title="Open in new tab..." target="_blank" rel="noopener">
@ -201,7 +193,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-2"> <div class="col-sm-6 col-lg-2">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<a href="{{git_path}}" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{git_path}}" title="Open in new tab..." target="_blank" rel="noopener">
@ -222,7 +214,7 @@
allow-scripts allow-scripts
allow-top-navigation-by-user-activation allow-top-navigation-by-user-activation
allow-top-navigation-to-custom-protocols" allow-top-navigation-to-custom-protocols"
class="full-page-iframe" class="full-page-iframe d-none d-sm-block"
></iframe> ></iframe>
</body> </body>
</html> </html>

37
public/static/snapshot.css
View file

@ -1,11 +1,16 @@
html {
overflow-x: hidden;
}
html, body { html, body {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #ddd;
} }
html {
overflow-x: hidden;
overflow-y: hidden;
}
body {
display: flex;
flex-direction: column;
}
header { header {
background-color: #aa1e55; background-color: #aa1e55;
} }
@ -93,9 +98,8 @@ header small code {
} }
.full-page-iframe { .full-page-iframe {
width: 100%; width: 100%;
height: 69vh; height: 100%;
margin: 0px; border: 0;
border: 0px;
} }
img.external { img.external {
height: 30px; height: 30px;
@ -174,22 +178,3 @@ img.external:hover {
background-color: #101010; background-color: #101010;
border-radius: .25rem; border-radius: .25rem;
} }
@media(max-width: 1092px) {
iframe {
display: none;
}
}
@media(max-width: 728px) {
.card h4 {
font-size: 5vw;
}
.card-body {
font-size: 4vw;
}
.card {
margin-bottom: 5px;
}
}