From 5c54bcc1f3ccacafcca554047127ea87c5a106a0 Mon Sep 17 00:00:00 2001
From: Nick Sweeting <git@sweeting.me>
Date: Thu, 28 Jan 2021 22:57:12 -0500
Subject: [PATCH] fix files icons greying out on public index

---
 archivebox/index/html.py                      |  2 +-
 archivebox/themes/default/main_index.html     |  8 --------
 archivebox/themes/default/main_index_row.html | 18 +++++++++---------
 archivebox/themes/default/static/admin.css    |  7 ++++++-
 4 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/archivebox/index/html.py b/archivebox/index/html.py
index 0ba8e7c1..91ff83cd 100644
--- a/archivebox/index/html.py
+++ b/archivebox/index/html.py
@@ -121,7 +121,7 @@ def snapshot_icons(snapshot) -> str:
     path = link.archive_path
     canon = link.canonical_outputs()
     output = ""
-    output_template = '<a href="/{}/{}" class="exists-{}" title="{}">{} </a>'
+    output_template = '<a href="/{}/{}" class="exists-{}" title="{}">{}</a> &nbsp;'
     icons = {
         "singlefile": "❶",
         "wget": "🆆",
diff --git a/archivebox/themes/default/main_index.html b/archivebox/themes/default/main_index.html
index 85753b31..95af1963 100644
--- a/archivebox/themes/default/main_index.html
+++ b/archivebox/themes/default/main_index.html
@@ -185,14 +185,6 @@
             .title-col a {
                 color: black;
             }
-            .tags {
-                float: right;
-                border-radius: 5px;
-                background-color: #bfdfff;
-                padding: 2px 5px;
-                margin-left: 4px;
-                margin-top: 1px;
-            }
         </style>
         <link rel="stylesheet" href="{% static 'bootstrap.min.css' %}">
         <link rel="stylesheet" href="{% static 'jquery.dataTables.min.css' %}"/>
diff --git a/archivebox/themes/default/main_index_row.html b/archivebox/themes/default/main_index_row.html
index cfbcbfe8..cb821f61 100644
--- a/archivebox/themes/default/main_index_row.html
+++ b/archivebox/themes/default/main_index_row.html
@@ -2,7 +2,7 @@
 
 <tr>
     <td title="{{link.timestamp}}"> {% if link.bookmarked_date  %} {{ link.bookmarked_date }} {% else %} {{ link.added }} {% endif %} </td>
-    <td class="title-col">
+    <td class="title-col" style="opacity: {% if link.title %}1{% else %}0.3{% endif %}">
         {% if link.is_archived %}
             <a href="archive/{{link.timestamp}}/index.html"><img src="archive/{{link.timestamp}}/favicon.ico" class="link-favicon" decoding="async"></a>
         {% else %}
@@ -23,15 +23,15 @@
         </a>
     </td>
     <td>
-        <a href="archive/{{link.timestamp}}/index.html">📄 
-            <span data-number-for="{{link.url}}" title="Fetching any missing files...">
-                {% if link.icons  %}
-                    {{link.icons}}
-                {% else %}
+        <span data-number-for="{{link.url}}" title="Fetching any missing files...">
+            {% if link.icons  %}
+                {{link.icons}} <small style="float:right; opacity: 0.5">{{link.num_outputs}}</small>
+            {% else %}
+                <a href="archive/{{link.timestamp}}/index.html">📄 
                     {{link.num_outputs}} <img src="{% static 'spinner.gif' %}" class="files-spinner" decoding="async"/>
-                {% endif %}
-            </span>
-        </a>
+                </a>
+            {% endif %}
+        </span>
     </td>
    <td style="text-align:left"><a href="{{link.url}}">{{link.url}}</a></td>
 </tr>
diff --git a/archivebox/themes/default/static/admin.css b/archivebox/themes/default/static/admin.css
index 181c06de..142e1b89 100644
--- a/archivebox/themes/default/static/admin.css
+++ b/archivebox/themes/default/static/admin.css
@@ -224,7 +224,7 @@ body.model-snapshot.change-list #content .object-tools {
   100% { transform: rotate(360deg); }
 }
 
-.tags > a > .tag {
+.tag {
     float: right;
     border-radius: 5px;
     background-color: #bfdfff;
@@ -232,3 +232,8 @@ body.model-snapshot.change-list #content .object-tools {
     margin-left: 4px;
     margin-top: 1px;
 }
+
+.exists-False {
+    opacity: 0.1;
+    filter: grayscale(100%);
+}