Mirrors/ArchiveBox
2
0
Fork 0
mirror of https://github.com/ArchiveBox/ArchiveBox synced 2024-11-22 20:23:12 +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 {
font-weight: 400;
}
table tr {
height: 35px;
}
tbody tr:nth-child(odd) {
background-color: #ffebeb;
}
table tr td {
white-space: nowrap;
overflow: hidden;
padding-bottom: 0.4em;
padding-top: 0.4em;
/*padding-bottom: 0.4em;*/
/*padding-top: 0.4em;*/
padding-left: 2px;
text-align: center;
}
table tr td a {
text-decoration: none;
}
table tr td img, table tr td object {
display: inline-block;

4
templates/link_index.html
View file

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

60
templates/link_index_fancy.html
View file

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