Chat UI progress

app/views/chat/index.pug

@@ -1,54 +1,5 @@
 extends layouts/room
 block content
 
-  form(method="POST", action="/chat").uk-form
-    .uk-card.uk-card-default.uk-card-small
-      .uk-card-header
-        h1.uk-card-title Create Chat Room
-      .uk-card-body
-        .uk-margin
-          label(for="name").uk-form-label Room name
-          input(id="name", name="name", type="text", placeholder="Enter room name").uk-input
+  h1 Chat Home
   
-        .uk-margin
-          label(for="description").uk-form-label Room description
-          textarea(id="description", name="description", rows="2", placeholder="Enter room description").uk-textarea
-
-        .uk-margin
-          label(for="policy").uk-form-label Room policy
-          textarea(id="policy", name="policy", rows="2", placeholder="Enter room use policy").uk-textarea
-
-        .uk-margin
-          div(uk-grid)
-            .uk-width-auto
-              fieldset
-                legend Room Visibility
-                div(uk-grid).uk-grid-small.uk-flex-middle
-                  .uk-width-auto
-                    label
-                      input(id="is-public", name="visibility", type="radio", value="public", checked).uk-radio
-                      |  Public
-                  .ui-width-auto
-                    label
-                      input(id="is-private", name="visibility", type="radio", value="private").uk-radio
-                      |  Private
-
-            .uk-width-auto
-              fieldset
-                legend Membership Policy
-                div(uk-grid).uk-grid-small.uk-flex-middle
-                  .uk-width-auto
-                    label
-                      input(id="membership-open", name="policy", type="radio", value="open", checked).uk-radio
-                      |  Open
-                  .uk-width-auto
-                    label
-                      input(id="membership-closed", name="policy", type="radio", value="closed").uk-radio
-                      |  Closed
-
-      .uk-card-footer
-        div(uk-grid)
-          .uk-width-expand
-            +renderBackButton()
-          .uk-width-auto
-            button(type="submit").uk-button.uk-button-primary.uk-border-rounded Create room

app/views/chat/layouts/room.pug

@@ -1,4 +1,5 @@
 extends ../../layouts/main
+block page-footer
 block content-container
 
   mixin renderRoomList (rooms)
@@ -6,44 +7,42 @@ block content-container
       li.uk-active
         a(href=`/chat/${room._id}`)= room.name
 
+  section.site-chat-section
+    div(uk-grid).uk-height-1-1
+      div(class="uk-width-1-1 uk-width-1-5@l uk-flex-last uk-flex-first@l")
+        .content-block.uk-border-rounded.uk-margin
+          if Array.isArray(ownedChatRooms) && (ownedChatRooms.length > 0)
+            ul#room-list.uk-nav.uk-nav-default
+              li.uk-nav-header Your Rooms
+              +renderRoomList(ownedChatRooms)
+          else
+            div You don't own any chat rooms.
 
-  section.uk-section.uk-section-default.uk-section-small
-    .uk-container.uk-container-expand
-      div(uk-grid)
-        div(class="uk-width-1-1 uk-width-1-5@l uk-flex-first@l").uk-flex-last
-          .content-block.uk-border-rounded.uk-margin
-            if Array.isArray(ownedChatRooms) && (ownedChatRooms.length > 0)
-              ul#room-list.uk-nav.uk-nav-default
-                li.uk-nav-header Your Rooms
-                +renderRoomList(ownedChatRooms)
-            else
-              div You don't own any chat rooms.
-
-          .content-block.uk-border-rounded
-            if Array.isArray(joinedChatRooms) && (joinedChatRooms.length > 0)
-              ul#room-list.uk-nav.uk-nav-default
-                li.uk-nav-header Joined Rooms
-                +renderRoomList(ownedChatRooms)
-            else
-              div You haven't joined any chat rooms.
+        .content-block.uk-border-rounded
+          if Array.isArray(joinedChatRooms) && (joinedChatRooms.length > 0)
+            ul#room-list.uk-nav.uk-nav-default
+              li.uk-nav-header Joined Rooms
+              +renderRoomList(ownedChatRooms)
+          else
+            div You haven't joined any chat rooms.
 
-        div(class="uk-width-1-1 uk-width-expand@l")
-          #chat-room
-            block content
+      div(class="uk-width-1-1 uk-width-expand@l").uk-height-1-1
+        #chat-room.uk-height-1-1
+          block content
 
-        div(class="uk-width-1-1 uk-width-1-5@l")
-          .content-block.uk-border-rounded
-            if chatRoom
-              if Array.isArray(chatRoom.members) && (chatRoom.members.length > 0)
-                ul#room-member-list.uk-nav.uk-nav-default
-                  li.uk-nav-header Room Members
-                  each member in chatRoom.members
-                    li
-                      a(href="")= member.displayName || member.username
-              else
-                div The room has no members
+      div(class="uk-width-1-1 uk-width-1-5@l")
+        .content-block.uk-border-rounded
+          if chatRoom
+            if Array.isArray(chatRoom.members) && (chatRoom.members.length > 0)
+              ul#room-member-list.uk-nav.uk-nav-default
+                li.uk-nav-header Room Members
+                each member in chatRoom.members
+                  li
+                    a(href="")= member.displayName || member.username
             else
-              div Not in a room
+              div The room has no members
+          else
+            div Not in a room
 
 block viewjs
   script.

app/views/chat/room-editor.pug

@@ -0,0 +1,54 @@
+extends layouts/room
+block content
+
+  form(method="POST", action="/chat").uk-form
+    .uk-card.uk-card-default.uk-card-small
+      .uk-card-header
+        h1.uk-card-title Create Chat Room
+      .uk-card-body
+        .uk-margin
+          label(for="name").uk-form-label Room name
+          input(id="name", name="name", type="text", placeholder="Enter room name").uk-input
+
+        .uk-margin
+          label(for="description").uk-form-label Room description
+          textarea(id="description", name="description", rows="2", placeholder="Enter room description").uk-textarea
+
+        .uk-margin
+          label(for="policy").uk-form-label Room policy
+          textarea(id="policy", name="policy", rows="2", placeholder="Enter room use policy").uk-textarea
+
+        .uk-margin
+          div(uk-grid)
+            .uk-width-auto
+              fieldset
+                legend Room Visibility
+                div(uk-grid).uk-grid-small.uk-flex-middle
+                  .uk-width-auto
+                    label
+                      input(id="is-public", name="visibility", type="radio", value="public", checked).uk-radio
+                      |  Public
+                  .ui-width-auto
+                    label
+                      input(id="is-private", name="visibility", type="radio", value="private").uk-radio
+                      |  Private
+
+            .uk-width-auto
+              fieldset
+                legend Membership Policy
+                div(uk-grid).uk-grid-small.uk-flex-middle
+                  .uk-width-auto
+                    label
+                      input(id="membership-open", name="policy", type="radio", value="open", checked).uk-radio
+                      |  Open
+                  .uk-width-auto
+                    label
+                      input(id="membership-closed", name="policy", type="radio", value="closed").uk-radio
+                      |  Closed
+
+      .uk-card-footer
+        div(uk-grid)
+          .uk-width-expand
+            +renderBackButton()
+          .uk-width-auto
+            button(type="submit").uk-button.uk-button-primary.uk-border-rounded Create room

app/views/chat/view.pug

@@ -4,54 +4,52 @@ block content
   include components/input-form
   include components/message
 
-  .uk-card.uk-card-default.uk-card-small
-    .uk-card-header
-      div(uk-grid).uk-flex-middle.chat-menubar
-        div(uk-tooltip="Room details").uk-width-expand
-          h1.uk-card-title.uk-margin-remove= room.name
-          div= room.description
-
-        div(uk-tooltip="Active Members").uk-width-auto.no-select
+  #site-chat-container.uk-flex.uk-flex-column.uk-height-1-1
+    div(uk-grid).uk-flex-middle.chat-menubar
+      div(uk-tooltip="Room details").uk-width-expand
+        h1.uk-card-title.uk-margin-remove= room.name
+        div= room.description
+
+      div(uk-tooltip="Active Members").uk-width-auto.no-select
+        span
+          i.fas.fa-user
+        span(data-room-id= room._id).uk-margin-small-left.active-member-count= numeral(room.members.length).format('0,0')
+
+      div(uk-tooltip="Total Members", class="uk-hidden@m").uk-width-auto.no-select
+        span
+          i.fas.fa-user
+        span.uk-margin-small-left= formatCount(room.members.length)
+
+
+      .uk-width-auto
+        button(
+          type="button",
+          data-room-id= room._id,
+          onclick="return dtp.app.chat.leaveRoom(event);",
+        ).uk-button.dtp-button-default.uk-button-small.uk-border-pill.uk-text-bold
           span
-            i.fas.fa-user
-          span(data-room-id= room._id).uk-margin-small-left.active-member-count= numeral(room.members.length).format('0,0')
-
-        div(uk-tooltip="Total Members", class="uk-hidden@m").uk-width-auto.no-select
-          span
-            i.fas.fa-user
-          span.uk-margin-small-left= formatCount(room.members.length)
-
-
-        .uk-width-auto
-          button(
-            type="button",
-            data-room-id= room._id,
-            onclick="return dtp.app.chat.leaveRoom(event);",
-          ).uk-button.uk-button-small.uk-border-pill.uk-text-bold
-            span
-              i.fas.fa-user
-            span.uk-margin-small-left Leave Room
-        .uk-width-auto
-          .uk-inline
-            button(type="button").uk-button.uk-button-link.uk-button-small
-              i.fas.fa-ellipsis-h
-            div(uk-dropdown={ pos: 'bottom-right', mode: 'click' })
-              ul.uk-nav.uk-dropdown-nav
-                li.uk-nav-heading= room.name
-                li.uk-nav-divider
-                li
-                  a(href=`/chat/${room._id}/pop-out`, target="_blank") Pop-Out Chat        
-
-    .uk-card-body
-      #site-chat-container.uk-flex.uk-flex-column
-        #chat-message-list-wrapper
-          #chat-reactions
-          #chat-message-list
-            each message in chatMessages || [ ]
-              +renderChatMessage(message)
-
-          .chat-message-menu
-            button(type="button", onclick="return dtp.app.chat.resumeChatScroll(event);").chat-scroll-return Resume scrolling
-
-    .uk-card-footer
+            i.fas.fa-sign-out-alt
+          span.uk-margin-small-left Leave Room
+
+      .uk-width-auto
+        .uk-inline
+          button(type="button").uk-button.uk-button-link.uk-button-small
+            i.fas.fa-ellipsis-h
+          div(uk-dropdown={ pos: 'bottom-right', mode: 'click' })
+            ul.uk-nav.uk-dropdown-nav
+              li.uk-nav-heading= room.name
+              li.uk-nav-divider
+              li
+                a(href=`/chat/${room._id}/pop-out`, target="_blank") Pop-Out Chat  
+
+    #chat-message-list-wrapper
+      #chat-reactions
+      #chat-message-list
+        each message in chatMessages || [ ]
+          +renderChatMessage(message)
+
+      .chat-message-menu
+        button(type="button", onclick="return dtp.app.chat.resumeChatScroll(event);").chat-scroll-return Resume scrolling
+
+    div
       +renderChatInputForm(room)

client/less/site/button.less

