From eb97a7e67b87145c45b67af517a6b340c89956b6 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Sun, 22 Nov 2020 18:14:20 +0200
Subject: [PATCH] Fix footer

---
 src/layouts/Default.vue         | 48 +++++++++++++++++++--------------
 src/layouts/partials/Navbar.vue |  6 ++++-
 src/pages/Index.vue             | 29 ++++++++++----------
 src/pages/News.vue              | 36 ++++++++++++++-----------
 src/templates/Search.vue        | 14 +++++++---
 5 files changed, 78 insertions(+), 55 deletions(-)

diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
index 31fab9ac8..874a25722 100644
--- a/src/layouts/Default.vue
+++ b/src/layouts/Default.vue
@@ -1,8 +1,16 @@
 <template>
-  <div id="app" dark class="min-h-screen flex flex-col font-sans">
-    <HeaderPartial v-if="hideHeader!=true" @setTheme="setTheme" :theme="this.theme"></HeaderPartial>
-    <slot/>
-    <NavbarPartial :disableScroll="disableScroll" @setTheme="setTheme" :theme="this.theme"></NavbarPartial>
+  <div id="app" dark class="flex flex-col font-sans">
+    <HeaderPartial
+      v-if="hideHeader != true"
+      @setTheme="setTheme"
+      :theme="this.theme"
+    ></HeaderPartial>
+    <NavbarPartial
+      :disableScroll="disableScroll"
+      @setTheme="setTheme"
+      :theme="this.theme"
+    ></NavbarPartial>
+    <slot />
     <FooterPartial></FooterPartial>
   </div>
 </template>
@@ -16,41 +24,41 @@ query {
 </static-query>
 
 <script>
-import HeaderPartial from '~/layouts/partials/HeaderWithNavbar.vue'
-import NavbarPartial from '~/layouts/partials/Navbar.vue'
-import FooterPartial from '~/layouts/partials/Footer.vue'
+import HeaderPartial from "~/layouts/partials/HeaderWithNavbar.vue";
+import NavbarPartial from "~/layouts/partials/Navbar.vue";
+import FooterPartial from "~/layouts/partials/Footer.vue";
 
 export default {
   props: {
     hideHeader: {
       type: Boolean,
-      default: true
+      default: true,
     },
     disableScroll: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
-  data: function() {
+  data: function () {
     return {
-      theme: 'light'
+      theme: "light",
     };
   },
   methods: {
     setTheme(mode) {
-        this.theme = mode
-    }
+      this.theme = mode;
+    },
   },
   components: {
     HeaderPartial,
     NavbarPartial,
-    FooterPartial
+    FooterPartial,
   },
-  
+
   metaInfo: {
     bodyAttrs: {
-      class: "m-0 pt-12"
-    }
-  }
-}
+      class: "m-0 pt-12",
+    },
+  },
+};
 </script>
\ No newline at end of file
diff --git a/src/layouts/partials/Navbar.vue b/src/layouts/partials/Navbar.vue
index 3ddcc4505..42e62228f 100644
--- a/src/layouts/partials/Navbar.vue
+++ b/src/layouts/partials/Navbar.vue
@@ -200,7 +200,7 @@ export default {
       headerHeight: 0,
       isOpen: false,
       search: "",
-      open: false
+      open: false,
     };
   },
 
@@ -248,4 +248,8 @@ input:focus,
 button:focus {
   outline: 0;
 }
