From a5b44c38ffd80bda029ef0c3793ffd78ab545e1d Mon Sep 17 00:00:00 2001
From: Gabriel Copat <copatg@cardiff.ac.uk>
Date: Wed, 29 Nov 2023 10:51:52 +0000
Subject: [PATCH] Updated style and HTML elements
---
src/main/resources/static/css/allTrails.css | 38 ++++++++-----------
.../templates/allTrails/allTrails.html | 18 ++++-----
.../templates/fragments/allTrailsFrags.html | 1 +
3 files changed, 26 insertions(+), 31 deletions(-)
diff --git a/src/main/resources/static/css/allTrails.css b/src/main/resources/static/css/allTrails.css
index 1f63bfef..b3d254a2 100644
--- a/src/main/resources/static/css/allTrails.css
+++ b/src/main/resources/static/css/allTrails.css
@@ -1,37 +1,31 @@
-.flexList {
+.centerFlex {
display: flex;
- list-style: none;
- width: 100%;
- padding-left:0;
- margin-left:0;
justify-content: center;
}
+#allTrailsBar {
+ padding:0;
+ max-width: 60%;
+ height: 12svh;
+ margin: auto;
+ border-bottom: solid grey 4px;
+ border-top: solid grey 4px;
-.listButton {
- flex: 1 1;
- display: flex;
- text-align: center;
-}
-
-.listA{
- display: flex;
- flex: 1 1;
- padding: 15px;
- transition: background-color 0.5s ease-out 100ms;
- border-radius: 20px;
-}
-.listA:hover{
- /*background-color: #656565;*/
}
.trailsImages {
- flex: 1 1;
- width: 150px;
+ margin-left:auto;
+ margin-right:auto;
+ margin-top: auto;
+ margin-bottom: auto;
+ height: 10svh;
+ width: 10svh;
border-radius: 20px;
transition: 0.5s ease-out 100ms;
+
}
.trailsImages:hover {
box-shadow: 0 0 30px #bbbb00;
transform: scale(1.2,1.2);
+ !important; overflow: visible;
}
.selected {
diff --git a/src/main/resources/templates/allTrails/allTrails.html b/src/main/resources/templates/allTrails/allTrails.html
index 161f9e25..d89fab7c 100644
--- a/src/main/resources/templates/allTrails/allTrails.html
+++ b/src/main/resources/templates/allTrails/allTrails.html
@@ -9,15 +9,15 @@
<body>
<header>
- <ul class="flexList">
- <!--TODO trail image instead of title-->
- <li class="listButton" th:each="trail : ${trails}">
- <a class="listA" th:onclick="'updateOutputTrail('+ ${trail.id} +');'" th:id="'li' + ${trail.id}">
- <img th:src="@{${trail.getImgPath()}}" class="trailsImages" th:id="'img' + ${trail.getId()}" alt="IMG">
- </a>
-
- </li>
- </ul>
+ <div id="allTrailsBar" class="centerFlex">
+ <!--TODO add rest of page-->
+ <img class="trailsImages"
+ th:each="trail : ${trails}"
+ th:src="@{${trail.getImgPath()}}"
+ th:onclick="'updateOutputTrail('+ ${trail.id} +');'"
+ th:id="'img' + ${trail.getId()}" alt="IMG"
+ >
+ </div>
</header>
<main>
diff --git a/src/main/resources/templates/fragments/allTrailsFrags.html b/src/main/resources/templates/fragments/allTrailsFrags.html
index 4779bae2..89f08f8e 100644
--- a/src/main/resources/templates/fragments/allTrailsFrags.html
+++ b/src/main/resources/templates/fragments/allTrailsFrags.html
@@ -1,4 +1,5 @@
<section th:fragment="trailSection" class="trailInfoBox">
<h1 th:text="${searchList.getName()}"></h1>
<p th:text="${searchList.getDescription()}"></p>
+ <!--TODO add more to this fragment and then add styling to it-->
</section>
--
GitLab