forks/archivebox
1
0
Fork 0
Code Releases Activity

Improve snapshot layout

Browse source
This commit is contained in:
Alex Kotov 2023-08-28 23:09:29 +04:00
parent 8b1dd541e9
commit 38e1cc455a
Signed by: kotovalexarian
GPG key ID: 553C0EBBEB5D5F08
2 changed files with 137 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -78,52 +78,82 @@
<div class="row header-bottom-frames">
<div class="col-sm-6 col-lg-2">
<div class="card">
<div class="card-body">
<a href="{{singlefile_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./singlefile.html</code></p>
</a>
<a href="{{singlefile_path}}" target="preview"><h4 class="card-title" style="font-size: 14px">Chrome &gt; SingleFile</h4></a>
<div class="card-body row">
<div class="col-6 col-sm-12">
<a href="{{singlefile_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./singlefile.html</code></p>
</a>
</div>
<div class="col-6 col-sm-12">
<a href="{{singlefile_path}}" target="preview">
<h4 class="card-title" style="font-size: 14px">Chrome &gt; SingleFile</h4>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-2">
<div class="card">
<div class="card-body">
<a href="{{pdf_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./output.pdf</code></p>
</a>
<a href="{{pdf_path}}" target="preview"><h4 class="card-title" style="font-size: 14px">Chrome &gt; PDF</h4></a>
<div class="card-body row">
<div class="col-6 col-sm-12">
<a href="{{pdf_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./output.pdf</code></p>
</a>
</div>
<div class="col-6 col-sm-12">
<a href="{{pdf_path}}" target="preview">
<h4 class="card-title" style="font-size: 14px">Chrome &gt; PDF</h4>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-2">
<div class="card">
<div class="card-body">
<a href="{{screenshot_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./screenshot.png</code></p>
</a>
<a href="{{screenshot_path}}" target="preview"><h4 class="card-title" style="font-size: 14px">Chrome &gt; Screenshot</h4></a>
<div class="card-body row">
<div class="col-6 col-sm-12">
<a href="{{screenshot_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./screenshot.png</code></p>
</a>
</div>
<div class="col-6 col-sm-12">
<a href="{{screenshot_path}}" target="preview">
<h4 class="card-title" style="font-size: 14px">Chrome &gt; Screenshot</h4>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-2">
<div class="card">
<div class="card-body">
<a href="{{archive_url}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./{{domain}}</code></p>
</a>
<a href="{{archive_url}}" target="preview"><h4 class="card-title" style="font-size: 14px">Wget &gt; HTML</h4></a>
<div class="card-body row">
<div class="col-6 col-sm-12">
<a href="{{archive_url}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./{{domain}}</code></p>
</a>
</div>
<div class="col-6 col-sm-12">
<a href="{{archive_url}}" target="preview">
<h4 class="card-title" style="font-size: 14px">Wget &gt; HTML</h4>
</a>
</div>
</div>
</div>
</div>
{% if PREVIEW_ARCHIVE_DOT_ORG %}
<div class="col-sm-6 col-lg-2">
<div class="card">
<div class="card-body">
<a href="{{archive_org_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>🌐 archive.org/...</code></p>
</a>
<a href="{{archive_org_path}}" target="preview"><h4 class="card-title" style="font-size: 14px">Archive.Org</h4></a>
<div class="card-body row">
<div class="col-6 col-sm-12">
<a href="{{archive_org_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>🌐 archive.org/...</code></p>
</a>
</div>
<div class="col-6 col-sm-12">
<a href="{{archive_org_path}}" target="preview">
<h4 class="card-title" style="font-size: 14px">Archive.Org</h4>
</a>
</div>
</div>
</div>
</div>
@ -131,75 +161,115 @@
{% if PREVIEW_ORIGINALS %}
<div class="col-sm-6 col-lg-2">
<div class="card">
<div class="card-body">
<a href="{{url}}" title="Open in new tab..." target="_blank" rel="noopener" referrerpolicy="no-referrer">
<p class="card-text"><code>🌐 {{domain}}</code></p>
</a>
<a href="{{url}}" target="preview" referrerpolicy="no-referrer">
<h4 class="card-title" style="font-size: 14px">Original</h4>
</a>
<div class="card-body row">
<div class="col-6 col-sm-12">
<a href="{{url}}" title="Open in new tab..." target="_blank" rel="noopener" referrerpolicy="no-referrer">
<p class="card-text"><code>🌐 {{domain}}</code></p>
</a>
</div>
<div class="col-6 col-sm-12">
<a href="{{url}}" target="preview" referrerpolicy="no-referrer">
<h4 class="card-title" style="font-size: 14px">Original</h4>
</a>
</div>
</div>
</div>
</div>
{% endif %}
<div class="col-sm-6 col-lg-2">
<div class="card">
<div class="card-body">
<a href="{{headers_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./headers.json</code></p>
</a>
<a href="{{headers_path}}" target="preview"><h4 class="card-title" style="font-size: 14px">Headers</h4></a>
<div class="card-body row">
<div class="col-6 col-sm-12">
<a href="{{headers_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./headers.json</code></p>
</a>
</div>
<div class="col-6 col-sm-12">
<a href="{{headers_path}}" target="preview">
<h4 class="card-title" style="font-size: 14px">Headers</h4>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-2">
<div class="card">
<div class="card-body">
<a href="{{dom_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./output.html</code></p>
</a>
<a href="{{dom_path}}" target="preview"><h4 class="card-title" style="font-size: 14px">Chrome &gt; HTML</h4></a>
<div class="card-body row">
<div class="col-6 col-sm-12">
<a href="{{dom_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./output.html</code></p>
</a>
</div>
<div class="col-6 col-sm-12">
<a href="{{dom_path}}" target="preview">
<h4 class="card-title" style="font-size: 14px">Chrome &gt; HTML</h4>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-2">
<div class="card">
<div class="card-body">
<a href="{{readability_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./readability/content.html</code></p>
</a>
<a href="{{readability_path}}" target="preview"><h4 class="card-title" style="font-size: 14px">Readability</h4></a>
<div class="card-body row">
<div class="col-6 col-sm-12">
<a href="{{readability_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./readability/content.html</code></p>
</a>
</div>
<div class="col-6 col-sm-12">
<a href="{{readability_path}}" target="preview">
<h4 class="card-title" style="font-size: 14px">Readability</h4>
</a>
</div>
</div>
</div>
</div>
<br/>
<div class="col-sm-6 col-lg-2">
<div class="card">
<div class="card-body">
<a href="{{mercury_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./mercury/content.html</code></p>
</a>
<a href="{{mercury_path}}" target="preview"><h4 class="card-title" style="font-size: 14px">Mercury</h4></a>
<div class="card-body row">
<div class="col-6 col-sm-12">
<a href="{{mercury_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./mercury/content.html</code></p>
</a>
</div>
<div class="col-6 col-sm-12">
<a href="{{mercury_path}}" target="preview">
<h4 class="card-title" style="font-size: 14px">Mercury</h4>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-2">
<div class="card">
<div class="card-body">
<a href="{{media_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./media/*.mp4</code></p>
</a>
<a href="{{media_path}}" target="preview"><h4 class="card-title" style="font-size: 14px">Media</h4></a>
<div class="card-body row">
<div class="col-6 col-sm-12">
<a href="{{media_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./media/*.mp4</code></p>
</a>
</div>
<div class="col-6 col-sm-12">
<a href="{{media_path}}" target="preview">
<h4 class="card-title" style="font-size: 14px">Media</h4>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-2">
<div class="card">
<div class="card-body">
<a href="{{git_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./git/*.git</code></p>
</a>
<a href="{{git_path}}" target="preview"><h4 class="card-title" style="font-size: 14px">Git</h4></a>
<div class="card-body row">
<div class="col-6 col-sm-12">
<a href="{{git_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./git/*.git</code></p>
</a>
</div>
<div class="col-6 col-sm-12">
<a href="{{git_path}}" target="preview">
<h4 class="card-title" style="font-size: 14px">Git</h4>
</a>
</div>
</div>
</div>
</div>
@ -214,7 +284,7 @@
allow-scripts
allow-top-navigation-by-user-activation
allow-top-navigation-to-custom-protocols"
class="full-page-iframe d-none d-sm-block"
class="full-page-iframe"
></iframe>
</body>
</html>

