From e41a637ae9c7893c3ae8803b51d0a4a1224dda2c Mon Sep 17 00:00:00 2001
From: Rhys Evans <EvansRM17@cardiff.ac.uk>
Date: Sun, 26 Nov 2023 19:22:47 +0000
Subject: [PATCH] modified id and class anmes to be more appropriate in terms
of element identification
---
.../resources/templates/towns/caerphilly.html | 75 ++++++++++++-------
1 file changed, 47 insertions(+), 28 deletions(-)
diff --git a/src/main/resources/templates/towns/caerphilly.html b/src/main/resources/templates/towns/caerphilly.html
index 97c78f75..811b8f5e 100644
--- a/src/main/resources/templates/towns/caerphilly.html
+++ b/src/main/resources/templates/towns/caerphilly.html
@@ -6,9 +6,26 @@
color: white;
}
.explore{
- color:deeppink;
+
+ color: deeppink;
+
}
+ a:link{
+
+ color: red;
+
+
+ }
+
+ .explore:visited{
+ color:purple;
+ }
+
+ .explore:hover{
+ color:plum;
+ }
+
.fnd{
color: dodgerblue;
@@ -25,7 +42,7 @@
color: darkseagreen;
}
- #checklistFlexbox{
+ .checklistFlexbox{
flex-direction: row;
display: inline-flex;
/*justify-content: space-between;*/
@@ -36,7 +53,7 @@
}
- #landmarkList{
+ .landmarkList{
padding-right: 15px;
/*border: 2px solid black;*/
@@ -45,9 +62,7 @@
}
- #checkList{
- }
.landmarkProgress{
text-align: center;
font-size: larger; /*vw changes with browser size*/
@@ -74,20 +89,20 @@
width:15px;height:15px;background: green;border-radius:50%;padding: 0; margin: 0px;height: 18px;width:18px;
}
- #landmarkList, #checkList{
+ .landmarkList, .checkList{
list-style-type: none;
}
- #title1{
+ .townName{
grid-area: title1;
}
- #title2{
+ .trailHeader{
grid-area: title2;
}
[BadgeStickerProgress]{
grid-area: BadgeStickerProgress;
}
- #landmarkTitle{
+ .landmarkTitle{
grid-area:landmarkTitle
}
.container{
@@ -102,7 +117,7 @@
"checklistFlexbox .";
}
- .red .uncollected{ /*taken from https://www.w3schools.com/css/css_tooltip.asp*/
+ .checkmark .uncollected{ /*taken from https://www.w3schools.com/css/css_tooltip.asp*/
visibility: hidden;
width: 120px;
background-color: red;
@@ -111,17 +126,20 @@
padding: 5px 0;
border-radius: 6px;
- top: -5px;
- left: 105%;
+ /*top: -5px;*/
+ /*left: 105%;*/
+ top: 5px;
+ left: 105%
+
}
- .red:hover .uncollected{
+ .checkmark:hover .uncollected{
visibility: visible;
}
- .red .collected{ /*taken from https://www.w3schools.com/css/css_tooltip.asp*/
+ .checkmark .collected{ /*taken from https://www.w3schools.com/css/css_tooltip.asp*/
visibility: hidden;
width: 120px;
background-color: green;
@@ -130,7 +148,7 @@
padding: 5px 0;
border-radius: 6px;
- top: -5px;
+ top: 0px;
left: 105%;
/*background-color: whitesmoke;*/
/*color: green;*/
@@ -138,11 +156,12 @@
}
- .red:hover .collected{
+ .checkmark:hover .collected{
visibility: visible;
}
+
</style>
<head>
@@ -152,32 +171,32 @@
<body>
<main>
<div class="container">
- <h1 id="title1"> Welcome to the town of Caerphilly.</h1>
+ <h1 class="townName"> Welcome to the town of Caerphilly.</h1>
- <h2 id="title2"> Welcome to the trail of trail-ness!</h2>
+ <h2 class="trailHeader"> Welcome to the trail of trail-ness!</h2>
<section name="BadgeStickerProgress"> Sticker Pictures and stuff go here</section>
- <h2 id="landmarkTitle">Caerphilly Landmark Progress:</h2>
- <div id="checklistFlexbox">
+ <h2 class="landmarkTitle">Caerphilly Landmark Progress:</h2>
+ <div class="checklistFlexbox">
<div><h2 style="padding-left: 3px">Badge Progress:</h2>
<div class="landmarkProgress"> <b class="landmarkProgress">2/5</b> </div>
<br>
<div class="landmarkProgress">
<b class="landmarkProgress" >3 to Go!!</b></div></p>
</div>
- <li id="checkList">
- <ul class="red"><div id="block1"> </div> <span class="uncollected">Uncollected</span></ul>
- <ul class="red"><div id="block2"> </div><span class="uncollected">Uncollected</span></ul>
- <ul class="red"><div id="block3"> </div><span class="collected">Collected</span></ul>
- <ul class="red"><div id="block4"> </div><span class="uncollected">Uncollected</span></ul>
- <ul class="red"><div id="block5"> </div><span class="collected">Collected</span></ul>
+ <li class="checkList">
+ <ul class="checkmark"><div id="block1"> </div> <span class="uncollected">Uncollected</span></ul>
+ <ul class="checkmark"><div id="block2"> </div><span class="uncollected">Uncollected</span></ul>
+ <ul class="checkmark"><div id="block3"> </div><span class="collected">Collected</span></ul>
+ <ul class="checkmark"><div id="block4"> </div><span class="uncollected">Uncollected</span></ul>
+ <ul class="checkmark"><div id="block5"> </div><span class="collected">Collected</span></ul>
</li>
- <li name="landmarkList"id="landmarkList">
+ <li name="landmarkList"class="landmarkList">
<ul><span class="shopping">Landmark 1 </span>
- <span class="explore">- <a href="../test.html">Explore!</a></span></ul>
+ <span ><a href="../test.html" class="explore">- Explore!</a></span></ul>
<hr style="height:0px; visibility:hidden;" />
<ul><span class="services">Landmark 2 </span>
<span class="explore">- Explore!</span></ul> <hr style="height:0px; visibility:hidden;" />
--
GitLab