Updated style and HTML elements

a5b44c38 · Gabriel Copat · de1879ac · a5b44c38 · a5b44c38 · a5b44c38
Commit a5b44c38 authored 1 year ago by Gabriel Copat
--- a/src/main/resources/static/css/allTrails.css
+++ b/src/main/resources/static/css/allTrails.css
-.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 {

--- 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>

--- a/src/main/resources/templates/fragments/allTrailsFrags.html
+++ b/src/main/resources/templates/fragments/allTrailsFrags.html
 <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>