From 5b020fbe1e7ed7e847d256962c88e6a200395696 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Fri, 20 May 2022 15:06:51 -0500
Subject: [PATCH] Fix footer, push down to bottom properly

---
 src/App.vue               | 133 +++++++++++++++++++++-----------------
 src/components/Footer.vue |  17 +++--
 2 files changed, 84 insertions(+), 66 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e4a77a8..2f084da 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,76 +1,87 @@
 <template>
     <div id="app">
-        <b-navbar>
-            <b-navbar-brand>
-                <router-link :to="{ name: 'Home' }" class="no-link">
-                    The Office Quotes
-                </router-link>
-                <b-badge v-if="showBreakpointMarker" style="font-size: 0.80rem;" class="mx-2" variant="dark">
-                    <span id="marker-xs" class="d-sm-none">XS</span>
-                    <span id="marker-sm" class="d-none d-sm-block d-md-none">SM</span>
-                    <span id="marker-md" class="d-none d-md-block d-lg-none">MD</span>
-                    <span id="marker-lg" class="d-none d-lg-block d-xl-none">LG</span>
-                    <span id="marker-xl" class="d-none d-xl-block">XL</span>
-                </b-badge>
-            </b-navbar-brand>
-            <b-collapse id="nav-collapse" is-nav>
-                <b-navbar-nav>
-                    <b-nav-item href="#">
-                        <router-link :to="{ name: 'Home' }" class="no-link">
-                            Home
-                        </router-link>
-                    </b-nav-item>
-                    <b-nav-item href="#">
-                        <router-link :to="{ name: 'Home' }" class="no-link">
-                            About
-                        </router-link>
-                    </b-nav-item>
-                    <b-nav-item href="#">
-                        <router-link :to="{ name: 'Characters' }" class="no-link">
-                            Characters
-                        </router-link>
-                    </b-nav-item>
-                </b-navbar-nav>
-            </b-collapse>
-        </b-navbar>
-        <ais-instant-search
-            index-name="prod_THEOFFICEQUOTES" :search-client="searchClient"
-            :insights-client="insightsClient"
-        >
-            <b-container :fluid="true" class="py-2 px-lg-5 px-md-4">
-                <b-row class="my-3 pl-1" cols="12">
-                    <b-col lg="3" xl="2" md="12">
-                        <ais-search-box ref="searchbox" placeholder="Search here…" @keydown.native="showResults" />
-                        <Skeleton
-                            secondary_color="#3e3e3e" border_radius="1px"
-                            primary_color="#4A4A4A"
-                            :inner_style="{ 'min-height': '35.6px' }"
-                        />
-                    </b-col>
-                </b-row>
-                <b-row align-h="start" cols="12">
-                    <b-col lg="3" xl="2" md="12">
-                        <SeasonList />
-                    </b-col>
-                    <b-col lg="8" xl="7" md="12" class="pt-md-2 pt-lg-0">
-                        <router-view />
-                        <Footer :build-moment="buildMoment" />
-                    </b-col>
-                </b-row>
-            </b-container>
-            <ais-configure :click-analytics="true" />
-        </ais-instant-search>
+        <div class="wrapper">
+            <b-navbar>
+                <b-navbar-brand>
+                    <router-link :to="{ name: 'Home' }" class="no-link">
+                        The Office
+                    </router-link>
+                    <b-badge v-if="showBreakpointMarker" style="font-size: 0.80rem;" class="mx-2" variant="dark">
+                        <span id="marker-xs" class="d-sm-none">XS</span>
+                        <span id="marker-sm" class="d-none d-sm-block d-md-none">SM</span>
+                        <span id="marker-md" class="d-none d-md-block d-lg-none">MD</span>
+                        <span id="marker-lg" class="d-none d-lg-block d-xl-none">LG</span>
+                        <span id="marker-xl" class="d-none d-xl-block">XL</span>
+                    </b-badge>
+                </b-navbar-brand>
+                <b-collapse id="nav-collapse" is-nav>
+                    <b-navbar-nav>
+                        <b-nav-item href="#">
+                            <router-link :to="{ name: 'Home' }" class="no-link">
+                                Home
+                            </router-link>
+                        </b-nav-item>
+                        <b-nav-item href="#">
+                            <router-link :to="{ name: 'Home' }" class="no-link">
+                                About
+                            </router-link>
+                        </b-nav-item>
+                        <b-nav-item href="#">
+                            <router-link :to="{ name: 'Characters' }" class="no-link">
+                                Characters
+                            </router-link>
+                        </b-nav-item>
+                    </b-navbar-nav>
+                </b-collapse>
+            </b-navbar>
+            <ais-instant-search
+                index-name="prod_THEOFFICEQUOTES" :search-client="searchClient"
+                :insights-client="insightsClient"
+            >
+                <b-container :fluid="true" class="py-2 px-lg-5 px-md-4">
+                    <b-row class="my-3 pl-1" cols="12">
+                        <b-col lg="3" xl="2" md="12">
+                            <ais-search-box ref="searchbox" placeholder="Search here…" @keydown.native="showResults" />
+                            <Skeleton
+                                secondary_color="#3e3e3e" border_radius="1px"
+                                primary_color="#4A4A4A"
+                                :inner_style="{ 'min-height': '35.6px' }"
+                            />
+                        </b-col>
+                    </b-row>
+                    <b-row align-h="start" cols="12">
+                        <b-col lg="3" xl="2" md="12">
+                            <SeasonList />
+                        </b-col>
+                        <b-col lg="8" xl="7" md="12" class="pt-md-2 pt-lg-0">
+                            <router-view />
+                        </b-col>
+                    </b-row>
+                </b-container>
+                <ais-configure :click-analytics="true" />
+            </ais-instant-search>
+            <Footer :build-moment="buildMoment" />
+        </div>
     </div>
 </template>
 
 <style lang="scss">
-html, body {
+html, body, #app {
     min-height: 100vh;
+    height: 100%;
 }
 
 #app {
+    height: 100%;
     min-height: 100vh;
+
+    .wrapper {
+        min-height: 100%;
+        position: relative;
+        padding-bottom: 150px;
+    }
 }
+
 .ais-InstantSearch {
     height: 100%;
 }
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 330e01e..23474f9 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="footer-dark">
-        <footer>
+    <div class="outer-footer">
+        <footer class="inner-footer">
             <b-container>
                 <b-row style="text-align: center">
                     <ul>
@@ -47,10 +47,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.footer-dark {
-    margin-top: auto;
+.outer-footer {
+    height: 100px;
+    width:100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+}
 
-    padding: 50px 0;
+.inner-footer {
+    margin: 0 auto;
+    height: 100%;
     color: #6d6d6d;
 
     .build-time {