Fixed #43 Web: Mobiles with small screens may have the search box obs…

…cured by the footer
searchmysite · Sep 21, 2021 · 302408c · 302408c
1 parent 841790d
commit 302408c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/src/web/content/dynamic/searchmysite/templates/layout.html b/src/web/content/dynamic/searchmysite/templates/layout.html
@@ -14,7 +14,7 @@
 	<link href="/opensearch.xml" rel="search" title="searchmysite.net" type="application/opensearchdescription+xml">
 	{% block head %}{% endblock %}
 </head>
-<body>
+<body class="d-flex flex-column min-vh-100">
 
 	<header>
 		<nav class="navbar navbar-expand-sm navbar-light bg-light">
@@ -52,7 +52,7 @@
 		</nav>
 	</header>
 
-	<main>
+	<main class="flex-grow-1">
 		<div class="container-fluid h-100 mt-5">
 
 			{% block searchbox %}{% endblock %}
@@ -69,16 +69,16 @@
 	</main>
 
 	<footer class="footer mt-5">
-		<nav class="navbar navbar-light bg-light justify-content-center align-items-start">
-			<ul class="nav flex-column ml-5 mr-5">
+		<nav class="navbar navbar-light bg-light justify-content-sm-around justify-content-md-evenly align-items-start">
+			<ul class="nav flex-column">
 				<li class="nav-item p-1">Community</li>
 				<li class="nav-item p-1"><a href="https://blog.searchmysite.net/">Blog</a></li>
 				<li class="nav-item p-1"><a href="/admin/contact/">Contact</a></li>
 				<li class="nav-item p-1"><a href="https://github.com/searchmysite/searchmysite.net/discussions">Discussion</a></li>
 				<li class="nav-item p-1"><a href="/pages/documentation/">Documentation</a></li>
 				<li class="nav-item p-1"><a href="https://github.com/searchmysite/searchmysite.net">Source</a></li>
 			</ul>
-			<ul class="nav flex-column ml-5 mr-5">
+			<ul class="nav flex-column">
 				<li class="nav-item p-1">Product</li>
 				<li class="nav-item p-1"><a href="/pages/about/">About</a></li>
 				<li class="nav-item p-1"><a href="/pages/privacy/">Privacy</a></li>

diff --git a/src/web/content/static/index.html b/src/web/content/static/index.html
@@ -13,7 +13,7 @@
 	<script async defer data-domain="searchmysite.net" src="https://stats.searchmysite.net/js/plausible.js"></script>
 	<link href="/opensearch.xml" rel="search" title="searchmysite.net" type="application/opensearchdescription+xml">
 </head>
-<body>
+<body class="d-flex flex-column min-vh-100">
 
 	<header>
 		<nav class="navbar navbar-expand-sm navbar-light bg-light">
@@ -38,7 +38,7 @@
 		</nav>
 	</header>
 
-	<main>
+	<main class="flex-grow-1">
 		<div class="container-fluid h-100">
 
 			<form action="/search/">
@@ -91,16 +91,16 @@ <h1 class="normal">Open source search engine and search&nbsp;as&nbsp;a&nbsp;serv
 	</main>
 
 	<footer class="footer mt-5">
-		<nav class="navbar fixed-bottom navbar-light bg-light justify-content-center align-items-start">
-			<ul class="nav flex-column ml-5 mr-5">
+		<nav class="navbar navbar-light bg-light justify-content-sm-around justify-content-md-evenly align-items-start">
+			<ul class="nav flex-column">
 				<li class="nav-item p-1">Community</li>
 				<li class="nav-item p-1"><a href="https://blog.searchmysite.net/">Blog</a></li>
 				<li class="nav-item p-1"><a href="/admin/contact/">Contact</a></li>
 				<li class="nav-item p-1"><a href="https://github.com/searchmysite/searchmysite.net/discussions">Discussion</a></li>
 				<li class="nav-item p-1"><a href="/pages/documentation/">Documentation</a></li>
 				<li class="nav-item p-1"><a href="https://github.com/searchmysite/searchmysite.net">Source</a></li>
 			</ul>
-			<ul class="nav flex-column ml-5 mr-5">
+			<ul class="nav flex-column">
 				<li class="nav-item p-1">Product</li>
 				<li class="nav-item p-1"><a href="/pages/about/">About</a></li>
 				<li class="nav-item p-1"><a href="/pages/privacy/">Privacy</a></li>