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

Further work on dynamic home page banner(town) selection

parent e2894055
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"
Hide whitespace changes
Inline Side-by-side
src/main/java/Team5/SmartTowns/Towns/TownStorage.java
+ 1
− 0
View file @ 157545ca
......@@ -13,6 +13,7 @@ public class TownStorage {
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")
......
src/main/resources/static/css/homePageStyle.css
+ 5
− 0
View file @ 157545ca
......@@ -37,6 +37,10 @@ body{
background-image: linear-gradient(to right, darkslategrey , darkgoldenrod 30%);
}
.riscaBannerTrail{
background-image: linear-gradient(to right, darkslategrey , darkgoldenrod );
}
.caerphillyBanner{
grid-area:townBannerC;
background-image: url('/images/CaerphillyCastle.jpg');
......@@ -60,6 +64,7 @@ body{
background-position: left 65%;
color: inherit;
text-decoration: none;
}
.penarthBanner {
......
src/main/resources/templates/towns/home/homePageTest.html
+ 177
− 42
View file @ 157545ca
......@@ -5,69 +5,204 @@
<title>Title</title>
<!-- <link rel="stylesheet" th:href="@{/css/homePageStyle.css}">-->
<link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
<style>
/*body{*/
/* background-color: rgb(41, 41, 41)*/
/*}*/
#homeTitle{
grid-area: pageTitle;}
/* color: whitesmoke;*/
/*}*/
.submitLand{
grid-area: submitButton;
}
.Banner , .riscaBanner,.penarthBanner{
margin-top: 20px;
background-color: darkslategrey;
margin-bottom: 20px;
border: solid 2px whitesmoke;
/*border colour here at .banner and .bannertrail*/
border-right: none;
}
.BannerTrail ,.riscaBannerTrail,.penarthBannerTrail{
background-color: darkslategrey;
margin-top: 20px;
margin-bottom: 20px;
border: solid 2px whitesmoke;
border-left: none;
text-align: center;
}
.penarthBannerTrail{
background-image: linear-gradient(to right, darkslategrey , darkgoldenrod 40%);
}
.caerphillyBannerTrail{
margin-top: 20px;
margin-bottom: 20px;
border: solid 2px whitesmoke;
border-left: none;
background-image: linear-gradient(to right, darkslategrey , darkgoldenrod 30%);
}
.caerphillyBanner{
grid-area:townBannerC;
background-image: url('/images/CaerphillyCastle.jpg');
/*// from cadw*/
background-size: 850px 200px;
background-repeat: no-repeat;
background-position: left 35%;
color: inherit;
text-decoration: none;
/*filter: grayscale(30%);*/
}
/*!*https://www.stayinwales.co.uk/wales_picture.cfm?p=4454*! Risca img*/
.riscaBanner {
/* #caerUrl{*/
grid-area: townBannerR;
background-image: url('/images/RiscaBanner.jpg');
background-size: 850px 200px;
background-repeat: no-repeat;
background-position: left 65%;
color: inherit;
text-decoration: none;
}
.penarthBanner {
grid-area: townBannerP;
background-image: url('/images/PenarthBanner.jpg');
background-size: 850px 200px;
background-repeat: no-repeat;
background-position: left 78%;
color: inherit;
text-decoration: none;
}
.caerphillyBannerTrail{
grid-area:townBannerDetsC;
}
/*.Banner th{*/
/* grid-area:townBanner;*/
/*}*/
.BannerTrail th{
grid-area:townBannerDetsR
}
.Banner {
grid-area:townBanner;
/*background-size: 10px 10px;*/
/*background-size: contain;*/
/*background-position: left 78%;*/
color: inherit;
text-decoration: none;
background-color: hotpink;
}
a{
background-size: contain;
}
/*.Banner {*/
/* grid-area:townBanner;*/
/* background-color: #bbbb00;*/
/* !*background-size: 10px 10px;*!*/
/* !*background-repeat: no-repeat;*!*/
/* !*background-position: left 78%;*!*/
/* !*color: inherit;*!*/
/* !*text-decoration: none;*!*/
/*}*/
.BannerTrail{
grid-area:townBannerDets;
}
#aboutUsFlavour{
grid-area: textFlavour;
margin-top: 25px;
margin-bottom: 15px;
color: whitesmoke;
}
#trailCount{
flex:1;
/*align-items: center;*/
/*justify-content: center;*/
}
#trailProgress{
flex:2;
align-content: center;
}
.gridContainer1 {
display:grid;
grid-template-columns: 10% 10% 60% 5% 5% 10%;
grid-template-rows: auto;
grid-template-areas:
". pageTitle pageTitle pageTitle pageTitle ."
". . . submitButton submitButton .";
}
.gridContainer2 {
display:grid;
grid-template-columns: 10% 10% 60% 5% 5% 10%;
grid-template-rows: auto;
grid-template-areas:
". townBanner townBanner townBannerDets . .";
}
</style>
</head>
<body>
<header th:insert="~{/towns/Templating.html::header}"></header>
<main>
<div class="gridContainer1">
<H1 id="homeTitle"> VZTA Smart Towns - Trails</H1>
<a class="submitLand" href="/landmarkSubmission"> <button> Submit Landmark!</button></a>
<div th:text="${towns}">
<H1 id="homeTitle"> VZTA Smart Towns - Trails</H1>
<a class="submitLand" href="/landmarkSubmission"> <button> Submit Landmark!</button></a>
<!-- <div th:text="${towns}">-->
</div>
<ul th:each="town:${towns}">
<a href="/allTrails" class="caerphillyBanner">
<H2 th:text="${town.getName()}"> </H2></a>
<div th:each="town:${towns}" class="gridContainer2">
<a href="/allTrails" class="Banner"
th:style="'background:url('+ ${town.getImageTown()} +');'"
th:styleappend="'background-size: 850px 200px;'+'background-repeat: no-repeat;'+'background-position: left 78%;'"
<div class="caerphillyBannerTrail">
<div id="trailCountCaer" th:text="'Trails: '+ ${town.getTrailNumber()}">Trails: </div>
<div id="trailProgressCaer" th:text="${town.getTrailProgress()}"></div>
</div>
<!-- //goes through each student in list of students^^-->
<li th:text="${town.getName()}"></li>
>
</ul>
<H2 th:text="${town.getName()}"> </H2></a>
<div class="BannerTrail"
th:style=" ${town.getTrailProgress()==0 ? 'background-image:darkslategrey' : 'background-image: linear-gradient(to left, darkgoldenrod ' +${town.getTrailProgress()}+ '%, darkslategrey '}
<a href="/allTrails" class="caerphillyBanner">
<H2> Caerphilly</H2></a>
<!-- 'background-image: linear-gradient(to left, darkgoldenrod ' +${town.getTrailProgress()}+ '%, darkslategrey );'-->
">
<div id="trailCount" th:text="'Trails: '+ ${town.getTrailNumber()}">Trails: </div>
<div id="trailProgress" th:text="${town.getTrailProgress()}+'%'"></div>
</div>
<!-- <div class="BannerTrail"-->
<!-- th:style="'background-image: linear-gradient(to left, darkgoldenrod ' +${town.getTrailProgress()}+ '%, darkslategrey );'">-->
<!-- <div id="trailCount" th:text="'Trails: '+ ${town.getTrailNumber()}">Trails: </div>-->
<!-- <div id="trailProgress" th:text="${town.getTrailProgress()}+'%'"></div>-->
<!-- </div>-->
<div class="caerphillyBannerTrail">
<div id="trailCountCaer">Trails: 3</div>
<div id="trailProgressCaer">70%</div>
</div>
<a href="/allTrails" class="riscaBanner">
<H2> Risca</H2> </a>
<div class="riscaBannerTrail">
<div id="trailCountRisca">Trails: 2</div>
<div id="trailProgressRisca">0%</div>
</div>
<a href="/allTrails" class="penarthBanner">
<H2> Penarth</H2> </a>
<div class="penarthBannerTrail">
<div id="trailCountPenarth">Trails: 5</div>
<div id="trailProgressPenarth">60%</div>
</div>
<div id="aboutUsFlavour"> This is placeholder text about VZTA, this application,
the trails and towns and resultant awards written in an excitable manner!!</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment