Merge branch 'development_fl_server_frontend' of https://github.com/t…

…hreefoldtech/rfs into development_fl_server_frontend

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>

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>
+</template>
+<style>
+.v-footer {
+  height: 100px !important;
+}
+</style>

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,8 +11,8 @@
       </div> -->
     </div>
 
-    <v-main class="d-flex justify-center mt-0" style="height: fit-content">
-      <v-navigation-drawer 
+    <v-main class="d-flex justify-center mt-0 mn-height">
+      <v-navigation-drawer
         elevation="2"
         app
         class="position-absolute mx-height"
@@ -164,4 +164,8 @@ watch(username, () => {
 .v-data-table-footer__items-per-page {
   display: none !important; 
 }
+
+.mn-height {
+  min-height: calc(100% - 7%);
+}
 </style>

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 td {
@@ -138,9 +139,10 @@ onMounted(async () => {
   font-weight: bold;
 }
 
-
 .file-name {
   font-weight: bold;
 }
-
+.mn-height {
+  min-height: calc(100% - 6%);
+}
 </style>