cleaned up css for event page

jcolson · Mar 13, 2021 · 81eab2e · 81eab2e
1 parent b4cbe42
commit 81eab2e
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 26 deletions.
diff --git a/http_root/css/site.css b/http_root/css/site.css
@@ -37,8 +37,9 @@ input[type=time] {
 input[type=textarea] {
     width: 100%;
     resize: vertical;
-    padding: 15px;
-    border-radius: 15px;
+    padding: 10px;
+    margin: 10px 0;
+    border-radius: 10px;
     border: 0;
     box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.06);
     height: 150px;
@@ -53,19 +54,62 @@ button {
     padding: 10px;
     border: none;
     background-color: #3F51B5;
-    color: #fff;
+    color: lightblue;
     font-weight: 600;
     border-radius: 5px;
     width: 100%;
 
 }
 
+/* The navbar container */
+.topnav {
+    overflow: hidden;
+    background-color: #3F51B5;
+}
+
+/* Navbar links */
+.topnav a {
+    float: left;
+    display: block;
+    color: lightblue;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+/* Links - change color on hover */
+.topnav a:hover {
+    background-color: lightblue;
+    color: #3F51B5;
+}
+
+/* Create three unequal columns that floats next to each other */
+.column {
+    float: left;
+    padding: 10px;
+    width: 25%;
+}
+
+/* Clear floats after the columns */
+.row:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
+@media screen and (max-width: 600px) {
+    .column {
+        width: 100%;
+    }
+}
+
 .header {
     text-align: center;
     font-family: Arial, Helvetica, sans-serif;
     font-size: x-large;
     font-weight: bold;
-    height: 150px;
+    height: 100px;
     width: 100%;
     padding-left: 1px;
     padding-top: 1px;

diff --git a/http_views/events.pug b/http_views/events.pug
@@ -2,9 +2,8 @@
 extends layout.pug
 
 block content
-    h1 Welcome to D&amp;D Vault Bot
     script.
-        event=!{JSON.stringify(event)}
+        event=!{event?JSON.stringify(event):'{}'};
         async function setEvent() {
             console.log('setEvent fired: '+event.guildID);
             event.title=document.getElementById('event-info').value;
@@ -24,21 +23,25 @@ block content
     .thebody
         div(id="event-info")
         form
-            p
-                | Title:
-                input(type='text' name='title' id='event-title' placeholder='Title', value=`${event&&event.title?event.title:''}`)
-                | DM/GM:
-                input(type='text' name='dm' id='event-dm' placeholder='DM/GM', value=`${event&&event.dm?event.dm:''}`)
-                | Duration (in hours):
-                input(type='text' name='duration_hours' id='event-duration_hours' placeholder='Duration (in hours)', value=`${event&&event.duration_hours?event.duration_hours:''}`)
-                | Start (Date):
-                input(type='date' name='date' id='event-date' value=`${event?event.date_time.toISOString().substring(0,10):''}`)
-                | Start (Time):
-                input(type='time' name='time' id='event-time' value=`${event?event.date_time.toISOString().substring(11,16):''}`)
-                | Number of Players:
-                input(type='text' name='number_player_slots' id='event-number_player_slots' placeholder='Number of Players', value=`${event&&event.number_player_slots?event.number_player_slots:''}`)
-                | Campaign:
-                input(type='text' name='campaign' id='event-campaign' placeholder='Campaign', value=`${event&&event.campaign?event.campaign:''}`)
-                | Description:
-                input(type='textarea' name='description' id='event-description' placeholder='Description', value=`${event&&event.description?event.description:''}`)
+            .row
+                .column
+                .column
+                    | Title:
+                    input(type='text' name='title' id='event-title' placeholder='Title', value=`${event&&event.title?event.title:''}`)
+                    | DM/GM:
+                    input(type='text' name='dm' id='event-dm' placeholder='DM/GM', value=`${event&&event.dm?event.dm:''}`)
+                    | Duration (in hours):
+                    input(type='text' name='duration_hours' id='event-duration_hours' placeholder='Duration (in hours)', value=`${event&&event.duration_hours?event.duration_hours:''}`)
+                    | Start (Date):
+                    input(type='date' name='date' id='event-date' value=`${event?event.date_time.toISOString().substring(0,10):''}`)
+                    | Start (Time):
+                    input(type='time' name='time' id='event-time' value=`${event?event.date_time.toISOString().substring(11,16):''}`)
+                .column
+                    | Number of Players:
+                    input(type='text' name='number_player_slots' id='event-number_player_slots' placeholder='Number of Players', value=`${event&&event.number_player_slots?event.number_player_slots:''}`)
+                    | Campaign:
+                    input(type='text' name='campaign' id='event-campaign' placeholder='Campaign', value=`${event&&event.campaign?event.campaign:''}`)
+                    | Description:
+                    input(type='textarea' name='description' id='event-description' placeholder='Description', value=`${event&&event.description?event.description:''}`)
+                .column
             button(type='button' onclick='setEvent();') Save
diff --git a/http_views/includes/menu.pug b/http_views/includes/menu.pug
@@ -4,11 +4,12 @@
         img(src= Config.dndVaultIcon)
         .
             D&amp;D Vault - #{title} #{discordMe?' ('+discordMe.username+'#'+discordMe.discriminator+')':''}
+.topnav
     a(href= '/') Home
-    |&nbsp;|&nbsp;
+    //- |&nbsp;|&nbsp;
     a(href= '/timezones') Timezones
     if discordMe
-        |&nbsp;|&nbsp;
+        //- |&nbsp;|&nbsp;
         a(href= '/events') Events
-        |&nbsp;|&nbsp;
+        //- |&nbsp;|&nbsp;
         a(href= '/calendar?userID='+discordMe.id) Calendar ICS