13
public/static/snapshot.css
View file

@ -27,7 +27,6 @@ header a:hover {
margin: 0px;
text-align: center;
color: #f6f6f6;
font-size: calc(10px + 0.84vw);
font-weight: 200;
padding: 3px 4px;
background-color: #aa1e55;
@ -44,7 +43,6 @@ header small code {
white-space: nowrap;
font-weight: 200;
display: block;
margin-top: -1px;
font-size: 13px;
opacity: 0.8;
user-select: all;
@ -80,11 +78,7 @@ header small code {
}
.card-body {
font-size: 14px;
padding: 13px 10px;
padding-bottom: 1px;
/* padding-left: 3px; */
/* padding-right: 3px; */
/* padding-bottom: 3px; */
padding: 2px 0 4px 0;
line-height: 1;
word-wrap: break-word;
max-height: 102px;
@ -93,6 +87,9 @@ header small code {
background-color: #1a1a1a;
color: #d3d3d3;
}
.card-body > .col-6.col-sm-12 {
margin: 3px 0;
}
.card-title {
margin-bottom: 4px;
}
@ -161,7 +158,6 @@ img.external:hover {
display: inline-block;
color: #d3d3d3;
font-weight: 200;
vertical-align: 3px;
}
.header-bottom-frames .card-text {
width: 100%;
@ -169,7 +165,6 @@ img.external:hover {
font-size: 0.9em;
display: inline-block;
position: relative;
top: -11px;
}
.card-text code {
padding: .2rem .4rem;