Initial work on showing avatars in messages.

- Update the mockups to show avatars.

Makefile

@@ -150,7 +150,7 @@ css/%.min.css:: css/%.css
 
 .PHONY: watch
 watch: dev
-	$(SASS) --watch -I $(BOURBON) -I $(BOOTSTRAP) sass/converse/converse.scss:css/converse.css sass/inverse/inverse.scss:css/inverse.css
+	$(SASS) --watch -I $(BOURBON) -I $(BOOTSTRAP) sass:css
 
 .PHONY: watchjs
 watchjs: dev

css/converse.css

@@ -7307,60 +7307,8 @@ body.reset {
       font-size: 14px;
       margin: 0;
       padding: 5px; }
-    #conversejs .chatbox .chat-body .message {
-      margin: 0.5em 0; }
-    #conversejs .chatbox .chat-body .chat-info {
-      line-height: 14px;
-      color: #3AA569;
-      font-size: 12px; }
-      #conversejs .chatbox .chat-body .chat-info.badge {
-        color: white; }
-      #conversejs .chatbox .chat-body .chat-info.chat-state-notification {
-        font-style: italic; }
-      #conversejs .chatbox .chat-body .chat-info.chat-event {
-        clear: left;
-        font-style: italic; }
-      #conversejs .chatbox .chat-body .chat-info.chat-error {
-        color: #D24E2B;
-        font-weight: bold; }
-      #conversejs .chatbox .chat-body .chat-info.chat-date {
-        display: inline-block;
-        margin-top: 1em; }
-    #conversejs .chatbox .chat-body .chat-image {
-      height: auto;
-      width: auto;
-      max-height: 24em;
-      max-width: 100%; }
-    #conversejs .chatbox .chat-body .chat-action {
-      font-style: italic; }
-    #conversejs .chatbox .chat-body .chat-message {
-      overflow: auto; }
-      #conversejs .chatbox .chat-body .chat-message.onload {
-        animation: colorchange-chatmessage 1s;
-        -webkit-animation: colorchange-chatmessage 1s; }
-      #conversejs .chatbox .chat-body .chat-message canvas {
-        vertical-align: middle;
-        background: #818479; }
-      #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
-        font-weight: bold; }
-      #conversejs .chatbox .chat-body .chat-message .chat-msg-them {
-        color: #3AA569; }
-      #conversejs .chatbox .chat-body .chat-message .chat-msg-me {
-        color: #578EA9; }
-      #conversejs .chatbox .chat-body .chat-message .chat-msg-content {
-        max-width: 100%;
-        word-wrap: break-word; }
-        #conversejs .chatbox .chat-body .chat-message .chat-msg-content.spoiler {
-          border-radius: 4px;
-          padding: 0.5em; }
-        #conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione {
-          margin-bottom: -6px; }
-    #conversejs .chatbox .chat-body .delayed .chat-msg-them {
-      color: #41b875; }
-    #conversejs .chatbox .chat-body .delayed .chat-msg-me {
-      color: #6899b2; }
   #conversejs .chatbox .new-msgs-indicator {
-    position: absolute;
+    position: relative;
     width: 100%;
     cursor: pointer;
     background-color: #3AA569;
@@ -7369,11 +7317,11 @@ body.reset {
     font-size: 0.9em;
     text-align: center;
     z-index: 20;
-    white-space: nowrap; }
+    white-space: nowrap;
+    margin-bottom: 0.25em; }
   #conversejs .chatbox .chat-content {
     height: 100%;
-    padding: 1em;
-    font-size: 13px;
+    font-size: 14px;
     color: #777;
     overflow-y: auto;
     border: 0;
@@ -7564,8 +7512,6 @@ body.reset {
     display: block; }
   #conversejs:not(.converse-embedded) .chatbox {
     width: calc(100% - 50px); }
-    #conversejs:not(.converse-embedded) .chatbox .chat-body .chat-message .chat-msg-author {
-      white-space: normal; }
     #conversejs:not(.converse-embedded) .chatbox .row .box-flyout {
       left: 50px;
       bottom: 0;
@@ -7772,7 +7718,7 @@ body.reset {
       margin-bottom: 0.75em; }
   #conversejs #controlbox #chatrooms {
     padding: 0;
-    padding-bottom: 1em; }
+    padding-bottom: 0.5em; }
     #conversejs #controlbox #chatrooms form.add-chatroom {
       margin: 0;
       padding: 0; }
@@ -8130,7 +8076,8 @@ body.reset {
   #conversejs .chat-head-chatroom .chatroom-topic {
     white-space: nowrap;
     overflow-y: hidden;
-    text-overflow: ellipsis; }
+    text-overflow: ellipsis;
+    font-size: 16px; }
   #conversejs.converse-embedded .chat-head-chatroom a.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:visited.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:hover.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
   #conversejs .chat-head-chatroom a.chatbox-btn.fa,
   #conversejs .chat-head-chatroom a:visited.chatbox-btn.fa,
@@ -8219,19 +8166,6 @@ body.reset {
       #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .mentioned,
       #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
         font-weight: bold; }
-      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message.onload,
-      #conversejs .chatroom .box-flyout .chatroom-body .chat-message.onload {
-        animation: colorchange-chatmessage-muc 1s;
-        -webkit-animation: colorchange-chatmessage-muc 1s; }
-      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them,
-      #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them {
-        color: #3AA569; }
-        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas,
-        #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas {
-          background: #E77051; }
-      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas,
-      #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas {
-        background: #578EA9; }
       #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .disconnect-msg,
       #conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg {
         padding: 2em 2em 0 2em; }
@@ -8243,18 +8177,13 @@ body.reset {
         min-width: 250px; }
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
-          background-color: #E77051;
-          max-width: 70%; }
+          background-color: #E77051; }
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
-          height: 100%;
-          padding: 0.5em; }
+          height: 100%; }
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area.full,
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
           min-width: 100%; }
-          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator,
-          #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
-            min-width: 100%; }
       #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants,
       #conversejs .chatroom .box-flyout .chatroom-body .occupants {
         display: flex;
@@ -8426,6 +8355,114 @@ body.reset {
   height: 100%;
   border-radius: 4px; }
 
