diff --git a/src/main/java/Team5/SmartTowns/rewards/Badge.java b/src/main/java/Team5/SmartTowns/rewards/Badge.java
index 4b3ea048f1162f1881fc50176bfbe39667b166ce..25c231e14e3f0afdd4ecfc2d6e9f352925224097 100644
--- a/src/main/java/Team5/SmartTowns/rewards/Badge.java
+++ b/src/main/java/Team5/SmartTowns/rewards/Badge.java
@@ -30,7 +30,7 @@ public class Badge {
private String findImagePath(){
/* Finds the image in the Path folder, if image is not found assigns default image */
String imgPath = "images/rewards/badges/" + id + ".jpg";
- String notFoundPath = "images/rewards/badges/0.jpg";
+ String notFoundPath = "/images/rewards/badges/0.png";
File imgFile = new File("src/main/resources/static/" + imgPath);
return imgFile.exists() ? imgPath : notFoundPath;
diff --git a/src/main/java/Team5/SmartTowns/users/UserController.java b/src/main/java/Team5/SmartTowns/users/UserController.java
index 78c1d94da5567720c65e13608e97e4a2cb143d49..a72718d0062764dc096eb34acc7da8df7d1de4e1 100644
--- a/src/main/java/Team5/SmartTowns/users/UserController.java
+++ b/src/main/java/Team5/SmartTowns/users/UserController.java
@@ -1,5 +1,6 @@
package Team5.SmartTowns.users;
+import Team5.SmartTowns.rewards.Badge;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
@@ -17,12 +18,24 @@ public class UserController {
new User(3, "johndoe@gmail.com", "Leon Kennedy"),
new User(4, "johndoe@gmail.com", "Jill Valentine")
);
+ static List<Badge> badges = List.of(
+ new Badge(1, "Badge1", "Bage One is This", 1),
+ new Badge(2, "Badge1", "Bage One is This", 4),
+ new Badge(3, "Badge1", "Bage One is This", 4),
+ new Badge(4, "Badge1", "Bage One is This", 5),
+ new Badge(5, "Badge1", "Bage One is This", 5),
+ new Badge(46, "Badge1", "Bage One is This", 5),
+ new Badge(7, "Badge1", "Bage One is This", 2)
+ );
@GetMapping("/user/{id}")
public ModelAndView getUserPage(@PathVariable int id){
ModelAndView mav = new ModelAndView("rewards/userProfile");
- users.stream().filter(user -> user.getId() == id).findFirst() //Convoluted way of finding the matching user to the id, probably easier to do a hashmap
+ users.stream()
+ .filter(user -> user.getId() == id)
+ .findFirst() //Convoluted way of finding the matching user to the id, probably easier to do a hashmap
.ifPresent(result -> mav.addObject("user", result));
+ mav.addObject("badges", badges);
return mav;
}
}
diff --git a/src/main/resources/static/css/templatingstyle.css b/src/main/resources/static/css/templatingstyle.css
index e2955d7c3648632fffed11ecd6c6516b3dda4dff..3819e78cd8f7051d57b75c4f90bc3c6e7914fe0c 100644
--- a/src/main/resources/static/css/templatingstyle.css
+++ b/src/main/resources/static/css/templatingstyle.css
@@ -11,12 +11,19 @@ body {
main {
background: #1e1e1e;
border-radius: 1vw;
- margin-inline: max(1vw, 2em);
- margin-block: 1svh;
- width: min(90%, 90vw);
+ margin-inline: 5%;
+ margin-block: 5%;
+ width: auto;
padding-block: 2svh;
padding-inline: 1vw;
box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
+ @media only screen and (max-device-width: 500px) {
+ min-height: 90svh;
+ }
+
+ @media only screen and (min-device-width: 1000px) {
+ margin-block: 2.5%
+ }
}
diff --git a/src/main/resources/static/css/userProfile.css b/src/main/resources/static/css/userProfile.css
index 7e1ea6d4aedb27e90dd0351295950082af9b5432..f2617b279a934f7fdc104023614353dbd8e0edf4 100644
--- a/src/main/resources/static/css/userProfile.css
+++ b/src/main/resources/static/css/userProfile.css
@@ -25,40 +25,57 @@
}
#badgesBar {
- background-color: white;
border-radius: 1vw;
- margin-inline: max(4vw, 3rem);
- display: flex;
- flex-direction: column;
-
+ display: grid;
+ grid-template-areas: "header"
+ "badges";
+ overflow-x: scroll;
+ overflow-y: hidden;
+ scrollbar-width: none;
+ scrollbar-color: transparent transparent;
+ color: white;
+ @media only screen and (min-device-width: 501px) {
+ height: 24vw;
+ }
& h2 {
+ position: absolute;
+ grid-area: header;
margin-inline: 5vw;
padding-inline: 2vw;
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);
+ font-size: 4vw;
+ @media only screen and (min-device-width: 501px) {
+ font-size: 4vw;
+ }
}
-
- & .badgesContainer {
- margin: 1svh 2vw;
- padding: 1svh 1vw;
- border-inline: solid rgba(194, 98, 188, 0.7) 5px;
- border-radius: 10%;
- background: linear-gradient(90deg, rgba(255, 215, 0, 0.75), rgba(184, 134, 11, 0.75));
- overflow-x: scroll;
- min(18svh, 12em);
+ & #allBadgesContainer {
+ margin-top: 3svh;
+ grid-area: badges;
+ height: 10svh;
align-content: center;
display: flex;
-
- & .badge {
- margin-inline: 3vw;
- height: min(18svh, 10em);
-
+ @media only screen and (min-device-width: 501px) {
+ height: 20vw;
+ margin-top: 6vw;
+ }
+ }
+ & .badgeImg {
+ margin-inline: 3vw;
+ height: 8svh;
+ @media only screen and (min-device-width: 501px) {
+ height: 15vw;
}
+ transition: 0.3s ease-out 100ms;
+ }
+ & .badgeImg:hover {
+ /*box-shadow: 0 0 20px 10px #bbbb00;*/
+ transform: scale(1.5,1.5);
}
}
+
#stickersBox {
display: flex;
flex-direction: column;
@@ -94,58 +111,36 @@
/* 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;
+.popUpBox {
+ display: flex;
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%);
+ width: 50vw;
+ height: 50svh;
+ margin:auto;
+ align-self: center;
+ /*transform:translate(-50%, -5%);*/
padding:10px 20px;
color:#ffffff;
background-color:#009cdc;
font-weight:normal;
font-size:14px;
border-radius:8px;
- position:absolute;
- z-index:1;
+
+ z-index:99;
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;
+ overflow: visible;
}
-
-.tooltip:hover .right {
+.tooltip:hover .popUpBox {
visibility:visible; opacity:1;
-}
-
-.tooltip .right img {
- width:400px;
- border-radius:8px 8px 0 0;
+ overflow: visible;
}
.tooltip .text-content {
padding:10px 20px;
}
-.tooltip .right i {
+.tooltip .popUpBox i {
position:absolute;
top:50%;
right:100%;
@@ -154,17 +149,5 @@
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/static/images/rewards/badges/0.png b/src/main/resources/static/images/rewards/badges/0.png
new file mode 100644
index 0000000000000000000000000000000000000000..57e379c719f5fe28ba827d7007be9637cfd9ff73
Binary files /dev/null and b/src/main/resources/static/images/rewards/badges/0.png differ
diff --git a/src/main/resources/static/scripts/gabScripts.js b/src/main/resources/static/scripts/gabScripts.js
deleted file mode 100644
index 3053fc2316552e2f8c588847aa67e1aaa44aed44..0000000000000000000000000000000000000000
--- a/src/main/resources/static/scripts/gabScripts.js
+++ /dev/null
@@ -1,16 +0,0 @@
-function selectTrail(string, element) {
- console.log('Clicked')
- let listEl = document.getElementsByClassName('liHeader')
- for (let i = 0; i < listEl.length; i++) {
- listEl[i].classList.remove('selected')
- }
- document.getElementById(string).classList.add("selected")
-
-}
-
-function updateOutput() {
- $.post("test_ajax_frag").done(function (fragment) {
- console.log(fragment);
- $("#trailInfoBox").replaceWith(fragment);
- });
-}
\ No newline at end of file
diff --git a/src/main/resources/templates/rewards/userProfile.html b/src/main/resources/templates/rewards/userProfile.html
index 18aa7d2fb58f84acfbf69197614949084016123c..381c9f0f9b1bc48b01dd49028d40b132563558af 100644
--- a/src/main/resources/templates/rewards/userProfile.html
+++ b/src/main/resources/templates/rewards/userProfile.html
@@ -23,117 +23,16 @@
<section class="rewards"> <!--Reward lists, badges on top, stickers (larger) on the bottom-->
<article id="badgesBar">
<h2>Your Badges: </h2> <!--Shows first earned badges, followed by greyed out badges-->
- <div class="badgesContainer">
- <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">
- <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 locked">
+ <div id="allBadgesContainer" class="centerFlex">
+ <img class="badgeImg" th:each="badge : ${badges}" th:src="@{'..' + ${badge.getImgPath()}}"
+ th:id="'img' + ${badge.getId()}" th:alt="${badge.getName()}" >
</div>
</article>
<article id="stickersBox"> <!--Need a controller to show earned stickers -->
<h2> STICKERS! </h2>
<div class="stickersContainer">
- <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>
+ <img class="badgeImg" th:each="badge : ${badges}" th:src="@{'..' + ${badge.getImgPath()}}"
+ th:id="'img' + ${badge.getId()}" th:alt="${badge.getName()}" >
</div>
</article>
</section>