From a48bd6e80aa0ad105eb6bb9ea50a61c8966bab1b Mon Sep 17 00:00:00 2001
From: Gabriel Copat <copatg@cardiff.ac.uk>
Date: Wed, 29 Nov 2023 13:54:23 +0000
Subject: [PATCH] HTML/CSS added for each trail Updated a few naming
conventions and fixed some bugs
---
.../SmartTowns/trails/TrailsController.java | 2 +-
src/main/resources/static/css/allTrails.css | 81 ++++++++++++++++---
.../resources/static/scripts/allTrails.js | 2 +-
.../templates/allTrails/allTrails.html | 8 +-
.../templates/allTrails/oneTrail.html | 1 -
.../templates/fragments/allTrailsFrags.html | 14 +++-
6 files changed, 89 insertions(+), 19 deletions(-)
delete mode 100644 src/main/resources/templates/allTrails/oneTrail.html
diff --git a/src/main/java/Team5/SmartTowns/trails/TrailsController.java b/src/main/java/Team5/SmartTowns/trails/TrailsController.java
index cdc9880b..e78b8f72 100644
--- a/src/main/java/Team5/SmartTowns/trails/TrailsController.java
+++ b/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;
}
diff --git a/src/main/resources/static/css/allTrails.css b/src/main/resources/static/css/allTrails.css
index 97ec2963..87da2602 100644
--- a/src/main/resources/static/css/allTrails.css
+++ b/src/main/resources/static/css/allTrails.css
@@ -1,17 +1,24 @@
+* {
+ 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;
+
+ }
+
+}
diff --git a/src/main/resources/static/scripts/allTrails.js b/src/main/resources/static/scripts/allTrails.js
index d04eed9d..0e5132a7 100644
--- a/src/main/resources/static/scripts/allTrails.js
+++ b/src/main/resources/static/scripts/allTrails.js
@@ -1,7 +1,7 @@
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);
}
diff --git a/src/main/resources/templates/allTrails/allTrails.html b/src/main/resources/templates/allTrails/allTrails.html
index 1179d272..8304b05c 100644
--- a/src/main/resources/templates/allTrails/allTrails.html
+++ b/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>
diff --git a/src/main/resources/templates/allTrails/oneTrail.html b/src/main/resources/templates/allTrails/oneTrail.html
deleted file mode 100644
index 30d74d25..00000000
--- a/src/main/resources/templates/allTrails/oneTrail.html
+++ /dev/null
@@ -1 +0,0 @@
-test
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/allTrailsFrags.html b/src/main/resources/templates/fragments/allTrailsFrags.html
index 89f08f8e..fc4da149 100644
--- a/src/main/resources/templates/fragments/allTrailsFrags.html
+++ b/src/main/resources/templates/fragments/allTrailsFrags.html
@@ -1,5 +1,11 @@
-<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>
--
GitLab