From 594a4803cdeb2fac3f92699b1fa4e7047198345a Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Tue, 12 Jan 2021 17:34:31 +1100
Subject: [PATCH] made file_list.html better as well

---
 templates/file_list.html | 39 ++++++++++++++++++++++++++-------------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/templates/file_list.html b/templates/file_list.html
index ddf5c1e..0165d09 100644
--- a/templates/file_list.html
+++ b/templates/file_list.html
@@ -6,19 +6,32 @@
 				<thead><tr class="thead-light"><th>Name</th><th>Size (MB)</th><th>Hash</th></tr></thead><tbody>
 					{% for obj in file_data.view_list %}
 						<tr><td>
-						{% if obj.type=="Directory" %}
-							<i class="fas fa-folder"></i>
-						{% elif obj.type=="Image" %}
-							<i class="fas fa-file-image"></i>
-						{% elif obj.type=="Video" %}
-							<i class="fas fa-file-video"></i>
-						{% else %}
-							<i class="fas fa-question-circle"></i>
-						{% endif %}
-						{% if obj.type=="Image" %}
-							<a href="{{file_data.symlink}}/{{obj.name}}"><img width="128" height="128" src="data:image/jpeg;base64,{{obj.thumbnail}}"></img></a>
-						{% endif %}
-						{{obj.name}}
+							{% if obj.type == "Directory" %}
+								<i style="font-size:48;" class="fas fa-folder"></i><br><span class="figure-caption">{{obj.name}}</span>
+							{% else %}
+								<figure class="figure" font-size: 24px;>
+									<div style="position:relative; width:100%">
+										{% if obj.type=="Image" %}
+											{% set icon="fa-file-image" %}
+											<a href="{{obj.path_prefix}}/{{obj.name}}">
+										{% elif obj.type == "Video" %}
+											{% set icon="fa-film" %}
+										{% elif obj.type == "Directory" %}
+											{% set icon="fa-folder" %}
+										{% else %}
+											{% set icon="fa-question-circle" %}
+										{% endif %}
+										<img class="thumb" style="display:block" height="48" src="data:image/jpeg;base64,{{obj.thumbnail}}"></img>
+										{% if obj.type=="Image" %}
+											</a>
+										{% endif %}
+										<div style="position:absolute; top: 2; left: 2;">
+											<i style="font-size:16;background-color:black;color:white" class="fas {{icon}}"></i>
+										</div>
+									</div>
+									<figcaption class="figure-caption">{{obj.name}}</figcaption>
+								</figure>
+							{% endif %}
 						</td></td><td>{{obj.size_mb}}</td><td>{{obj.hash}}</tr>
 					{% endfor %}
 				</tbody></table>