diff --git a/src/main/resources/static/css/userProfile2.css b/src/main/resources/static/css/userProfile2.css index 5aa4ef3d407cb5084f0abc3107b07491f418ac93..d7457e0ab8f021d0aebd085e542fe867e0ac221e 100644 --- a/src/main/resources/static/css/userProfile2.css +++ b/src/main/resources/static/css/userProfile2.css @@ -83,6 +83,7 @@ and (max-device-width: 640px) flex-direction: column; align-content: flex-start; align-items: center; + border-radius: 5vw; } .userContainer { width: 80%; @@ -140,11 +141,19 @@ and (max-device-width: 640px) } } + .empty-space { + height: 10svh; + width: 15em; + background: transparent; + } #allPacksContainer { padding-top: 3em; display: flex; overflow-x: scroll; + padding-inline: 20%; justify-content: space-between; + border-bottom: 10px solid rgba(139, 0, 0, 0.5); + margin-bottom: 2em; & .packName { font-size: 2em; height: 2.4em; @@ -160,6 +169,7 @@ and (max-device-width: 640px) width: 15em; transition: 0.5s ease-in-out 1ms; padding-inline: 1em; + margin-inline: 1em; } & .packImg:hover { transform: scale(1.5, 1.5) @@ -174,7 +184,7 @@ and (max-device-width: 640px) .progressionContainer { display: flex; flex-direction: column; - height: 20svh; + height: 14svh; & h1 { font-size: 4em; font-family: 'MedievalSharp', cursive; @@ -212,10 +222,24 @@ and (max-device-width: 640px) } - /*TODO HERE THE FINAL SECTION FOR THE STICKERS BOYO*/ - + } + #stickersBox { + width: 100%; + height: inherit; + overflow-y: scroll; } + .stickersContainer { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-top: 2em; + row-gap: 2em; + } + .stickerImg { + width: 15em; + margin: 1.5em; + } } diff --git a/src/main/resources/templates/users/userFrags.html b/src/main/resources/templates/users/userFrags.html index 2dd629ae06e5ad56f410786f12d5ac00aa991176..348cc49a0b946248843d2f6ae5678a795d5c094e 100644 --- a/src/main/resources/templates/users/userFrags.html +++ b/src/main/resources/templates/users/userFrags.html @@ -1,6 +1,6 @@ <!-- @thymesVar id="sticker" type="team5.smartTowns.rewards.Sticker" --> <article th:fragment="stickersBox" id="stickersBox"> - <h2>STICKERS!</h2> +<!-- <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()}" > diff --git a/src/main/resources/templates/users/userProfile.html b/src/main/resources/templates/users/userProfile.html index 62f66e5419046ad72065e6afe5fc1a00bb4f725b..101e2c96339f50b2e5d22af1db2cd1371332f1b1 100644 --- a/src/main/resources/templates/users/userProfile.html +++ b/src/main/resources/templates/users/userProfile.html @@ -35,12 +35,14 @@ <h2>Packs</h2> <!--Shows first earned badges, followed by greyed out badges--> <div id="allPacksContainer" class="centerFlex"> + <div th:each="pack : ${packs}" class="packContainer"> <img class="packImg" th:src="@{'../' + ${pack.getDisplayImg()}}" th:id="'packImg' + ${pack.getId()}" th:alt="${pack.getName()}" th:onclick="'updatePack(' + ${user.getId()} +',' + ${pack.getId()} +');'"> <h4 class="packName" th:text="${pack.getName()}"></h4> </div> + </div> </article>