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,

mockup/chatroom.html

@@ -232,52 +232,196 @@
                             </form>
 
                             <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>Juliet Capulet
-                                    <span class="badge badge-info">Owner</span>
+                                <li class="moderator occupant" title="Click to mention Juliet Capulet in your message.">
+                                    <div class="row no-gutters">
+                                        <div class="col-auto">
+                                            <div class="occupant-status occupant-online circle" title="Online"></div>
+                                        </div>
+                                        <div class="col">
+                                            <span class="occupant-nick">Juliet Capulet</span>
+                                            <span class="badge badge-danger">Owner</span>
+                                            <span class="badge badge-info">Moderator</span>
+                                        </div>
+                                    </div>
                                 </li>
-                                <li class="moderator occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-online circle" title="Online"></div>Romeo Montague
-                                    <span class="badge badge-info">Moderator</span>
+
+                                <li class="moderator occupant" title="Click to mention Romeo Montague in your message.">
+                                    <div class="row no-gutters">
+                                        <div class="col-auto">
+                                            <div class="occupant-status occupant-online circle" title="Online"></div>
+                                        </div>
+                                        <div class="col">
+                                            <span class="occupant-nick">Romeo Montague</span>
+                                            <span class="badge badge-info">Moderator</span>
+                                        </div>
+                                    </div>
                                 </li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <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>Mercutio
