Chat UI progress

app/views/chat/index.pug

@@ -1,54 +1,5 @@
 extends layouts/room
 block content
 
-  form(method="POST", action="/chat").uk-form
+  h1 Chat Home
-    .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/layouts/room.pug

@@ -1,4 +1,5 @@
 extends ../../layouts/main
+block page-footer
 block content-container
 
   mixin renderRoomList (rooms)
@@ -6,11 +7,9 @@ block content-container
       li.uk-active
         a(href=`/chat/${room._id}`)= room.name
 
-
+  section.site-chat-section
-  section.uk-section.uk-section-default.uk-section-small
+    div(uk-grid).uk-height-1-1
-    .uk-container.uk-container-expand
+      div(class="uk-width-1-1 uk-width-1-5@l uk-flex-last uk-flex-first@l")
-      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
@@ -27,8 +26,8 @@ block content-container
           else
             div You haven't joined any chat rooms.
 
-        div(class="uk-width-1-1 uk-width-expand@l")
+      div(class="uk-width-1-1 uk-width-expand@l").uk-height-1-1
-          #chat-room
+        #chat-room.uk-height-1-1
           block content
 
       div(class="uk-width-1-1 uk-width-1-5@l")

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,8 +4,7 @@ block content
   include components/input-form
   include components/message
 
-  .uk-card.uk-card-default.uk-card-small
+  #site-chat-container.uk-flex.uk-flex-column.uk-height-1-1
-    .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
@@ -27,10 +26,11 @@ block content
           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
+        ).uk-button.dtp-button-default.uk-button-small.uk-border-pill.uk-text-bold
           span
-              i.fas.fa-user
+            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
@@ -42,8 +42,6 @@ block content
               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
@@ -53,5 +51,5 @@ block content
       .chat-message-menu
         button(type="button", onclick="return dtp.app.chat.resumeChatScroll(event);").chat-scroll-return Resume scrolling
 
-    .uk-card-footer
+    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;
+      position: absolute;
-      display: flex;
+      top: 0; right: 0; bottom: 0; left: 0;
-      flex-direction: column;
+      width: 100%;
-
+      height: 100%;
-      height: 410px;
-      resize: vertical;
-
       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;