From 2e750b862c6b500dc755d9eb9ed23316a0fc3751 Mon Sep 17 00:00:00 2001
From: Salma Elsoly <salmaelsoly@gmail.com>
Date: Wed, 21 Aug 2024 12:11:08 +0300
Subject: [PATCH] fix: footer size to have fixed size across all pages

---
 frontend/src/components/CreateFlist.vue |  8 +++++++-
 frontend/src/components/Footer.vue      | 22 +++++++++++++++++-----
 frontend/src/components/Home.vue        |  8 ++++++--
 frontend/src/components/UserFlist.vue   | 18 ++++++++++--------
 4 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/CreateFlist.vue b/frontend/src/components/CreateFlist.vue
index 328d260..71574e5 100644
--- a/frontend/src/components/CreateFlist.vue
+++ b/frontend/src/components/CreateFlist.vue
@@ -1,7 +1,7 @@
 <template>
   <v-app>
     <Navbar />
-    <v-main class="d-flex flex-column justify-center" height="90%">
+    <v-main class="d-flex flex-column justify-center mn-height" >
       <v-container fluid>
         <v-row justify="center">
           <v-col cols="8">
@@ -247,3 +247,9 @@ const create = async () => {
   }
 };
 </script>
+
+<style>
+.mn-height {
+  min-height: calc(100% - 6%);
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
index 311690b..41287b6 100644
--- a/frontend/src/components/Footer.vue
+++ b/frontend/src/components/Footer.vue
@@ -1,10 +1,22 @@
 <template>
-  <v-footer class="bg-grey-darken-3 d-flex justify-center">
-    All rights reserved © 2024 - <a href="https://threefold.io" style="color: inherit; text-decoration: none;">
-      ThreeFold <v-icon icon="mdi-link" style="font-size: 1em;"/>
+  <v-footer class="bg-grey-darken-3 d-flex justify-center w-100 m-0">
+    All rights reserved © 2024 -
+    <a
+      href="https://threefold.io"
+      style="color: inherit; text-decoration: none"
+    >
+      ThreeFold <v-icon icon="mdi-link" style="font-size: 1em" />
     </a>
-    <a href="https://github.com/threefoldtech" style="color: inherit; text-decoration: none;">
+    <a
+      href="https://github.com/threefoldtech"
+      style="color: inherit; text-decoration: none"
+    >
       <v-icon icon="mdi-github" style="margin-left: 7px" />
     </a>
   </v-footer>
-</template>
\ No newline at end of file
+</template>
+<style>
+.v-footer {
+  height: 100px !important;
+}
+</style>
diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
index 92da00f..36ad788 100644
--- a/frontend/src/components/Home.vue
+++ b/frontend/src/components/Home.vue
@@ -1,7 +1,7 @@
 <template>
   <v-app>
     <Navbar></Navbar>
-    <div class="w-100 position-relative" style="height: 30%">
+    <div class="w-100 position-relative" >
       <v-img :src="image" cover style="z-index: 2"></v-img>
       <!-- <div
         class="position-absolute text-white"
@@ -11,7 +11,7 @@
       </div> -->
     </div>
 
-    <v-main class="d-flex justify-center mt-0" style="height: fit-content">
+    <v-main class="d-flex justify-center mt-0 mn-height">
       <v-navigation-drawer
         elevation="2"
         app
@@ -164,4 +164,8 @@ watch(username, () => {
 .v-data-table-footer__items-per-page {
   display: none !important; 
 }
+
+.mn-height {
+  min-height: calc(100% - 7%);
+}
 </style>
diff --git a/frontend/src/components/UserFlist.vue b/frontend/src/components/UserFlist.vue
index d34f389..0a8bfcb 100644
--- a/frontend/src/components/UserFlist.vue
+++ b/frontend/src/components/UserFlist.vue
@@ -1,7 +1,7 @@
 <template>
   <v-app>
     <Navbar />
-    <v-main>
+    <v-main class="mn-height">
       <v-container class="pa-0">
         <v-row no-gutters class="pa-0 ma-0">
           <div class="user">
@@ -12,16 +12,17 @@
           </div>
         </v-row>
         <v-row no-gutters class="pa-0 ma-0">
-          <v-data-table density="compact"
+          <v-data-table
+            density="compact"
             v-if="loggedInUser"
             :items="currentUserFlists"
             :headers="tableHeader"
             dense
             items-per-page="25"
-            class = "thick-border"
+            class="thick-border"
           >
             <template #item.name="{ value }">
-              <v-icon icon="mdi-text-box" class="mr-1"  color="grey"/>
+              <v-icon icon="mdi-text-box" class="mr-1" color="grey" />
               <span class="file-name">{{ value }}</span>
             </template>
             <template #item.size="{ value }">
@@ -41,7 +42,7 @@
                   @click="copyLink(baseURL + `/` + value)"
                   class="elevation-0"
                 >
-                  <v-icon icon="mdi-content-copy" color="grey" ></v-icon>
+                  <v-icon icon="mdi-content-copy" color="grey"></v-icon>
                   <v-tooltip activator="parent">Copy Link</v-tooltip>
                 </v-btn>
               </template>
@@ -129,7 +130,7 @@ onMounted(async () => {
   }
 }
 .thick-border .v-data-table__wrapper {
-  border: 3px solid #000; 
+  border: 3px solid #000;
 }
 .v-data-table-header th {
   padding: 4px 8px;
@@ -143,9 +144,10 @@ onMounted(async () => {
   font-weight: bold; /* Increased font weight */
 }
 
-
 .file-name {
   font-weight: bold; /* Increased font weight for file names */
 }
-
+.mn-height {
+  min-height: calc(100% - 6%);
+}
 </style>