+#conversejs .message.date-separator {
+  height: 2em;
+  margin: 0;
+  position: relative;
+  text-align: center;
+  z-index: 0; }
+  #conversejs .message.date-separator .separator {
+    border: 0.5px solid #3AA569;
+    margin: 0 1em;
+    position: relative;
+    top: 1em;
+    z-index: 5; }
+  #conversejs .message.date-separator .separator-text {
+    background: white;
+    bottom: 1px;
+    color: #666;
+    display: inline-block;
+    line-height: 2em;
+    padding: 0 1em;
+    position: relative;
+    z-index: 5; }
+#conversejs .message.chat-info {
+  color: #3AA569;
+  font-size: 14px;
+  line-height: 14px;
+  padding: 0.5rem 1rem; }
+  #conversejs .message.chat-info.badge {
+    color: white; }
+  #conversejs .message.chat-info.chat-state-notification {
+    font-style: italic; }
+  #conversejs .message.chat-info.chat-event {
+    clear: left;
+    font-style: italic; }
+  #conversejs .message.chat-info.chat-error {
+    color: #D24E2B;
+    font-weight: bold; }
+  #conversejs .message.chat-info.chat-date {
+    display: inline-block;
+    margin-top: 1em; }
+#conversejs .message.chat-image {
+  height: auto;
+  width: auto;
+  max-height: 24em;
+  max-width: 100%; }
+#conversejs .message.chat-action {
+  font-style: italic; }
+#conversejs .message.chat-msg {
+  display: flex;
+  flex-direction: row;
+  overflow: auto;
+  padding: 0.5rem 1rem; }
+  #conversejs .message.chat-msg.onload {
+    animation: colorchange-chatmessage 1s;
+    -webkit-animation: colorchange-chatmessage 1s; }
+  #conversejs .message.chat-msg.delayed .chat-msg-them {
+    color: #41b875; }
+  #conversejs .message.chat-msg.delayed .chat-msg-me {
+    color: #6899b2; }
+  #conversejs .message.chat-msg:hover {
+    background-color: rgba(0, 0, 0, 0.035); }
+  #conversejs .message.chat-msg .avatar {
+    background: #818479;
+    height: 36px;
+    vertical-align: middle;
+    width: 36px; }
+  #conversejs .message.chat-msg .chat-msg-content {
+    margin-left: 0.5rem; }
+  #conversejs .message.chat-msg .chat-msg-text {
+    padding: 0;
+    color: #666;
+    max-width: 100%;
+    word-wrap: break-word; }
+    #conversejs .message.chat-msg .chat-msg-text.spoiler {
+      border-radius: 4px;
+      padding: 0.5em; }
+    #conversejs .message.chat-msg .chat-msg-text .emojione {
+      margin-bottom: -6px; }
+  #conversejs .message.chat-msg .chat-msg-heading {
+    padding-bottom: 0.5rem;
+    display: block; }
+    #conversejs .message.chat-msg .chat-msg-heading .chat-msg-author {
+      font-weight: bold; }
+    #conversejs .message.chat-msg .chat-msg-heading .chat-msg-time {
+      padding-left: 0.5em; }
+    #conversejs .message.chat-msg .chat-msg-heading .chat-msg-them {
+      color: #3AA569; }
+    #conversejs .message.chat-msg .chat-msg-heading .chat-msg-me {
+      color: #578EA9; }
+  #conversejs .message.chat-msg.chat-msg-followup .chat-msg-heading,
+  #conversejs .message.chat-msg.chat-msg-followup .avatar {
+    display: none; }
+  #conversejs .message.chat-msg.chat-msg-followup .chat-msg-content {
+    margin-left: 2.75rem; }
+#conversejs .chatroom-body .message.onload {
+  animation: colorchange-chatmessage-muc 1s;
+  -webkit-animation: colorchange-chatmessage-muc 1s; }
+#conversejs .chatroom-body .message.delayed .chat-msg-them {
+  color: #41b875; }
+#conversejs .chatroom-body .message.delayed .chat-msg-me {
+  color: #6899b2; }
+#conversejs .chatroom-body .message .chat-msg-them {
+  color: #3AA569; }
+#conversejs .chatroom-body .message .separator {
+  border: 0.5px solid #E77051; }
+
+@media screen and (max-width: 767px) {
+  #conversejs:not(.converse-embedded) .message.chat-msg .chat-msg-author {
+    white-space: normal; } }
 #conversejs:not(.fullscreen) #minimized-chats {
   order: 100;
   width: 130px;

css/inverse.css

@@ -7357,63 +7357,11 @@ body {
         border-bottom-right-radius: 0; } }
     #conversejs .chatbox .chat-body p {
       color: #777;
-      font-size: 16px;
+      font-size: 14px;
       margin: 0;
       padding: 5px; }
-    #conversejs .chatbox .chat-body .message {
-      margin: 0.5em 0; }
-    #conversejs .chatbox .chat-body .chat-info {
-      line-height: 20px;
-      color: #3AA569;
-      font-size: 14px; }
-      #conversejs .chatbox .chat-body .chat-info.badge {
-        color: white; }
-      #conversejs .chatbox .chat-body .chat-info.chat-state-notification {
-        font-style: italic; }
-      #conversejs .chatbox .chat-body .chat-info.chat-event {
-        clear: left;
-        font-style: italic; }
-      #conversejs .chatbox .chat-body .chat-info.chat-error {
-        color: #D24E2B;
-        font-weight: bold; }
-      #conversejs .chatbox .chat-body .chat-info.chat-date {
-        display: inline-block;
-        margin-top: 1em; }
-    #conversejs .chatbox .chat-body .chat-image {
-      height: auto;
-      width: auto;
-      max-height: 24em;
-      max-width: 100%; }
-    #conversejs .chatbox .chat-body .chat-action {
-      font-style: italic; }
-    #conversejs .chatbox .chat-body .chat-message {
-      overflow: auto; }
-      #conversejs .chatbox .chat-body .chat-message.onload {
-        animation: colorchange-chatmessage 1s;
-        -webkit-animation: colorchange-chatmessage 1s; }
-      #conversejs .chatbox .chat-body .chat-message canvas {
-        vertical-align: middle;
-        background: #818479; }
-      #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
-        font-weight: bold; }
-      #conversejs .chatbox .chat-body .chat-message .chat-msg-them {
-        color: #3AA569; }
-      #conversejs .chatbox .chat-body .chat-message .chat-msg-me {
-        color: #578EA9; }
-      #conversejs .chatbox .chat-body .chat-message .chat-msg-content {
-        max-width: 100%;
-        word-wrap: break-word; }
-        #conversejs .chatbox .chat-body .chat-message .chat-msg-content.spoiler {
-          border-radius: 4px;
-          padding: 0.5em; }
-        #conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione {
-          margin-bottom: -6px; }
-    #conversejs .chatbox .chat-body .delayed .chat-msg-them {
-      color: #41b875; }
-    #conversejs .chatbox .chat-body .delayed .chat-msg-me {
-      color: #6899b2; }
   #conversejs .chatbox .new-msgs-indicator {
-    position: absolute;
+    position: relative;
     width: 100%;
     cursor: pointer;
     background-color: #3AA569;
@@ -7422,11 +7370,11 @@ body {
     font-size: 0.9em;
     text-align: center;
     z-index: 20;
-    white-space: nowrap; }
+    white-space: nowrap;
+    margin-bottom: 0.25em; }
   #conversejs .chatbox .chat-content {
     height: 100%;
-    padding: 1em;
-    font-size: 13px;
+    font-size: 14px;
     color: #777;
     overflow-y: auto;
     border: 0;
@@ -7617,8 +7565,6 @@ body {
     display: block; }
   #conversejs:not(.converse-embedded) .chatbox {
     width: calc(100% - 50px); }
-    #conversejs:not(.converse-embedded) .chatbox .chat-body .chat-message .chat-msg-author {
-      white-space: normal; }
     #conversejs:not(.converse-embedded) .chatbox .row .box-flyout {
       left: 50px;
       bottom: 0;
@@ -7678,12 +7624,11 @@ body {
           height: 22px;
           margin-bottom: -5.5px; }
   #conversejs.fullscreen .chatbox .chat-content {
-    padding: 0 1em 1em 1em;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px; }
   #conversejs.fullscreen .chatbox .chat-title {
     font-size: 26px;
-    line-height: 26px; }
+    line-height: 30px; }
   #conversejs.fullscreen .chatbox .sendXMPPMessage ul {
     width: 100%; }
   #conversejs.fullscreen .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category-picker {
@@ -7847,7 +7792,7 @@ body {
       margin-bottom: 0.75em; }
   #conversejs #controlbox #chatrooms {
     padding: 0;
-    padding-bottom: 1em; }
+    padding-bottom: 0.5em; }
     #conversejs #controlbox #chatrooms form.add-chatroom {
       margin: 0;
       padding: 0; }
@@ -8054,7 +7999,7 @@ body {
     #conversejs.fullscreen #controlbox #converse-login-panel .converse-form {
       padding: 3em 2em 3em; }
   #conversejs.fullscreen #controlbox .toggle-register-login {
-    line-height: 26px; }
+    line-height: 30px; }
   #conversejs.fullscreen #controlbox .brand-heading-container {
     flex: 0 0 100%;
     max-width: 100%;
@@ -8273,7 +8218,8 @@ body {
   #conversejs .chat-head-chatroom .chatroom-topic {
     white-space: nowrap;
     overflow-y: hidden;
-    text-overflow: ellipsis; }
+    text-overflow: ellipsis;
+    font-size: 18px; }
   #conversejs.converse-embedded .chat-head-chatroom a.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:visited.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:hover.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
   #conversejs .chat-head-chatroom a.chatbox-btn.fa,
   #conversejs .chat-head-chatroom a:visited.chatbox-btn.fa,
