diff --git a/src/main/resources/static/css/userProfile.css b/src/main/resources/static/css/userProfile.css index f86825b12760111f82ebb9e7f7ebc3da129c41d9..7e1ea6d4aedb27e90dd0351295950082af9b5432 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 82c203dcd208bb666bb68ec17dbc3bd19c0e389f..18aa7d2fb58f84acfbf69197614949084016123c 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