Made tag lists and image edit controls look nicer

This commit is contained in:
neviyn 2021-05-10 23:32:44 +01:00
parent 0ea4b27c94
commit b5ac6ed462
2 changed files with 24 additions and 26 deletions

View File

@ -9,16 +9,14 @@
<div class="container-fluid"> <div class="container-fluid">
<div th:replace="fragments :: searchBarRow"></div> <div th:replace="fragments :: searchBarRow"></div>
<div class="row mt-3" th:if="${imagePage != null}"> <div class="row mt-3" th:if="${imagePage != null}">
<div class="col-md-1 col-2"> <div class="col-xl-2 col-md-3 col-4">
<ul> <div class="list-group w-75">
<li th:each="tag : ${commonTags}"> <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()}">
<a class="text-decoration-none" <span th:text="${tag.tag} + ' '"></span><span class="badge bg-secondary rounded-pill" th:text="${tag.amount}"></span>
th:href="${#mvc.url('IC#getGalleryPage').arg(0, 1).arg(1, tag.tag).build()}" </a>
th:text="${tag.tag} + ' ' ">tag</a><span th:text="${tag.amount}"></span> </div>
</li>
</ul>
</div> </div>
<div class="col-11"> <div class="col">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-12" th:each="image : ${imagePage.content}"> <div class="col-xl-2 col-lg-4 col-md-6 col-sm-12" th:each="image : ${imagePage.content}">

View File

@ -8,32 +8,32 @@
<div th:replace="fragments :: navbar"></div> <div th:replace="fragments :: navbar"></div>
<div class="container-fluid"> <div class="container-fluid">
<div th:replace="fragments :: searchBarRow"></div> <div th:replace="fragments :: searchBarRow"></div>
<div class="row mt-2"> <div class="row mt-2 ms-1">
<div class="col-2"> <div class="col-xl-2 col-md-3 col-4 text-center">
<ul> <div class="w-75">
<li th:each="tag : ${tags}"> <div class="list-group">
<a class="text-decoration-none" <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()}">
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>
th:text="${tag.tag} + ' '">tag</a><span th:text="${tag.amount}"></span>
<form method="post" th:action="${'/view/' + image.id + '/removetag'}" th:if="${isUploader}"> <form method="post" th:action="${'/view/' + image.id + '/removetag'}" th:if="${isUploader}">
<input name="tagId" th:value="${tag.id}" type="hidden"> <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> </form>
</li> </a>
</ul> </div>
<p>Uploaded by: <span th:text="${image.uploader.name}"></span></p> <p class="mt-3">Uploaded by: <span th:text="${image.uploader.name}"></span></p>
<form method="post" th:action="'/view/' + ${image.id} + '/addtag'" th:if="${isUploader}"> <form class="row" method="post" th:action="'/view/' + ${image.id} + '/addtag'" th:if="${isUploader}">
<!--suppress HtmlFormInputWithoutLabel --> <!--suppress HtmlFormInputWithoutLabel -->
<input name="tagName" placeholder="Add a new tag" type="text"> <input class="col" name="tagName" placeholder="Add a new tag" type="text">
<button type="submit">+</button> <button class="col-2 btn btn-primary" type="submit">+</button>
</form> </form>
<form th:action="'/upload/d/' + ${image.id}" <form th:action="'/upload/d/' + ${image.id}"
th:if="${isUploader}" th:if="${isUploader}"
th:method="delete"> th:method="delete" class="mt-3">
<button type="submit">Delete</button> <button type="submit" class="btn btn-danger">Delete</button>
</form> </form>
</div>
</div> </div>
<div class="col-8"> <div class="col">
<!--suppress HtmlRequiredAltAttribute --> <!--suppress HtmlRequiredAltAttribute -->
<img class="w-100" th:alt="${image.filename}" th:src="'/i/' + ${image.filename}"> <img class="w-100" th:alt="${image.filename}" th:src="'/i/' + ${image.filename}">
</div> </div>