From 5a309ee8e87fe07b576684e1b7a405ab2aa734ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexis=20M=C3=A9taireau?= <alexis@notmyidea.org>
Date: Sat, 12 Aug 2023 20:37:21 +0200
Subject: [PATCH] Make footer stick to the bottom. Fixes #120

---
 la_chariotte/static/css/app.css            | 11 ++++++++++
 la_chariotte/static/sass/base/_footer.sass |  2 ++
 la_chariotte/static/sass/base/_global.sass |  6 ++++++
 la_chariotte/static/sass/style.sass        |  1 +
 la_chariotte/templates/base.html           | 25 +++++++++++-----------
 5 files changed, 32 insertions(+), 13 deletions(-)
 create mode 100644 la_chariotte/static/sass/base/_footer.sass

diff --git a/la_chariotte/static/css/app.css b/la_chariotte/static/css/app.css
index 03d47e1..3831ae5 100644
--- a/la_chariotte/static/css/app.css
+++ b/la_chariotte/static/css/app.css
@@ -10285,12 +10285,19 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
 body {
   min-height: 100vh;
   background-color: hsl(0, 0%, 96%);
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
 }
 
 a {
   color: #A52951;
 }
 
+main {
+  flex: 1;
+}
+
 .box.is-info, .card.is-info {
   border-bottom: 2px solid #e9b049;
   border-right: 1px solid #e9b049;
@@ -10471,3 +10478,7 @@ p.mobile-content-title {
 .tabs > ul {
   margin-left: 0;
 }
+
+footer > .columns {
+  margin-bottom: 1rem !important;
+}
diff --git a/la_chariotte/static/sass/base/_footer.sass b/la_chariotte/static/sass/base/_footer.sass
new file mode 100644
index 0000000..b9a3c66
--- /dev/null
+++ b/la_chariotte/static/sass/base/_footer.sass
@@ -0,0 +1,2 @@
+footer > .columns
+    margin-bottom: 1rem !important
\ No newline at end of file
diff --git a/la_chariotte/static/sass/base/_global.sass b/la_chariotte/static/sass/base/_global.sass
index 9f4d24e..6bc91e6 100644
--- a/la_chariotte/static/sass/base/_global.sass
+++ b/la_chariotte/static/sass/base/_global.sass
@@ -1,10 +1,16 @@
 body
 	min-height: 100vh
 	background-color: $background
+	display: flex
+	min-height: 100vh
+	flex-direction: column
 
 a
 	color: $betterave
 
+main
+	flex: 1
+
 .box.is-info, .card.is-info
 	border-bottom: 2px solid $beige
 	border-right: 1px solid $beige
diff --git a/la_chariotte/static/sass/style.sass b/la_chariotte/static/sass/style.sass
index cae7bbc..a2d81e3 100644
--- a/la_chariotte/static/sass/style.sass
+++ b/la_chariotte/static/sass/style.sass
@@ -16,3 +16,4 @@
 @import "./base/table"
 @import "./base/titles"
 @import "./base/tabs"
+@import "./base/footer"
diff --git a/la_chariotte/templates/base.html b/la_chariotte/templates/base.html
index d9b93e9..8ab63c5 100644
--- a/la_chariotte/templates/base.html
+++ b/la_chariotte/templates/base.html
@@ -126,21 +126,20 @@
       {% endblock %}
     </div>
   </main>
+  <footer class="footer">
+    <div class="content has-text-centered columns">
+      <div class="column">
+        <p>
+          <strong>La Chariotte</strong> | version 0.5.0
+        </p>
+      </div>
+      <div class="column">
+        <a href="{% url 'legal_notice' %}">Mentions légales</a>
+      </div>
+    </div>
+  </footer>
 </body>
 
-<footer class="footer">
-  <div class="content has-text-centered columns">
-    <div class="column">
-      <p>
-        <strong>La Chariotte</strong> | version 0.5.0
-      </p>
-    </div>
-    <div class="column">
-      <a href="{% url 'legal_notice' %}">Mentions légales</a>
-    </div>
-  </div>
-</footer>
-
 </html>
 
 <script>