fix template -> sticky footer

src/components/authentication/TheLogin.vue

@@ -221,6 +221,7 @@ export default {
           localStorage.setItem("name", response.data.user.name);
           localStorage.setItem("email", response.data.user.email);
           localStorage.setItem("notelbimbit", response.data.user.notelbimbit);
+          localStorage.setItem("username", response.data.user.username);
           this.$router.push({ name: "home" });
           console.log(response);
         })

src/components/bid-record/BidRecordList.vue

@@ -7,7 +7,7 @@
       <span class="visually-hidden">Loading...</span>
     </div>
   </div>
-  <div v-else style="min-height: 70vh" class="">
+  <div v-else class="">
     <div class="container">
       <div v-if="isSuccess" class="accordion" id="accordionExample">
         <div v-for="bid in listBid" v-bind:key="bid" class="accordion-item">

src/components/home/LelongToday.vue

@@ -27,7 +27,7 @@
       </tbody>
       <tbody v-else>
         <tr>
-          <td colspan="3">Tiada Data</td>
+          <td colspan="100">Tiada Data</td>
         </tr>
       </tbody>
     </table>

src/components/layouts/TheHeader.vue

@@ -41,7 +41,7 @@
           data-bs-toggle="dropdown"
           aria-expanded="false"
         >
-          <i class="bi bi-person-circle me-1"></i>Hi, {{ name }}!
+          <i class="bi bi-person-circle me-1"></i>{{ username }}!
         </div>
         <ul class="dropdown-menu">
           <li>
@@ -66,7 +66,7 @@ import axios from "axios";
 export default {
   data() {
     return {
-      name: localStorage.getItem("name"),
+      username: localStorage.getItem("username"),
     };
   },
   methods: {

src/components/layouts/TheTemplate.vue

@@ -1,12 +1,14 @@
 <template>
-  <div>
-    <the-header />
-    <div>
+  <div class="content-page">
+    <div class="content">
+      <the-header />
       <div class="container pt-5">
         <slot></slot>
       </div>
     </div>
-    <the-footer />
+    <footer class="footer">
+      <the-footer />
+    </footer>
   </div>
 </template>
 
@@ -23,6 +25,19 @@ export default {
 </script>
 
 <style scoped>
+.content-page {
+  position: relative;
+  /* overflow: hidden; */
+  padding: 0 0 70px;
+  min-height: 100vh;
+}
+
+.footer {
+  bottom: 0;
+  position: absolute;
+  color: #98a6ad;
+  width: 100%;
+}
 </style>
 
 

src/components/result/ResultMain.vue

@@ -7,7 +7,7 @@
       <span class="visually-hidden">Loading...</span>
     </div>
   </div>
-  <div v-else style="min-height: 70vh" class="container">
+  <div v-else class="container">
     <table class="table table-bordered table-hover">
       <thead>
         <tr>
@@ -18,7 +18,7 @@
           <th scope="col">Penyata</th>
         </tr>
       </thead>
-      <tbody v-if="lelongStatus">
+      <tbody v-if="isSuccess">
         <tr v-for="(data, index) in lelong" v-bind:key="data">
           <td>{{ index + 1 }}</td>
           <td class="btn text-primary" style="" v-on:click="selectDate(data)">
@@ -38,7 +38,7 @@
       </tbody>
       <tbody v-else>
         <tr>
-          <td colspan="4">Tiada Data</td>
+          <td colspan="100">Tiada Data</td>
         </tr>
       </tbody>
     </table>
@@ -56,7 +56,7 @@ export default {
   data() {
     return {
       lelong: "",
-      lelongStatus: true,
+      isSuccess: false,
       loading: false,
     };
   },
@@ -80,9 +80,10 @@ export default {
           this.loading = false;
           console.log(response);
           if (response.data.success === true) {
+            this.isSuccess = true;
             this.lelong = response.data.lelong;
           } else {
-            this.lelongStatus = false;
+            this.isSuccess = false;
           }
         })
         .catch((error) => {