From fac4c86b2dab78de524636a1f0aa4bb6144e2b92 Mon Sep 17 00:00:00 2001
From: Hykilpikonna <admin@moecraft.cc>
Date: Wed, 21 Aug 2019 22:55:09 +0800
Subject: [PATCH] [F] Fix vertical center on mobile devices

---
 src/components/login/login.scss | 13 ++++++++++---
 src/components/login/login.vue  | 14 ++++++++------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/login/login.scss b/src/components/login/login.scss
index 9b9a972..f761f5a 100644
--- a/src/components/login/login.scss
+++ b/src/components/login/login.scss
@@ -28,6 +28,16 @@
 
     // Disable horizontal scroll
     overflow-x: hidden;
+
+    // Make it a table for vertical centering
+    display: table;
+}
+
+.login-vertical-center
+{
+    // Vertically center
+    display: table-cell;
+    vertical-align: middle;
 }
 
 // The user interacting panel
@@ -46,9 +56,6 @@
     box-shadow: 0 0 20px 0 white;
     border: 1px solid #DCDFE6;
 
-    // Vertical center
-    transform: translateY(50%);
-
     // Make it white
     background-color: white;
 
diff --git a/src/components/login/login.vue b/src/components/login/login.vue
index fbc940e..31d14aa 100644
--- a/src/components/login/login.vue
+++ b/src/components/login/login.vue
@@ -1,11 +1,13 @@
 <template>
     <div id="login" class="login-overlay">
-        <div class="login-panel">
-            <img alt="Vue logo" src="../../assets/logo.png">
-            <h1>Veracross Analyzer</h1>
-            <el-input v-model="username" placeholder="School Username"></el-input>
-            <el-input v-model="password" placeholder="Veracross Password" show-password=""></el-input>
-            <el-button plain type="primary" @click="onLoginClick" :loading="loading">Login</el-button>
+        <div class="login-vertical-center">
+            <div class="login-panel">
+                <img alt="Vue logo" src="../../assets/logo.png">
+                <h1>Veracross Analyzer</h1>
+                <el-input v-model="username" placeholder="School Username"></el-input>
+                <el-input v-model="password" placeholder="Veracross Password" show-password=""></el-input>
+                <el-button plain type="primary" @click="onLoginClick" :loading="loading">Login</el-button>
+            </div>
         </div>
     </div>
 </template>