HTML/CSS added for each trail

Updated a few naming conventions and fixed some bugs

src/main/java/Team5/SmartTowns/trails/TrailsController.java

@@ -31,7 +31,7 @@ public class TrailsController {
     {
         List<Trail> trailList= Trail.trails;//results from db
         ModelAndView mv= new ModelAndView("fragments/allTrailsFrags :: trailSection");
-        mv.addObject("searchList", trailList.get(id-1));
+        mv.addObject("trail", trailList.get(id-1));
 
         return mv;
     }

src/main/resources/static/css/allTrails.css

+* {
+    box-sizing: border-box;
+}
 body {
     background-color: rgb(41, 41, 41);
     margin: 0;
 }
+main {
+}
 .centerFlex {
     display: flex;
     justify-content: center;
 }
 #allTrailsBar {
     padding:0;
-    max-width: 60%;
+    max-width: 80%;
     height: 11svh;
-    margin: auto;
-    border-bottom: solid grey 2px;
+    margin: 1svh auto;
+    display: flex;
+    justify-content: space-between;
+    /*border-bottom: solid grey 2px;*/
     /*border-top: solid grey 4px;*/
 
 }
@@ -33,19 +40,73 @@ body {
 .selected {
     box-shadow: 0 0 20px 10px #bbbb00;
 }
-
-.trailInfoBox {
-    animation: fadeIn 3s;
-    padding: 20px;
-    font-size: xx-large;
-}
-
 @keyframes fadeIn {
     0% { opacity: 0; }
     100% { opacity: 1; }
 }
+main {
+    margin: 0;
+}
 
+#trailInfoContainer {
+    margin: auto;
+    width: 95vw;
+    min-height: 80vh;
+    min-width: 30svw;
+}
+
+.trailInfoFrag {
+    background-color: rgb(84, 33, 128);
+    border: #000000 solid 2px;
+    border-radius: 10px;
+    box-shadow: 0 5px 20px 0 #000000;
 
+    margin:0;
+    padding:0;
+    animation: fadeIn 3s;
+
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    /*min-height: 80svh;*/
+    min-width: 30svh;
+
+    & h1 {
+        color: white;
+        grid-area: header;
+        margin: 10px 25%;
+        font-size: xx-large;
+        text-align: center;
+        border-bottom: #1e1e1e solid 2px;
+    }
+}
+
+#trailFragContent {
+    margin: 0;
+    padding: 0;
+
+    display: flex;
+    overflow: hidden;
+
+    & img {
+        border-radius: 10px;
+        border: black solid 1px;
+        margin: 1%;
+        flex: 1 1;
+        width: 30%;
+        min-height: 30svh;
+    }
+    & p {
+        color: white;
+        flex: 1 1;
+        padding-top: 5px;
+        padding-left: 10px;
+        width: 60%;
+        border-left: solid darkgrey 2px;
+
+    }
+
+}
 
 
 

src/main/resources/static/scripts/allTrails.js

 function updateOutputTrail(id) {
     /* Updates the trail being shown on screen to the one requested by ID */
     $.get("/allTrails/" + id).done(function (fragment) {
-        $("#trailInfoBox").html(fragment)
+        $("#trailInfoContainer").html(fragment)
     });
     updateSelectedTrail(id);
 }

src/main/resources/templates/allTrails/allTrails.html

@@ -13,7 +13,6 @@
 
 <main>
     <section id="allTrailsBar" class="centerFlex">
-        <!--TODO add rest of page-->
         <img class="trailsImages"
              th:each="trail : ${trails}"
              th:src="@{${trail.getImgPath()}}"
@@ -21,7 +20,12 @@
              th:id="'img' + ${trail.getId()}" th:alt="${trail.getName()}"
         >
     </section>
-    <section id="trailInfoBox"></section>
+
+    <section id="trailInfoContainer">
+
+
+    </section>
+
 </main>
 
 <footer th:replace="towns/templates.server/Templating.html:: footerBlock"></footer>

src/main/resources/templates/allTrails/oneTrail.html

-test
\ No newline at end of file

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>
+<article th:fragment="trailSection" class="trailInfoFrag">
+    <h1 th:text="${trail.getName()}"></h1>
+
+    <div id="trailFragContent">
+        <img th:src="@{${trail.getImgPath()}}" th:alt="${trail.getName()} ">
+        <p th:text="${trail.getDescription()}"></p>
+    </div>
+
+
     <!--TODO add more to this fragment and then add styling to it-->
-</section>
+</article>