@@ -8362,19 +8308,6 @@ body {
       #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .mentioned,
       #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
         font-weight: bold; }
-      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message.onload,
-      #conversejs .chatroom .box-flyout .chatroom-body .chat-message.onload {
-        animation: colorchange-chatmessage-muc 1s;
-        -webkit-animation: colorchange-chatmessage-muc 1s; }
-      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them,
-      #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them {
-        color: #3AA569; }
-        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas,
-        #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas {
-          background: #E77051; }
-      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas,
-      #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas {
-        background: #578EA9; }
       #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .disconnect-msg,
       #conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg {
         padding: 2em 2em 0 2em; }
@@ -8386,18 +8319,13 @@ body {
         min-width: 100%; }
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
-          background-color: #E77051;
-          max-width: 70%; }
+          background-color: #E77051; }
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
-          height: 100%;
-          padding: 0.5em; }
+          height: 100%; }
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area.full,
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
           min-width: 100%; }
-          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator,
-          #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
-            min-width: 100%; }
       #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants,
       #conversejs .chatroom .box-flyout .chatroom-body .occupants {
         display: flex;
@@ -8575,8 +8503,7 @@ body {
       min-width: auto; }
       #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
       #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
-        border-top-left-radius: 4px;
-        padding: 0 1em 1em 1em; }
+        border-top-left-radius: 4px; }
       #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full,
       #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area.full {
         max-width: 100%; }
@@ -8616,6 +8543,114 @@ body {
   border: 1.2em solid #E7A151;
   border-top: 0.8em solid #E7A151; }
 
+#conversejs .message.date-separator {
+  height: 2em;
+  margin: 0;
+  position: relative;
+  text-align: center;
+  z-index: 0; }
+  #conversejs .message.date-separator .separator {
+    border: 0.5px solid #3AA569;
+    margin: 0 1em;
+    position: relative;
+    top: 1em;
+    z-index: 5; }
+  #conversejs .message.date-separator .separator-text {
+    background: white;
+    bottom: 1px;
+    color: #666;
+    display: inline-block;
+    line-height: 2em;
+    padding: 0 1em;
+    position: relative;
+    z-index: 5; }
+#conversejs .message.chat-info {
+  color: #3AA569;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 0.5rem 1rem; }
+  #conversejs .message.chat-info.badge {
+    color: white; }
+  #conversejs .message.chat-info.chat-state-notification {
+    font-style: italic; }
+  #conversejs .message.chat-info.chat-event {
+    clear: left;
+    font-style: italic; }
+  #conversejs .message.chat-info.chat-error {
+    color: #D24E2B;
+    font-weight: bold; }
+  #conversejs .message.chat-info.chat-date {
+    display: inline-block;
+    margin-top: 1em; }
+#conversejs .message.chat-image {
+  height: auto;
+  width: auto;
+  max-height: 24em;
+  max-width: 100%; }
+#conversejs .message.chat-action {
+  font-style: italic; }
+#conversejs .message.chat-msg {
+  display: flex;
+  flex-direction: row;
+  overflow: auto;
+  padding: 0.5rem 1rem; }
+  #conversejs .message.chat-msg.onload {
+    animation: colorchange-chatmessage 1s;
+    -webkit-animation: colorchange-chatmessage 1s; }
+  #conversejs .message.chat-msg.delayed .chat-msg-them {
+    color: #41b875; }
+  #conversejs .message.chat-msg.delayed .chat-msg-me {
+    color: #6899b2; }
+  #conversejs .message.chat-msg:hover {
+    background-color: rgba(0, 0, 0, 0.035); }
+  #conversejs .message.chat-msg .avatar {
+    background: #818479;
+    height: 36px;
+    vertical-align: middle;
+    width: 36px; }
+  #conversejs .message.chat-msg .chat-msg-content {
+    margin-left: 0.5rem; }
+  #conversejs .message.chat-msg .chat-msg-text {
+    padding: 0;
+    color: #666;
+    max-width: 100%;
+    word-wrap: break-word; }
+    #conversejs .message.chat-msg .chat-msg-text.spoiler {
+      border-radius: 4px;
+      padding: 0.5em; }
+    #conversejs .message.chat-msg .chat-msg-text .emojione {
+      margin-bottom: -6px; }
+  #conversejs .message.chat-msg .chat-msg-heading {
+    padding-bottom: 0.5rem;
+    display: block; }
+    #conversejs .message.chat-msg .chat-msg-heading .chat-msg-author {
+      font-weight: bold; }
+    #conversejs .message.chat-msg .chat-msg-heading .chat-msg-time {
+      padding-left: 0.5em; }
+    #conversejs .message.chat-msg .chat-msg-heading .chat-msg-them {
+      color: #3AA569; }
+    #conversejs .message.chat-msg .chat-msg-heading .chat-msg-me {
+      color: #578EA9; }
+  #conversejs .message.chat-msg.chat-msg-followup .chat-msg-heading,
+  #conversejs .message.chat-msg.chat-msg-followup .avatar {
+    display: none; }
+  #conversejs .message.chat-msg.chat-msg-followup .chat-msg-content {
+    margin-left: 2.75rem; }
+#conversejs .chatroom-body .message.onload {
+  animation: colorchange-chatmessage-muc 1s;
+  -webkit-animation: colorchange-chatmessage-muc 1s; }
+#conversejs .chatroom-body .message.delayed .chat-msg-them {
+  color: #41b875; }
+#conversejs .chatroom-body .message.delayed .chat-msg-me {
+  color: #6899b2; }
+#conversejs .chatroom-body .message .chat-msg-them {
+  color: #3AA569; }
+#conversejs .chatroom-body .message .separator {
+  border: 0.5px solid #E77051; }
+
+@media screen and (max-width: 767px) {
+  #conversejs:not(.converse-embedded) .message.chat-msg .chat-msg-author {
+    white-space: normal; } }
 #converse-embedded-chat [hidden],
 #conversejs [hidden] {
   display: none; }

mockup/chatroom.html

@@ -23,9 +23,9 @@
             <div class="chatbox chatroom" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
                 <div class="flyout box-flyout">
                     <div class="chat-head chat-head-chatroom row no-gutters">
-                        <div class="col">
-                            <div class="chat-title">Chatroom with a very long name</div>
-                            <p class="chatroom-topic">May the force be with you</p>
+                        <div class="col col-9">
+                            <div class="chat-title">ACT II. SCENE II. Capulet's orchard.</div>
+                            <p class="chatroom-topic">Two households, both alike in dignity, In fair Verona, where we lay our scene.</p>
                         </div>
                         <div class="chatbox-buttons row no-gutters">
                             <a class="chatbox-btn fa fa-minus"></a>
@@ -35,63 +35,135 @@
                     </div>
 
                     <div class="chat-body chatroom-body row no-gutters">
-                        <div class="chat-area col-md-9 col-8">
+                        <div class="chat-area">
                             <div class="chat-content">
-                                <time class="message chat-info chat-date badge badge-info" data-isodate="2018-04-36T00:00:00+02:00">Tuesday Apr 36th 2018</time>
-                                <div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join="&quot;jc&quot;">jc has entered the room</div><div class="message chat-message " data-isodate="2018-04-36T18:07:26+02:00" data-msgid="4fb4d101-8136-4f2a-8dfb-2615896b8316">
-                                    <canvas height="36" width="36" class="avatar"></canvas>
-                                    <span class="chat-msg-author chat-msg-me">18:07 me:&nbsp;</span>
-                                    <span class="chat-msg-content">ee</span>
-                                    <div class="chat-msg-media"></div>
-                                </div>
-                                <div class="message chat-message">
-                                    <canvas height="36" width="36" class="avatar"></canvas>
-                                    <span class="chat-msg-author chat-msg-room">18:50&nbsp;
-                                        <span class="chat-msg-room">luke:&nbsp;</span>
-                                    </span>
-                                    <span class="chat-msg-content">leia: hi :)</span>
+                                <div class="message date-separator">
+                                    <hr class="separator">
+                                    <time class="separator-text" datetime="2018-06-03T00:00:00.000Z"><span>Tue Jun 03 2018</span></time>
                                 </div>
-                                <div class="message chat-message">
-                                    <canvas height="36" width="36" class="avatar"></canvas>
-                                    <span class="chat-msg-author chat-msg-room">19:36&nbsp;
-                                        <span class="chat-msg-room">leia:&nbsp;</span>
-                                    </span>
-                                    <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
+
+                                <div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join="&quot;Romeo Montague&quot;">
+                                    Romeo Montague has entered the room</div>
+
+								<div class="message chat-msg">
+                                    <canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
+                                    <div class="chat-msg-content">
+                                        <span class="chat-msg-heading">
+                                            <span class="chat-msg-author">Romeo Montague</span>
+                                            <span class="chat-msg-time text-muted">15:31</span>
+                                        </span>
+                                        <p class="chat-msg-text">He jests at scars that never felt a wound.</p>
+                                    </div>
+								</div>
+
+                                <div class="message date-separator">
+                                    <hr class="separator">
+                                    <time class="separator-text" datetime="2018-06-04T00:00:00.000Z"><span>Tue Jun 04 2018</span></time>
                                 </div>
-                                <time class="message chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
-                                <div class="message chat-message">
+
+                                <div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join="&quot;Juliet&quot;">
+                                    Juliet has entered the room</div>
+
+								<div class="message chat-msg">
+                                    <canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
+                                    <div class="chat-msg-content">
+                                        <span class="chat-msg-heading">
+                                            <span class="chat-msg-author">Romeo Montague</span>
+                                            <span class="chat-msg-time text-muted">19:36</span>
+                                        </span>
+                                        <p class="chat-msg-text">
+                                            But, soft! what light through yonder window breaks?
+                                        </p>
+                                    </div>
+								</div>
+								<div class="message chat-msg chat-msg-followup">
+                                    <canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
+                                    <div class="chat-msg-content">
+                                        <span class="chat-msg-heading">
+                                            <span class="chat-msg-author">Romeo Montague</span>
+                                            <span class="chat-msg-time text-muted">19:36</span>
+                                        </span>
+                                        <p class="chat-msg-text">It is the east, and Juliet is the sun.</p>
+                                    </div>
+								</div>
+								<div class="message chat-msg chat-msg-followup">
+                                    <canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
+                                    <div class="chat-msg-content">
+                                        <span class="chat-msg-heading">
+                                            <span class="chat-msg-author">Romeo Montague</span>
+                                            <span class="chat-msg-time text-muted">19:36</span>
+                                        </span>
+                                        <p class="chat-msg-text">Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief</p>
+                                    </div>
+								</div>
+
+
+								<div class="message chat-msg">
                                     <canvas height="36" width="36" class="avatar"></canvas>
-                                    <span class="chat-msg-author chat-msg-room">19:36&nbsp;
-                                        <span class="chat-msg-room">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
-                                    </span>
-                                    <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
-                                </div>
+                                    <div class="chat-msg-content">
+                                        <span class="chat-msg-heading">
+                                            <span class="chat-msg-author">Juliet Capulet</span>
+                                            <span class="chat-msg-time text-muted">19:43</span>
+                                        </span>
+                                        <p class="chat-msg-text">
+                                            O Romeo, Romeo! wherefore art thou Romeo?
+                                            Deny thy father and refuse thy name;
+                                            Or, if thou wilt not, be but sworn my love,
+                                            And I'll no longer be a Capulet.
+                                        </p>
+                                    </div>
+								</div>
 
-                                <div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;jcbrand&quot;">jcbrand has entered the room</div>
-                                <div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;jcbrand&quot;">Topic set by jcbrand</div>
+                                <div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;Mercutio&quot;">Mercutio has entered the room</div>
+                                <div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;Mercutio&quot;">Topic set by Mercutio</div>
                                 <div class="message chat-info chat-topic" data-isodate="2018-03-07T10:21:09+01:00">Converse.js: The latest release is 3.3.4. Please be
                                         patient if your questions aren't answered immediately. We're all in different timezones.</div>
 
-                                <div class="message chat-message">
+								<div class="message chat-msg">
                                     <canvas height="36" width="36" class="avatar"></canvas>
-                                    <span class="chat-msg-author chat-msg-me">19:42&nbsp;
-                                        <span class="chat-msg-me">me:&nbsp;</span>
-                                    </span>
-                                    <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
-                                </div>
-                                <div class="message chat-message">
+                                    <div class="chat-msg-content">
+                                        <span class="chat-msg-heading">
+                                            <span class="chat-msg-author">Mercutio</span>
+                                            <span class="chat-msg-time text-muted">19:49</span>
+                                        </span>
+                                        <p class="chat-msg-text">I mean, sir, in delay We waste our lights in vain, like lamps by day.</p>
+                                    </div>
+								</div>
+
+								<div class="message chat-msg chat-msg-followup">
                                     <canvas height="36" width="36" class="avatar"></canvas>
-                                    <span class="chat-msg-author chat-msg-room">19:43&nbsp;
-                                        <span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
-                                    </span>
-                                    <span class="chat-msg-content">Another message to check that scrolling works.</span>
-                                </div>
+                                    <div class="chat-msg-content">
+                                        <span class="chat-msg-heading">
+                                            <span class="chat-msg-author">Mercutio</span>
+                                            <span class="chat-msg-time text-muted">19:49</span>
+                                        </span>
+                                        <p class="chat-msg-text">
+                                        Take our good meaning, for our judgment sits.
+                                        Five times in that ere once in our five wits.</p>
+                                    </div>
+								</div>
+
+								<div class="message chat-msg chat-msg-followup">
+                                    <canvas height="36" width="36" class="avatar"></canvas>
+                                    <div class="chat-msg-content">
+                                        <span class="chat-msg-heading">
+                                            <span class="chat-msg-author">Mercutio</span>
+                                            <span class="chat-msg-time text-muted">19:49</span>
+                                        </span>
+                                        <p class="chat-msg-text">
+                                        True, I talk of dreams, Which are the children of an idle brain, Begot of nothing but vain fantasy,
+                                        Which is as thin of substance as the air And more inconstant than the wind, who wooes
+                                        Even now the frozen bosom of the north, And, being anger'd, puffs away from thence,
+                                        Turning his face to the dew-dropping south. 
+                                    </div>
+								</div>
+
                             </div>
+                            <div class="new-msgs-indicator">▼ You have unread messages ▼</div>
                             <form class="sendXMPPMessage">
                                 <ul class="chat-toolbar no-text-select">
                                     <li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
                                     <li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
-                                    <li class="toggle-clear"><a class="fa fa-eraser" title="Clear all messages"></a></li>
                                 </ul>
                                 <textarea class="chat-textarea form-control" placeholder="Message"></textarea>
                             </form>
@@ -106,91 +178,45 @@
 
                             <ul class="occupant-list">
                                 <li class="moderator occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Admiral Ackbar</li>
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>Juliet Capulet</li>
                                 <li class="moderator occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Padmé Amidala</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Jar Jar Binks</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-away circle" title="Away"></div>C-3PO</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Chewbacca</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Count Dooku</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Boba Fett</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Jabba the Hutt</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Mara Jade</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Queen Jamillia</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Jerec</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Moff Jerjerrod</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Qui-Gon Jinn</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Captain Kael</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Kir Kanos</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Talon Karrde</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Talon Karrde</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Obi-Wan Kenobi</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Darth Maul</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Princess Leia Organa</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Emperor Palpatine</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>R2-D2</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>R5-D4</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Darth Sidious</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Anakin Skywalker</li>
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>Romeo Montague</li>
                                 <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Luke Skywalker</li>
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>Mercutio</li>
                                 <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Han Solo</li>
