From 5ac9153d3326754e9e3408e4cf36918650477b37 Mon Sep 17 00:00:00 2001
From: Gabriel Copat <copatg@cardiff.ac.uk>
Date: Tue, 12 Dec 2023 17:58:52 +0000
Subject: [PATCH] Mobile phone layout for all trails page
---
src/main/resources/static/css/allTrails.css | 37 +++----------------
src/main/resources/static/css/login.css | 8 ----
.../templates/allTrails/allTrails.html | 15 +++-----
.../templates/users/userProfile.html | 15 +-------
4 files changed, 12 insertions(+), 63 deletions(-)
diff --git a/src/main/resources/static/css/allTrails.css b/src/main/resources/static/css/allTrails.css
index ab706c5b..ce5a672f 100644
--- a/src/main/resources/static/css/allTrails.css
+++ b/src/main/resources/static/css/allTrails.css
@@ -1,36 +1,18 @@
-* {
- box-sizing: border-box;
-}
-body {
- background-color: rgb(41, 41, 41);
- margin: 0;
- display: flex;
- flex-direction: column;
- min-height: 100svh;
-}
-main {
-}
-
-.centerFlex {
- display: flex;
- justify-content: center;
-}
#allTrailsBar {
width: 100%;
height: auto;
/*margin: 1svh auto;*/
- padding: 0 5svh;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.trailsImages {
- margin: 1svh auto;
- height: 12svh;
- width: auto;
+ margin: 1svh 0;
+ height: 8svh;
+ aspect-ratio: 1;
border-radius: 20px;
- border: solid grey 2px;
+ border: solid grey 4px;
transition: 0.5s ease-out 100ms;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.85);
}
@@ -47,9 +29,6 @@ main {
0% { opacity: 0; }
100% { opacity: 1; }
}
-main {
- margin: 0;
-}
#trailInfoContainer {
@@ -125,10 +104,4 @@ main {
display: flex;
min-height: 40svh;
flex-wrap: wrap;
-
-}
-
-header {
- box-shadow: #1e1e1e 0 0 10px 10px;
- font-size: 1vw;
-}
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/login.css b/src/main/resources/static/css/login.css
index 42965040..f0e1bb74 100644
--- a/src/main/resources/static/css/login.css
+++ b/src/main/resources/static/css/login.css
@@ -13,14 +13,6 @@
--error-colour: red;
}
-*{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: 'Montserrat', sans-serif;
- color: white;
-}
-
@keyframes move{
0%, 49.99%{
opacity: 0;
diff --git a/src/main/resources/templates/allTrails/allTrails.html b/src/main/resources/templates/allTrails/allTrails.html
index 0fefa92c..e41962c3 100644
--- a/src/main/resources/templates/allTrails/allTrails.html
+++ b/src/main/resources/templates/allTrails/allTrails.html
@@ -2,16 +2,16 @@
<html lang="en">
<head>
<meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All Trails</title>
- <link rel="stylesheet" th:href="@{css/allTrails.css}">
- <link rel="stylesheet" th:href="@{css/templatingstyle.css}">
+ <link rel="stylesheet" th:href="@{/css/colours.css.css}">
+ <link rel="stylesheet" th:href="@{/css/mobile-style.css}">
+ <link rel="stylesheet" th:href="@{/css/allTrails.css}">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
-<header th:replace="~{/fragments/Templating.html :: header}"></header>
-<div>TEST</div>
+<header th:replace="~{/fragments/banners :: header}"></header>
+
<main>
<section id="allTrailsBar" class="centerFlex">
<img class="trailsImages"
@@ -21,7 +21,6 @@
th:id="'img' + ${trail.getId()}" th:alt="${trail.getName()}"
>
</section>
-
<section id="trailInfoContainer" class="trailInfoFrag">
<!--All this section is loaded from thymeleaf, based on what tail is selected
in the #allTrailsBar -->
@@ -29,10 +28,8 @@
<h1 class="centerFlex">Please select your trail</h1>
</div>
</section>
-
</main>
-<footer th:insert="~{/fragments/Templating.html :: footer}"></footer>
-
+<footer th:replace="~{/fragments/banners :: footer}"></footer>
<script type="text/javascript" th:src="@{scripts/allTrails.js}"></script>
diff --git a/src/main/resources/templates/users/userProfile.html b/src/main/resources/templates/users/userProfile.html
index 3377dde2..a7f4787d 100644
--- a/src/main/resources/templates/users/userProfile.html
+++ b/src/main/resources/templates/users/userProfile.html
@@ -22,20 +22,7 @@
>
<h1 th:text="${user.getName()}"></h1>
</div>
- <section class="rewards"> <!--Reward lists, badges on top, stickers (larger) on the bottom-->
- <!--<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">
- <img class="packImg" th:src="@{'../' + ${pack.getDisplayImg()}}"
- th:id="'packImg' + ${pack.getId()}" th:alt="${pack.getName()}"
- th:data-url="@{/packInfo/{username}/{packID}(username=${user.getName()}, packID=${pack.getId()})}"
- onclick="updatePack(this.getAttribute('data-url'))">
- <h4 class="packName" th:text="${pack.getName()}"></h4>
- </div>
- </div>
- </article>-->
+ <section class="rewards">
<article th:replace="~{users/userFrags.html::stickersBox}" id="stickersBox"></article>
</section>
</main>
--
GitLab