Browse Source

Merge branch 'feature/home-layout' into develop

* feature/home-layout:
  Improve the layout of the homepage and the footer
tags/0.3.6^2
Bèr Kessels 1 month ago
parent
commit
553b754050
3 changed files with 67 additions and 25 deletions
  1. 31
    0
      app/assets/stylesheets/application.scss
  2. 1
    23
      app/views/home.erb
  3. 35
    2
      app/views/layout.erb

+ 31
- 0
app/assets/stylesheets/application.scss View File

@@ -4,6 +4,37 @@
@import "leaflet.css";
@import "horsey.css";

html,
body {
height: 100%;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: none;
h2 {
font-size: medium;
}
}

#home {
display: flex;
flex-direction: column;
height: 100%;
}
#home > div {
height: 5em;
}
#home::before {
content: '';
flex: 1;
}
#home::after {
content: '';
flex: 3;
}

#map {
height: 400px;
}

+ 1
- 23
app/views/home.erb View File

@@ -15,7 +15,7 @@ js = "horsey(document.getElementById('search-input'), {
set_content_for(:closing_js, js)
%>

<section class="container">
<section class="container" id="home">
<div class="col justify-content-center">
<form action="/search" method="get">
<input autocomplete="off"
@@ -29,25 +29,3 @@ set_content_for(:closing_js, js)
</form>
</div>
</section>
<hr>
<section class="row">
<div class="col">
<h2 class="title">Populaire plaatsen</h2>
<ul class="popular">
<li><a href="/in/amsterdam">Amsterdam</a></li>
<li><a href="/in/rotterdam">Rotterdam</a></li>
<li><a href="/in/utrecht">Utrecht</a></li>
<li><a href="/in/groningen">Groningen</a></li>
<li><a href="/in/nijmegen">Nijmegen</a></li>
</ul>
</div>
<div class="col">
<h2 class="title">Recent gezocht</h2>
<ul class="popular">
<li><a href="/search?q=Hema">HEMA</a></li>
<li><a href="/search?q=Hema">Albert Heijn</a></li>
<li><a href="/in/nijmegen">Nijmegen</a></li>
<li><a href="/search?q=Tankstation%20Groningen">Tankstation Groningen</a></li>
</ul>
</div>
</section>

+ 35
- 2
app/views/layout.erb View File

@@ -10,12 +10,45 @@

<title>Openingstijden</title>
</head>
<body>
<div class="container-fluid">
<body class="d-flex flex-column">
<div class="container-fluid" id="page-content">
<h1 class="title">Openingstijden</h1>
<%== erb :breadcrumb_partial %>
<%== yield %>
</div>
<footer class="container-fluid mt-4 py-4 bg-dark text-white-50" id="sticky-footer">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
<h2 class="title">Over</h2>
<ul class="popular">
<li><a class="bg-dark text-white-50" href="#over-TODO">Over</a></li>
<li><a class="bg-dark text-white-50" href="https://stoplight.io/p/docs/gh/berkes/mimirsbrunn">API (documentatie)</a></li>
<li><a class="bg-dark text-white-50" href="#databronnnen-TODO">Alle bronnen zijn Open Data</a></li>
<li><a class="bg-dark text-white-50" href="#partners-TODO">Partners en samenwerking</a></li>
</ul>
</div>

<div class="col col-lg-2">
<h2 class="title">Populaire plaatsen</h2>
<ul class="popular">
<li><a class="bg-dark text-white-50" href="/in/amsterdam">Amsterdam</a></li>
<li><a class="bg-dark text-white-50" href="/in/rotterdam">Rotterdam</a></li>
<li><a class="bg-dark text-white-50" href="/in/utrecht">Utrecht</a></li>
<li><a class="bg-dark text-white-50" href="/in/groningen">Groningen</a></li>
<li><a class="bg-dark text-white-50" href="/in/nijmegen">Nijmegen</a></li>
</ul>
</div>
<div class="col col-lg-2">
<h2 class="title">Recent gezocht</h2>
<ul class="popular">
<li><a class="bg-dark text-white-50" href="/search?q=Hema">HEMA</a></li>
<li><a class="bg-dark text-white-50" href="/search?q=Hema">Albert Heijn</a></li>
<li><a class="bg-dark text-white-50" href="/in/nijmegen">Nijmegen</a></li>
<li><a class="bg-dark text-white-50" href="/search?q=Tankstation%20Groningen">Tankstation Groningen</a></li>
</ul>
</div>
</div>
</footer>
<script>
<%== content_for(:closing_js) %>
</script>

Loading…
Cancel
Save