@@ -101,7 +101,7 @@ button.uk-button.dtp-button-default {
   background: none;
   outline: none;
   border: solid 2px rgb(75, 75, 75);
-  color: #c8c8c8;
+  color: @button-label-color;
 
   transition: background-color 0.2s;
 

client/less/site/chat.less

@@ -1,8 +1,14 @@
+.site-chat-section {
+  height: calc(100% - @navbar-nav-item-height);
+}
+
 #site-chat-container {
   align-self: stretch;
+  overflow: scroll;
 
   .chat-menubar {
-    padding: 4px 16px;
+    padding: 10px @grid-small-gutter-horizontal;
+    border-bottom: solid 1px @content-border-color;
   }
 
   #chat-input-form {
@@ -44,14 +50,12 @@
     }
 
     #chat-message-list {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-
-      height: 410px;
-      resize: vertical;
-
+      position: absolute;
+      top: 0; right: 0; bottom: 0; left: 0;
+      width: 100%;
+      height: 100%;
       overflow: auto;
+
       box-shadow: var(--dtp-chat-shadow);
       scroll-behavior: auto;
 
@@ -62,6 +66,55 @@
       scrollbar-width: none; /* Firefox */
 
       .chat-message {
+        color: var(--dtp-chat-color);
+        background: var(--dtp-chat-background);
+        border-radius: 8px;
+        font-size: var(--dtp-chat-font-size);
+        margin: 5px @grid-small-gutter-horizontal;
+      
+        &.system-message {
+          background: rgba(255,255,255, 0.1);
+        }
+      
+        .chat-username {
+          font-weight: bold;
+          font-size: var(--dtp-chat-font-size);
+          line-height: 1;
+          color: var(--dtp-chat-username-color);
+        }
+      
+        img.chat-author-image {
+          width: auto;
+          height: 2em;
+          border-radius: 4px;
+        }
+      
+        .chat-content {
+          line-height: 1.2em;
+          font-size: var(--dtp-chat-font-size);
+          color: inherit;
+          overflow-wrap: break-word;
+      
+          p:last-child {
+            margin-bottom: 0;
+          }
+        }
+      
+        .chat-timestamp {
+          color: var(--dtp-chat-timestamp-color);
+        }
+      
+        .chat-sticker {
+          display: inline-block;
+          margin-top: 4px;
+          margin-right: 8px;
+          color: inherit;
+          
+          video {
+            width: auto;
+            height: 100px;
+          }
+        }
 
         .chat-user-menu {
 
@@ -172,58 +225,6 @@ body[data-obs-widget="chat"] {
   }
 }
 
-.chat-message {
-  color: var(--dtp-chat-color);
-  background: var(--dtp-chat-background);
-  border-radius: 8px;
-  font-size: var(--dtp-chat-font-size);
-  margin-bottom: 5px;
-
-  &.system-message {
-    background: rgba(255,255,255, 0.1);
-  }
-
-  .chat-username {
-    font-weight: bold;
-    font-size: var(--dtp-chat-font-size);
-    line-height: 1;
-    color: var(--dtp-chat-username-color);
-  }
-
-  img.chat-author-image {
-    width: auto;
-    height: 2em;
-    border-radius: 4px;
-  }
-
-  .chat-content {
-    line-height: 1.2em;
-    font-size: var(--dtp-chat-font-size);
-    color: inherit;
-    overflow-wrap: break-word;
-
-    p:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .chat-timestamp {
-    color: var(--dtp-chat-timestamp-color);
-  }
-
-  .chat-sticker {
-    display: inline-block;
-    margin-top: 4px;
-    margin-right: 8px;
-    color: inherit;
-    
-    video {
-      width: auto;
-      height: 100px;
-    }
-  }
-}
-
 body[data-obs-widget="chat"] {
 
   .chat-message {

client/less/site/main.less

@@ -7,6 +7,20 @@ html, body {
 body {
   padding-top: @site-navbar-height;
 
+  &[data-current-view="chat"] {
+    position: fixed;
+    top: @navbar-nav-item-height; right: 0; bottom: 0; left: 0;
+    
+    display: flex;
+    flex-direction: column;
+    justify-content: top;
+
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+  }
+
   &[data-current-view="oauth2-authorize-dialog"],
   &[data-current-view="welcome"] {
     position: fixed;