From 3a16379aca4f412c612e67444eb434e949658724 Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Tue, 12 Jan 2021 01:45:26 +1100
Subject: [PATCH] basic improvement for sizing buttons, but also sizing is
 smarter, this way I do not need to know the image or thumbnail ratios :)

---
 templates/files.html | 38 +++++++++++++++++++++++++++++++-------
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/templates/files.html b/templates/files.html
index 6f27e50..4847542 100644
--- a/templates/files.html
+++ b/templates/files.html
@@ -2,11 +2,25 @@
 {% block main_content %}
 	<div class="container-fluid">
 		<h3 class="offset-lg-2">{{page_title}} -- {{file_data.view_path}}</h3>
-		<div class="row">
-			Size:
-			<button class="btn btn-outline-info" onClick="$('.thumb').attr( {width: '64', height: 64, style: 'font-size:64px' } )">S</button>
-			<button class="btn btn-outline-info" onClick="$('.thumb').attr( {width: '96', height: 96, style: 'font-size:96px' } )">M</button>
-			<button class="btn btn-outline-info" onClick="$('.thumb').attr( {width: '128', height: 128, style: 'font-size:128px' } )">L</button>
+		<div class="form-row input-group">
+			<div class="input-group-prepend">
+				<button class="btn btn-outline-info disabled" disabled>Size:</button>
+			</div>
+			<div class="input-group-append">
+			<button id="sz-but-64" class="sz-but btn btn-outline-info" onClick="ChangeSize(64)">XS</button>
+			</div>
+			<div class="input-group-append">
+			<button id="sz-but-96" class="sz-but btn btn-outline-info" onClick="ChangeSize(96)">S</button>
+			</div>
+			<div class="input-group-append">
+			<button id="sz-but-128" class="sz-but btn btn-info" onClick="ChangeSize(128)">M</button>
+			</div>
+			<div class="input-group-append">
+			<button id="sz-but-192" class="sz-but btn btn-outline-info" onClick="ChangeSize(192)">L</button>
+			</div>
+			<div class="input-group-append">
+			<button id="sz-but-256" class="sz-but btn btn-outline-info" onClick="ChangeSize(256)">XL</button>
+			</div>
 		</div>
 		<div class="row">
 			{% for obj in file_data.view_list %}
@@ -14,9 +28,9 @@
 					<center>
 						<figure class="figure px-2" font-size: 24px;>
 							{% if obj.type=="Image" %}
-								<a href="{{file_data.symlink}}/{{obj.name}}"><img class="thumb" width="128" height="128" src="data:image/jpeg;base64,{{obj.thumbnail}}"></img></a>
+								<a href="{{file_data.symlink}}/{{obj.name}}"><img class="thumb" height="128" src="data:image/jpeg;base64,{{obj.thumbnail}}"></img></a>
 							{% elif obj.type == "Video" %}
-								<i style="font-size:128px;" class="thumb fas fa-file-video"></i>
+								<i style="font-size:128" class="thumb fas fa-file-video"></i>
 							{% endif %}
 							<figcaption class="figure-caption text-center">{{obj.name}}</figcaption>
 						</figure>
@@ -26,3 +40,13 @@
 		</div class="row">
 	</div class="container">
 {% endblock main_content %}
+{% block script_content %}
+<script>
+function ChangeSize(sz)
+{
+	old_but=$('.sz-but.btn-info').removeClass('btn-info').addClass('btn-outline-info')
+	$('#sz-but-'+sz).addClass('btn-info').removeClass('btn-outline-info')
+	$('.thumb').attr( {height: sz, style: 'font-size:'+sz } )
+}
+</script>
+{% endblock script_content %}