From 3b2a9fedeff03f82e12e094497321a57175f5ecd Mon Sep 17 00:00:00 2001
From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com>
Date: Mon, 5 Aug 2024 12:00:20 +0100
Subject: [PATCH] Move footer to bottom of viewport

---
 internal/assets/static/main.css     | 19 +++++++--
 internal/assets/templates/page.html | 64 +++++++++++++++--------------
 2 files changed, 50 insertions(+), 33 deletions(-)

diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css
index e0c2445..3ef1eb6 100644
--- a/internal/assets/static/main.css
+++ b/internal/assets/static/main.css
@@ -311,6 +311,10 @@ html {
     scroll-behavior: smooth;
 }
 
+html, body {
+    height: 100%;
+}
+
 a {
     text-decoration: none;
     color: inherit;
@@ -424,6 +428,7 @@ kbd:active {
 
 .content-bounds {
     max-width: 1600px;
+    width: 100%;
     margin-inline: auto;
     padding: 0 var(--content-bounds-padding);
 }
@@ -654,7 +659,7 @@ kbd:active {
 }
 
 .footer {
-    margin-block: calc(var(--widget-gap) * 1.5);
+    padding-block: calc(var(--widget-gap) * 1.5);
     animation: loadingContainerEntrance 200ms backwards;
     animation-delay: 150ms;
 }
@@ -1227,8 +1232,14 @@ kbd:active {
         }
     }
 
-    body {
-        padding-bottom: calc(var(--mobile-navigation-height) + var(--content-bounds-padding));
+    .mobile-navigation-offset {
+        height: var(--mobile-navigation-height);
+        margin-top: var(--widget-gap);
+        flex-shrink: 0;
+    }
+
+    .footer + .mobile-navigation-offset {
+        margin-top: 0;
     }
 
     .mobile-navigation {
@@ -1431,6 +1442,7 @@ kbd:active {
 .shrink-0           { flex-shrink: 0; }
 .min-width-0        { min-width: 0; }
 .max-width-100      { max-width: 100%; }
+.height-100         { height: 100%; }
 .block              { display: block; }
 .inline-block       { display: inline-block; }
 .overflow-hidden    { overflow: hidden; }
@@ -1462,6 +1474,7 @@ kbd:active {
 .margin-top-7       { margin-top: 0.7rem; }
 .margin-top-10      { margin-top: 1rem; }
 .margin-top-15      { margin-top: 1.5rem; }
+.margin-top-auto    { margin-top: auto; }
 .margin-block-3     { margin-block: 0.3rem; }
 .margin-block-5     { margin-block: 0.5rem; }
 .margin-block-7     { margin-block: 0.7rem; }
diff --git a/internal/assets/templates/page.html b/internal/assets/templates/page.html
index c83923b..cfb0b5e 100644
--- a/internal/assets/templates/page.html
+++ b/internal/assets/templates/page.html
@@ -25,43 +25,47 @@
 {{ end }}
 
 {{ define "document-body" }}
-<div class="header-container content-bounds">
-    <div class="header flex padding-inline-widget widget-content-frame">
-        <!-- TODO: Replace G with actual logo, first need an actual logo -->
-        <div class="logo">G</div>
-        <div class="nav flex grow">
+<div class="flex flex-column height-100">
+    <div class="header-container content-bounds">
+        <div class="header flex padding-inline-widget widget-content-frame">
+            <!-- TODO: Replace G with actual logo, first need an actual logo -->
+            <div class="logo">G</div>
+            <div class="nav flex grow">
+                {{ template "navigation-links" . }}
+            </div>
+        </div>
+    </div>
+
+    <div class="mobile-navigation">
+        <div class="mobile-navigation-icons">
+            <a class="mobile-navigation-label" href="#top">↑</a>
+            {{ range $i, $column := .Page.Columns }}
+            <label class="mobile-navigation-label"><input type="radio" class="mobile-navigation-input" name="column" value="{{ $i }}" autocomplete="off"{{ if eq "full" $column.Size }} checked{{ end }}><div class="mobile-navigation-pill"></div></label>
+            {{ end }}
+            <label class="mobile-navigation-label"><input type="checkbox" class="mobile-navigation-page-links-input" autocomplete="on"><div class="hamburger-icon"></div></label>
+        </div>
+        <div class="mobile-navigation-page-links">
             {{ template "navigation-links" . }}
         </div>
     </div>
-</div>
 
-<div class="mobile-navigation">
-    <div class="mobile-navigation-icons">
-        <a class="mobile-navigation-label" href="#top">↑</a>
-        {{ range $i, $column := .Page.Columns }}
-        <label class="mobile-navigation-label"><input type="radio" class="mobile-navigation-input" name="column" value="{{ $i }}" autocomplete="off"{{ if eq "full" $column.Size }} checked{{ end }}><div class="mobile-navigation-pill"></div></label>
-        {{ end }}
-        <label class="mobile-navigation-label"><input type="checkbox" class="mobile-navigation-page-links-input" autocomplete="on"><div class="hamburger-icon"></div></label>
-    </div>
-    <div class="mobile-navigation-page-links">
-        {{ template "navigation-links" . }}
-    </div>
-</div>
-
-<div class="content-bounds">
-    <div class="page" id="page">
-        <div class="page-content" id="page-content"></div>
-        <div class="page-loading-container">
-            <!-- TODO: add a bigger/better loading indicator -->
-            <div class="loading-icon"></div>
+    <div class="content-bounds">
+        <div class="page" id="page">
+            <div class="page-content" id="page-content"></div>
+            <div class="page-loading-container">
+                <!-- TODO: add a bigger/better loading indicator -->
+                <div class="loading-icon"></div>
+            </div>
         </div>
     </div>
-</div>
 
-<div class="footer flex items-center flex-column">
-    <div>
-        <a class="size-h3" href="https://github.com/glanceapp/glance" target="_blank" rel="noreferrer">Glance</a> {{ if ne "dev" .App.Version }}<a class="visited-indicator" title="Release notes" href="https://github.com/glanceapp/glance/releases/tag/{{ .App.Version }}" target="_blank" rel="noreferrer">{{ .App.Version }}</a>{{ else }}({{ .App.Version }}){{ end }}
+    <div class="footer flex items-center flex-column margin-top-auto">
+        <div>
+            <a class="size-h3" href="https://github.com/glanceapp/glance" target="_blank" rel="noreferrer">Glance</a> {{ if ne "dev" .App.Version }}<a class="visited-indicator" title="Release notes" href="https://github.com/glanceapp/glance/releases/tag/{{ .App.Version }}" target="_blank" rel="noreferrer">{{ .App.Version }}</a>{{ else }}({{ .App.Version }}){{ end }}
+        </div>
+        <a class="color-primary block margin-top-5 size-h5" href="https://github.com/glanceapp/glance/issues" target="_blank" rel="noreferrer">Report issue</a>
     </div>
-    <a class="color-primary block margin-top-5 size-h5" href="https://github.com/glanceapp/glance/issues" target="_blank" rel="noreferrer">Report issue</a>
+
+    <div class="mobile-navigation-offset"></div>
 </div>
 {{ end }}