From 2e697904c9642359a8c4e8e1942f9cd6c5a39bc7 Mon Sep 17 00:00:00 2001
From: Hykilpikonna <admin@moecraft.cc>
Date: Wed, 21 Aug 2019 14:19:39 +0800
Subject: [PATCH] [+] Add an overlay to the login panel

---
 src/components/login/login.scss | 31 +++++++++++++++++++++++++++++++
 src/components/login/login.vue  | 14 ++++++++------
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/components/login/login.scss b/src/components/login/login.scss
index 9fae66c..37d8bff 100644
--- a/src/components/login/login.scss
+++ b/src/components/login/login.scss
@@ -1,6 +1,37 @@
 
 // Parent div for login
 #login
+{
+
+}
+
+// Parent overlay
+.login-overlay
+{
+    // Credit to w3schools.com:
+    // https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp
+
+    // Fill entire screen
+    height: 100%;
+    width: 100%;
+    left: 0;
+    top: 0;
+
+    // Stay in place
+    position: fixed;
+
+    // Sit on top layer
+    z-index: 1;
+
+    // Overlay color
+    background-color: rgba(0,0,0, 0.65);
+
+    // Disable horizontal scroll
+    overflow-x: hidden;
+}
+
+// The user interacting panel
+.login-panel
 {
     // Make it smaller
     width: 300px;
diff --git a/src/components/login/login.vue b/src/components/login/login.vue
index cd409d5..82e9bf0 100644
--- a/src/components/login/login.vue
+++ b/src/components/login/login.vue
@@ -1,10 +1,12 @@
 <template>
-    <div id="login">
-        <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">Login</el-button>
+    <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">Login</el-button>
+        </div>
     </div>
 </template>