Skip to content
Snippets Groups Projects
Commit 3130d192 authored by Rhys Evans's avatar Rhys Evans
Browse files

Finalizing styling, user progress nbow effects banner and banner border colour scheme

parent 1f686674
No related branches found
No related tags found
1 merge request!20Resolve "As a user I want to see a list of all available towns with trails so I can plan where to go"
......@@ -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")
)
......
......@@ -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>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment