Start using BEM to structure messages Sass/CSS

updates #421

css/converse.css

@@ -8847,7 +8847,7 @@ body.reset {
   width: auto;
   max-height: 15em;
   max-width: 100%; }
-#conversejs .message.chat-action {
+#conversejs .message.chat-msg--action {
   font-style: italic; }
 #conversejs .message.chat-msg {
   display: flex;
@@ -8859,8 +8859,8 @@ body.reset {
     -webkit-animation: colorchange-chatmessage 1s; }
   #conversejs .message.chat-msg:hover {
     background-color: rgba(0, 0, 0, 0.035); }
-    #conversejs .message.chat-msg:hover .chat-msg-actions .chat-msg-action {
-      display: block; }
+    #conversejs .message.chat-msg:hover .chat-msg__actions .chat-msg__action {
+      opacity: 1; }
   #conversejs .message.chat-msg.correcting.groupchat {
     background-color: #fdf1ee; }
   #conversejs .message.chat-msg.correcting:not(.groupchat) {
@@ -8877,20 +8877,34 @@ body.reset {
     #conversejs .message.chat-msg .spoiler-toggle:before {
       padding-right: 0.25em;
       whitespace: nowrap; }
-  #conversejs .message.chat-msg .chat-msg-content {
+  #conversejs .message.chat-msg .chat-msg__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: stretch;
     margin-left: 0.5rem;
     width: 100%; }
+  #conversejs .message.chat-msg .chat-msg__body {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%; }
+  #conversejs .message.chat-msg .chat-msg__message {
+    display: flex;
+    flex-direction: column;
+    width: 100%; }
   #conversejs .message.chat-msg .chat-msg-edited {
     cursor: pointer; }
-  #conversejs .message.chat-msg.headline .chat-msg-content {
+  #conversejs .message.chat-msg.headline .chat-msg__body {
     margin-left: 0; }
-  #conversejs .message.chat-msg .chat-msg-text {
+  #conversejs .message.chat-msg .chat-msg__text {
     padding: 0;
-    color: #555; }
-    #conversejs .message.chat-msg .chat-msg-text a {
+    color: #555;
+    width: 100%; }
+    #conversejs .message.chat-msg .chat-msg__text a {
       word-wrap: break-word;
       word-break: break-all; }
-    #conversejs .message.chat-msg .chat-msg-text .emojione {
+    #conversejs .message.chat-msg .chat-msg__text .emojione {
       margin-bottom: -6px; }
   #conversejs .message.chat-msg .chat-msg-media {
     margin-top: 0.25rem; }
@@ -8898,45 +8912,49 @@ body.reset {
       word-wrap: break-word; }
     #conversejs .message.chat-msg .chat-msg-media audio {
       width: 100%; }
-  #conversejs .message.chat-msg .chat-msg-actions .chat-msg-action {
+  #conversejs .message.chat-msg .chat-msg__actions .chat-msg__action {
     height: 14px;
     font-size: 14px;
     padding: 0;
     border: none;
-    display: none;
+    opacity: 0;
     background: transparent;
     cursor: pointer; }
-    #conversejs .message.chat-msg .chat-msg-actions .chat-msg-action:focus {
+    #conversejs .message.chat-msg .chat-msg__actions .chat-msg__action:focus {
       display: block; }
-  #conversejs .message.chat-msg .avatar {
+  #conversejs .message.chat-msg .chat-msg__avatar {
     margin-top: 0.5em;
     height: 36px;
     vertical-align: middle;
     width: 36px; }
-  #conversejs .message.chat-msg .chat-msg-heading {
+  #conversejs .message.chat-msg .chat-msg__heading {
+    width: 100%;
     margin-top: 0.5em;
     padding-right: 0.25rem;
     padding-bottom: 0.25rem;
     display: block; }
-    #conversejs .message.chat-msg .chat-msg-heading .chat-msg-author {
+    #conversejs .message.chat-msg .chat-msg__heading .chat-msg__author {
       font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif;
       font-size: 115%; }
-      #conversejs .message.chat-msg .chat-msg-heading .chat-msg-author .badge {
+      #conversejs .message.chat-msg .chat-msg__heading .chat-msg__author .badge {
         font-size: 80%;
         font-family: "Helvetica", "Arial", sans-serif; }
-    #conversejs .message.chat-msg .chat-msg-heading .chat-msg-time {
+    #conversejs .message.chat-msg .chat-msg__heading .chat-msg__time {
       padding-left: 0.25em;
       color: #8c8c8c; }
-  #conversejs .message.chat-msg.chat-action {
-    display: block; }
-    #conversejs .message.chat-msg.chat-action .chat-msg-heading {
-      float: left;
-      margin-top: 0;
-      padding-bottom: 0; }
-  #conversejs .message.chat-msg.chat-msg-followup .chat-msg-heading,
-  #conversejs .message.chat-msg.chat-msg-followup .avatar {
+  #conversejs .message.chat-msg.chat-msg--action .chat-msg__content {
+    flex-direction: row;
+    justify-content: flex-start; }
+  #conversejs .message.chat-msg.chat-msg--action .chat-msg__text {
+    width: auto; }
+  #conversejs .message.chat-msg.chat-msg--action .chat-msg__heading {
+    margin-top: 0;
+    padding-bottom: 0;
+    width: auto; }
+  #conversejs .message.chat-msg.chat-msg--followup .chat-msg__heading,
+  #conversejs .message.chat-msg.chat-msg--followup .chat-msg__avatar {
     display: none; }
-  #conversejs .message.chat-msg.chat-msg-followup .chat-msg-content {
+  #conversejs .message.chat-msg.chat-msg--followup .chat-msg__content {
     margin-left: 2.75rem; }
 #conversejs .chatroom-body .message.onload {
   animation: colorchange-chatmessage-muc 1s;
@@ -8944,11 +8962,11 @@ body.reset {
 #conversejs .chatroom-body .message .separator {
   border: 0.5px solid #E77051; }
 
-#conversejs.converse-overlayed .message.chat-msg.chat-msg-followup .chat-msg-content {
+#conversejs.converse-overlayed .message.chat-msg.chat-msg--followup .chat-msg__body {
   margin-left: 0; }
 
 @media screen and (max-width: 767px) {
-  #conversejs:not(.converse-embedded) .message.chat-msg .chat-msg-author {
+  #conversejs:not(.converse-embedded) .message.chat-msg .chat-msg__author {
     white-space: normal; } }
 #conversejs.converse-overlayed #minimized-chats {
   order: 100;

dist/converse.js

@@ -71100,7 +71100,13 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           let jid = form_data.get('jid');
 
           if (_converse.locked_domain) {
-            jid = Strophe.escapeNode(jid) + '@' + _converse.locked_domain;
+            const last_part = '@' + _converse.locked_domain;
+
+            if (jid.endsWith(last_part)) {
+              jid = jid.substr(0, jid.length - last_part.length);
+            }
+
+            jid = Strophe.escapeNode(jid) + last_part;
           } else if (_converse.default_domain && !_.includes(jid, '@')) {
             jid = jid + '@' + _converse.default_domain;
           }

mockup/chatbox.html

@@ -42,18 +42,22 @@
                             <div class="message chat-info chat-error">This is an error message</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">15:31</span>
-                                    </span>
-                                    <span class="chat-msg-text">
-                                        He jests at scars that never felt a wound.
+                                <canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__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">15:31</span>
                                     </span>
+                                    <div class="chat-msg__body">
+                                        <div class="chat-msg__message">
+                                            <span class="chat-msg__text">
+                                                He jests at scars that never felt a wound.
+                                            </span>
+                                        </div>
+                                    </div>
                                 </div>
