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

Updated style and HTML elements

parent bf3e116d
No related branches found
No related tags found
1 merge request!11Resolve "As a user, I want to see all trails across a town and seamlessly move between them."
.flexList {
.centerFlex {
display: flex;
list-style: none;
width: 100%;
padding-left:0;
margin-left:0;
justify-content: center;
}
#allTrailsBar {
padding:0;
max-width: 60%;
height: 12svh;
margin: auto;
border-bottom: solid grey 4px;
border-top: solid grey 4px;
.listButton {
flex: 1 1;
display: flex;
text-align: center;
}
.listA{
display: flex;
flex: 1 1;
padding: 15px;
transition: background-color 0.5s ease-out 100ms;
border-radius: 20px;
}
.listA:hover{
/*background-color: #656565;*/
}
.trailsImages {
flex: 1 1;
width: 150px;
margin-left:auto;
margin-right:auto;
margin-top: auto;
margin-bottom: auto;
height: 10svh;
width: 10svh;
border-radius: 20px;
transition: 0.5s ease-out 100ms;
}
.trailsImages:hover {
box-shadow: 0 0 30px #bbbb00;
transform: scale(1.2,1.2);
!important; overflow: visible;
}
.selected {
......
......@@ -9,15 +9,15 @@
<body>
<header>
<ul class="flexList">
<!--TODO trail image instead of title-->
<li class="listButton" th:each="trail : ${trails}">
<a class="listA" th:onclick="'updateOutputTrail('+ ${trail.id} +');'" th:id="'li' + ${trail.id}">
<img th:src="@{${trail.getImgPath()}}" class="trailsImages" th:id="'img' + ${trail.getId()}" alt="IMG">
</a>
</li>
</ul>
<div id="allTrailsBar" class="centerFlex">
<!--TODO add rest of page-->
<img class="trailsImages"
th:each="trail : ${trails}"
th:src="@{${trail.getImgPath()}}"
th:onclick="'updateOutputTrail('+ ${trail.id} +');'"
th:id="'img' + ${trail.getId()}" alt="IMG"
>
</div>
</header>
<main>
......
<section th:fragment="trailSection" class="trailInfoBox">
<h1 th:text="${searchList.getName()}"></h1>
<p th:text="${searchList.getDescription()}"></p>
<!--TODO add more to this fragment and then add styling to it-->
</section>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment