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

Updated style and HTML elements

parent de1879ac
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; display: flex;
list-style: none;
width: 100%;
padding-left:0;
margin-left:0;
justify-content: center; 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 { .trailsImages {
flex: 1 1; margin-left:auto;
width: 150px; margin-right:auto;
margin-top: auto;
margin-bottom: auto;
height: 10svh;
width: 10svh;
border-radius: 20px; border-radius: 20px;
transition: 0.5s ease-out 100ms; transition: 0.5s ease-out 100ms;
} }
.trailsImages:hover { .trailsImages:hover {
box-shadow: 0 0 30px #bbbb00; box-shadow: 0 0 30px #bbbb00;
transform: scale(1.2,1.2); transform: scale(1.2,1.2);
!important; overflow: visible;
} }
.selected { .selected {
......
...@@ -9,15 +9,15 @@ ...@@ -9,15 +9,15 @@
<body> <body>
<header> <header>
<ul class="flexList"> <div id="allTrailsBar" class="centerFlex">
<!--TODO trail image instead of title--> <!--TODO add rest of page-->
<li class="listButton" th:each="trail : ${trails}"> <img class="trailsImages"
<a class="listA" th:onclick="'updateOutputTrail('+ ${trail.id} +');'" th:id="'li' + ${trail.id}"> th:each="trail : ${trails}"
<img th:src="@{${trail.getImgPath()}}" class="trailsImages" th:id="'img' + ${trail.getId()}" alt="IMG"> th:src="@{${trail.getImgPath()}}"
</a> th:onclick="'updateOutputTrail('+ ${trail.id} +');'"
th:id="'img' + ${trail.getId()}" alt="IMG"
</li> >
</ul> </div>
</header> </header>
<main> <main>
......
<section th:fragment="trailSection" class="trailInfoBox"> <section th:fragment="trailSection" class="trailInfoBox">
<h1 th:text="${searchList.getName()}"></h1> <h1 th:text="${searchList.getName()}"></h1>
<p th:text="${searchList.getDescription()}"></p> <p th:text="${searchList.getDescription()}"></p>
<!--TODO add more to this fragment and then add styling to it-->
</section> </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