Skip to content
Snippets Groups Projects
Commit 679daf57 authored by Gabriel Copat's avatar Gabriel Copat
Browse files

Implemented tooltips!

parent e7a0ae20
No related branches found
No related tags found
1 merge request!25Resolve "As a user, I would like a place to see all my earned badges, so that I can track my progress."
This commit is part of merge request !25. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
src/main/resources/static/css/userProfile.css
+ 85
− 3
Edit View file @ 679daf57
/* AUTHOR: Gabriel Copat*/
.userInfo { .userInfo {
display: flex; display: flex;
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
text-align: center; text-align: center;
& #userPicture { & #userPicture {
width: min(20vw, 20em); width: min(30vw, 30em);
margin-inline: auto; margin-inline: auto;
border-radius: 100%; border-radius: 100%;
border: solid #a2a2a2 4px; border: solid #a2a2a2 4px;
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
} }
& h1 { & h1 {
font-size: max(5vw, 2em);
margin: 1svh 25%; margin: 1svh 25%;
color:white; color:white;
border-bottom: #36454F solid 2px; border-bottom: #36454F solid 2px;
...@@ -36,6 +37,7 @@ ...@@ -36,6 +37,7 @@
margin-block: 0.5svh; margin-block: 0.5svh;
box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1vw -1vw; box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1vw -1vw;
border-bottom: #36454F solid 2px; border-bottom: #36454F solid 2px;
font-size: max(2vw, 2em);
} }
& .badgesContainer { & .badgesContainer {
...@@ -85,4 +87,84 @@ ...@@ -85,4 +87,84 @@
} }
.locked { .locked {
filter: grayscale(100%); 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);*/
/*}*/
src/main/resources/templates/rewards/userProfile.html
+ 104
− 8
Edit View file @ 679daf57
...@@ -36,17 +36,109 @@ ...@@ -36,17 +36,109 @@
<article id="stickersBox"> <!--Need a controller to show earned stickers --> <article id="stickersBox"> <!--Need a controller to show earned stickers -->
<h2> STICKERS! </h2> <h2> STICKERS! </h2>
<div class="stickersContainer"> <div class="stickersContainer">
<img src="../images/badges.png" alt="Badge" class="badge"> <div class="tooltip">
<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"> <div class="right">
<img src="../images/badges.png" alt="Badge" class="badge"> <div class="text-content">
<img src="../images/badges.png" alt="Badge" class="badge locked"> <h3>Fade in Effect</h3>
<img src="../images/badges.png" alt="Badge" class="badge locked"> <ul>
<img src="../images/badges.png" alt="Badge" class="badge"> <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> </div>
</article> </article>
</section> </section>
</main> </main>
<footer></footer> <footer></footer>
...@@ -54,4 +146,8 @@ ...@@ -54,4 +146,8 @@
</body> </body>
</html> </html>
\ No newline at end of file
<!--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
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