-                                <div class="chat-msg-actions">
-                                    <button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
+                                <div class="chat-msg__actions">
+                                    <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
                                 </div>
                             </div>
 
@@ -63,71 +67,87 @@
                             </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">15:31</span>
-                                    </span>
-                                    <span class="chat-msg-text">
-                                        But soft, what light through yonder window breaks?
+                                <canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__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">15:31</span>
                                     </span>
+                                    <div class="chat-msg__body">
+                                        <div class="chat-msg__message">
+                                            <span class="chat-msg__text">
+                                                But soft, what light through yonder window breaks?
+                                            </span>
+                                        </div>
+                                    </div>
                                 </div>
-                                <div class="chat-msg-actions">
-                                    <button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
+                                <div class="chat-msg__actions">
+                                    <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
                                 </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">15:31</span>
-                                    </span>
-                                    <span class="chat-msg-text">
-                                        It is the east and Juliet is the sun!
+                                <canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__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">15:31</span>
                                     </span>
+                                    <div class="chat-msg__body">
+                                        <div class="chat-msg__message">
+                                            <span class="chat-msg__text">
+                                                It is the east and Juliet is the sun!
+                                            </span>
+                                        </div>
+                                    </div>
                                 </div>
-                                <div class="chat-msg-actions">
-                                    <button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
+                                <div class="chat-msg__actions">
+                                    <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
                                 </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">15:31</span>
-                                    </span>
-                                    <span class="chat-msg-text">
-                                        Arise, fair sun, and kill the envious moon,
+                                <canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__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">15:31</span>
                                     </span>
+                                    <div class="chat-msg__body">
+                                        <div class="chat-msg__message">
+                                            <span class="chat-msg__text">
+                                                Arise, fair sun, and kill the envious moon,
+                                            </span>
+                                        </div>
+                                    </div>
                                 </div>
-                                <div class="chat-msg-actions">
-                                    <button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
+                                <div class="chat-msg__actions">
+                                    <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
                                 </div>
                             </div>
 
                             <div class="message chat-info chat-event">Romeo Montague is busy</div>
 
                             <div class="message chat-msg">
-                                <canvas height="36" width="36" class="avatar"></canvas>
-                                <div class="chat-msg-content">
-                                    <span class="chat-msg-heading">
-                                        <span class="chat-msg-author">Juliet Capulet</span>
-                                        <span class="chat-msg-time">15:31</span>
-                                    </span>
-                                    <span 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.
+                                <canvas height="36" width="36" class="avatar chat-msg__avatar"></canvas>
+                                <div class="chat-msg__content">
+                                    <span class="chat-msg__heading">
+                                        <span class="chat-msg__author">Juliet Capulet</span>
+                                        <span class="chat-msg__time">15:31</span>
                                     </span>
+                                    <div class="chat-msg__body">
+                                        <div class="chat-msg__message">
+                                            <span 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.
+                                            </span>
+                                        </div>
+                                    </div>
                                 </div>
-                                <div class="chat-msg-actions">
-                                    <button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
+                                <div class="chat-msg__actions">
+                                    <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
                                 </div>
                             </div>
                         </div>

mockup/chatroom.html

@@ -44,24 +44,28 @@
                                 <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 chat-action" data-isodate="2018-04-36T18:07:38+02:00">
-                                    <span class="chat-msg-heading">
-                                        <span class="chat-msg-author">**Romeo Montague</span>
-                                    </span>
-                                    <span class="chat-msg-text">looks around</span>
+                                <div class="message chat-msg chat-msg--action" data-isodate="2018-04-36T18:07:38+02:00">
+                                    <div class="chat-msg__content">
+                                        <span class="chat-msg__heading"><span class="chat-msg__author">**Romeo Montague</span></span>
+                                        <span class="chat-msg__text">looks around</span>
+                                    </div>
                                 </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 class="badge badge-primary">Developer</span></span>
-                                            <span class="chat-msg-time">15:31</span>
-                                        </span>
-                                        <span class="chat-msg-text">He jests at scars that never felt a wound.</span>
-                                    </div>
-                                    <div class="chat-msg-actions">
-                                        <button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
+                                    <canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
+                                    <div class="chat-msg__content">
+                                        <div class="chat-msg__heading">
+                                            <span class="chat-msg__author">Romeo Montague <span class="badge badge-primary">Developer</span></span>
+                                            <span class="chat-msg__time">15:31</span>
+                                        </div>
+                                        <div class="chat-msg__body">
+                                            <div class="chat-msg__message">
+                                                <div class="chat-msg__text">He jests at scars that never felt a wound.</div>
+                                            </div>
+                                            <div class="chat-msg__actions">
+                                                <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
+                                            </div>
+                                        </div>
                                     </div>
 								</div>
 
@@ -74,168 +78,204 @@
                                     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">19:36</span>
-                                        </span>
-                                        <span class="chat-msg-text">
-                                            But, soft! what light through yonder window breaks?
-                                        </span>
-                                    </div>
-                                    <div class="chat-msg-actions">
-                                        <button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
+                                    <canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
+                                    <div class="chat-msg__content">
+                                        <div class="chat-msg__heading">
+                                            <span class="chat-msg__author">Romeo Montague</span>
+                                            <span class="chat-msg__time">19:36</span>
+                                        </div>
+                                        <div class="chat-msg__body">
+                                            <div class="chat-msg__message">
+                                                <div class="chat-msg__text">But, soft! what light through yonder window breaks?</div>
+                                            </div>
+                                            <div class="chat-msg__actions">
+                                                <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
+                                            </div>
+                                        </div>
                                     </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">19:36</span>
-                                        </span>
-                                        <span class="chat-msg-text">It is the east, and Juliet is the sun.</span>
-                                    </div>
-                                    <div class="chat-msg-actions">
-                                        <button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
+								<div class="message chat-msg chat-msg--followup">
+                                    <canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
+                                    <div class="chat-msg__content">
+                                        <div class="chat-msg__heading">
+                                            <span class="chat-msg__author">Romeo Montague</span>
+                                            <span class="chat-msg__time">19:36</span>
+                                        </div>
+                                        <div class="chat-msg__body">
+                                            <div class="chat-msg__message">
+                                                <div class="chat-msg__text">It is the east, and Juliet is the sun.</div>
+                                            </div>
+                                            <div class="chat-msg__actions">
+                                                <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
+                                            </div>
+                                        </div>
                                     </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">19:36</span>
-                                        </span>
-                                        <span class="chat-msg-text">Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief</span>
-                                    </div>
-                                    <div class="chat-msg-actions">
-                                        <button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
+								<div class="message chat-msg chat-msg--followup">
+                                    <canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
+                                    <div class="chat-msg__content">
+                                        <div class="chat-msg__heading">
+                                            <span class="chat-msg__author">Romeo Montague</span>
+                                            <span class="chat-msg__time">19:36</span>
+                                        </div>
+                                        <div class="chat-msg__body">
+                                            <div class="chat-msg__message">
+                                                <div class="chat-msg__text">Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief</div>
+                                            </div>
+                                            <div class="chat-msg__actions">
+                                                <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
+                                            </div>
+                                        </div>
                                     </div>
 								</div>
 
 								<div class="message chat-msg">
-                                    <canvas height="36" width="36" class="avatar"></canvas>
-                                    <div class="chat-msg-content">
-                                        <span class="chat-msg-heading">
-                                            <span class="chat-msg-author">Juliet Capulet</span>
-                                            <span class="chat-msg-time">19:43</span>
-                                        </span>
-                                        <span 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.
-                                        </span>
-                                        <div class="chat-msg-media"></div>
-                                    </div>
-                                    <div class="chat-msg-actions">
-                                        <button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
+                                    <canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
+                                    <div class="chat-msg__content">
+                                        <div class="chat-msg__heading">
+                                            <span class="chat-msg__author">Juliet Capulet</span>
+                                            <span class="chat-msg__time">19:43</span>
+                                        </div>
+                                        <div class="chat-msg__body">
+                                            <div class="chat-msg__message">
+                                                <div 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.
+                                                </div>
+                                            </div>
+                                            <div class="chat-msg__actions">
+                                                <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
+                                            </div>
+                                        </div>
                                     </div>
 								</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">19:36</span>
-                                        </span>
-                                        <span class="chat-msg-text">Uploading file: <strong>juliet.jpg</strong>, 120kb</span>
-                                        <progress value="50" max="100"/>
+                                    <canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
+                                    <div class="chat-msg__content">
+                                        <div class="chat-msg__heading">
+                                            <span class="chat-msg__author">Romeo Montague</span>
+                                            <span class="chat-msg__time">19:36</span>
+                                        </div>
+                                        <div class="chat-msg__body">
+                                            <div class="chat-msg__message">
+                                                <span class="chat-msg__text">Uploading file: <strong>juliet.jpg</strong>, 120kb</span>
+                                                <progress value="50" max="100"/>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
 
 								<div class="message chat-msg">
-                                    <canvas height="36" width="36" class="avatar"></canvas>
-                                    <div class="chat-msg-content">
-                                        <span class="chat-msg-heading">
-                                            <span class="chat-msg-author">Juliet Capulet</span>
-                                            <span class="chat-msg-time">19:45</span>
-                                        </span>
-                                        <span class="chat-msg-text"></span>
-                                        <div class="chat-msg-media">
-                                            <a href="https://images.unsplash.com/photo-1496660067708-010ebdd7ce72?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ea3514e6e00d8ce25c24d992b97929d9&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb"
-                                               target="_blank" rel="noopener">
-                                                <img class="chat-image img-thumbnail" src="https://images.unsplash.com/photo-1496660067708-010ebdd7ce72?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ea3514e6e00d8ce25c24d992b97929d9&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb"> 
-                                            </a>
+                                    <canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
+                                    <div class="chat-msg__content">
+                                        <div class="chat-msg__heading">
+                                            <span class="chat-msg__author">Juliet Capulet</span>
+                                            <span class="chat-msg__time">19:45</span>
+                                        </div>
+                                        <div class="chat-msg__body">
+                                            <div class="chat-msg__message">
+                                                <div class="chat-msg-media">
+                                                    <a href="https://images.unsplash.com/photo-1496660067708-010ebdd7ce72?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ea3514e6e00d8ce25c24d992b97929d9&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb"
+                                                    target="_blank" rel="noopener">
+                                                        <img class="chat-image img-thumbnail" src="https://images.unsplash.com/photo-1496660067708-010ebdd7ce72?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ea3514e6e00d8ce25c24d992b97929d9&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb"> 
+                                                    </a>
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
 								</div>
 
                                 <div class="message chat-msg" data-isodate="2018-04-36T18:07:36+02:00" data-msgid="some-long-id">
-                                    <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">19:36</span>
+                                    <canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
+                                    <div class="chat-msg__content">
+                                        <span class="chat-msg__heading">
+                                            <span class="chat-msg__author">Romeo Montague</span>
+                                            <span class="chat-msg__time">19:36</span>
                                         </span>
-                                        <div>
-                                            <span class="spoiler-hint">By a name</span>
-                                            <a class="badge badge-info spoiler-toggle" data-toggle-state="closed" href="#"><i class="fa fa-eye"></i>Show more</a>
+                                        <div class="chat-msg__body">
+                                            <div class="chat-msg__message">
+                                                <div class="chat-msg__spoiler-hint">
+                                                    <span class="spoiler-hint">By a name</span>
+                                                    <a class="badge badge-info spoiler-toggle" data-toggle-state="closed" href="#"><i class="fa fa-eye"></i>Show more</a>
+                                                </div>
+                                                <div class="chat-msg__text spoiler collapsed">
+                                                    I know not how to tell thee who I am: My name, dear saint, is hateful to
+                                                    myself, Because it is an enemy to thee. Had I it written, I would tear the word. 
+                                                </div>
+                                            </div>
+                                            <div class="chat-msg__actions">
+                                                <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
+                                            </div>
                                         </div>
-                                        <div class="chat-msg-text spoiler collapsed">
-                                            I know not how to tell thee who I am: My name, dear saint, is hateful to
-                                            myself, Because it is an enemy to thee. Had I it written, I would tear the word. 
-                                        </div>
-                                        <div class="chat-msg-media"></div>
-                                    </div>
-                                    <div class="chat-msg-actions">
-                                        <button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
                                     </div>
                                 </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-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-msg">
-                                    <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">19:49</span>
-                                        </span>
-                                        <span class="chat-msg-text">I mean, sir, in delay We waste our lights in vain, like lamps by day.</span>
-                                    </div>
-                                    <div class="chat-msg-actions">
-                                        <button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
+                                    <canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
+                                    <div class="chat-msg__content">
+                                        <div class="chat-msg__heading">
+                                            <span class="chat-msg__author">Mercutio</span>
+                                            <span class="chat-msg__time">19:49</span>
+                                        </div>
+                                        <div class="chat-msg__body">
+                                            <div class="chat-msg__message">
+                                                <span class="chat-msg__text">I mean, sir, in delay We waste our lights in vain, like lamps by day.</span>
+                                            </div>
+                                            <div class="chat-msg__actions">
+                                                <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
+                                            </div>
+                                        </div>
                                     </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">19:49</span>
-                                        </span>
-                                        <span class="chat-msg-text">
-                                        Take our good meaning, for our judgment sits.
-                                        Five times in that ere once in our five wits.</span>
-                                    </div>
-                                    <div class="chat-msg-actions">
-                                        <button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
+								<div class="message chat-msg chat-msg--followup">
+                                    <canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
+                                    <div class="chat-msg__content">
+                                        <div class="chat-msg__heading">
+                                            <span class="chat-msg__author">Mercutio</span>
+                                            <span class="chat-msg__time">19:49</span>
+                                        </div>
+                                        <div class="chat-msg__body">
+                                            <div class="chat-msg__message">
+                                                <span class="chat-msg__text">
+                                                Take our good meaning, for our judgment sits.
+                                                Five times in that ere once in our five wits.</span>
+                                            </div>
+                                            <div class="chat-msg__actions">
+                                                <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
+                                            </div>
+                                        </div>
                                     </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">19:49</span>
+								<div class="message chat-msg chat-msg--followup">
+                                    <canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
+                                    <div class="chat-msg__content">
+                                        <span class="chat-msg__heading">
+                                            <span class="chat-msg__author">Mercutio</span>
+                                            <span class="chat-msg__time">19:49</span>
                                         </span>
-                                        <span 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.</span>
-                                    </div>
-                                    <div class="chat-msg-actions">
-                                        <button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
+                                        <div class="chat-msg__body">
+                                            <div class="chat-msg__message">
+                                                <span 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.</span>
+                                            </div>
+                                            <div class="chat-msg__actions">
+                                                <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
+                                            </div>
+                                        </div>
                                     </div>
 								</div>
 

mockup/utils.js

@@ -3,7 +3,7 @@ const u = converse_utils;
 
 window.renderAvatars = function (el) {
     el = el || document;
-    const canvasses = el.querySelectorAll('canvas.avatar');
+    const canvasses = el.querySelectorAll('canvas.chat-msg__avatar');
     _.each(canvasses, (canvas_el) => {
         const avatar_url = canvas_el.getAttribute('data-avatar');
         if (!avatar_url) {

sass/_messages.scss

@@ -56,7 +56,7 @@
             max-height: 15em;
             max-width: 100%;
         }
-        &.chat-action {
+        &.chat-msg--action {
             font-style: italic;
         }
 
@@ -72,10 +72,9 @@
             }
             &:hover {
                 background-color: rgba(0, 0, 0, 0.035);
-
-                .chat-msg-actions {
-                    .chat-msg-action {
-                        display: block;
+                .chat-msg__actions {
+                    .chat-msg__action {
+                        opacity: 1;
                     }
                 }
             }
@@ -105,22 +104,41 @@
                     whitespace: nowrap;
                 }
             }
-            .chat-msg-content {
+            .chat-msg__content {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                align-items: stretch;
                 margin-left: 0.5rem;
                 width: 100%;
             }
+
+            .chat-msg__body {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                width: 100%;
+            }
+
+            .chat-msg__message {
+                display: flex;
+                flex-direction: column;
+                width: 100%;
+            }
+
             .chat-msg-edited {
                 cursor: pointer;
             }
             &.headline {
-                .chat-msg-content {
+                .chat-msg__body {
                     margin-left: 0;
                 }
             }
 
-            .chat-msg-text {
+            .chat-msg__text {
                 padding: 0;
                 color: $message-text-color;
+                width: 100%;
                 a {
                     word-wrap: break-word;
                     word-break: break-all;
@@ -140,13 +158,13 @@
                 }
             }
 
-            .chat-msg-actions {
-                .chat-msg-action {
+            .chat-msg__actions {
+                .chat-msg__action {
                     height: $message-font-size;
                     font-size: $message-font-size;
                     padding: 0;
                     border: none;
-                    display: none;
+                    opacity: 0;
                     background: transparent;
                     cursor: pointer;
                     &:focus {
@@ -155,19 +173,21 @@
                 }
             }
 
-            .avatar {
+            .chat-msg__avatar {
                 margin-top: 0.5em;
                 height: 36px;
                 vertical-align: middle;
                 width: 36px;
             }
-            .chat-msg-heading {
+
+            .chat-msg__heading {
+                width: 100%;
                 margin-top: 0.5em;
                 padding-right: 0.25rem;
                 padding-bottom: 0.25rem;
                 display: block;
 
-                .chat-msg-author {
+                .chat-msg__author {
                     font-family: $heading-font; 
                     font-size: 115%;
                     .badge {
@@ -175,26 +195,32 @@
                         font-family: $normal_font;
                     }
                 }
-                .chat-msg-time {
+                .chat-msg__time {
                     padding-left: 0.25em;
                     color: lighten($text-color, 15%);
                 }
             }
-            &.chat-action {
-                display: block;
-
-                .chat-msg-heading {
-                    float: left;
+            &.chat-msg--action {
+                .chat-msg__content {
+                    flex-direction: row;
+                    justify-content: flex-start;
+                }
+                .chat-msg__text {
+                    width: auto;
+                }
+                .chat-msg__heading {
                     margin-top: 0;
                     padding-bottom: 0;
+                    width: auto;
                 }
             }
-            &.chat-msg-followup {
-                .chat-msg-heading,
-                .avatar {
+
+            &.chat-msg--followup {
+                .chat-msg__heading,
+                .chat-msg__avatar {
                     display: none;
                 }
-                .chat-msg-content {
+                .chat-msg__content {
                     margin-left: 2.75rem;
                 }
             }
@@ -215,8 +241,8 @@
 #conversejs.converse-overlayed {
     .message {
         &.chat-msg {
-            &.chat-msg-followup {
-                .chat-msg-content {
+            &.chat-msg--followup {
+                .chat-msg__body {
                     margin-left: 0;
                 }
             }
@@ -228,7 +254,7 @@
     #conversejs:not(.converse-embedded)  {
         .message {
             &.chat-msg {
-                .chat-msg-author {
+                .chat-msg__author {
                     white-space: normal;
                 }
             }