fix(footer,layout): moved footer to layout, and using sticky position for footer

Author: technikhil314

components/footer.vue

@@ -1,6 +1,6 @@
 <template>
   <footer
-    class="py-4 mt-4 text-center text-gray-800  bg-inherit dark:text-gray-50 min-h-max"
+    class="sticky py-4 mt-4 text-center text-gray-800  top-full bg-inherit dark:text-gray-50 min-h-max"
   >
     Made with &hearts; using
     <a

layouts/main.vue

@@ -2,5 +2,6 @@
   <div class="page-root">
     <Toast />
     <Nuxt />
+    <Footer />
   </div>
 </template>

pages/diff.vue

@@ -82,16 +82,13 @@
         </div>
       </div>
     </main>
-    <Footer />
   </div>
 </template>
 
 <script>
 import pako from 'pako'
 import { undoUrlSafeBase64, escapeHtml } from '../helpers/utils'
-import Footer from '~/components/footer.vue'
 export default {
-  components: { Footer },
   layout: 'main',
   data() {
     return {

pages/index.vue

@@ -14,13 +14,13 @@
       </section>
       <form class="flex flex-col w-full gap-4" @submit="checkForm">
         <section class="flex w-full gap-4">
-          <div class="flex flex-col flex-wrap w-1/2 gap-4">
+          <div class="flex flex-col w-1/2 gap-4">
             <label for="lhsLabel" class="relative">
               <input
                 id="lhsLabel"
                 name="lhsLabel"
                 type="text"
-                class="flex-1 flex-grow-0 w-full bg-transparent rounded-md  material-input"
+                class="flex-1 flex-grow-0 w-full bg-transparent rounded-md"
                 placeholder="Add label to this text block"
               />
             </label>
@@ -31,12 +31,12 @@
               class="flex-1 w-full bg-transparent rounded-md resize-none  form-textarea"
             ></textarea>
           </div>
-          <div class="flex flex-col flex-wrap w-1/2 gap-4">
+          <div class="flex flex-col w-1/2 gap-4">
             <input
               id="rhsLabel"
               name="rhsLabel"
               type="text"
-              class="flex-1 flex-grow-0 w-full bg-transparent rounded-md  material-input"
+              class="flex-1 flex-grow-0 w-full bg-transparent rounded-md"
               placeholder="Add label to this text block"
             />
             <textarea
@@ -56,7 +56,6 @@
         </div>
       </form>
     </main>
-    <Footer />
   </div>
 </template>
 

pages/v1/diff.vue

@@ -94,16 +94,13 @@
         </div>
       </section>
     </main>
-    <Footer />
   </div>
 </template>
 
 <script>
 import pako from 'pako'
 import { undoUrlSafeBase64, escapeHtml } from '../../helpers/utils'
-import Footer from '~/components/footer.vue'
 export default {
-  components: { Footer },
   layout: 'main',
   data() {
     return {

styles/global.scss

@@ -26,11 +26,12 @@ body {
 
 .page-root {
   @apply flow-root w-full;
+  min-height: 100vh;
 }
 
 .page-contents {
   @apply grid;
-  grid-template-rows: 70px 1fr 70px;
+  grid-template-rows: 70px 1fr;
 }
 
 main {