fix: login page height + forms button on the right side

threefoldtech · Aug 29, 2024 · ed72533 · ed72533
1 parent 380c7d1
commit ed72533
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 115 deletions.
diff --git a/frontend/src/components/CreateFlist.vue b/frontend/src/components/CreateFlist.vue
@@ -198,8 +198,12 @@
                 >
                 </v-text-field>
               </div>
-
-              <v-btn
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col offset="8" class="pa-0">
+              <div class="position-relative" style="left: -5%;" >
+                <v-btn
                 class="pr-5 rounded-pill background-green mb-8 mt-5 text-white"
                 size="large"
                 width="50%"
@@ -209,17 +213,18 @@
                 >
               Create
               </v-btn>
-                <v-progress-linear
-            :size="70"
-            color="#1aa18f"
-            indeterminate
-            class="mb-5 mt-5 w-25"
-            rounded=""
-            height="20"
-            v-else
-          >
-            <template v-slot:default> {{ progress }} % </template>
-          </v-progress-linear>
+              <v-progress-linear
+                :size="70"
+                color="#1aa18f"
+                indeterminate
+                class="mb-5 mt-5 w-50"
+                rounded=""
+                height="20"
+                v-else
+              >
+              <template v-slot:default> {{ progress }} % </template>
+              </v-progress-linear>
+              </div>
             </v-col>
           </v-row>
         </v-form>
@@ -251,7 +256,7 @@ const pullLists = async () => {
     } else {
       stopPolling.value = true;
       pending.value = false;
-      router.push({name: "flists"})
+      router.push({name: "myflists"})
     }
   } catch (error: any) {
     pending.value = false;

diff --git a/frontend/src/components/FollowUp.vue b/frontend/src/components/FollowUp.vue
diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
@@ -1,7 +1,7 @@
 <template>
-  <v-container fluid class="overflow-hidden pa-0">
-    <v-row>
-      <v-col :cols="4" class="position-relative">
+  <v-container fluid class="overflow-hidden pa-0" style="height: 100vh;">
+    <v-row class="h-100 ma-0 pa-0">
+      <v-col :cols="4" class="position-relative ma-0 pa-0 h-100">
         <v-img :src="image" cover height="100%" style="z-index: 900"> </v-img>
         <v-container
           class="position-absolute top-0 d-flex flex-column justify-center ga-0"
@@ -58,14 +58,15 @@
                 required
               >
               </v-text-field>
-              <v-btn
-                class="pr-5 rounded-pill background-green text-white"
+                   <v-btn
+                class="pr-5 rounded-pill background-green text-white position-relative"
+                style="left: 205px;"
                 size="large"
                 width="50%"
                 :disabled="loading"
                 @click="login"
-                >Sign In</v-btn
-              >
+                >Sign In</v-btn>
+
             </v-form>
           </v-col>
         </v-container>
@@ -104,7 +105,7 @@ const visible = ref<boolean>(false);
       }
       return config;
     });
-    router.push("/flists")
+    router.push("/myflists")
   } catch (error: any) {
     toast.error(error.response?.data || "error occured");
   }

diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
@@ -27,7 +27,7 @@
         </template>
         <v-list>
           <v-list-item>
-            <v-btn><a href="/flists" class="text-black" style="text-decoration:none;">My FLists</a></v-btn>
+            <v-btn><a href="/myflists" class="text-black" style="text-decoration:none;">My FLists</a></v-btn>
           </v-list-item>
           <v-list-item>
             <v-btn @click="logout"

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
@@ -12,8 +12,8 @@ const routes: Array<RouteRecordRaw> = [
     component: Login,
   },
   {
-    path: "/flists",
-    name: "flists",
+    path: "/myflists",
+    name: "myflists",
     component: UserFlist,
     meta: { requireAuth: true },
   },
@@ -43,7 +43,7 @@ const router = createRouter({
 router.beforeEach((to, _, next) => {
   const token: string | null = sessionStorage.getItem("token");
   if (to.meta.requiresAuth && token === null) {
-    next({ name: "Login" });
+    next({ name: "login" });
   } else {
     next();
   }