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

Mobile phone layout for all trails page

parent b7f5f0e3
No related branches found
No related tags found
1 merge request!36Resolve "As a user I want to be able to use the application on any device e.g. iPhone, iPad, Laptop"
Hide whitespace changes
Inline Side-by-side
src/main/resources/static/css/allTrails.css
+ 5
− 32
View file @ 5ac9153d
* {
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 { #allTrailsBar {
width: 100%; width: 100%;
height: auto; height: auto;
/*margin: 1svh auto;*/ /*margin: 1svh auto;*/
padding: 0 5svh;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-evenly; justify-content: space-evenly;
} }
.trailsImages { .trailsImages {
margin: 1svh auto; margin: 1svh 0;
height: 12svh; height: 8svh;
width: auto; aspect-ratio: 1;
border-radius: 20px; border-radius: 20px;
border: solid grey 2px; border: solid grey 4px;
transition: 0.5s ease-out 100ms; transition: 0.5s ease-out 100ms;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.85); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.85);
} }
...@@ -47,9 +29,6 @@ main { ...@@ -47,9 +29,6 @@ main {
0% { opacity: 0; } 0% { opacity: 0; }
100% { opacity: 1; } 100% { opacity: 1; }
} }
main {
margin: 0;
}
#trailInfoContainer { #trailInfoContainer {
...@@ -125,10 +104,4 @@ main { ...@@ -125,10 +104,4 @@ main {
display: flex; display: flex;
min-height: 40svh; min-height: 40svh;
flex-wrap: wrap; flex-wrap: wrap;
}
} \ No newline at end of file
header {
box-shadow: #1e1e1e 0 0 10px 10px;
font-size: 1vw;
}
src/main/resources/static/css/login.css
+ 0
− 8
View file @ 5ac9153d
...@@ -13,14 +13,6 @@ ...@@ -13,14 +13,6 @@
--error-colour: red; --error-colour: red;
} }
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
color: white;
}
@keyframes move{ @keyframes move{
0%, 49.99%{ 0%, 49.99%{
opacity: 0; opacity: 0;
......
src/main/resources/templates/allTrails/allTrails.html
+ 6
− 9
View file @ 5ac9153d
...@@ -2,16 +2,16 @@ ...@@ -2,16 +2,16 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All Trails</title> <title>All Trails</title>
<link rel="stylesheet" th:href="@{css/allTrails.css}"> <link rel="stylesheet" th:href="@{/css/colours.css.css}">
<link rel="stylesheet" th:href="@{css/templatingstyle.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> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head> </head>
<body> <body>
<header th:replace="~{/fragments/Templating.html :: header}"></header> <header th:replace="~{/fragments/banners :: header}"></header>
<div>TEST</div>
<main> <main>
<section id="allTrailsBar" class="centerFlex"> <section id="allTrailsBar" class="centerFlex">
<img class="trailsImages" <img class="trailsImages"
...@@ -21,7 +21,6 @@ ...@@ -21,7 +21,6 @@
th:id="'img' + ${trail.getId()}" th:alt="${trail.getName()}" th:id="'img' + ${trail.getId()}" th:alt="${trail.getName()}"
> >
</section> </section>
<section id="trailInfoContainer" class="trailInfoFrag"> <section id="trailInfoContainer" class="trailInfoFrag">
<!--All this section is loaded from thymeleaf, based on what tail is selected <!--All this section is loaded from thymeleaf, based on what tail is selected
in the #allTrailsBar --> in the #allTrailsBar -->
...@@ -29,10 +28,8 @@ ...@@ -29,10 +28,8 @@
<h1 class="centerFlex">Please select your trail</h1> <h1 class="centerFlex">Please select your trail</h1>
</div> </div>
</section> </section>
</main> </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> <script type="text/javascript" th:src="@{scripts/allTrails.js}"></script>
......
src/main/resources/templates/users/userProfile.html
+ 1
− 14
View file @ 5ac9153d
...@@ -22,20 +22,7 @@ ...@@ -22,20 +22,7 @@
> >
<h1 th:text="${user.getName()}"></h1> <h1 th:text="${user.getName()}"></h1>
</div> </div>
<section class="rewards"> <!--Reward lists, badges on top, stickers (larger) on the bottom--> <section class="rewards">
<!--<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>-->
<article th:replace="~{users/userFrags.html::stickersBox}" id="stickersBox"></article> <article th:replace="~{users/userFrags.html::stickersBox}" id="stickersBox"></article>
</section> </section>
</main> </main>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment