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
Branches
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"
This commit is part of merge request !5. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
src/main/resources/templates/towns/caerphilly.html
+ 94
− 11
Edit View file @ 47f881c4
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<style> <style>
#landmarkList{
#checklistFlexbox{
flex-direction: row;
display: inline-flex;
/*justify-content: space-between;*/
flex-wrap: wrap;
text-align: left;
border: 2px solid black; 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> </style>
...@@ -14,22 +83,36 @@ ...@@ -14,22 +83,36 @@
</head> </head>
<body> <body>
<main> <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> </main>
</body> </body>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment