feat(login): optimize login page and add icon (#15)

* feat(login): optimize login page and add icon * chore: bump version
swpu-acm · Nov 19, 2024 · 496a065 · 496a065
1 parent af8ed4d
commit 496a065
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 81 deletions.
diff --git a/.changes/add-icon.md b/.changes/add-icon.md
@@ -0,0 +1,5 @@
+---
+"algohub": patch:feat
+---
+
+Optimize login UI and add icon in login page
diff --git a/public/acm-light.png b/public/acm-light.png
diff --git a/public/acm.png b/public/acm.png
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
diff --git a/src/assets/tailwind.css b/src/assets/tailwind.css
@@ -588,49 +588,76 @@ video {
   }
 }
 
+.m-10 {
+  margin: 2.5rem;
+}
+
+.m-8 {
+  margin: 2rem;
+}
+
 .m-0 {
   margin: 0px;
 }
 
-.m-10 {
-  margin: 2.5rem;
+.m-6 {
+  margin: 1.5rem;
 }
 
-.m-12 {
-  margin: 3rem;
+.m-3 {
+  margin: 0.75rem;
 }
 
-.my-12 {
-  margin-top: 3rem;
-  margin-bottom: 3rem;
+.mb-10 {
+  margin-bottom: 2.5rem;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
+.mt-3 {
+  margin-top: 0.75rem;
 }
 
-.mr-12 {
-  margin-right: 3rem;
+.mt-6 {
+  margin-top: 1.5rem;
 }
 
 .flex {
   display: flex;
 }
 
-.h-screen {
-  height: 100vh;
+.grid {
+  display: grid;
+}
+
+.hidden {
+  display: none;
 }
 
 .h-full {
   height: 100%;
 }
 
+.h-screen {
+  height: 100vh;
+}
+
+.max-h-full {
+  max-height: 100%;
+}
+
 .w-full {
   width: 100%;
 }
 
-.flex-row {
-  flex-direction: row;
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.grid-rows-2 {
+  grid-template-rows: repeat(2, minmax(0, 1fr));
 }
 
 .flex-col {
@@ -645,36 +672,16 @@ video {
   justify-content: center;
 }
 
-.gap-2 {
-  gap: 0.5rem;
-}
-
-.gap-3 {
-  gap: 0.75rem;
-}
-
-.gap-4 {
-  gap: 1rem;
-}
-
 .gap-1 {
   gap: 0.25rem;
 }
 
-.p-2 {
-  padding: 0.5rem;
-}
-
-.p-10 {
-  padding: 2.5rem;
-}
-
-.p-12 {
-  padding: 3rem;
+.gap-2 {
+  gap: 0.5rem;
 }
 
-.p-4 {
-  padding: 1rem;
+.gap-4 {
+  gap: 1rem;
 }
 
 .p-6 {
@@ -691,11 +698,6 @@ video {
   padding-bottom: 3rem;
 }
 
-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
-}
-
 .text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
@@ -714,8 +716,64 @@ video {
   text-decoration-line: underline;
 }
 
+@media (min-width: 640px) {
+  .sm\:grid-rows-2 {
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+  }
+}
+
 @media (min-width: 768px) {
+  .md\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
+  .md\:m-2 {
+    margin: 0.5rem;
+  }
+
+  .md\:m-10 {
+    margin: 2.5rem;
+  }
+
+  .md\:m-0 {
+    margin: 0px;
+  }
+
+  .md\:block {
+    display: block;
+  }
+
+  .md\:flex {
+    display: flex;
+  }
+
+  .md\:hidden {
+    display: none;
+  }
+
+  .md\:h-full {
+    height: 100%;
+  }
+
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
 }
+
+@media (min-width: 1024px) {
+  .lg\:col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+
+  .lg\:w-full {
+    width: 100%;
+  }
+
+  .lg\:grid-rows-2 {
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+  }
+}
diff --git a/src/views/index.vue b/src/views/index.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from "vue";
-import { useToast } from 'primevue/usetoast';
 import { useRouter } from 'vue-router';
 
-const toast = useToast();
 const router = useRouter();
 
 onMounted(() => {

diff --git a/src/views/login.vue b/src/views/login.vue
@@ -52,42 +52,47 @@ const onLogin = async ({ valid }: { valid: boolean }) => {
 
 <template>
   <main class="w-full h-screen">
-    <div class="flex flex-col md:flex-row h-full w-full">
-      <div class="flex items-center justify-center h-full w-full">
-        <h1 class="text-4xl font-bold">ACM Algorithm Hub</h1>
+    <div class="grid md:grid-cols-2 gap-2 h-full">
+      <div class="grid">
+        <div class="flex flex-col items-center justify-center h-full w-full">
+          <Image class="hidden md:flex" src="/acm-light.png" alt="Image" width="250" />
+          <h1 class="text-4xl font-bold mt-6 md:m-0">ACM Algorithm Hub</h1>
+        </div>
       </div>
-      <Card class="m-10 px-6 py-12 w-full">
-        <template #title>Welcome to ACM Algorithm Hub</template>
-        <template #subtitle>Association of Computing Machinery affiliated with SWPU</template>
-        <template #content class="h-full">
-          <Form v-slot="$form" :initialValues :resolver @submit="onLogin"
-            class="flex flex-col p-6 gap-4 h-full items-center justify-center">
-            <div class="flex flex-col gap-1 w-full">
-              <InputText name="identity" type="text" placeholder="Username or Email" fluid />
-              <Message v-if="$form.identity?.invalid" severity="error" size="small" variant="simple">{{
-                $form.identity.error.message }}</Message>
-            </div>
-            <div class="flex flex-col gap-1 w-full">
-              <Password name="password" type="text" placeholder="Password" :feedback="false" toggleMask fluid />
-              <Message v-if="$form.password?.invalid" severity="error" size="small" variant="simple">{{
-                $form.password.error.message }}</Message>
-            </div>
-            <div class="flex flex-col gap-1 w-full">
-              <div class="flex items-center gap-2">
-                <Checkbox inputId="terms" name="terms" binary />
-                <label for="terms" class="text-sm">I have read and agree to the <a href="#" class="underline">Affero
-                    General Public License v3</a>.</label>
+      <div class="grid md:h-full lg:w-full">
+        <Card class="m-10 px-6 py-12">
+          <template #title>Welcome to ACM Algorithm Hub</template>
+          <template #subtitle>Association of Computing Machinery affiliated with SWPU</template>
+          <template #content class="h-full">
+            <Form v-slot="$form" :initialValues :resolver @submit="onLogin"
+              class="flex flex-col p-6 gap-4 h-full items-center justify-center">
+              <div class="flex flex-col gap-1 w-full">
+                <InputText name="identity" type="text" placeholder="Username or Email" fluid />
+                <Message v-if="$form.identity?.invalid" severity="error" size="small" variant="simple">{{
+                  $form.identity.error.message }}</Message>
               </div>
-              <Message v-if="$form.terms?.invalid" severity="error" size="small" variant="simple">{{
-                $form.terms.error.message }}</Message>
-            </div>
-            <p>Do not have an account? <a @click="router.push('/signup')" class="underline">Sign up</a></p>
-            <Button type="submit" label="Login" class="w-full" secondary></Button>
-          </Form>
-        </template>
-        <template #footer>
-        </template>
-      </Card>
+              <div class="flex flex-col gap-1 w-full">
+                <Password name="password" type="text" placeholder="Password" :feedback="false" toggleMask fluid />
+                <Message v-if="$form.password?.invalid" severity="error" size="small" variant="simple">{{
+                  $form.password.error.message }}</Message>
+              </div>
+              <div class="flex flex-col gap-1 w-full">
+                <div class="flex items-center gap-2">
+                  <Checkbox inputId="terms" name="terms" binary />
+                  <label for="terms" class="text-sm">I have read and agree to the <a href="#" class="underline">Affero
+                      General Public License v3</a>.</label>
+                </div>
+                <Message v-if="$form.terms?.invalid" severity="error" size="small" variant="simple">{{
+                  $form.terms.error.message }}</Message>
+              </div>
+              <p>Do not have an account? <a @click="router.push('/signup')" class="underline">Sign up</a></p>
+              <Button type="submit" label="Login" class="w-full" secondary></Button>
+            </Form>
+          </template>
+          <template #footer>
+          </template>
+        </Card>
+      </div>
     </div>
   </main>
 </template>