diff --git a/src/main/resources/static/css/allTrails.css b/src/main/resources/static/css/allTrails.css
index 1f63bfef2743bc8df2f94fce0cb691c5488fa46e..b3d254a2a29cf3af1865eb44483769a9edf3b0fb 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 161f9e25606f902cc35b003acb5d803eb4fb8916..d89fab7cbc8dbee719c13823612bbb7fd0964365 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 4779bae2a941fa2063a71740986a9930f6aa9ed6..89f08f8e5befa1d8d578319948a154bb94891f52 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>