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

modified id and class anmes to be more appropriate in terms of element identification

parent 557aedbb
No related branches found
No related tags found
1 merge request!5Resolve "As a user I want to be able to see a list of specific landmarks so I can decide where to go next on the trail"
Hide whitespace changes
Inline Side-by-side
src/main/resources/templates/towns/caerphilly.html
+ 47
− 28
View file @ e41a637a
......@@ -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;" />
......
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