mirrors/ArchiveBox
1
0
Fork 0
mirror of https://github.com/ArchiveBox/ArchiveBox.git synced 2025-05-14 07:04:27 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

nicer iframes on detail pages

Browse source
This commit is contained in:
Nick Sweeting 2019-03-20 04:30:44 -04:00
parent e4c7683983
commit c38de3bbe7
1 changed files with 23 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

30
archivebox/templates/link_index.html
View file

@ -70,6 +70,7 @@
opacity: 0.8; opacity: 0.8;
} }
.card { .card {
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);
} }
.card h4 { .card h4 {
@ -121,7 +122,8 @@
.pdf-frame { .pdf-frame {
transform: none; transform: none;
width: 100%; width: 100%;
height: 100px; height: 160px;
margin-top: -60px;
margin-bottom: 0px; margin-bottom: 0px;
} }
img.external { img.external {
@ -135,6 +137,15 @@
img.external:hover { img.external:hover {
border: 4px solid green; border: 4px solid green;
} }
.screenshot {
transform: none;
width: 100%;
height: auto;
max-height: 100px;
margin-bottom: 0px;
object-fit: cover;
object-position: top;
}
@media(max-width: 1092px) { @media(max-width: 1092px) {
iframe { iframe {
@ -201,7 +212,7 @@
<hr/> <hr/>
<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="$archive_url" sandbox="allow-same-origin allow-scripts allow-forms"></iframe> <iframe class="card-img-top" src="$archive_url" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body"> <div class="card-body">
<a href="$archive_url" style="float:right" title="Open in new tab..." target="_blank" rel="noopener"> <a href="$archive_url" style="float:right" title="Open in new tab..." target="_blank" rel="noopener">
<img src="../../static/external.png" class="external"/> <img src="../../static/external.png" class="external"/>
@ -213,7 +224,7 @@
</div> </div>
<div class="col-lg-2"> <div class="col-lg-2">
<div class="card"> <div class="card">
<iframe class="card-img-top" src="$dom_url" sandbox="allow-same-origin allow-scripts allow-forms"></iframe> <iframe class="card-img-top" src="$dom_url" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body"> <div class="card-body">
<a href="$dom_url" style="float:right" title="Open in new tab..." target="_blank" rel="noopener"> <a href="$dom_url" style="float:right" title="Open in new tab..." target="_blank" rel="noopener">
<img src="../../static/external.png" class="external"/> <img src="../../static/external.png" class="external"/>
@ -225,7 +236,7 @@
</div> </div>
<div class="col-lg-2"> <div class="col-lg-2">
<div class="card"> <div class="card">
<iframe class="card-img-top pdf-frame" src="$pdf_url"></iframe> <iframe class="card-img-top pdf-frame" src="$pdf_url" scrolling="no"></iframe>
<div class="card-body"> <div class="card-body">
<a href="$pdf_url" style="float:right" title="Open in new tab..." target="_blank" rel="noopener"> <a href="$pdf_url" style="float:right" title="Open in new tab..." target="_blank" rel="noopener">
<img src="../../static/external.png" class="external"/> <img src="../../static/external.png" class="external"/>
@ -237,7 +248,7 @@
</div> </div>
<div class="col-lg-2"> <div class="col-lg-2">
<div class="card"> <div class="card">
<iframe class="card-img-top" src="$screenshot_url" sandbox="allow-same-origin allow-scripts allow-forms"></iframe> <img class="card-img-top screenshot" src="$screenshot_url"></iframe>
<div class="card-body"> <div class="card-body">
<a href="$screenshot_url" style="float:right" title="Open in new tab..." target="_blank" rel="noopener"> <a href="$screenshot_url" style="float:right" title="Open in new tab..." target="_blank" rel="noopener">
<img src="../../static/external.png" class="external"/> <img src="../../static/external.png" class="external"/>
@ -249,7 +260,7 @@
</div> </div>
<div class="col-lg-2"> <div class="col-lg-2">
<div class="card"> <div class="card">
<iframe class="card-img-top" src="$url" sandbox="allow-same-origin allow-scripts allow-forms"></iframe> <iframe class="card-img-top" src="$url" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body"> <div class="card-body">
<a href="$url" style="float:right" title="Open in new tab..." target="_blank" rel="noopener"> <a href="$url" style="float:right" title="Open in new tab..." target="_blank" rel="noopener">
<img src="../../static/external.png" class="external"/> <img src="../../static/external.png" class="external"/>
@ -261,7 +272,7 @@
</div> </div>
<div class="col-lg-2"> <div class="col-lg-2">
<div class="card"> <div class="card">
<iframe class="card-img-top" src="$archive_org_url" sandbox="allow-same-origin allow-scripts allow-forms"></iframe> <iframe class="card-img-top" src="$archive_org_url" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body"> <div class="card-body">
<a href="$archive_org_url" style="float:right" title="Open in new tab..." target="_blank" rel="noopener"> <a href="$archive_org_url" style="float:right" title="Open in new tab..." target="_blank" rel="noopener">
<img src="../../static/external.png" class="external"/> <img src="../../static/external.png" class="external"/>
@ -322,6 +333,11 @@
if (window.innerWidth < 1091) { if (window.innerWidth < 1091) {
jQuery('.card a[target=preview]').attr('target', '_self') jQuery('.card a[target=preview]').attr('target', '_self')
} }
var pdf_frame = document.querySelector('.pdf-frame');
pdf_frame.onload = function () {
pdf_frame.contentWindow.scrollTo(0, 400);
}
</script> </script>
</body> </body>
</html> </html>