diff --git a/src/main/resources/static/css/userProfile.css b/src/main/resources/static/css/userProfile.css index 8ceb77b4e82d8c44f9aefdcf9c1f54493771e668..0e56703393cf827b1d963ca5df45b38fd88084f9 100644 --- a/src/main/resources/static/css/userProfile.css +++ b/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); diff --git a/src/main/resources/templates/users/userFrags.html b/src/main/resources/templates/users/userFrags.html new file mode 100644 index 0000000000000000000000000000000000000000..8639196849f8c22c9736d2142d97b8622c8a1565 --- /dev/null +++ b/src/main/resources/templates/users/userFrags.html @@ -0,0 +1,26 @@ +<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 diff --git a/src/main/resources/templates/users/userProfile.html b/src/main/resources/templates/users/userProfile.html index a193bf7614603637614dd0cfdc0974fdd8c44767..f8132a5f861080cf50dfb7af81697634897c568c 100644 --- a/src/main/resources/templates/users/userProfile.html +++ b/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>