Update mockup and CSS accordingly

CHANGES.md

@@ -6,6 +6,7 @@
 
 - #161 XEP-0363: HTTP File Upload
 - #337 API call to update a VCard
+- #1094 Show room members who aren't currently online
 - It's now also possible to edit your VCard via the UI
 - Automatically grow/shrink input as text is entered/removed
 - MP4 and MP3 files when sent as XEP-0066 Out of Band Data, are now playable directly in chat

css/converse.css

@@ -8293,7 +8293,8 @@ body.reset {
           #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
             overflow-y: auto;
             flex-basis: 0;
-            flex-grow: 1; }
+            flex-grow: 1;
+            border-bottom: 1px solid lightgrey; }
           #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
           #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list {
             padding-top: 0; }
@@ -8322,14 +8323,15 @@ body.reset {
               cursor: pointer; }
               #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant div.row.no-gutters,
               #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant div.row.no-gutters {
-                flex-wrap: nowrap; }
+                flex-wrap: nowrap;
+                min-height: 1.5em; }
               #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .badge,
               #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .badge {
-                margin-top: 0.125rem; }
+                margin-bottom: 0.125rem; }
               #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status,
               #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status {
                 display: inline-block;
-                margin: 0.5em 0.5em 0.5em 0;
+                margin: 0 0.5em 0.125em 0;
                 width: 0.5em;
                 height: 0.5em; }
                 #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online, #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat,

css/inverse.css

@@ -8433,7 +8433,8 @@ body {
           #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
             overflow-y: auto;
             flex-basis: 0;
-            flex-grow: 1; }
+            flex-grow: 1;
+            border-bottom: 1px solid lightgrey; }
           #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
           #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list {
             padding-top: 0; }
@@ -8462,14 +8463,15 @@ body {
               cursor: pointer; }
               #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant div.row.no-gutters,
               #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant div.row.no-gutters {
-                flex-wrap: nowrap; }
+                flex-wrap: nowrap;
+                min-height: 1.5em; }
               #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .badge,
               #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .badge {
-                margin-top: 0.125rem; }
+                margin-bottom: 0.125rem; }
               #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status,
               #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status {
                 display: inline-block;
-                margin: 0.5em 0.5em 0.5em 0;
+                margin: 0 0.5em 0.125em 0;
                 width: 0.5em;
                 height: 0.5em; }
                 #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online, #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat,

sass/_chatrooms.scss

@@ -157,6 +157,7 @@
                             overflow-y: auto;
                             flex-basis: 0;
                             flex-grow: 1;
+                            border-bottom: 1px solid lightgrey;
                         }
                         &.features-list {
                             padding-top: 0;
@@ -185,15 +186,15 @@
 
                                 div.row.no-gutters {
                                     flex-wrap: nowrap;
+                                    min-height: 1.5em;
                                 }
-
                                 .badge {
-                                    margin-top: 0.125rem;
+                                    margin-bottom: 0.125rem;
                                 }
 
                                 .occupant-status {
                                     display: inline-block;
-                                    margin: 0.5em 0.5em 0.5em 0;
+                                    margin: 0 0.5em 0.125em 0;
                                     width: 0.5em;
                                     height: 0.5em;
 

src/templates/occupant.html

@@ -16,9 +16,7 @@
             <div class="occupant-status occupant-{{{o.show}}} circle" title="{{{o.hint_show}}}"></div>
         </div>
         <div class="col">
-            <span class="occupant-nick">
-                {{{o.nick || o.jid}}}
-            </span>
+            <span class="occupant-nick">{{{o.nick || o.jid}}}</span>
             {[ if (o.affiliation === "owner") { ]}
                 <span class="badge badge-danger">{{{o.label_owner}}}</span>
             {[ } ]}