+                                    <div class="occupant-status occupant-away circle" title="Away"></div>Lady Montague</li>
                                 <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>TC-14</li>
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>Lord Montague</li>
                                 <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Booster Terrik</li>
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>Friar Laurence</li>
                                 <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Mirax Terrik</li>
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>Tybalt</li>
                                 <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Mod Terrik</li>
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>Paris</li>
                                 <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Tessek</li>
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>Lord Capulet</li>
                                 <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Darth Vader</li>
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>Benvolio</li>
                                 <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Supreme Chancellor Finis Valorum</li>
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>Lady Capulet</li>
                                 <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Nahdar Vebb</li>
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>Balthasar</li>
                                 <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>General Maximilian Veers</li>
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>Escalus, Prince of Verona</li>
                                 <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Tahiri Veila</li>
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>Peter</li>
                                 <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Asajj Ventress</li>
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>Abram</li>
                                 <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Vergere</li>
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>Sampson</li>
                                 <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>King Veruna</li>
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>The Nurse</li>
                                 <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Vima-Da-Boda</li>
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>Gregory</li>
                                 <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Quinlan Vos</li>
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>Friar John</li>
                                 <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Yoda</li>
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>Servant</li>
                             </ul>
                             <div class="chatroom-features">
                                 <p class="occupants-heading">Features</p>
@@ -224,7 +250,7 @@
     document.addEventListener("DOMContentLoaded", function(event) { 
         new Modals();
         new Sidebar();
-        new UserPanel();    
+        new UserPanel();
     });
 </script>
 

mockup/converse.html

@@ -1,283 +0,0 @@
-<!doctype html>
-<html class="no-js" lang="en">
-<head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Overlayed chats</title>
-    <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" />
-</head>
-
-<body style="background-color: #578EA9">
-     <div class="converse-bg container">
-          <h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
-     </div>
-
-     <div id="conversejs">
-        <div class="converse-chatboxes row no-gutters">
-            <div id="controlbox" class="chatbox">
-                <div class="flyout box-flyout">
-                    <div class="controlbox-panes">
-                        <div class="sidebar"></div>
-                        <div class="controlbox-pane"></div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="chatbox" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
-                <div class="flyout box-flyout">
-
-                    <div class="chat-head chat-head-chatbox row no-gutters">
-                        <div class="col-9">
-                            <div class="row no-gutters">
-                                <div class="col-auto"><canvas height="44" width="44" class="avatar"></canvas></div>
-                                <div class="col chat-title" title="j@chat.example.org">JC Brand
-                                    <p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-3">
-                            <div class="chatbox-buttons row no-gutters">
-                                <a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
-                                <a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="chat-body">
-                        <div class="chat-content">
-                            <div class="chat-info">
-                                <span class="badge badge-info">This is an info message</span></div>
-                            <div class="chat-info">
-                                <span class="badge badge-danger">This is an error message</span></div>
-                            <div class="chat-message">
-                                <span class="chat-msg-author chat-msg-me">09:35&nbsp;
-                                    <canvas height="24" width="24" class="avatar"></canvas>
-                                    <span class="chat-msg-me">me:&nbsp;</span>
-                                </span>
-                                <span class="chat-msg-content">Hello world
-                                    <span class="fa fa-smile-o"></span>
-                                </span>
-                            </div>
-                            <div class="chat-message">
-                                <span class="chat-msg-author chat-msg-them">
-                                    19:25&nbsp; <canvas height="24" width="24" class="avatar"></canvas> Benedict-John:
-                                </span>
-                                <span class="chat-msg-content">Dagsê</span>
-                            </div>
-                            <div class="chat-message">
-                                <span class="chat-msg-author chat-msg-me">19:39&nbsp;
-                                        <canvas height="24" width="24" class="avatar"></canvas>
-                                        <span class="chat-msg-me">me:&nbsp;</span>
-                                </span>
-                                <span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
-                            </div>
-                            <div class="chat-message">
-                                <span class="chat-msg-author chat-msg-me">19:42&nbsp;
-                                        <canvas height="24" width="24" class="avatar"></canvas>
-                                        <span class="chat-msg-me">me:&nbsp;</span>
-                                </span>
-                                <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
-                            </div>
-                            <div class="chat-info chat-event">
-                                <span class="badge badge-success">JC Brand is busy</span>
-                            </div>
-                            <div class="chat-message">
-                                <span class="chat-msg-author chat-msg-me">19:43&nbsp;
-                                        <canvas height="24" width="24" class="avatar"></canvas>
-                                        <span class="chat-msg-me">me:&nbsp;</span>
-                                </span>
-                                <span class="chat-msg-content">Another message to check that scrolling works.</span>
-                            </div>
-                        </div>
-
-                        <form class="sendXMPPMessage">
-                            <ul class="chat-toolbar no-text-select">
-                                <li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
-                                    <div class="emoji-picker-container toolbar-menu collapsed"></div>
-                                </li>
-                                <li class="toggle-clear">
-                                    <a class="fa fa-trash" title="Clear all messages"></a>
-                                </li>
-                                <li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
-                                    <span class="chat-toolbar-text">unencrypted</span>
-                                    <span class="fa fa-unlock"></span>
-                                    <ul class="toolbar-menu collapsed">
-                                        <li>
-                                            <a class="start-otr" href="#">Start encrypted conversation</a>
-                                        </li>
-                                        <li>
-                                            <a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
-                                        </li>
-                                    </ul>
-                                </li>
-                            </ul>
-                            <textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
-                        </form>
-                    </div>
-                </div>
-            </div>
-
-            <div class="chatbox chatroom" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
-                <div class="flyout box-flyout">
-                    <div class="chat-head chat-head-chatroom row no-gutters">
-                        <div class="col-sm-8 col-lg-10">
-                            <div class="chat-title">Chatroom with a very long name</div>
-                            <p class="chatroom-topic">May the force be with you</p>
-                        </div>
-                        <div class="col-sm-4 col-lg-2">
-                            <div class="chatbox-buttons row no-gutters">
-                                <a class="chatbox-btn fa fa-minus"></a>
-                                <a class="chatbox-btn fa fa-close"></a>
-                                <a class="chatbox-btn fa fa-wrench"></a>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="chat-body chatroom-body row no-gutters">
-                        <div class="chat-area col-md-9 col-8">
-                            <div class="chat-content">
-                                <div class="chat-message">
-                                    <span class="chat-msg-author chat-msg-room">18:50&nbsp;
-                                        <canvas height="24" width="24" class="avatar"></canvas>
-                                        <span class="chat-msg-room">luke:&nbsp;</span>
-                                    </span>
-                                    <span class="chat-msg-content">leia: hi :)</span>
-                                </div>
-                                <div class="chat-message">
-                                    <span class="chat-msg-author chat-msg-room">19:40&nbsp;
-                                        <canvas height="24" width="24" class="avatar"></canvas>
-                                        <span class="chat-msg-room">leia:&nbsp;</span>
-                                    </span>
-                                    <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
-                                </div>
-                                <time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
-                                <div class="chat-message">
-                                    <span class="chat-msg-author chat-msg-room">19:40&nbsp;
-                                        <canvas height="24" width="24" class="avatar"></canvas>
-                                        <span class="chat-msg-room">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
-                                    </span>
-                                    <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
-                                </div>
-                                <div class="chat-message">
-                                    <span class="chat-msg-author chat-msg-me">19:42&nbsp;
-                                        <canvas height="24" width="24" class="avatar"></canvas>
-                                        <span class="chat-msg-me">me:&nbsp;</span>
-                                    </span>
-                                    <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
-                                </div>
-                                <div class="chat-message">
-                                    <span class="chat-msg-author chat-msg-room">19:43&nbsp;
-                                        <canvas height="24" width="24" class="avatar"></canvas>
-                                        <span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
-                                    </span>
-                                    <span class="chat-msg-content">Another message to check that scrolling works.</span>
-                                </div>
-                            </div>
-                            <form class="sendXMPPMessage">
-                                <ul class="chat-toolbar no-text-select">
-                                    <li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
-                                    <li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
-                                    <li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
-                                </ul>
-                                <textarea class="chat-textarea form-control" placeholder="Message"></textarea>
-                            </form>
-                        </div>
-
-                        <div class="occupants col-md-3 col-4">
-                            <p class="occupants-heading">Occupants:</p>
-                            <form class="pure-form room-invite">
-                                <input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
-                                <pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
-                            </form>
-
-                            <ul class="occupant-list">
-                                <li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
-                                <li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
-                                <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                            </ul>
-                            <div class="chatroom-features">
-                                <p class="occupants-heading">Features</p>
-                                <ul class="features-list">
-                                    <li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span>&nbsp;</li>
-                                    <li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span>&nbsp;</li>
-                                    <li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span>&nbsp;</li>
-                                    <li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span>&nbsp;</li>
-                                    <li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span>&nbsp;</li>
-                                    <li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span>&nbsp;</li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div id="minimized-chats">
-                <a id="toggle-minimized-chats" href="#" class="row no-gutters">
-                    <span class="badge badge-light">322</span> Minimized
-                </a>
-                <div class="flyout minimized-chats-flyout row no-gutters">
-                    <div class="chat-head chat-head-chatroom row no-gutters">
-                        <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
-                            <span class="badge badge-light">42</span>
-                            Restricted Chatroom
-                        </a>
-                        <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
-                    </div>
-                    <div class="chat-head chat-head-chatbox row no-gutters">
-                        <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
-                            <span class="badge badge-light">4</span>
-                            JC Brand
-                        </a>
-                        <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
-                    </div>
-                    <div class="chat-head chat-head-chatroom row no-gutters">
-                        <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">My Chatroom</a>
-                        <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
-                    </div>
-                    <div class="chat-head chat-head-chatbox row no-gutters">
-                        <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Annegreet Gomez</a>
-                        <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
-                    </div>
-                    <div class="chat-head chat-head-chatbox row no-gutters">
-                        <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
-                            <span class="badge badge-light">842</span>
-                            Asmaa Haakman
-                        </a>
-                        <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
-                    </div>
-                    <div class="chat-head chat-head-chatbox row no-gutters">
-                        <a href="#" class="restore-chat w-100 align-self-center">Lena Grunewald</a>
-                        <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
-                    </div>
-                </div>
-            </div>
-            <div id="converse-modals" class="modals"></div>
-        </div>
-    </div>
-</body>
-
-<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
-<script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
-<script type="text/javascript" src="../../node_modules/backbone.nativeview/backbone.nativeview.js"></script>
-
-<script type="text/javascript" src="sidebar.js"></script>
-<script type="text/javascript" src="user-panel.js"></script>
-<script type="text/javascript" src="modals.js"></script>
-
-<script type="text/javascript" src="../../node_modules/bootstrap.native/dist/bootstrap-native-v4.js"></script>
-
-<script>
-    document.addEventListener("DOMContentLoaded", function(event) { 
-        new Modals();
-        new Sidebar();
-        new UserPanel();    
-    });
-</script>
-
-</html>

mockup/index.html

@@ -21,7 +21,7 @@
         <li><a href="/mockup/overlayed-login.html" class="btn btn-primary">1b. Overlayed Login</a></li>
         <li><a href="/mockup/chatbox.html" class="btn btn-primary">2. Fullscreen private chat</a></li>
         <li><a href="/mockup/chatroom.html" class="btn btn-primary">3. Fullscreen MUC</a></li>
-        <li><a href="/mockup/converse.html" class="btn btn-primary">4. Overlayed chats</a></li>
+        <li><a href="/mockup/overlayed.html" class="btn btn-primary">4. Overlayed chats</a></li>
     </ul>
 </body>
 </html>

mockup/user-panel.html

@@ -1,8 +1,8 @@
 <!-- <div id="users" class="controlbox-pane"> -->
 <div class="userinfo">
     <div class="profile d-flex">
-        <canvas height="40px" width="40px" class="avatar align-self-center"></canvas>
-        <span class="username w-100 align-self-center">Walter White</span>
+        <canvas data-avatar="/mockup/images/romeo.jpg" height="40px" width="40px" class="avatar align-self-center"></canvas>
+        <span class="username w-100 align-self-center">Romeo Montague</span>
         <!-- <a class="chatbox-btn fa fa-vcard align-self-center" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a> -->
         <!-- <a class="chatbox-btn fa fa-cog align-self-center" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a> -->
         <a class="chatbox-btn logout fa fa-sign-out align-self-center" title="Log out"></a>
@@ -68,12 +68,12 @@
                 <span class="fa fa-caret-down"></span> Contact Requests</a>
             <ul class="roster-group-contacts">
                 <li class="offline requesting-xmpp-contact d-flex">
-                    <span class="req-contact-name w-100">Bob Skinstad</span>
+                    <span class="req-contact-name w-100">The Nurse</span>
                     <a class="accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
                     <a class="decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
                 </li>
                 <li class="offline requesting-xmpp-contact d-flex">
-                    <span class="req-contact-name w-100">André Vos</span>
+                    <span class="req-contact-name w-100">Friar Laurence</span>
                     <a class="accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
                     <a class="decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
                 </li>
@@ -85,19 +85,14 @@
                 <span class="fa fa-caret-down"></span> Colleagues</a>
 
             <ul>
-                <li class="online current-xmpp-contact d-flex">
-                    <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
-                        <span class="fa fa-circle" title="This contact is online"></span> Victor Matfield</a>
-                    <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
-                </li>
                 <li class="away current-xmpp-contact d-flex">
                     <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
-                        <span class="fa fa-circle-o" title="this contact is away"></span> William Winterbottom</a>
+                        <span class="fa fa-circle-o" title="this contact is away"></span> Balthasar</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
                 <li class="dnd current-xmpp-contact d-flex">
                     <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
-                        <span class="fa fa-minus-circle" title="This contact is busy"></span> Gary Teichmann</a>
+                        <span class="fa fa-minus-circle" title="This contact is busy"></span> Escalus, Prince of Verona</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
             </li>
@@ -107,14 +102,19 @@
             <a href="#" data-group="Family" class="group-toggle" title="Click to hide these contacts">
                 <span class="fa fa-caret-down"></span> Family</a>
             <ul>
-                <li class="away current-xmpp-contact d-flex">
+                <li class="online current-xmpp-contact d-flex">
                     <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
-                        <span class="fa fa-circle-o" title="this contact is away"></span> Allan Donald</a>
+                        <span class="fa fa-circle" title="This contact is online"></span> Benvolio Montague</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
                 <li class="offline current-xmpp-contact d-flex">
                     <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
-                        <span class="fa fa-times-circle" title="This contact is offline"></span> Corné Krige</a>
+                        <span class="fa fa-times-circle" title="This contact is offline"></span> Montague</a>
+                    <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
+                </li>
+                <li class="offline current-xmpp-contact d-flex">
+                    <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
+                        <span class="fa fa-times-circle" title="This contact is offline"></span> Lady Montague</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
             </ul>
@@ -126,12 +126,7 @@
             <ul>
                 <li class="online current-xmpp-contact d-flex">
                     <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
-                        <span class="fa fa-circle" title="This contact is online"></span> John Smit</a>
-                    <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
-                </li>
-                <li class="online current-xmpp-contact d-flex">
-                    <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
-                        <span class="fa fa-circle" title="This contact is online"></span> Bakkies Botha</a>
+                        <span class="fa fa-circle" title="This contact is online"></span> Mercutio</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
             </ul>
@@ -143,7 +138,17 @@
             <ul>
                 <li class="online current-xmpp-contact d-flex">
                     <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
