From 961f2f32b0f6e568ea2ea13d8aa82f6b560edfbe Mon Sep 17 00:00:00 2001
From: Gregory Rudolph <rudi@nightmare.haus>
Date: Thu, 14 Jan 2021 17:00:26 -0500
Subject: [PATCH] Add some CSS to status page

---
 static/components.js | 108 ++++++++++++++++++++++++-------------------
 1 file changed, 60 insertions(+), 48 deletions(-)

diff --git a/static/components.js b/static/components.js
index 9812c99..0212048 100644
--- a/static/components.js
+++ b/static/components.js
@@ -4,14 +4,27 @@ const style = `
 <style>
 .column {
     float: left;
-    width: 33.33%;
+    width: 24%;
+    height: 100%;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.137);
+    border-radius: 3%;
+    transition: 0.3s;
+    margin: 15px 3.33%;
+    padding: 12px 16px;
+    background-color: #282c34;
+    color: #FFFFFF;
+  }
+
+  .column:hover {
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.795);
   }
   
   /* Clear floats after the columns */
-  .row:after {
+  .row {
     content: "";
-    display: table;
     clear: both;
+    display: flex;
+    flex-wrap: wrap;
   }
 p {
     text-align: center;
@@ -67,53 +80,52 @@ ${style}
 
 configStatus.innerHTML = `
 ${style}
-<div class="container">
     <div class="row">
-    <div class="column">
-    <h4><p>Status</p></h4>
-    <p>Uptime: <slot name="uptime" /></p>
-    <p>Last Bump was <slot name="lastbump" /></p>
-    <p>by <slot id="lastbumper" name="lastbumper" /></p>
-    </div>
-    <div id="admin-stats" class="column">
-
-    <h4><p>Admin Stats</p></h4>
+        <div class="column">
+            <h4><p>Status</p></h4>
+            <p>Uptime: <slot name="uptime" /></p>
+            <p>Last Bump was <slot name="lastbump" /></p>
+            <p>by <slot id="lastbumper" name="lastbumper" /></p>
+        </div>
+        <br>
+        <div class="column">
+            <h4><p>Config</p></h4>
+            <form>
+                <label for="Guild">Guild: </label>
+                <input type="text" id="Guild" name="Guild" readonly/>
+                <label for="AdminChannel">Admin Channel: </label>
+                <input type="select" id="AdminChannel" name="AdminChannel"/>
+                <label for="AdminRole">Admin Role: </label>
+                <input type="select" id="AdminRole" name="AdminRole"/>
+                <label for="MonitorChannel">Monitor Channel: </label>
+                <input type="select" id="MonitorChannel" name="MonitorChannel"/>
+                <label for="MonitorRole">Monitor Role: </label>
+                <input type="select" id="MonitorRole" name="MonitorRole"/>
+                <label for="IntroChannel">Intro Channel: </label>
+                <input type="select" id="IntroChannel" name="IntroChannel"/>
+                <label for="VerifiedRole">Verified Role: </label>
+                <input type="select" id="VerifiedRole" name="VerifiedRole"/>
+                <label for="OutFile">Logging OutFile: </label>
+                <input type="text" id="OutFile" name="OutFile" />
+                <label for="KBTeam">KB Team: </label>
+                <input type="text" id="KBTeam" name="KBTeam" />
+                <label for="KBChann">KB Channel: </label>
+                <input type="text" id="KBChann" name="KBChann" />
+                <label for="level">Logging Level: </label>
+                <input type="number" id="Level" name="Level" />
+                <label for="ProgName">Program Name: </label>
+                <input type="text" id="ProgName" name="ProgName" />
+                <label for="UseStdout">Use stdout: </label>
+                <input type="checkbox" id="UseStdout" name="UseStdout"/>
+                <label for="submitchanges"></label>
+                <input style="width: 100%;" type="submit" id="submitchanges" name="submitchanges" onClick="alert('Post blocked.')">
+            </form>
+        </div>
+        <br>
+        <div id="admin-stats" class="column">
+            <h4><p>Admin Stats</p></h4>
+        </div>
     </div>
-    <div class="column">
-
-    <h4><p>Config</p></h4>
-    <form>
-            <label for="Guild">Guild: </label>
-            <input type="text" id="Guild" name="Guild" readonly/>
-            <label for="AdminChannel">Admin Channel: </label>
-            <input type="select" id="AdminChannel" name="AdminChannel"/>
-            <label for="AdminRole">Admin Role: </label>
-            <input type="select" id="AdminRole" name="AdminRole"/>
-            <label for="MonitorChannel">Monitor Channel: </label>
-            <input type="select" id="MonitorChannel" name="MonitorChannel"/>
-            <label for="MonitorRole">Monitor Role: </label>
-            <input type="select" id="MonitorRole" name="MonitorRole"/>
-            <label for="IntroChannel">Intro Channel: </label>
-            <input type="select" id="IntroChannel" name="IntroChannel"/>
-            <label for="VerifiedRole">Verified Role: </label>
-            <input type="select" id="VerifiedRole" name="VerifiedRole"/>
-            <label for="OutFile">Logging OutFile: </label>
-            <input type="text" id="OutFile" name="OutFile" />
-            <label for="KBTeam">KB Team: </label>
-            <input type="text" id="KBTeam" name="KBTeam" />
-            <label for="KBChann">KB Channel: </label>
-            <input type="text" id="KBChann" name="KBChann" />
-            <label for="level">Logging Level: </label>
-            <input type="number" id="Level" name="Level" />
-            <label for="ProgName">Program Name: </label>
-            <input type="text" id="ProgName" name="ProgName" />
-            <label for="UseStdout">Use stdout: </label>
-            <input type="checkbox" id="UseStdout" name="UseStdout"/>
-            <label for="submitchanges"></label>
-            <input style="width: 100%;" type="submit" id="submitchanges" name="submitchanges" onClick="alert('Post blocked.')">
-    </form>
-    </div>
-</div>
 `;
 
 class ConfigStatusClass extends HTMLElement {