From b5ac6ed462886c87fed50e944a9cd559d7cbd3fb Mon Sep 17 00:00:00 2001
From: neviyn <neviynhd@gmail.com>
Date: Mon, 10 May 2021 23:32:44 +0100
Subject: [PATCH] Made tag lists and image edit controls look nicer

---
 src/main/resources/templates/gallery.html | 16 +++++------
 src/main/resources/templates/single.html  | 34 +++++++++++------------
 2 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/main/resources/templates/gallery.html b/src/main/resources/templates/gallery.html
index 89a8cf6..e611fa6 100644
--- a/src/main/resources/templates/gallery.html
+++ b/src/main/resources/templates/gallery.html
@@ -9,16 +9,14 @@
 <div class="container-fluid">
     <div th:replace="fragments :: searchBarRow"></div>
     <div class="row mt-3" th:if="${imagePage != null}">
-        <div class="col-md-1 col-2">
-            <ul>
-                <li th:each="tag : ${commonTags}">
-                    <a class="text-decoration-none"
-                       th:href="${#mvc.url('IC#getGalleryPage').arg(0, 1).arg(1, tag.tag).build()}"
-                       th:text="${tag.tag} + ' ' ">tag</a><span th:text="${tag.amount}"></span>
-                </li>
-            </ul>
+        <div class="col-xl-2 col-md-3 col-4">
+            <div class="list-group w-75">
+                <a class="list-group-item d-flex justify-content-between align-items-center text-decoration-none" th:each="tag : ${commonTags}" th:href="${#mvc.url('IC#getGalleryPage').arg(1, tag.tag).build()}">
+                    <span th:text="${tag.tag} + ' '"></span><span class="badge bg-secondary rounded-pill" th:text="${tag.amount}"></span>
+                </a>
+            </div>
         </div>
-        <div class="col-11">
+        <div class="col">
             <div class="container-fluid">
                 <div class="row">
                     <div class="col-xl-2 col-lg-4 col-md-6 col-sm-12" th:each="image : ${imagePage.content}">
diff --git a/src/main/resources/templates/single.html b/src/main/resources/templates/single.html
index a1514d9..0566a5f 100644
--- a/src/main/resources/templates/single.html
+++ b/src/main/resources/templates/single.html
@@ -8,32 +8,32 @@
 <div th:replace="fragments :: navbar"></div>
 <div class="container-fluid">
     <div th:replace="fragments :: searchBarRow"></div>
-    <div class="row mt-2">
-        <div class="col-2">
-            <ul>
-                <li th:each="tag : ${tags}">
-                    <a class="text-decoration-none"
-                       th:href="${#mvc.url('IC#getGalleryPage').arg(1, tag.tag).build()}"
-                       th:text="${tag.tag} + ' '">tag</a><span th:text="${tag.amount}"></span>
+    <div class="row mt-2 ms-1">
+        <div class="col-xl-2 col-md-3 col-4 text-center">
+            <div class="w-75">
+            <div class="list-group">
+                <a class="list-group-item d-flex justify-content-between align-items-center text-decoration-none" th:each="tag : ${tags}" th:href="${#mvc.url('IC#getGalleryPage').arg(1, tag.tag).build()}">
+                    <span th:text="${tag.tag} + ' '"></span><span class="badge bg-secondary rounded-pill" th:text="${tag.amount}"></span>
                     <form method="post" th:action="${'/view/' + image.id + '/removetag'}" th:if="${isUploader}">
                         <input name="tagId" th:value="${tag.id}" type="hidden">
-                        <button type="submit">-</button>
+                        <button class="btn btn-danger btn-sm" type="submit" data-toggle="tooltip" th:title="'Remove the tag ' + ${tag.tag}">-</button>
                     </form>
-                </li>
-            </ul>
-            <p>Uploaded by: <span th:text="${image.uploader.name}"></span></p>
-            <form method="post" th:action="'/view/' + ${image.id} + '/addtag'" th:if="${isUploader}">
+                </a>
+            </div>
+            <p class="mt-3">Uploaded by: <span th:text="${image.uploader.name}"></span></p>
+            <form class="row" method="post" th:action="'/view/' + ${image.id} + '/addtag'" th:if="${isUploader}">
                 <!--suppress HtmlFormInputWithoutLabel -->
-                <input name="tagName" placeholder="Add a new tag" type="text">
-                <button type="submit">+</button>
+                <input class="col" name="tagName" placeholder="Add a new tag" type="text">
+                <button class="col-2 btn btn-primary" type="submit">+</button>
             </form>
             <form th:action="'/upload/d/' + ${image.id}"
                   th:if="${isUploader}"
-                  th:method="delete">
-                <button type="submit">Delete</button>
+                  th:method="delete" class="mt-3">
+                <button type="submit" class="btn btn-danger">Delete</button>
             </form>
+            </div>
         </div>
-        <div class="col-8">
+        <div class="col">
             <!--suppress HtmlRequiredAltAttribute -->
             <img class="w-100" th:alt="${image.filename}" th:src="'/i/' + ${image.filename}">
         </div>