From 30c8e2272f8c5c9d89e138e37d7641d7da752022 Mon Sep 17 00:00:00 2001
From: PlexSheep <software@cscherr.de>
Date: Wed, 11 Sep 2024 22:43:09 +0200
Subject: [PATCH] feat(meta): meta interface sidebar is now responsive #15

---
 data/www/base.html  | 37 +++++++++++++++----------------------
 data/www/styles.css |  8 ++++++++
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/data/www/base.html b/data/www/base.html
index 3a51efd..3701a12 100644
--- a/data/www/base.html
+++ b/data/www/base.html
@@ -110,16 +110,18 @@
 		</ul>
 	</div>
 
-	<div class="container-fluid">
-		<div class="row">
+	<!-- basically everything but with some margin -->
+	<div class="d-flex flex-nowrap m-0 container-fluid border-collapse" style="min-height: 90vh;">
+		<div class="row mb-0 border-collapse">
 			<!-- side panel -->
-			<div class="d-flex flex-column flex-shrink-0 p-3 border-end" style="width: 280px;">
+			<div class="col-sm-2 border-end border-collapse pt-2" style="min-width: 26vw;">
 				<a href="/"
 					class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-decoration-none text-body-emphasis">
 					<svg class="bi pe-none me-2" width="40" height="32">
 						<use xlink:href="#vault"></use>
 					</svg>
 					<span class="fs-4">{{app_name}}</span>
+					{% block header_ext %}{% endblock %}
 				</a>
 				<hr>
 				<ul class="nav nav-pills flex-column mb-auto">
@@ -168,32 +170,23 @@
 				</div>
 			</div>
 
-			<!-- basically everything but with some margin -->
-			<div class="col-lg-8 mx-auto p-4 py-md-5">
-				<header class="d-flex align-items-center pb-3 mb-5 border-bottom">
-					<div class="col-md-3 col-12 col-md-auto">
-						<a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none">
-							<svg class="bi me-2" width="40" height="32">
-								<use xlink:href="#vault" />
-							</svg>
-							<span class="fs-4">{{app_name}}</span>
-						</a>
-
+			<div class="col ms-3 mt-4">
+				<main class="d-flex flex-nowrap">
+					<!-- real content -->
+					<div class="container-fluid">
+						{% block main %}{% endblock %}
 					</div>
-					{% block header_ext %}{% endblock %}
-				</header>
-
-				<main>
-					{% block main %}{% endblock %}
 				</main>
-				<footer class="pt-5 my-5 text-body-secondary border-top">
-					Created by {{ author }} &copy; {{year}}
-				</footer>
 			</div>
 
 		</div>
+
 	</div>
 
+	<footer class="pt-2 pb-2 text-body-secondary text-center border-top 
+			border-collapse">
+		Created by {{ author }} &copy; {{year}}
+	</footer>
 	<script src="https://getbootstrap.com/docs/5.3/dist/js/bootstrap.bundle.min.js"
 		integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
 		crossorigin="anonymous"></script>
diff --git a/data/www/styles.css b/data/www/styles.css
index 6c1522f..cabcccc 100644
--- a/data/www/styles.css
+++ b/data/www/styles.css
@@ -1,3 +1,11 @@
+body {
+	border-collapse: collapse;
+}
+
+.border-collapse {
+	border-collapse: collapse;
+}
+
 .bd-placeholder-img {
 	font-size: 1.125rem;
 	text-anchor: middle;