-                        <span class="fa fa-circle" title="This contact is online"></span> James Small</a>
+                        <span class="fa fa-circle" title="This contact is online"></span> Gregory</a>
+                    <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
+                </li>
+                <li class="online current-xmpp-contact d-flex">
+                    <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
+                        <span class="fa fa-circle" title="This contact is online"></span> Peter</a>
+                    <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
+                </li>
+                <li class="online current-xmpp-contact d-flex">
+                    <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
+                        <span class="fa fa-circle" title="This contact is online"></span> Sampson</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
             </ul>
@@ -154,11 +159,11 @@
                 <span class="fa fa-caret-down"></span> Pending Contacts</a>
             <ul>
                 <li class="offline pending-xmpp-contact d-flex">
-                    <span class="pending-contact-name w-100">Rassie Erasmus</span>
+                    <span class="pending-contact-name w-100">An Apothecary</span>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
                 <li class="offline pending-xmpp-contact d-flex">
-                    <span class="pending-contact-name w-100">Victor Matfield</span>
+                    <span class="pending-contact-name w-100">Abram</span>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
             </ul>

mockup/user-panel.js

@@ -16,7 +16,33 @@ const UserPanel = Backbone.NativeView.extend({
                     backdrop: 'static', // we don't want to dismiss Modal when Modal or backdrop is the click event target
                     keyboard: true // we want to dismiss Modal on pressing Esc key
                 }));
+            this.renderAvatar();
         }
         xhr.send();
+    },
+
+    renderAvatar () {
+        const canvasses = document.querySelectorAll('canvas.avatar');
+        _.each(canvasses, (canvas_el) => {
+            const avatar_url = canvas_el.getAttribute('data-avatar');
+            if (!avatar_url) {
+                return;
+            }
+            const ctx = canvas_el.getContext('2d');
+            const img = new Image();
+
+            img.onload = function () {
+                const canvas = ctx.canvas ;
+                const hRatio = canvas.width  / img.width    ;
+                const vRatio =  canvas.height / img.height  ;
+                const ratio  = Math.min ( hRatio, vRatio );
+                const centerShift_x = ( canvas.width - img.width*ratio ) / 2;
+                const centerShift_y = ( canvas.height - img.height*ratio ) / 2;  
+                ctx.clearRect(0,0,canvas.width, canvas.height);
+                ctx.drawImage(img, 0,0, img.width, img.height, centerShift_x,centerShift_y,img.width*ratio, img.height*ratio);  
+            };
+            img.src = avatar_url;
+        });
+
     }
 });

sass/_chatbox.scss

@@ -159,6 +159,7 @@
             background-color: $chat-head-color;
             border-bottom-left-radius: $chatbox-border-radius;
             border-bottom-right-radius: $chatbox-border-radius;
+
             @media screen and (max-height: $mobile-landscape-height) {
                 border-bottom-left-radius: 0;
                 border-bottom-right-radius: 0;
@@ -170,92 +171,13 @@
             border-top: 0;
             p {
                 color: $text-color;
-                font-size: $font-size;
+                font-size: $message-font-size;
                 margin: 0;
                 padding: 5px;
             }
-            .message {
-                margin: 0.5em 0;
-            }
-            .chat-info {
-                line-height: $line-height-small;
-                color: $chat-head-color;
-                font-size: $font-size-small;
-                &.badge {
-                    color: $chat-head-text-color;
-                }
-                &.chat-state-notification {
-                    font-style: italic;
-                }
-                &.chat-event {
-                    clear: left;
-                    font-style: italic;
-                }
-                &.chat-error {
-                    color: $warning-color;
-                    font-weight: bold;
-                }
-                &.chat-date {
-                    display: inline-block;
-                    margin-top: 1em;
-                }
-            }
-            .chat-image {
-                height: auto;
-                width: auto;
-                max-height: 24em;
-                max-width: 100%;
-            }
-            .chat-action {
-                font-style: italic;
-            }
-            .chat-message {
-                overflow: auto; // Ensures that content stays inside
-
-                &.onload {
-                    animation: colorchange-chatmessage 1s;
-                    -webkit-animation: colorchange-chatmessage 1s;
-                }
-
-                canvas {
-                    vertical-align: middle;
-                    background: $gray-color;
-                }
-
-                .chat-msg-author {
-                    font-weight: bold;
-                }
-                .chat-msg-them {
-                    color: $message-them-color;
-                }
-                .chat-msg-me {
-                    color: $link-color;
-                }
-                .chat-msg-content {
-                    max-width: 100%;
-                    word-wrap: break-word;
-
-                    &.spoiler {
-                        border-radius: $chatbox-border-radius;
-                        padding: 0.5em;
-                    }
-
-                    .emojione {
-                        margin-bottom: -6px;
-                    }
-                }
-            }
-            .delayed {
-                .chat-msg-them {
-                    color: lighten($message-them-color, 5%);
-                }
-                .chat-msg-me {
-                    color: lighten($link-color, 5%);
-                }
-            }
         }
         .new-msgs-indicator {
-            position: absolute;
+            position: relative;
             width: 100%;
             cursor: pointer;
             background-color: $chat-head-color;
@@ -265,11 +187,11 @@
             text-align: center;
             z-index: 20;
             white-space: nowrap;
+            margin-bottom: 0.25em;
         }
         .chat-content {
             height: 100%;
-            padding: 1em;
-            font-size: 13px;
+            font-size: $message-font-size;
             color: $text-color;
             overflow-y: auto;
             border: 0;
@@ -535,14 +457,6 @@
 
         .chatbox {
             width: calc(100% - 50px);
-
-            .chat-body {
-                .chat-message {
-                    .chat-msg-author {
-                        white-space: normal;
-                    }
-                }
-            }
             .row {
                 .box-flyout {
                     left: 50px;

sass/_chatrooms.scss

@@ -14,6 +14,7 @@
             white-space: nowrap;
             overflow-y: hidden;
             text-overflow: ellipsis;
+            font-size: $font-size-large;
         }
 
         a, a:visited, a:hover, a:not([href]):not([tabindex]) {
@@ -102,23 +103,6 @@
                 .mentioned {
                     font-weight: bold;
                 }
-                .chat-message {
-                    &.onload {
-                        animation: colorchange-chatmessage-muc 1s;
-                        -webkit-animation: colorchange-chatmessage-muc 1s;
-                    }
-                    .chat-msg-them {
-                        color: $chatroom-message-them-color;
-                        canvas {
-                            background: $red;
-                        }
-                    }
-                    .chat-msg-me {
-                        canvas {
-                            background: $light-blue;
-                        }
-                    }
-                }
                 .disconnect-msg {
                     padding: 2em 2em 0 2em;
                 }
@@ -129,17 +113,12 @@
                     min-width: $chat-width;
                     .new-msgs-indicator {
                         background-color: $chatroom-head-color;
-                        max-width: 70%;
                     }
                     .chat-content {
                         height: 100%;
-                        padding: 0.5em;
                     }
                     &.full {
                         min-width: 100%;
-                        .new-msgs-indicator {
-                            min-width: 100%;
-                        }
                     }
                 }
                 .occupants {

sass/_controlbox.scss

@@ -228,7 +228,7 @@
 
         #chatrooms {
             padding: 0;
-            padding-bottom: 1em;
+            padding-bottom: 0.5em;
 
             form.add-chatroom {
                 input[type=button],

sass/_messages.scss

@@ -0,0 +1,178 @@
+#conversejs {
+    .message {
+
+        &.date-separator {
+            height: 2em;
+            margin: 0;
+            position: relative;
+            text-align: center;
+            z-index: 0;
+
+            .separator {
+                border: 0.5px solid $chat-head-color;
+                margin: 0 1em;
+                position: relative;
+                top: 1em;
+                z-index: 5;
+            }
+
+            .separator-text {
+                background: white;
+                bottom: 1px; // Offset needed due to .separator border size
+                color: #666;
+                display: inline-block;
+                line-height: 2em;
+                padding: 0 1em;
+                position: relative;
+                z-index: 5;
+            }
+        }
+
+        &.chat-info {
+            color: $chat-head-color;
+            font-size: $message-font-size;
+            line-height: $line-height-small;
+            padding: 0.5rem 1rem;
+
+            &.badge {
+                color: $chat-head-text-color;
+            }
+            &.chat-state-notification {
+                font-style: italic;
+            }
+            &.chat-event {
+                clear: left;
+                font-style: italic;
+            }
+            &.chat-error {
+                color: $warning-color;
+                font-weight: bold;
+            }
+            &.chat-date {
+                display: inline-block;
+                margin-top: 1em;
+            }
+        }
+
+        &.chat-image {
+            height: auto;
+            width: auto;
+            max-height: 24em;
+            max-width: 100%;
+        }
+        &.chat-action {
+            font-style: italic;
+        }
+
+        &.chat-msg {
+            display: flex;
+            flex-direction: row;
+            overflow: auto; // Ensures that content stays inside
+            padding: 0.5rem 1rem;
+
+            &.onload {
+                animation: colorchange-chatmessage 1s;
+                -webkit-animation: colorchange-chatmessage 1s;
+            }
+            &.delayed {
+                .chat-msg-them {
+                    color: lighten($message-them-color, 5%);
+                }
+                .chat-msg-me {
+                    color: lighten($link-color, 5%);
+                }
+            }
+            &:hover {
+                background-color: rgba(0, 0, 0, 0.035);
+            }
+
+            .avatar {
+                background: $gray-color;
+                height: 36px;
+                vertical-align: middle;
+                width: 36px;
+            }
+
+            .chat-msg-content {
+                margin-left: 0.5rem;
+            }
+
+            .chat-msg-text {
+                padding: 0;
+                color: #666;
+                max-width: 100%;
+                word-wrap: break-word;
+
+                &.spoiler {
+                    border-radius: $chatbox-border-radius;
+                    padding: 0.5em;
+                }
+                .emojione {
+                    margin-bottom: -6px;
+                }
+            }
+
+            .chat-msg-heading {
+                padding-bottom: 0.5rem;
+                display: block;
+
+                .chat-msg-author {
+                    font-weight: bold;
+                }
+                .chat-msg-time {
+                    padding-left: 0.5em;
+                }
+                .chat-msg-them {
+                    color: $message-them-color;
+                }
+                .chat-msg-me {
+                    color: $link-color;
+                }
+            }
+            &.chat-msg-followup {
+                .chat-msg-heading,
+                .avatar {
+                    display: none;
+                }
+                .chat-msg-content {
+                    margin-left: 2.75rem;
+                }
+            }
+
+        }
+    }
+
+    .chatroom-body .message {
+        &.onload {
+            animation: colorchange-chatmessage-muc 1s;
+            -webkit-animation: colorchange-chatmessage-muc 1s;
+        }
+        &.delayed {
+            .chat-msg-them {
+                color: lighten($chatroom-message-them-color, 5%);
+            }
+            .chat-msg-me {
+                color: lighten($link-color, 5%);
+            }
+        }
+        .chat-msg-them {
+            color: $chatroom-message-them-color;
+        }
+
+        .separator {
+            border: 0.5px solid $chatroom-head-color;
+        }
+    }
+}
+
+@media screen and (max-width: 767px) {
+    #conversejs:not(.converse-embedded)  {
+        .message {
+            &.chat-msg {
+                .chat-msg-author {
+                    white-space: normal;
+                }
+            }
+        }
+    }
+}

sass/converse/converse.scss → sass/converse.scss

@@ -5,9 +5,9 @@
  * Copyright (c) 2012-2016, JC Brand <jc@opkode.com>
  * Licensed under the Mozilla Public License
  */
-@import "../font-awesome";
+@import "font-awesome";
 @import "bourbon";
-@import "variables";
+@import "converse/variables";
 
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
@@ -37,19 +37,20 @@
     @import "bootstrap/scss/popover";
     @import "bootstrap/scss/utilities";
 }
-@import "../core";
 @import "core";
-@import "../profile";
-@import "../chatbox";
+@import "converse/core";
+@import "profile";
 @import "chatbox";
-@import "../controlbox";
+@import "converse/chatbox";
 @import "controlbox";
-@import "../roomslist";
-@import "../roster";
-@import "../chatrooms";
+@import "converse/controlbox";
+@import "roomslist";
+@import "roster";
 @import "chatrooms";
-@import "../headline";
-@import "minimized_chats";
-@import "../bookmarks";
-@import "../awesomplete";
-@import "../muc_embedded";
+@import "converse/chatrooms";
+@import "headline";
+@import "messages";
+@import "converse/minimized_chats";
+@import "bookmarks";
+@import "awesomplete";
+@import "muc_embedded";

sass/converse/_variables.scss

@@ -93,6 +93,8 @@ $chatbox-hover-height: 1em !default;
 $mobile_landscape_height: 450px !default;
 $mobile_portrait_length: 480px !default;
 
+$message-font-size: 14px !default;
+
 $font-size-tiny: 10px !default;
 $font-size-small: 12px !default;
 $font-size: 14px !default;

sass/inverse/inverse.scss → sass/inverse.scss

@@ -5,9 +5,9 @@
  * Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
  * Licensed under the Mozilla Public License
  */
-@import "../font-awesome";
+@import "font-awesome";
 @import "bourbon";
-@import "variables";
+@import "inverse/variables";
 
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
@@ -36,19 +36,20 @@
     @import "bootstrap/scss/popover";
     @import "bootstrap/scss/utilities";
 }
-@import "../core";
 @import "core";
-@import "../profile";
-@import "../chatbox";
+@import "inverse/core";
+@import "profile";
 @import "chatbox";
-@import "../controlbox";
+@import "inverse/chatbox";
 @import "controlbox";
-@import "../roster";
+@import "inverse/controlbox";
 @import "roster";
-@import "../bookmarks";
+@import "inverse/roster";
 @import "bookmarks";
-@import "../chatrooms";
+@import "inverse/bookmarks";
 @import "chatrooms";
-@import "../headline";
+@import "inverse/chatrooms";
 @import "headline";
-@import "../awesomplete"
+@import "inverse/headline";
+@import "messages";
+@import "awesomplete"

sass/inverse/_chatbox.scss

@@ -63,7 +63,6 @@
             }
         }
         .chat-content {
-            padding: 0 $padding $padding $padding;
             border-top-left-radius: $chatbox-border-radius;
             border-top-right-radius: $chatbox-border-radius;
         }

sass/inverse/_chatrooms.scss

@@ -29,7 +29,6 @@
 
                     .chat-content {
                         border-top-left-radius: $chatbox-border-radius;
-                        padding: 0 $padding $padding $padding;
                     }
                     &.full {
                         max-width: 100%;

sass/inverse/_variables.scss

@@ -97,6 +97,8 @@ $chatbox-hover-height: 6px !default;
 $mobile_landscape_height: 450px !default;
 $mobile_portrait_length: 480px !default;
 
+$message-font-size: 14px !default;
+
 $font-size-tiny: 10px !default;
 $font-size-small: 14px !default;
 $font-size: 16px !default;
@@ -109,7 +111,7 @@ $toolbar-color: $greenish-white !default;
 $line-height-small:  20px !default;
 $line-height:  22px !default;
 $line-height-large:  24px !default;
-$line-height-huge:  26px !default;
+$line-height-huge:  30px !default;
 
 $controlbox-width: 250px !default;
 $chat-width: 100% !default;

src/templates/chatroom_head.html

@@ -1,4 +1,4 @@
-<div class="col">
+<div class="col col-9">
     <div class="chat-title" title="{{{o.jid}}}">
         {[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
             <span class="chatroom-name">{{{ o.name }}}</span>