diff --git a/http_root/css/site.css b/http_root/css/site.css index c731386..a56de46 100644 --- 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 index c259389..4d3d26c 100644 --- a/http_views/events.pug +++ b/http_views/events.pug @@ -2,9 +2,8 @@ extends layout.pug block content - h1 Welcome to D&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 \ No newline at end of file diff --git a/http_views/includes/menu.pug b/http_views/includes/menu.pug index 94a75bd..df03300 100644 --- a/http_views/includes/menu.pug +++ b/http_views/includes/menu.pug @@ -4,11 +4,12 @@ img(src= Config.dndVaultIcon) . D&D Vault - #{title} #{discordMe?' ('+discordMe.username+'#'+discordMe.discriminator+')':''} +.topnav a(href= '/') Home - | |  + //- | |  a(href= '/timezones') Timezones if discordMe - | |  + //- | |  a(href= '/events') Events - | |  + //- | |  a(href= '/calendar?userID='+discordMe.id) Calendar ICS