From 679daf57f57a5ad3365ef5cbf2e9f070c1093d0c Mon Sep 17 00:00:00 2001
From: Gabriel Copat <copatg@cardiff.ac.uk>
Date: Fri, 1 Dec 2023 00:01:15 +0000
Subject: [PATCH] Implemented tooltips!
---
src/main/resources/static/css/userProfile.css | 88 +++++++++++++-
.../templates/rewards/userProfile.html | 112 ++++++++++++++++--
2 files changed, 189 insertions(+), 11 deletions(-)
diff --git a/src/main/resources/static/css/userProfile.css b/src/main/resources/static/css/userProfile.css
index f86825b1..7e1ea6d4 100644
--- a/src/main/resources/static/css/userProfile.css
+++ b/src/main/resources/static/css/userProfile.css
@@ -1,4 +1,4 @@
-
+/* AUTHOR: Gabriel Copat*/
.userInfo {
display: flex;
@@ -7,7 +7,7 @@
text-align: center;
& #userPicture {
- width: min(20vw, 20em);
+ width: min(30vw, 30em);
margin-inline: auto;
border-radius: 100%;
border: solid #a2a2a2 4px;
@@ -15,6 +15,7 @@
}
& h1 {
+ font-size: max(5vw, 2em);
margin: 1svh 25%;
color:white;
border-bottom: #36454F solid 2px;
@@ -36,6 +37,7 @@
margin-block: 0.5svh;
box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1vw -1vw;
border-bottom: #36454F solid 2px;
+ font-size: max(2vw, 2em);
}
& .badgesContainer {
@@ -85,4 +87,84 @@
}
.locked {
filter: grayscale(100%);
-}
\ No newline at end of file
+}
+
+
+
+
+/* TOOLTIP CSS MODIFIED FROM:
+ http://www.menucool.com/tooltip/css-tooltip*/
+.tooltip {
+ display:inline-block;
+ position:relative;
+ border-bottom:1px dotted #666;
+ text-align:left;
+}
+
+.tooltip h3 {margin:12px 0;}
+
+.tooltip {
+ display:inline-block;
+ position:relative;
+ border-bottom:1px dotted #666;
+ text-align:left;
+}
+
+.tooltip h3 {margin:12px 0;}
+
+.tooltip .right {
+ min-width:200px;
+ max-width:18vw;
+ max-height: 22vw;
+ top:-20px;
+ left:50%;
+ transform:translate(-50%, 10%);
+ padding:10px 20px;
+ color:#ffffff;
+ background-color:#009cdc;
+ font-weight:normal;
+ font-size:14px;
+ border-radius:8px;
+ position:absolute;
+ z-index:1;
+ box-sizing:border-box;
+ box-shadow:0 1px 8px rgba(0,0,0,0.5);
+ visibility:hidden; opacity:0; transition:opacity 0.8s;
+ overflow: hidden;
+}
+
+.tooltip:hover .right {
+ visibility:visible; opacity:1;
+}
+
+.tooltip .right img {
+ width:400px;
+ border-radius:8px 8px 0 0;
+}
+.tooltip .text-content {
+ padding:10px 20px;
+}
+
+.tooltip .right i {
+ position:absolute;
+ top:50%;
+ right:100%;
+ margin-top:-12px;
+ width:12px;
+ height:24px;
+ overflow:hidden;
+}
+/*.tooltip .right i::after {*/
+/* content:'';*/
+/* position:absolute;*/
+/* width:12px;*/
+/* height:12px;*/
+/* left:0;*/
+/* top:100%;*/
+/* transform:translate(50%,-50%) rotate(-45deg);*/
+/* background-color:#444444;*/
+/* box-shadow:0 1px 8px rgba(0,0,0,0.5);*/
+/*}*/
+
+
+
diff --git a/src/main/resources/templates/rewards/userProfile.html b/src/main/resources/templates/rewards/userProfile.html
index 82c203dc..18aa7d2f 100644
--- a/src/main/resources/templates/rewards/userProfile.html
+++ b/src/main/resources/templates/rewards/userProfile.html
@@ -36,17 +36,109 @@
<article id="stickersBox"> <!--Need a controller to show earned stickers -->
<h2> STICKERS! </h2>
<div class="stickersContainer">
- <img src="../images/badges.png" alt="Badge" class="badge">
- <img src="../images/badges.png" alt="Badge" class="badge">
- <img src="../images/badges.png" alt="Badge" class="badge locked">
- <img src="../images/badges.png" alt="Badge" class="badge">
- <img src="../images/badges.png" alt="Badge" class="badge locked">
- <img src="../images/badges.png" alt="Badge" class="badge locked">
- <img src="../images/badges.png" alt="Badge" class="badge">
+ <div class="tooltip">
+ <img src="../images/badges.png" alt="Badge" class="badge">
+ <div class="right">
+ <div class="text-content">
+ <h3>Fade in Effect</h3>
+ <ul>
+ <li>This demo has fade in/out effect.</li>
+ <li>It is using CSS opacity, visibility, and transition property to toggle the tooltip.</li>
+ <li>Other demos are using display property<em>(none or block)</em> for the toggle.</li>
+ </ul>
+ </div>
+ <i></i>
+ </div>
+ </div>
+ <div class="tooltip">
+ <img src="../images/badges.png" alt="Badge" class="badge">
+ <div class="right">
+ <div class="text-content">
+ <h3>Fade in Effect</h3>
+ <ul>
+ <li>This demo has fade in/out effect.</li>
+ <li>It is using CSS opacity, visibility, and transition property to toggle the tooltip.</li>
+ <li>Other demos are using display property<em>(none or block)</em> for the toggle.</li>
+ </ul>
+ </div>
+ <i></i>
+ </div>
+ </div>
+ <div class="tooltip">
+ <img src="../images/badges.png" alt="Badge" class="badge">
+ <div class="right">
+ <div class="text-content">
+ <h3>Fade in Effect</h3>
+ <ul>
+ <li>This demo has fade in/out effect.</li>
+ <li>It is using CSS opacity, visibility, and transition property to toggle the tooltip.</li>
+ <li>Other demos are using display property<em>(none or block)</em> for the toggle.</li>
+ </ul>
+ </div>
+ <i></i>
+ </div>
+ </div>
+ <div class="tooltip">
+ <img src="../images/badges.png" alt="Badge" class="badge locked">
+ <div class="right">
+ <div class="text-content">
+ <h3>Fade in Effect</h3>
+ <ul>
+ <li>This demo has fade in/out effect.</li>
+ <li>It is using CSS opacity, visibility, and transition property to toggle the tooltip.</li>
+ <li>Other demos are using display property<em>(none or block)</em> for the toggle.</li>
+ </ul>
+ </div>
+ <i></i>
+ </div>
+ </div>
+ <div class="tooltip">
+ <img src="../images/badges.png" alt="Badge" class="badge">
+ <div class="right">
+ <div class="text-content">
+ <h3>Fade in Effect</h3>
+ <ul>
+ <li>This demo has fade in/out effect.</li>
+ <li>It is using CSS opacity, visibility, and transition property to toggle the tooltip.</li>
+ <li>Other demos are using display property<em>(none or block)</em> for the toggle.</li>
+ </ul>
+ </div>
+ <i></i>
+ </div>
+ </div>
+ <div class="tooltip">
+ <img src="../images/badges.png" alt="Badge" class="badge">
+ <div class="right">
+ <div class="text-content">
+ <h3>Fade in Effect</h3>
+ <ul>
+ <li>This demo has fade in/out effect.</li>
+ <li>It is using CSS opacity, visibility, and transition property to toggle the tooltip.</li>
+ <li>Other demos are using display property<em>(none or block)</em> for the toggle.</li>
+ </ul>
+ </div>
+ <i></i>
+ </div>
+ </div>
+ <div class="tooltip">
+ <img src="../images/badges.png" alt="Badge" class="badge locked">
+ <div class="right">
+ <div class="text-content">
+ <h3>Fade in Effect</h3>
+ <ul>
+ <li>This demo has fade in/out effect.</li>
+ <li>It is using CSS opacity, visibility, and transition property to toggle the tooltip.</li>
+ <li>Other demos are using display property<em>(none or block)</em> for the toggle.</li>
+ </ul>
+ </div>
+ <i></i>
+ </div>
+ </div>
</div>
</article>
</section>
+
</main>
<footer></footer>
@@ -54,4 +146,8 @@
</body>
-</html>
\ No newline at end of file
+</html>
+
+<!--TODO finished doing the tooltips, need to add some more changes to them for sure
+ TODO afterwards probably need to implement thymeleaf so it shows badges based on the list
+ TODO implement some placeholder pictures as well for the badges and for the stickers -->
\ No newline at end of file
--
GitLab