Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
T
Team 5 - Smart Towns
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Requirements
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Locked files
Build
Pipelines
Jobs
Pipeline schedules
Test cases
Artifacts
Deploy
Releases
Package registry
Container registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Code review analytics
Issue analytics
Insights
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
Rhys Evans
Team 5 - Smart Towns
Commits
679daf57
Commit
679daf57
authored
1 year ago
by
Gabriel Copat
Browse files
Options
Downloads
Patches
Plain Diff
Implemented tooltips!
parent
e7a0ae20
No related branches found
No related tags found
1 merge request
!25
Resolve "As a user, I would like a place to see all my earned badges, so that I can track my progress."
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
src/main/resources/static/css/userProfile.css
+85
-3
85 additions, 3 deletions
src/main/resources/static/css/userProfile.css
src/main/resources/templates/rewards/userProfile.html
+104
-8
104 additions, 8 deletions
src/main/resources/templates/rewards/userProfile.html
with
189 additions
and
11 deletions
src/main/resources/static/css/userProfile.css
+
85
−
3
View file @
679daf57
/* AUTHOR: Gabriel Copat*/
.userInfo
{
display
:
flex
;
...
...
@@ -7,7 +7,7 @@
text-align
:
center
;
&
#userPicture
{
width
:
min
(
2
0vw
,
2
0em
);
width
:
min
(
3
0vw
,
3
0em
);
margin-inline
:
auto
;
border-radius
:
100%
;
border
:
solid
#a2a2a2
4px
;
...
...
@@ -15,6 +15,7 @@
}
&
h1
{
font-size
:
max
(
5vw
,
2em
);
margin
:
1
svh
25%
;
color
:
white
;
border-bottom
:
#36454F
solid
2px
;
...
...
@@ -36,6 +37,7 @@
margin-block
:
0.5
svh
;
box-shadow
:
rgba
(
0
,
0
,
0
,
0.7
)
0
0.5
svh
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);*/
/*}*/
This diff is collapsed.
Click to expand it.
src/main/resources/templates/rewards/userProfile.html
+
104
−
8
View file @
679daf57
...
...
@@ -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
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment