Mobile phone layout for all trails page

5ac9153d · Gabriel Copat · b7f5f0e3 · 5ac9153d · 5ac9153d · 5ac9153d
Commit 5ac9153d authored 1 year ago by Gabriel Copat
--- a/src/main/resources/static/css/allTrails.css
+++ b/src/main/resources/static/css/allTrails.css
-* {
-    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
--- 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;

--- 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>


--- 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>
-                 &lt;!&ndash;Shows first earned badges, followed by greyed out badges&ndash;&gt;
-                <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>