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

Added hover text to allow users to assess landmark collection status easier

parent 3804ded5
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"
This commit is part of merge request !5. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
src/main/resources/templates/towns/caerphilly.html
+ 49
− 9
Edit View file @ f18c4f1a
......@@ -59,7 +59,7 @@
/*block types denote whether a user has unlocked the respective landmark*/
#block1{
width:15px;height:15px;background: red;border-radius:50%;padding: 0; margin: 0px;height: 18px; width:18px;tooltip
width:15px;height:15px;background: red;border-radius:50%;padding: 0; margin: 0px;height: 18px; width:18px;
}
#block2{
width:15px;height:15px;background: red;border-radius:50%;padding: 0; margin: 0px;height: 18px;width:18px;
......@@ -102,6 +102,45 @@
"checklistFlexbox .";
}
.red .uncollected{ /*taken from https://www.w3schools.com/css/css_tooltip.asp*/
visibility: hidden;
width: 120px;
background-color: whitesmoke;
color: red;
text-align: center;
padding: 5px 0;
border-radius: 6px;
top: -5px;
left: 105%;
}
.red:hover .uncollected{
visibility: visible;
}
.red .collected{ /*taken from https://www.w3schools.com/css/css_tooltip.asp*/
visibility: hidden;
width: 120px;
background-color: whitesmoke;
color: green;
text-align: center;
padding: 5px 0;
border-radius: 6px;
top: -5px;
left: 105%;
}
.red:hover .collected{
visibility: visible;
}
</style>
<head>
......@@ -124,11 +163,11 @@
<b class="landmarkProgress" >3 to Go!!</b></div></p>
</div>
<li id="checkList">
<ul><div id="block1"> </div></ul>
<ul><div id="block2"> </div></ul>
<ul><div id="block3"> </div></ul>
<ul><div id="block4"> </div></ul>
<ul><div id="block5"> </div></ul>
<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>
......@@ -137,12 +176,13 @@
<li name="landmarkList"id="landmarkList">
<ul><span class="shopping">Landmark 1 </span>
<span class="explore">- <a href="../test.html">Explore!</a></span></ul>
<hr style="height:0px; visibility:hidden;" />
<ul><span class="services">Landmark 2 </span>
<span class="explore">- Explore!</span></ul>
<span class="explore">- Explore!</span></ul> <hr style="height:0px; visibility:hidden;" />
<ul><span class="activities">Landmark 3 </span>
<span class="explore">- Explore!</span></ul>
<span class="explore">- Explore!</span></ul> <hr style="height:0px; visibility:hidden;" />
<ul><span class="shopping">Landmark 4 </span>
<span class="explore">- Explore!</span></ul>
<span class="explore">- Explore!</span></ul> <hr style="height:0px; visibility:hidden;" />
<ul><span class="fnd">Landmark 5 </span>
<span class="explore">- Explore!</span></ul>
</li>
......
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