+
+.inset-0 {
+  z-index: 999;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 259f43270..8bc946e08 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -1,16 +1,16 @@
 <template>
   <Layout :hideHeader="true" :disableScroll="true">
-    <div class="container sm:pxi-0 mx-auto overflow-x-hidden">
-      <VacationCard img="" imgAlt="" eyebrow="" title="" pricing="" url="" />
-      <div class="flex flex-col">
-        <img class="py-20" src="/img/new_home.png" alt="" />
-        <div class="center py-10">
-          <!-- <h2 class="text-center">CO-CREATING BETTER FUTURES TOGETHER</h2> -->
-          <!-- <p class="text-center py-1">The ThreeFold Foundation is not ThreeFold — rather, it is sparking a movement to bring the world <br> a truly peer-to-peer internet. We acknowledge and support the many people and organizations around the world <br>  who bring crucial support to the growth and adoption of the ThreeFold Grid.</p> -->
-        </div>
+    <div class="container sm:pxi-0 mx-auto overflow-hidden">
+      <!-- <VacationCard img="" imgAlt="" eyebrow="" title="" pricing="" url="" /> -->
+      <div class="flex flex-col" :style="{ height: contentHeight + 'px' }">
+        <img src="/img/new_home.png" alt="" />
+        <!-- <div class="center py-10"> -->
+        <!-- <h2 class="text-center">CO-CREATING BETTER FUTURES TOGETHER</h2> -->
+        <!-- <p class="text-center py-1">The ThreeFold Foundation is not ThreeFold — rather, it is sparking a movement to bring the world <br> a truly peer-to-peer internet. We acknowledge and support the many people and organizations around the world <br>  who bring crucial support to the growth and adoption of the ThreeFold Grid.</p> -->
+        <!-- </div> -->
       </div>
 
-      <vue-markdown> </vue-markdown>
+      <!-- <vue-markdown> </vue-markdown> -->
     </div>
   </Layout>
 </template>
@@ -22,17 +22,16 @@ export default {
   metaInfo: {
     title: "Home",
   },
-
+  computed: {
+    contentHeight() {
+      return window.innerHeight - 128;
+    },
+  },
   components: {
     VueMarkdown,
   },
 };
 </script>
-<style scoped>
-/* h2 {
-  padding-bottom: 8rem;
-} */
-</style> >
 
 
 
diff --git a/src/pages/News.vue b/src/pages/News.vue
index d0b16ac64..e5d3ba75c 100644
--- a/src/pages/News.vue
+++ b/src/pages/News.vue
@@ -1,7 +1,10 @@
 <template>
   <Layout>
-    <div class="container sm:pxi-0 mx-auto overflow-x-hidden">
-      <div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4 h-screen">
+    <div
+      class="container sm:pxi-0 mx-auto overflow-hidden"
+      :style="{ height: contentHeight + 'px' }"
+    >
+      <div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
         <PostListItem
           v-for="edge in $page.entries.edges"
           :key="edge.node.id"
@@ -9,15 +12,15 @@
         />
       </div>
     </div>
-     <div class="pagination flex justify-center mb-8">
-        <Pagination
-          :baseUrl="baseurl"
-          :currentPage="$page.entries.pageInfo.currentPage"
-          :totalPages="$page.entries.pageInfo.totalPages"
-          :maxVisibleButtons="5"
-          v-if="$page.entries.pageInfo.totalPages > 1"
-        />
-      </div>
+    <div class="pagination flex justify-center mb-8">
+      <Pagination
+        :baseUrl="baseurl"
+        :currentPage="$page.entries.pageInfo.currentPage"
+        :totalPages="$page.entries.pageInfo.totalPages"
+        :maxVisibleButtons="5"
+        v-if="$page.entries.pageInfo.totalPages > 1"
+      />
+    </div>
   </Layout>
 </template>
 
@@ -62,12 +65,15 @@ export default {
   },
   components: {
     PostListItem,
-    Pagination
+    Pagination,
   },
   computed: {
-    baseurl: function() {
-     return ""
-    }
+    baseurl: function () {
+      return "";
+    },
+    contentHeight() {
+      return window.innerHeight - 160;
+    },
   },
 };
 </script>
diff --git a/src/templates/Search.vue b/src/templates/Search.vue
index 49549fa31..78ebf88cc 100644
--- a/src/templates/Search.vue
+++ b/src/templates/Search.vue
@@ -1,6 +1,9 @@
 <template>
   <Layout>
-    <div class="container sm:pxi-0 mx-auto">
+    <div
+      class="container sm:pxi-0 mx-auto"
+      :style="{ height: contentHeight + 'px' }"
+    >
       <img
         v-if="loading"
         class="m-auto"
@@ -18,8 +21,8 @@
         />
       </div>
       <div v-else class="flex flex-col with-large my-auto text-center">
-        <h1 class="py-1">No results</h1>
-        <p class="pb-5">OOPS! Something went wrong here</p>
+        <h1>404</h1>
+        <p>OOPS! Something went wrong here</p>
       </div>
     </div>
   </Layout>
@@ -131,6 +134,9 @@ export default {
       }
       return result;
     },
+    contentHeight() {
+      return window.innerHeight - 128;
+    },
   },
   mounted() {
     this.q = new URL(location.href).searchParams.get("query");
@@ -159,6 +165,6 @@ export default {
 
 <style scoped>
 h1 {
-  font-size: 3rem;
+  font-size: 13rem;
 }
 </style>