Mirrors/ArchiveBox
2
0
Fork 0
mirror of https://github.com/ArchiveBox/ArchiveBox synced 2024-11-23 04:33:11 +00:00
Code Issues Projects Releases Packages Wiki Activity

add dom preview to link index, fix responsiveness

Browse source
This commit is contained in:
Nick Sweeting 2018-06-10 19:11:06 -04:00
parent 91e7e0cd36
commit 48df81b216
3 changed files with 55 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
templates/index.html
View file

@ -63,15 +63,22 @@
table thead th { table thead th {
font-weight: 400; font-weight: 400;
} }
table tr {
height: 35px;
}
tbody tr:nth-child(odd) { tbody tr:nth-child(odd) {
background-color: #ffebeb; background-color: #ffebeb;
} }
table tr td { table tr td {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
padding-bottom: 0.4em; /*padding-bottom: 0.4em;*/
padding-top: 0.4em; /*padding-top: 0.4em;*/
padding-left: 2px; padding-left: 2px;
text-align: center;
}
table tr td a {
text-decoration: none;
} }
table tr td img, table tr td object { table tr td img, table tr td object {
display: inline-block; display: inline-block;

4
templates/link_index.html
View file

@ -41,6 +41,10 @@
<a href="$screenshot"><b>Screenshot</b></a><br/> <a href="$screenshot"><b>Screenshot</b></a><br/>
archive/$timestamp/screenshot.png<br/>&nbsp; archive/$timestamp/screenshot.png<br/>&nbsp;
</li> </li>
<li>
<a href="$dom"><b>HTML</b></a><br/>
archive/$timestamp/output.html<br/>&nbsp;
</li>
<li> <li>
<a href="$archive_org"><b>Archive.Org</b></a><br/> <a href="$archive_org"><b>Archive.Org</b></a><br/>
web.archive.org/web/$base_url<br/>&nbsp; web.archive.org/web/$base_url<br/>&nbsp;

56
templates/link_index_fancy.html
View file

@ -24,15 +24,20 @@
margin: 0px; margin: 0px;
font-weight: 200; font-weight: 200;
font-family: "Gill Sans", Helvetica, sans-serif; font-family: "Gill Sans", Helvetica, sans-serif;
font-size: calc(16px + 1vw);
} }
.collapse-icon { .collapse-icon {
float: left; float: left;
color: black; color: black;
width: 126px; width: 126px;
font-size: 0.7em; font-size: 0.8em;
margin-top: 20px; margin-top: 20px;
margin-right: 0px; margin-right: 0px;
margin-left: -35px; margin-left: -35px;
text-decoration: none;
}
a.collapse-icon:hover {
text-decoration: none;
} }
.nav-icon img { .nav-icon img {
float: right; float: right;
@ -48,6 +53,11 @@
} }
.title-url { .title-url {
color: black; color: black;
display: block;
width: 75%;
white-space: nowrap;
overflow: hidden;
margin: auto;
} }
.archive-page-header { .archive-page-header {
margin-top: 5px; margin-top: 5px;
@ -160,7 +170,7 @@
<img src="../../static/archive.png" alt="Archive Icon"> <img src="../../static/archive.png" alt="Archive Icon">
</a> </a>
<a href="#" class="collapse-icon" title="Toggle info panel..."> <a href="#" class="collapse-icon" title="Toggle info panel...">
[-] ▾
</a> </a>
$title<br/> $title<br/>
<a href="$url" class="title-url"> <a href="$url" class="title-url">
@ -170,20 +180,22 @@
</header> </header>
<div class="site-header container-fluid"> <div class="site-header container-fluid">
<div class="row archive-page-header"> <div class="row archive-page-header">
<div class="col-lg-2"> <div class="col-lg-4 alert well">
<div class="alert alert-warning"> Added: <small>$bookmarked</small>
&nbsp; | &nbsp;
Last updated: <small>$updated</small>
</div>
<div class="col-lg-4 alert well">
Type:
<span class="badge badge-default">$type</span>
&nbsp; | &nbsp;
Tags: Tags:
<span class="badge badge-success">$tags</span> <span class="badge badge-success">$tags</span>
<span class="badge badge-default">$type</span> </div>
<div style="height:5px"></div> <div class="col-lg-4 alert well">
Bookmarked:<br/> Download: <a href="index.json">JSON</a> | <a href=".">Files</a>
<small>$bookmarked<br/></small> </div>
Archived:<br/>
<small>$updated</small>
<hr/> <hr/>
<a href="index.json">JSON</a> | <a href=".">Files</a>
</div>
</div>
<div class="col-lg-2"> <div class="col-lg-2">
<div class="card selected-card"> <div class="card selected-card">
<iframe class="card-img-top" src="$wget" sandbox="allow-same-origin allow-scripts allow-forms"></iframe> <iframe class="card-img-top" src="$wget" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>
@ -196,6 +208,18 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-2">
<div class="card">
<iframe class="card-img-top" src="$dom" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>
<div class="card-body">
<a href="$dom" style="float:right" title="Open in new tab..." target="_blank" rel="noopener">
<img src="../../static/external.png" class="external"/>
</a>
<a href="$dom" target="preview"><h4 class="card-title">HTML</h4></a>
<p class="card-text">archive/output.html</p>
</div>
</div>
</div>
<div class="col-lg-2"> <div class="col-lg-2">
<div class="card"> <div class="card">
<iframe class="card-img-top" src="$pdf"></iframe> <iframe class="card-img-top" src="$pdf"></iframe>
@ -274,12 +298,12 @@
// hide header when collapse icon is clicked // hide header when collapse icon is clicked
jQuery('.collapse-icon').on('click', function() { jQuery('.collapse-icon').on('click', function() {
if (jQuery('.collapse-icon').text().includes('[-]')) { if (jQuery('.collapse-icon').text().includes('▾')) {
jQuery('.collapse-icon').text('[+]') jQuery('.collapse-icon').text('▸')
jQuery('.site-header').hide() jQuery('.site-header').hide()
jQuery('.full-page-iframe').addClass('iframe-large') jQuery('.full-page-iframe').addClass('iframe-large')
} else { } else {
jQuery('.collapse-icon').text('[-]') jQuery('.collapse-icon').text('▾')
jQuery('.site-header').show() jQuery('.site-header').show()
jQuery('.full-page-iframe').removeClass('iframe-large') jQuery('.full-page-iframe').removeClass('iframe-large')
} }