Changed many styling choices for the AllTrails file

f5c5c103 · Gabriel Copat · cc3107a0 · f5c5c103 · cc3107a0 · f5c5c103
Commit f5c5c103 authored 1 year ago by Gabriel Copat
--- a/src/main/resources/static/css/allTrails.css
+++ b/src/main/resources/static/css/allTrails.css
@@ -4,6 +4,8 @@
 body {
    background-color: rgb(41, 41, 41);
    margin: 0;
+    display: flex;
+    flex-direction: column;
 }
 main {
 }
@@ -49,10 +51,8 @@ main {
 }

 #trailInfoContainer {
-    margin: auto;
-    width: 95svw;
-    min-height: 40svh;
-    min-width: 30svw;
+
+    overflow: scroll;
 }

 .trailInfoFrag {
@@ -60,62 +60,77 @@ main {
    border: #000000 solid 2px;
    border-radius: 10px;
    box-shadow: 0 5px 20px 0 #000000;
-    margin:0;
-    padding:0;
+    margin: 2svh auto;
+    width: 70vw;
+    height: 60svh;
    animation: fadeIn 3s;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    min-width: 30svh;

-    & h1 {
-        color: white;
+    display: grid;
+    grid-template-areas:
+            "header header header"
+            "image text text";
+    grid-template-columns: 30% 30% auto;
+    grid-template-rows: 10% auto;
+    grid-column-gap: 2vw;
+    grid-row-gap: 2svh;
+    & .trailInfoHeader {
        grid-area: header;
-        margin: 10px 25%;
-        font-size: xx-large;
-        text-align: center;
-        border-bottom: #1e1e1e solid 2px;
-    }
-}
+        width: 100%;
+        height: 100%;
+        margin-top: 1svh;
+        padding: 0;
+        & h1 {
+            color: white;
+            padding:0;
+            margin:0 25%;
+            font-size: 2vw;
+            text-align: center;
+            box-shadow: 0 10px 10px -10px black;
+        }

-#trailFragContent {
-    margin: 0;
-    padding: 0;
-    display: flex;
-    overflow: hidden;
-    min-height: 40svh;
-    max-height: 60svh;
+    }

    & img {
+        grid-area: image;
        border-radius: 10px;
        border: black solid 1px;
-        margin: 1%;
-        flex: 1 1;
-
-        min-width: 20%;
-        max-width: 40%;
-        min-height: 20svh;
-        max-height: 90%;
-        overflow: hidden;
+        margin-left: 2vw;
+        margin-right: 2vw;
+        width: 100%;
+        height: auto;
    }
    & p {
+        grid-area: text;
        color: white;
-        flex: 1 1;
-        padding: 5%;
-        width: 60%;
-        border-left: solid darkgrey 2px;
-        font-size: x-large;
+        margin: 0;
+        padding: 0 2vw;
+        font-size: 1.5vw;
        text-align: justify;
        text-justify: inter-character;
        line-height: 1.5;
+        width: fit-content;
+        height: fit-content;
+        overflow: scroll;
+
    }
 }

+#trailFragContent {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    min-height: 40svh;
+    flex-wrap: wrap;
+
+}
+
 header {
    box-shadow: #1e1e1e 0 0 10px 10px;
+    font-size: 1vw;
 }

 footer {
+    font-size: 1vw;
    position: relative;
    bottom: 0;
 }
\ No newline at end of file
--- a/src/main/resources/static/images/trails/trail2.jpg
+++ b/src/main/resources/static/images/trails/trail2.jpg
--- a/src/main/resources/static/images/trails/trail3.jpg
+++ b/src/main/resources/static/images/trails/trail3.jpg
--- a/src/main/resources/static/images/trails/trail4.jpg
+++ b/src/main/resources/static/images/trails/trail4.jpg
--- a/src/main/resources/static/images/trails/trailNotFound.jpg
+++ b/src/main/resources/static/images/trails/trailNotFound.jpg
--- a/src/main/resources/static/scripts/allTrails.js
+++ b/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) {
-        $("#trailInfoContainer").html(fragment)
+        $(".trailInfoFrag").replaceWith(fragment);
    });
    updateSelectedTrail(id);
 }

--- a/src/main/resources/templates/allTrails/allTrails.html
+++ b/src/main/resources/templates/allTrails/allTrails.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>All Trails</title>
    <link rel="stylesheet" th:href="@{css/allTrails.css}">
    <link rel="stylesheet" th:href="@{css/templatingstyle.css}">
@@ -21,7 +22,7 @@
        >
    </section>

-    <section id="trailInfoContainer">
+    <section id="trailInfoContainer" class="trailInfoFrag">
        <h1 class="centerFlex">Please select your trail</h1>
        <!--Loaded from thymeleaf-->
    </section>

--- a/src/main/resources/templates/fragments/allTrailsFrags.html
+++ b/src/main/resources/templates/fragments/allTrailsFrags.html
 <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 class="trailInfoHeader">
+        <h1 th:text="${trail.getName()}"></h1>
    </div>
-
-
-    <!--TODO add more to this fragment and then add styling to it-->
+    <img th:src="@{${trail.getImgPath()}}" th:alt="${trail.getName()} ">
+    <p id="trailDesc" th:text="${trail.getDescription()}"></p>
 </article>