Merge branch 'styling'

src/components/login/login.scss

@@ -28,13 +28,23 @@
 
     // 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
 .login-panel
 {
     // Make it smaller
-    width: 300px;
+    width: 256px;
 
     // Center
     margin-left: auto;
@@ -43,12 +53,9 @@
     // Borders
     padding: 15px;
     border-radius: 10px;
-    box-shadow: 0 0 20px 0 white;
+    // box-shadow: 0 0 20px 0 white;
     border: 1px solid #DCDFE6;
 
-    // Vertical center
-    transform: translateY(50%);
-
     // Make it white
     background-color: white;
 

src/components/login/login.vue

@@ -1,11 +1,13 @@
 <template>
     <div id="login" class="login-overlay">
-        <div class="login-panel">
+        <div class="login-vertical-center">
-            <img alt="Vue logo" src="../../assets/logo.png">
+            <div class="login-panel">
-            <h1>Veracross Analyzer</h1>
+                <img alt="Vue logo" src="../../assets/logo.png">
-            <el-input v-model="username" placeholder="School Username"></el-input>
+                <h1>Veracross Analyzer</h1>
-            <el-input v-model="password" placeholder="Veracross Password" show-password=""></el-input>
+                <el-input v-model="username" placeholder="School Username"></el-input>
-            <el-button plain type="primary" @click="onLoginClick" :loading="loading">Login</el-button>
+                <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>