From 853e5585e43c6e32fe835c47b05ca817b38d7217 Mon Sep 17 00:00:00 2001
From: Gabriel Copat <copatg@cardiff.ac.uk>
Date: Tue, 5 Dec 2023 18:38:12 +0000
Subject: [PATCH] Updating style for mobile phones
---
src/main/resources/static/css/userProfile.css | 17 ++++++++++--
.../resources/templates/users/userFrags.html | 20 +++++++-------
.../templates/users/userProfile.html | 26 +++++++++----------
3 files changed, 39 insertions(+), 24 deletions(-)
diff --git a/src/main/resources/static/css/userProfile.css b/src/main/resources/static/css/userProfile.css
index 57265006..878ab054 100644
--- a/src/main/resources/static/css/userProfile.css
+++ b/src/main/resources/static/css/userProfile.css
@@ -37,13 +37,21 @@
& p { line-height: 1.1; color: white;}
}
}
-
+html{
+ height: 100%;
+ @media only screen and (min-device-width: 1500px) {
+ height: auto;
+ }
+}
body {
background: linear-gradient(135deg, #f7e8fd, #9914d1);
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
+ @media only screen and (min-device-width: 1500px) {
+ height: auto;
+ }
}
main {
background: linear-gradient(to bottom, #1e1e1e 10%, darkgoldenrod 50%, #1e1e1e 90%);
@@ -56,7 +64,12 @@ main {
padding-inline: 1vw;
box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
transition: all linear 2s;
-
+ overflow-y: scroll;
+ height: 90%;
+ @media only screen and (min-device-width: 1500px) {
+ padding-inline: 20%;
+ overflow: visible;
+ }
}
.rewards {
position: relative;
diff --git a/src/main/resources/templates/users/userFrags.html b/src/main/resources/templates/users/userFrags.html
index 86391968..2dd629ae 100644
--- a/src/main/resources/templates/users/userFrags.html
+++ b/src/main/resources/templates/users/userFrags.html
@@ -1,5 +1,3 @@
-<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>
@@ -10,17 +8,21 @@
</article>
<!-- @thymesVar id="user" type="team5.smartTowns.users.User" -->
-<article th:fragment="trailProgression" class="dragonProgression">
+<article th:fragment="trailProgression" class="progressionContainer">
<h1>The Dragon's Tale</h1>
- <div class="dragonContainer">
- <div class="dragonFill" th:style="'width:'+ ${user.getDragonProgress()} + '%;'">
+ <div class="progImgContainer">
+ <div class="progImgFill" th:style="'width:'+ ${user.getDragonProgress()} + '%;'">
<img th:src="@{/images/rewards/dragonFilled.png}"
- alt="Filled Dragon" id="FilledDragon" class="dragonImg">
+ alt="Filled Dragon" id="FilledDragon" class="progImg">
+ </div>
+ <div class="progText">
+ <p th:text="${user.getDragonProgress()} + '%'"></p>
</div>
- <div class="dragonOut">
+ <div class="progImgOutline">
<img th:src="@{/images/rewards/dragonOutline.png}"
- alt="Outline Dragon" id="OutlineDragon" class="dragonImg">
+ alt="Outline Dragon" id="OutlineDragon" class="progImg">
</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 208d6029..62f66e54 100644
--- a/src/main/resources/templates/users/userProfile.html
+++ b/src/main/resources/templates/users/userProfile.html
@@ -3,25 +3,25 @@
<head>
<meta charset="UTF-8">
<title th:text="'VZLA Profile Page of ' + ${user.getName()}"></title>
- <link rel="stylesheet" th:href="@{/css/userProfile.css}">
+ <link rel="stylesheet" th:href="@{/css/userProfile2.css}">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">-->
</head>
<body>
-<header>
- <ul class="footerBar">
- <li class="footerButton"><b>Home</b></li>
- <li class="footerButton"><b>About</b></li>
- <li class="footerButton"><b>Map</b></li>
- <li class="footerButton"><b>Facilities</b></li>
- <li class="footerButton"><b>Log In</b></li>
- </ul>
-</header>
+<!--<header>-->
+<!-- <ul class="footerBar">-->
+<!-- <li class="footerButton"><b>Home</b></li>-->
+<!-- <li class="footerButton"><b>About</b></li>-->
+<!-- <li class="footerButton"><b>Map</b></li>-->
+<!-- <li class="footerButton"><b>Facilities</b></li>-->
+<!-- <li class="footerButton"><b>Log In</b></li>-->
+<!-- </ul>-->
+<!--</header>-->
<main>
<!--PICTURE - DATA - BADGES -->
- <div class="userInfo">
+ <div class="userContainer">
<h1 th:text="${user.getName()}"></h1>
<img th:src="@{${user.getImgPath()}}"
th:alt="${user.getName()}"
@@ -31,15 +31,15 @@
<!--TODO add some progression info here?-->
</div>
<section class="rewards"> <!--Reward lists, badges on top, stickers (larger) on the bottom-->
- <h2>Packs</h2>
<article id="packsBar">
+ <h2>Packs</h2>
<!--Shows first earned badges, followed by greyed out badges-->
<div id="allPacksContainer" class="centerFlex">
<div th:each="pack : ${packs}" class="packContainer">
- <h4 class="packName" th:text="${pack.getName()}"></h4>
<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