From 3130d1929b223838ca29132a30bfbe0054aee3bf Mon Sep 17 00:00:00 2001
From: Rhys Evans <EvansRM17@cardiff.ac.uk>
Date: Sun, 3 Dec 2023 20:20:22 +0000
Subject: [PATCH] Finalizing styling, user progress nbow effects banner and
banner border colour scheme
---
.../Team5/SmartTowns/Towns/TownStorage.java | 10 ++-
.../templates/towns/home/homePageTest.html | 81 ++++++++++++++++---
2 files changed, 75 insertions(+), 16 deletions(-)
diff --git a/src/main/java/Team5/SmartTowns/Towns/TownStorage.java b/src/main/java/Team5/SmartTowns/Towns/TownStorage.java
index c56bb758..d2d99ea9 100644
--- a/src/main/java/Team5/SmartTowns/Towns/TownStorage.java
+++ b/src/main/java/Team5/SmartTowns/Towns/TownStorage.java
@@ -12,9 +12,13 @@ public class TownStorage {
townList.addAll(
List.of(
new Towns("Caerphilly",01,3,70,"/images/CaerphillyCastle.jpg"),
- new Towns("Risca",02,2,0,"/images/RiscaBanner.jpg"),
- new Towns("Penarth",03,5,60,"/images/PenarthBanner.jpg"),
- new Towns("Penarth",03,5,60,"/images/PenarthBanner.jpg")
+ new Towns("Risca",02,2,34,"/images/RiscaBanner.jpg"),
+ new Towns("Penarth",03,5,0,"/images/PenarthBanner.jpg"),
+ new Towns("Penarth",03,5,50,"/images/PenarthBanner.jpg"),
+ new Towns("Caerphilly",01,3,70,"/images/CaerphillyCastle.jpg"),
+ new Towns("Risca",02,2,90,"/images/RiscaBanner.jpg"),
+ new Towns("Penarth",03,5,100,"/images/PenarthBanner.jpg")
+
)
diff --git a/src/main/resources/templates/towns/home/homePageTest.html b/src/main/resources/templates/towns/home/homePageTest.html
index 4f98efd7..b8ea329e 100644
--- a/src/main/resources/templates/towns/home/homePageTest.html
+++ b/src/main/resources/templates/towns/home/homePageTest.html
@@ -21,11 +21,11 @@
margin-top: 20px;
background-color: darkslategrey;
margin-bottom: 20px;
- border: solid 2px whitesmoke;
+ /*border: solid 2px whitesmoke;*/
/*border colour here at .banner and .bannertrail*/
border-right: none;
}
- .BannerTrail, .BannerTrail.overSixty, .BannerTrail.underSixty {
+ .BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete {
/*background-color: darkslategrey;*/
margin-top: 20px;
margin-bottom: 20px;
@@ -34,30 +34,79 @@
text-align: center;
}
- .BannerTrail th, .BannerTrail.overSixty th, .BannerTrail.underSixty{
+ /* .BannerTrail.Complete .BannerTrail.closeComplete .BannerTrail.nearComplete .BannerTrail.farComplete .BannerTrail.notComplete */
+
+ .BannerTrail th, .BannerTrail.Complete th, .BannerTrail.closeComplete th, .BannerTrail.nearComplete th, .BannerTrail.farComplete th, .BannerTrail.notComplete th{
grid-area:townBannerDetsR
}
- .BannerTrail, .BannerTrail.overSixty, .BannerTrail.underSixty{
+ .BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete{
grid-area:townBannerDets;
}
- .BannerTrail.overSixty {
- background-color: green;
-
- }
.BannerTrail {
background-color: darkslategrey;
}
- .BannerTrail.underSixty {
+ .BannerTrail.Complete {
+ background-color: gold;
+ border: 2px solid gold;
+ border-left: solid 2px whitesmoke;
+ }
+ .BannerTrail.closeComplete {
+ background-color: darkgoldenrod;
+ background-color: darkgoldenrod;
+ border: 2px solid darkgoldenrod;
+ border-left: solid 2px whitesmoke;
+ }
+
+ .BannerTrail.nearComplete {
+ background-color: deepskyblue;
+ background-color: deepskyblue;
+ border: 2px solid deepskyblue;
+ border-left: solid 2px whitesmoke;
+ }
+
+ .BannerTrail.farComplete {
+ background-color: green;
+ background-color: green;
+ border: 2px solid green;
+ border-left: solid 2px whitesmoke;
+ }
+
+ .BannerTrail.notComplete {
background-color: red;
+ background-color: red;
+ border: 2px solid red;
+ border-left: solid 2px whitesmoke;
+ }
+ /*Below selects banner that has the Complete class to change color*/
+ .Banner:has(+.BannerTrail.Complete){
+ border: 2px solid gold;
+ border-right: solid 2px whitesmoke;
+ }
+ .Banner:has(+.BannerTrail.closeComplete){
+ border: 2px solid darkgoldenrod;
+ border-right: solid 2px whitesmoke;
}
+ .Banner:has(+.BannerTrail.nearComplete){
+ border: 2px solid deepskyblue;
+ border-right: solid 2px whitesmoke;
+ }
+ .Banner:has(+.BannerTrail.farComplete){
+ border: 2px solid green;
+ border-right: solid 2px whitesmoke;
+ }
+ .Banner:has(+.BannerTrail.notComplete){
+ border: 2px solid red;
+ border-right: solid 2px whitesmoke;
+ }
+
.BannerTrail {
background-color: darkslategrey;
@@ -160,10 +209,16 @@
<H2 th:text="${town.getName()}"> </H2></a>
- <div class="BannerTrail"
- th:classappend="(${town.getTrailProgress()>60}?'overSixty' :'underSixty')">
-<!--Rough class append used to distinguish progress, using a class append based on progress can allow for further customisation to banners later on. this only works for
-a single % point though, todo research this further in the future-->
+ <div class="BannerTrail"th:classappend="|${town.getTrailProgress()==100 ? 'Complete' : ''} ${town.getTrailProgress()<100 and town.getTrailProgress()>=90 ? 'closeComplete' : ''''} ${town.getTrailProgress()<90 and town.getTrailProgress()>=70 ? 'nearComplete' : ''''} ${town.getTrailProgress()<70 and town.getTrailProgress()>=50 ? 'farComplete' : ''''} ${town.getTrailProgress()<50 ? 'notComplete' : ''''}|"
+ >
+
+<!--Rough class append used to distinguish progress, using a class append based on progress can allow for further customisation to banners later on
+rough % outline;
+100 -gold
+90-99 - darkgold
+70-89 - blue
+50-69-green
+0-49-red-->
<div id="trailCount" th:text="'Trails: '+ ${town.getTrailNumber()}">Trails: </div>
--
GitLab