Skip to content
Snippets Groups Projects
Commit 853e5585 authored by Gabriel Copat's avatar Gabriel Copat
Browse files

Updating style for mobile phones

parent ac35fc97
No related branches found
No related tags found
1 merge request!33Resolve "As a QR-scanning connoisseur , I want to unlock stickers after scanning a QR code to feel a sense of reward."
Hide whitespace changes
Inline Side-by-side
src/main/resources/static/css/userProfile.css
+ 15
− 2
View file @ 853e5585
...@@ -37,13 +37,21 @@ ...@@ -37,13 +37,21 @@
& p { line-height: 1.1; color: white;} & p { line-height: 1.1; color: white;}
} }
} }
html{
height: 100%;
@media only screen and (min-device-width: 1500px) {
height: auto;
}
}
body { body {
background: linear-gradient(135deg, #f7e8fd, #9914d1); background: linear-gradient(135deg, #f7e8fd, #9914d1);
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
@media only screen and (min-device-width: 1500px) {
height: auto;
}
} }
main { main {
background: linear-gradient(to bottom, #1e1e1e 10%, darkgoldenrod 50%, #1e1e1e 90%); background: linear-gradient(to bottom, #1e1e1e 10%, darkgoldenrod 50%, #1e1e1e 90%);
...@@ -56,7 +64,12 @@ main { ...@@ -56,7 +64,12 @@ main {
padding-inline: 1vw; padding-inline: 1vw;
box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em); box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
transition: all linear 2s; transition: all linear 2s;
overflow-y: scroll;
height: 90%;
@media only screen and (min-device-width: 1500px) {
padding-inline: 20%;
overflow: visible;
}
} }
.rewards { .rewards {
position: relative; position: relative;
......
src/main/resources/templates/users/userFrags.html
+ 11
− 9
View file @ 853e5585
<th:block xmlns:th="http://www.thymeleaf.org">
<!-- @thymesVar id="sticker" type="team5.smartTowns.rewards.Sticker" --> <!-- @thymesVar id="sticker" type="team5.smartTowns.rewards.Sticker" -->
<article th:fragment="stickersBox" id="stickersBox"> <article th:fragment="stickersBox" id="stickersBox">
<h2>STICKERS!</h2> <h2>STICKERS!</h2>
...@@ -10,17 +8,21 @@ ...@@ -10,17 +8,21 @@
</article> </article>
<!-- @thymesVar id="user" type="team5.smartTowns.users.User" --> <!-- @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> <h1>The Dragon's Tale</h1>
<div class="dragonContainer"> <div class="progImgContainer">
<div class="dragonFill" th:style="'width:'+ ${user.getDragonProgress()} + '%;'"> <div class="progImgFill" th:style="'width:'+ ${user.getDragonProgress()} + '%;'">
<img th:src="@{/images/rewards/dragonFilled.png}" <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>
<div class="dragonOut"> <div class="progImgOutline">
<img th:src="@{/images/rewards/dragonOutline.png}" <img th:src="@{/images/rewards/dragonOutline.png}"
alt="Outline Dragon" id="OutlineDragon" class="dragonImg"> alt="Outline Dragon" id="OutlineDragon" class="progImg">
</div> </div>
</div> </div>
<h2 th:text="${user.getDragonProgress()} + '%'"></h2>
</article> </article>
\ No newline at end of file
src/main/resources/templates/users/userProfile.html
+ 13
− 13
View file @ 853e5585
...@@ -3,25 +3,25 @@ ...@@ -3,25 +3,25 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title th:text="'VZLA Profile Page of ' + ${user.getName()}"></title> <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> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">--> <!-- <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">-->
</head> </head>
<body> <body>
<header> <!--<header>-->
<ul class="footerBar"> <!-- <ul class="footerBar">-->
<li class="footerButton"><b>Home</b></li> <!-- <li class="footerButton"><b>Home</b></li>-->
<li class="footerButton"><b>About</b></li> <!-- <li class="footerButton"><b>About</b></li>-->
<li class="footerButton"><b>Map</b></li> <!-- <li class="footerButton"><b>Map</b></li>-->
<li class="footerButton"><b>Facilities</b></li> <!-- <li class="footerButton"><b>Facilities</b></li>-->
<li class="footerButton"><b>Log In</b></li> <!-- <li class="footerButton"><b>Log In</b></li>-->
</ul> <!-- </ul>-->
</header> <!--</header>-->
<main> <main>
<!--PICTURE - DATA - BADGES --> <!--PICTURE - DATA - BADGES -->
<div class="userInfo"> <div class="userContainer">
<h1 th:text="${user.getName()}"></h1> <h1 th:text="${user.getName()}"></h1>
<img th:src="@{${user.getImgPath()}}" <img th:src="@{${user.getImgPath()}}"
th:alt="${user.getName()}" th:alt="${user.getName()}"
...@@ -31,15 +31,15 @@ ...@@ -31,15 +31,15 @@
<!--TODO add some progression info here?--> <!--TODO add some progression info here?-->
</div> </div>
<section class="rewards"> <!--Reward lists, badges on top, stickers (larger) on the bottom--> <section class="rewards"> <!--Reward lists, badges on top, stickers (larger) on the bottom-->
<h2>Packs</h2>
<article id="packsBar"> <article id="packsBar">
<h2>Packs</h2>
<!--Shows first earned badges, followed by greyed out badges--> <!--Shows first earned badges, followed by greyed out badges-->
<div id="allPacksContainer" class="centerFlex"> <div id="allPacksContainer" class="centerFlex">
<div th:each="pack : ${packs}" class="packContainer"> <div th:each="pack : ${packs}" class="packContainer">
<h4 class="packName" th:text="${pack.getName()}"></h4>
<img class="packImg" th:src="@{'../' + ${pack.getDisplayImg()}}" <img class="packImg" th:src="@{'../' + ${pack.getDisplayImg()}}"
th:id="'packImg' + ${pack.getId()}" th:alt="${pack.getName()}" th:id="'packImg' + ${pack.getId()}" th:alt="${pack.getName()}"
th:onclick="'updatePack(' + ${user.getId()} +',' + ${pack.getId()} +');'"> th:onclick="'updatePack(' + ${user.getId()} +',' + ${pack.getId()} +');'">
<h4 class="packName" th:text="${pack.getName()}"></h4>
</div> </div>
</div> </div>
</article> </article>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment