From 4692a6aa2551de4a08aaddd5030ac3ccf36a727c Mon Sep 17 00:00:00 2001
From: Gabriel Copat <copatg@cardiff.ac.uk>
Date: Wed, 6 Dec 2023 10:43:26 +0000
Subject: [PATCH] Finalized style for mobile phones
---
.../resources/static/css/userProfile2.css | 30 +++++++++++++++++--
.../resources/templates/users/userFrags.html | 2 +-
.../templates/users/userProfile.html | 2 ++
3 files changed, 30 insertions(+), 4 deletions(-)
diff --git a/src/main/resources/static/css/userProfile2.css b/src/main/resources/static/css/userProfile2.css
index 5aa4ef3d..d7457e0a 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 2dd629ae..348cc49a 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 62f66e54..101e2c96 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>
--
GitLab