From 8ef09f8618c162fd83c396cf37421abb53965e1f Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Sat, 31 Oct 2020 23:03:37 -0500
Subject: [PATCH] update .gitignore for thumbnail files, add proper directory
 with icons to content, add proper thumbnail img loading with lazy loading for
 performance

---
 .gitignore                   |  1 +
 viewer/templates/browse.html | 13 +++++++------
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/.gitignore b/.gitignore
index 43660d2..9159069 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 # Repository specific
 .idea/**
+viewer/static/thumbnails/**
 
 # Byte-compiled / optimized / DLL files
 __pycache__/
diff --git a/viewer/templates/browse.html b/viewer/templates/browse.html
index 384c2a6..296a96f 100644
--- a/viewer/templates/browse.html
+++ b/viewer/templates/browse.html
@@ -21,7 +21,7 @@
                 <span class="pl-1" style="font-weight: 400; font-style: italic; font-size: 70%;">
                     {{ files|length }} files
                 </span>
-                <span class="icon">
+                <span class="icon align-self">
                     <a href="{% url 'refresh' directory.id %}">
                         <i class="fas fa-sync"></i>
                     </a>
@@ -32,15 +32,17 @@
             <div class="content">
                 {% for directory in directories %}
                 <div>
-
+                    <span class="icon">
+                        <i class="fas fa-folder"></i>
+                    </span>
+                    {{ directory }}
                 </div>
 
                 {% endfor %}
                 {% for file in files %}
                     <div class="media">
-                        {% load thumbnail %}
-                        <img class="px-2" src="{{ file.fullpath|thumbnail_url:'small' }}">
-{#                        <img class="px-2" src="https://picsum.photos/200/130?random={{ file.0 }}">#}
+                        {% load static %}
+                        <img class="px-2" loading="lazy" src="{% static "/thumbnails/"|add:file.thumbnail %}">
                         <span class="media-filename">
                             <a href="{% url 'file' directory.id file.filename %}">
                                 {{ file.filename }}
@@ -84,6 +86,5 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
             integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
             crossorigin="anonymous"></script>
-    {% load static %}
     <script src="{% static "hover.js" %}"></script>
 {% endblock content %}