-                                    <span class="badge badge-secondary">Visitor</span>
+
+                                <li class="moderator occupant" title="Click to mention Lady Montague in your message.">
+                                    <div class="row no-gutters">
+                                        <div class="col-auto">
+                                            <div class="occupant-status occupant-away circle" title="Away"></div>
+                                        </div>
+                                        <div class="col">
+                                            <span class="occupant-nick">Lady Montague</span>
+                                        </div>
+                                    </div>
+                                </li>
+
+                                <li class="moderator occupant" title="Click to mention Mercutio in your message.">
+                                    <div class="row no-gutters">
+                                        <div class="col-auto">
+                                            <div class="occupant-status occupant-online circle" title="Online"></div>
+                                        </div>
+                                        <div class="col">
+                                            <span class="occupant-nick">Mercutio</span>
+                                            <span class="badge badge-secondary">Visitor</span>
+                                        </div>
+                                    </div>
+                                </li>
+
+                                <li class="moderator occupant" title="Click to mention Lord Montague in your message.">
+                                    <div class="row no-gutters">
+                                        <div class="col-auto">
+                                            <div class="occupant-status occupant-dnd circle" title="Busy"></div>
+                                        </div>
+                                        <div class="col">
+                                            <span class="occupant-nick">Lord Montague</span>
+                                        </div>
+                                    </div>
+                                </li>
+
+                                <li class="moderator occupant" title="Click to mention Friar Laurence in your message.">
+                                    <div class="row no-gutters">
+                                        <div class="col-auto">
+                                            <div class="occupant-status occupant-online circle" title="Online"></div>
+                                        </div>
+                                        <div class="col">
+                                            <span class="occupant-nick">Friar Laurence</span>
+                                        </div>
+                                    </div>
+                                </li>
+
+                                <li class="moderator occupant" title="Click to mention Tybalt in your message.">
+                                    <div class="row no-gutters">
+                                        <div class="col-auto">
+                                            <div class="occupant-status occupant-online circle" title="Online"></div>
+                                        </div>
+                                        <div class="col">
+                                            <span class="occupant-nick">Tybalt</span>
+                                        </div>
+                                    </div>
+                                </li>
+
+                                <li class="moderator occupant" title="Click to mention Paris in your message.">
+                                    <div class="row no-gutters">
+                                        <div class="col-auto">
+                                            <div class="occupant-status occupant-online circle" title="Online"></div>
+                                        </div>
+                                        <div class="col">
+                                            <span class="occupant-nick">Paris</span>
+                                        </div>
+                                    </div>
+                                </li>
+
+                                <li class="moderator occupant" title="Click to mention Lord Capulet in your message.">
+                                    <div class="row no-gutters">
+                                        <div class="col-auto">
+                                            <div class="occupant-status occupant-online circle" title="Online"></div>
+                                        </div>
+                                        <div class="col">
+                                            <span class="occupant-nick">Lord Capulet</span>
+                                        </div>
+                                    </div>
+                                </li>
+
+                                <li class="moderator occupant" title="Click to mention Benviolo in your message.">
+                                    <div class="row no-gutters">
+                                        <div class="col-auto">
+                                            <div class="occupant-status occupant-online circle" title="Online"></div>
+                                        </div>
+                                        <div class="col">
+                                            <span class="occupant-nick">Benviolo</span>
+                                        </div>
+                                    </div>
+                                </li>
+
+                                <li class="moderator occupant" title="Click to mention Lady Capulet in your message.">
+                                    <div class="row no-gutters">
+                                        <div class="col-auto">
+                                            <div class="occupant-status occupant-online circle" title="Online"></div>
+                                        </div>
+                                        <div class="col">
+                                            <span class="occupant-nick">Lady Capulet</span>
+                                        </div>
+                                    </div>
+                                </li>
+
+                                <li class="moderator occupant" title="Click to mention Balthasar in your message.">
+                                    <div class="row no-gutters">
+                                        <div class="col-auto">
+                                            <div class="occupant-status occupant-online circle" title="Online"></div>
+                                        </div>
+                                        <div class="col">
+                                            <span class="occupant-nick">Balthasar</span>
+                                        </div>
+                                    </div>
+                                </li>
+
+                                <li class="moderator occupant" title="Click to mention Escalus, Prince of Verona in your message.">
+                                    <div class="row no-gutters">
+                                        <div class="col-auto">
+                                            <div class="occupant-status occupant-online circle" title="Online"></div>
+                                        </div>
+                                        <div class="col">
+                                            <span class="occupant-nick">Escalus, Prince of Verona</span>
+                                        </div>
+                                    </div>
+                                </li>
+
+                                <li class="moderator occupant" title="Click to mention Peter in your message.">
+                                    <div class="row no-gutters">
+                                        <div class="col-auto">
+                                            <div class="occupant-status occupant-online circle" title="Online"></div>
+                                        </div>
+                                        <div class="col">
+                                            <span class="occupant-nick">Peter</span>
+                                        </div>
+                                    </div>
+                                </li>
+
+                                <li class="moderator occupant" title="Click to mention Abram in your message.">
+                                    <div class="row no-gutters">
+                                        <div class="col-auto">
+                                            <div class="occupant-status occupant-online circle" title="Online"></div>
+                                        </div>
+                                        <div class="col">
+                                            <span class="occupant-nick">Abram</span>
+                                        </div>
+                                    </div>
+                                </li>
+
+                                <li class="moderator occupant" title="Click to mention Sampson in your message.">
+                                    <div class="row no-gutters">
+                                        <div class="col-auto">
+                                            <div class="occupant-status occupant-online circle" title="Online"></div>
+                                        </div>
+                                        <div class="col">
+                                            <span class="occupant-nick">Sampson</span>
+                                        </div>
+                                    </div>
+                                </li>
+
+                                <li class="moderator occupant" title="Click to mention Gregory in your message.">
+                                    <div class="row no-gutters">
+                                        <div class="col-auto">
+                                            <div class="occupant-status occupant-online circle" title="Online"></div>
+                                        </div>
+                                        <div class="col">
+                                            <span class="occupant-nick">Gregory</span>
+                                        </div>
+                                    </div>
                                 </li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <div class="occupant-status occupant-offline circle" title="Offline"></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>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>Tybalt</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <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>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>Benvolio</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <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>Balthasar</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <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>Peter</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <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>Sampson</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <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>Gregory</li>
-                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                    <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>Servant</li>
                             </ul>
                             <div class="chatroom-features">
                                 <p class="occupants-heading">Features</p>

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>
             {[ } ]}