mirror/archivebox
1
0
Fork 0
mirror of https://github.com/pirate/ArchiveBox.git synced 2025-08-21 21:57:26 +02:00
Code Issues Releases Wiki Activity

cleanup snapshot detail page UI

Browse Source
This commit is contained in:
Nick Sweeting
2021-01-30 22:04:24 -05:00
parent 54c5331693
commit 560d3103a8
1 changed files with 133 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -33,7 +33,7 @@
} }
.nav > div { .nav > div {
min-height: 30px; min-height: 30px;
margin: 8px 0px; line-height: 1.3;
} }
.header-top a { .header-top a {
text-decoration: none; text-decoration: none;
@@ -68,6 +68,11 @@
vertical-align: -2px; vertical-align: -2px;
margin-right: 4px; margin-right: 4px;
} }
.header-toggle {
line-height: 14px;
font-size: 70px;
vertical-align: -8px;
}
.info-row { .info-row {
margin-top: 2px; margin-top: 2px;
@@ -76,24 +81,30 @@
.info-row .alert { .info-row .alert {
margin-bottom: 0px; margin-bottom: 0px;
} }
.card { .header-bottom-frames .card {
overflow: hidden; overflow: hidden;
box-shadow: 2px 3px 14px 0px rgba(0,0,0,0.02); box-shadow: 2px 3px 14px 0px rgba(0,0,0,0.02);
margin-top: 10px; margin-top: 10px;
border: 1px solid rgba(0,0,0,3);
border-radius: 14px;
background-color: black;
} }
.card h4 { .card h4 {
font-size: 1.4vw; font-size: 1.4vw;
} }
.card-body { .card-body {
font-size: 1vw; font-size: 15px;
padding-top: 1.2vw; padding: 13px 10px;
padding-left: 1vw; padding-bottom: 6px;
padding-right: 1vw; /* padding-left: 3px; */
padding-bottom: 1vw; /* padding-right: 3px; */
/* padding-bottom: 3px; */
line-height: 1.1; line-height: 1.1;
word-wrap: break-word; word-wrap: break-word;
max-height: 102px; max-height: 102px;
overflow: hidden; overflow: hidden;
background-color: #1a1a1a;
color: #d3d3d3;
} }
.card-title { .card-title {
margin-bottom: 4px; margin-bottom: 4px;
@@ -126,7 +137,7 @@
border-top: 3px solid #aa1e55; border-top: 3px solid #aa1e55;
} }
.card.selected-card { .card.selected-card {
border: 2px solid orange; border: 1px solid orange;
box-shadow: 0px -6px 13px 1px rgba(0,0,0,0.05); box-shadow: 0px -6px 13px 1px rgba(0,0,0,0.05);
} }
.iframe-large { .iframe-large {
@@ -174,12 +185,13 @@
width: 98%; width: 98%;
border: 1px solid rgba(0,0,0,0.2); border: 1px solid rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2); box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
margin-top: 5px; margin-top: 0px;
} }
.header-bottom-info { .header-bottom-info {
color: #6f6f6f; color: #6f6f6f;
padding-top: 8px; padding-top: 0px;
padding-bottom: 13px; padding-bottom: 0px;
margin: 0px -15px;
} }
.header-bottom-info > div { .header-bottom-info > div {
@@ -203,12 +215,30 @@
margin-top: 5px; margin-top: 5px;
} }
.header-bottom-frames .card-title { .header-bottom-frames .card-title {
padding-bottom: 0px; width: 100%;
font-size: 1.2vw; text-align: center;
font-size: 18px;
margin-bottom: 5px; margin-bottom: 5px;
display: inline-block;
color: #d3d3d3;
font-weight: 200;
vertical-align: 0px;
margin-top: -6px;
} }
.header-bottom-frames .card-text { .header-bottom-frames .card-text {
width: 100%;
text-align: center;
font-size: 0.9em; font-size: 0.9em;
display: inline-block;
position: relative;
top: -11px;
}
.card-text code {
padding: .2rem .4rem;
font-size: 90%;
color: #bd4147;
background-color: #101010;
border-radius: .25rem;
} }
@media(max-width: 1092px) { @media(max-width: 1092px) {
@@ -247,7 +277,7 @@
</a> </a>
</div> </div>
<div class="col-lg-8"> <div class="col-lg-8">
<img src="favicon.ico" alt="Favicon"> <img src="favicon.ico" onerror="this.style.opacity=0" alt="Favicon">
&nbsp;&nbsp; &nbsp;&nbsp;
{{title}} {{title}}
&nbsp;&nbsp; &nbsp;&nbsp;
@@ -316,120 +346,145 @@
</div> </div>
</div> </div>
<div class="row header-bottom-frames"> <div class="row header-bottom-frames">
<div class="col-lg-3"> <div class="col-lg-2">
<div class="card selected-card"> <div class="card selected-card">
<iframe class="card-img-top" src="{{archive_url}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body">
<a href="{{archive_url}}" style="float:right" title="Open in new tab..." target="_blank" rel="noopener">
<img src="../../static/external.png" class="external"/>
</a>
<a href="{{archive_url}}" target="preview"><h4 class="card-title">Wget &gt; WARC</h4></a>
<p class="card-text">archive/{{domain}}</p>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card">
<iframe class="card-img-top" src="{{singlefile_path}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe> <iframe class="card-img-top" src="{{singlefile_path}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body"> <div class="card-body">
<a href="{{singlefile_path}}" style="float:right" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{singlefile_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<img src="../../static/external.png" class="external"/> <p class="card-text"><code>./singlefile.html</code></p>
</a> </a>
<a href="{{singlefile_path}}" target="preview"><h4 class="card-title">Chrome &gt; SingleFile</h4></a> <a href="{{singlefile_path}}" target="preview"><h4 class="card-title">Chrome &gt; SingleFile</h4></a>
<p class="card-text">archive/singlefile.html</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-3"> <div class="col-lg-2">
<div class="card">
<iframe class="card-img-top" src="{{archive_org_path}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body">
<a href="{{archive_org_path}}" style="float:right" title="Open in new tab..." target="_blank" rel="noopener">
<img src="../../static/external.png" class="external"/>
</a>
<a href="{{archive_org_path}}" target="preview"><h4 class="card-title">Archive.Org</h4></a>
<p class="card-text">web.archive.org/web/...</p>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card">
<iframe class="card-img-top" src="{{url}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body">
<a href="{{url}}" style="float:right" title="Open in new tab..." target="_blank" rel="noopener">
<img src="../../static/external.png" class="external"/>
</a>
<a href="{{url}}" target="preview"><h4 class="card-title">Original</h4></a>
<p class="card-text">{{domain}}</p>
</div>
</div>
</div>
<br/>
<div class="col-lg-3">
<div class="card"> <div class="card">
<iframe class="card-img-top pdf-frame" src="{{pdf_path}}" scrolling="no"></iframe> <iframe class="card-img-top pdf-frame" src="{{pdf_path}}" scrolling="no"></iframe>
<div class="card-body"> <div class="card-body">
<a href="{{pdf_path}}" style="float:right" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{pdf_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<img src="../../static/external.png" class="external"/> <p class="card-text"><code>./output.pdf</code></p>
</a> </a>
<a href="{{pdf_path}}" target="preview" id="pdf-btn"><h4 class="card-title">Chrome &gt; PDF</h4></a> <a href="{{pdf_path}}" target="preview" id="pdf-btn"><h4 class="card-title">Chrome &gt; PDF</h4></a>
<p class="card-text">archive/output.pdf</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-3"> <div class="col-lg-2">
<div class="card"> <div class="card">
<img class="card-img-top screenshot" src="{{screenshot_path}}"></iframe> <img class="card-img-top" src="{{screenshot_path}}" onerror="this.style.opacity=0.2"/>
<div class="card-body"> <div class="card-body">
<a href="{{screenshot_path}}" style="float:right" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{screenshot_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<img src="../../static/external.png" class="external"/> <p class="card-text"><code>./screenshot.png</code></p>
</a> </a>
<a href="{{screenshot_path}}" target="preview"><h4 class="card-title">Chrome &gt; Screenshot</h4></a> <a href="{{screenshot_path}}" target="preview"><h4 class="card-title">Chrome &gt; Screenshot</h4></a>
<p class="card-text">archive/screenshot.png</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-3"> <div class="col-lg-2">
<div class="card">
<iframe class="card-img-top" src="{{archive_url}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe>
<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">Wget &gt; HTML</h4></a>
</div>
</div>
</div>
{% if SAVE_ARCHIVE_DOT_ORG %}
<div class="col-lg-2">
<div class="card">
<iframe class="card-img-top" src="{{archive_org_path}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body">
<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>
</a>
<a href="{{archive_org_path}}" target="preview"><h4 class="card-title">Archive.Org</h4></a>
</div>
</div>
</div>
{% endif %}
<div class="col-lg-2">
<div class="card">
<iframe class="card-img-top" src="{{url}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body">
<a href="{{url}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>🌐 {{domain}}</code></p>
</a>
<a href="{{url}}" target="preview"><h4 class="card-title">Original</h4></a>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="card">
<iframe class="card-img-top" src="{{headers_path}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe>
<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">Headers</h4></a>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="card"> <div class="card">
<iframe class="card-img-top" src="{{dom_path}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe> <iframe class="card-img-top" src="{{dom_path}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body"> <div class="card-body">
<a href="{{dom_path}}" style="float:right" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{dom_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<img src="../../static/external.png" class="external"/> <p class="card-text"><code>./output.html</code></p>
</a> </a>
<a href="{{dom_path}}" target="preview"><h4 class="card-title">Chrome &gt; HTML</h4></a> <a href="{{dom_path}}" target="preview"><h4 class="card-title">Chrome &gt; HTML</h4></a>
<p class="card-text">archive/output.html</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-3"> <div class="col-lg-2">
<div class="card"> <div class="card">
<iframe class="card-img-top" src="{{readability_path}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe> <iframe class="card-img-top" src="{{readability_path}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body"> <div class="card-body">
<a href="{{readability_path}}" style="float:right" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{readability_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<img src="../../static/external.png" class="external"/> <p class="card-text"><code>./readability/content.html</code></p>
</a> </a>
<a href="{{readability_path}}" target="preview"><h4 class="card-title">Readability</h4></a> <a href="{{readability_path}}" target="preview"><h4 class="card-title">Readability</h4></a>
<p class="card-text">archive/readability/...</p>
</div> </div>
</div> </div>
</div> </div>
<br/> <br/>
<div class="col-lg-3"> <div class="col-lg-2">
<div class="card"> <div class="card">
<iframe class="card-img-top" src="{{mercury_path}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe> <iframe class="card-img-top" src="{{mercury_path}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body"> <div class="card-body">
<a href="{{mercury_path}}" style="float:right" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{mercury_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<img src="../../static/external.png" class="external"/> <p class="card-text"><code>./mercury/content.html</code></p>
</a> </a>
<a href="{{mercury_path}}" target="preview"><h4 class="card-title">mercury</h4></a> <a href="{{mercury_path}}" target="preview"><h4 class="card-title">Mercury</h4></a>
<p class="card-text">archive/mercury/...</p> </div>
</div>
</div>
<div class="col-lg-2">
<div class="card">
<iframe class="card-img-top" src="{{media_path}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe>
<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">Media</h4></a>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="card">
<iframe class="card-img-top" src="{{git_path}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe>
<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">Git</h4></a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</header> </header>
<iframe sandbox="allow-same-origin allow-scripts allow-forms" class="full-page-iframe" src="{{archive_url}}" name="preview"></iframe> <iframe sandbox="allow-same-origin allow-scripts allow-forms" class="full-page-iframe" src="{{singlefile_url}}" name="preview"></iframe>
<script <script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"