Skip to content
Snippets Groups Projects
Commit 47f881c4 authored by Rhys Evans's avatar Rhys Evans
Browse files

Styled the layout of the listed landmark examples used to create a mock trail list

parent 554ebe71
No related branches found
No related tags found
1 merge request!5Resolve "As a user I want to be able to see a list of specific landmarks so I can decide where to go next on the trail"
Hide whitespace changes
Inline Side-by-side
src/main/resources/templates/towns/caerphilly.html
+ 94
− 11
View file @ 47f881c4
<!DOCTYPE html>
<html lang="en">
<style>
#landmarkList{
#checklistFlexbox{
flex-direction: row;
display: inline-flex;
/*justify-content: space-between;*/
flex-wrap: wrap;
text-align: left;
border: 2px solid black;
grid-area: checklistFlexbox;
}
#landmarkList{
padding-right: 15px;
/*border: 2px solid black;*/
}
#checkList{
}
/*block types denote whether a user has unlocked the respective landmark*/
#block1{
width:15px;height:15px;background: red;border-radius:50%;padding: 0; margin: 0px;height: 18px; width:18px;tooltip
}
#block2{
width:15px;height:15px;background: red;border-radius:50%;padding: 0; margin: 0px;height: 18px;width:18px;
}
#block3{
width:15px;height:15px;background: green;border-radius:50%;padding: 0; margin: 0px;height: 18px;width:18px;
}
#block4{
width:15px;height:15px;background: red;border-radius:50%;padding: 0; margin: 0px;height: 18px;width:18px;
}
#block5{
width:15px;height:15px;background: green;border-radius:50%;padding: 0; margin: 0px;height: 18px;width:18px;
}
#landmarkList, #checkList{
list-style-type: none;
}
#title1{
grid-area: title1;
}
#title2{
grid-area: title2;
}
[BadgeStickerProgress]{
grid-area: BadgeStickerProgress;
}
#landmarkTitle{
grid-area:landmarkTitle
}
.container{
display:grid;
grid-template-columns: 50% 50%;
grid-template-rows: auto;
grid-template-areas:
"title1 title1"
"title2 title2"
"BadgeStickerProgress ."
"landmarkTitle ."
"checklistFlexbox .";
}
</style>
......@@ -14,22 +83,36 @@
</head>
<body>
<main>
<h1> Welcome to the town of Caerphilly.</h1>
<div class="container">
<h1 id="title1"> Welcome to the town of Caerphilly.</h1>
<h2 id="title2"> Welcome to the trail of trail-ness!</h2>
<section name="BadgeStickerProgress"> Sticker Pictures and stuff go here</section>
<h2 id="landmarkTitle">Caerphilly Landmark Progress:</h2>
<div id="checklistFlexbox">
<h2>Caerphilly Landmark Progress:</h2>
<li id="checkList">
<ul><div id="block1"> </div></ul>
<ul><div id="block2"> </div></ul>
<ul><div id="block3"> </div></ul>
<ul><div id="block4"> </div></ul>
<ul><div id="block5"> </div></ul>
<h2> Welcome to the trail of trail-ness!</h2>
<section name="Badge/StickerProgress"></section>
<li name="landmarkList"id="landmarkList">
<ul>1. Landmark 1 - href</ul>
<ul>2. Landmark 2 - href</ul>
<ul>3. Landmark 2 - href</ul>
<ul>4. Landmark 2 - href</ul>
<ul>5. Landmark 2 - href</ul>
</li>
</li>
<li name="landmarkList"id="landmarkList">
<ul>Landmark 1 - <a href="../test.html">Explore!</a></ul>
<ul>Landmark 2 - Explore!</ul>
<ul>Landmark 2 - Explore!</ul>
<ul>Landmark 2 - Explore!</ul>
<ul>Landmark 2 - Explore!</ul>
</li>
</div>
</div>
</main>
</body>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment