Moved Sections of userProfile.html to frags in userFrags.html

Updated CSS to match

src/main/resources/static/css/userProfile.css

@@ -81,15 +81,15 @@ main {
         box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1vw -1vw;
     }
 }
-#badgesBar::-webkit-scrollbar {
+#packsBar::-webkit-scrollbar {
     display: none;
     -ms-scrollbar-darkshadow-color: transparent;
 }
-#badgesBar {
+#packsBar {
     display: grid;
     grid-template-areas:
         "header"
-        "badges";
+        "packs";
     overflow-x: scroll;
     overflow-y: hidden;
     color: white;
@@ -112,7 +112,7 @@ main {
     }
     & #allBadgesContainer {
         margin-top: 3svh;
-        grid-area: badges;
+        grid-area: packs;
         height: 10svh;
         align-content: center;
         display: flex;
@@ -121,7 +121,7 @@ main {
             margin-top: 6vw;
         }
     }
-    & .badgeImg {
+    & .packImg {
         margin-inline: 3vw;
         height: 8svh;
         z-index: 50;
@@ -130,7 +130,7 @@ main {
         }
         transition: 0.3s ease-out 100ms;
     }
-    & .badgeImg:hover {
+    & .packImg:hover {
         /*box-shadow: 0 0 20px 10px #bbbb00;*/
         transform: scale(1.5,1.5);
 

src/main/resources/templates/users/userFrags.html

+<th:block xmlns:th="http://www.thymeleaf.org">
+
+  <!-- @thymesVar id="sticker" type="team5.smartTowns.rewards.Sticker" -->
+<article th:fragment="stickersBox" id="stickersBox">
+  <h2>STICKERS!</h2>
+  <div class="stickersContainer">
+    <img th:class="'stickerImg ' + ${sticker.getVisibility()}"  th:each="sticker : ${stickers}" th:src="@{'../' + ${sticker.getDisplayImg()}}"
+         th:id="'img' + ${sticker.getId()}" th:alt="${sticker.getName()}" >
+  </div>
+</article>
+
+<!-- @thymesVar id="user" type="team5.smartTowns.users.User" -->
+<article th:fragment="trailProgression" class="dragonProgression">
+  <h1>The Dragon's Tale</h1>
+  <div class="dragonContainer">
+    <div class="dragonFill" th:style="'width:'+ ${user.getDragonProgress()} + '%;'">
+      <img th:src="@{/images/rewards/dragonFilled.png}"
+           alt="Filled Dragon" id="FilledDragon" class="dragonImg">
+    </div>
+    <div class="dragonOut">
+      <img th:src="@{/images/rewards/dragonOutline.png}"
+           alt="Outline Dragon" id="OutlineDragon" class="dragonImg">
+    </div>
+  </div>
+  <h2 th:text="${user.getDragonProgress()} + '%'"></h2>
+</article>
\ No newline at end of file

src/main/resources/templates/users/userProfile.html

@@ -21,42 +21,26 @@
 <main>
     <!--PICTURE - DATA - BADGES -->
     <div class="userInfo">
+        <h1 th:text="${user.getName()}"></h1>
         <img th:src="@{${user.getImgPath()}}"
              th:alt="${user.getName()}"
              id="userPicture"
         >
-        <h1 th:text="${user.getName()}"></h1>
+
         <!--TODO add some progression info here?-->
     </div>
     <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 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 class="dragonProgression">
-            <h1>The Dragon's Tale</h1>
-            <div class="dragonContainer">
-                <div class="dragonFill" th:style="'width:'+ ${user.getDragonProgress()} + '%;'">
-                    <img th:src="@{/images/rewards/dragonFilled.png}"
-                         alt="Filled Dragon" id="FilledDragon" class="dragonImg">
-                </div>
-                <div class="dragonOut">
-                    <img th:src="@{/images/rewards/dragonOutline.png}"
-                         alt="Outline Dragon" id="OutlineDragon" class="dragonImg">
-                </div>
-            </div>
-            <h2 th:text="${user.getDragonProgress()} + '%'"></h2>
-        </article>
-        <article id="stickersBox"> <!--Need a controller to show earned stickers -->
-            <h2> STICKERS! </h2>
-            <div class="stickersContainer">
-                <img th:class="'stickerImg ' + ${sticker.getVisibility()}"  th:each="sticker : ${stickers}" th:src="@{'../' + ${sticker.getImgPath()}}"
-                     th:id="'img' + ${sticker.getId()}" th:alt="${sticker.getName()}" >
+        <article id="packsBar">
+            <h2>Packs</h2> <!--Shows first earned badges, followed by greyed out badges-->
+            <div id="allPacksContainer"  class="centerFlex">
+                <img class="packImg"  th:each="pack : ${packs}" th:src="@{'../' + ${pack.getDisplayImg()}}"
+                     th:id="'packImg' + ${pack.getId()}" th:alt="${pack.getName()}" >
             </div>
         </article>
+
+        <article th:replace="~{users/userFrags.html::trailProgression}" id="trailProgression"></article>
+
+        <article th:replace="~{users/userFrags.html::stickersBox}" id="stickersBox"></article>
     </section>