From 48df81b216f9e64ab78ea1fda5bdcf72307895da Mon Sep 17 00:00:00 2001
From: Nick Sweeting <git@nicksweeting.com>
Date: Sun, 10 Jun 2018 19:11:06 -0400
Subject: [PATCH] add dom preview to link index, fix responsiveness

---
 templates/index.html            | 11 ++++--
 templates/link_index.html       |  4 +++
 templates/link_index_fancy.html | 60 +++++++++++++++++++++++----------
 3 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 22cb888b..61e0cbcf 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -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;
diff --git a/templates/link_index.html b/templates/link_index.html
index b6b7c1ad..854fcaf2 100644
--- a/templates/link_index.html
+++ b/templates/link_index.html
@@ -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;
diff --git a/templates/link_index_fancy.html b/templates/link_index_fancy.html
index d9a9efbd..c88487e7 100644
--- a/templates/link_index_fancy.html
+++ b/templates/link_index_fancy.html
@@ -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')
             }