From f18c4f1a0fadf729f4abbb81bf7bcf03af32ce94 Mon Sep 17 00:00:00 2001
From: Rhys Evans <EvansRM17@cardiff.ac.uk>
Date: Fri, 24 Nov 2023 11:35:49 +0000
Subject: [PATCH] Added hover text to allow users to assess landmark collection
status easier
---
.../resources/templates/towns/caerphilly.html | 58 ++++++++++++++++---
1 file changed, 49 insertions(+), 9 deletions(-)
diff --git a/src/main/resources/templates/towns/caerphilly.html b/src/main/resources/templates/towns/caerphilly.html
index 9d87a16e..73911988 100644
--- a/src/main/resources/templates/towns/caerphilly.html
+++ b/src/main/resources/templates/towns/caerphilly.html
@@ -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>
--
GitLab