Fix showing of room info in rooms list

css/converse.css

@@ -5744,14 +5744,22 @@ body.reset {
     #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list {
       margin: 0.5em 0;
       text-align: left; }
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list dt {
-        border: none;
-        color: #777;
-        font-weight: normal;
-        padding: 0;
-        padding-bottom: 0.5em;
-        text-shadow: 0 1px 0 #FAFAFA;
-        word-wrap: break-word; }
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .room-info {
+        font-size: 12px;
+        font-style: normal;
+        font-weight: normal; }
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .room-info li.room-info {
+          display: block;
+          margin-left: 5px; }
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .room-info p.room-info {
+          line-height: 16px;
+          margin: 0;
+          display: block;
+          white-space: normal; }
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list div.room-info {
+        padding: 0.3em 0;
+        clear: left;
+        width: 100%; }
       #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom,
       #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom {
         border: none;
@@ -5800,26 +5808,6 @@ body.reset {
             #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on:hover,
             #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on:hover {
               color: #206485; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .room-info,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .room-info {
-          font-size: 12px;
-          font-style: normal;
-          font-weight: normal; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom li.room-info,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom li.room-info {
-          display: block;
-          margin-left: 5px; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom p.room-info,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom p.room-info {
-          line-height: 16px;
-          margin: 0;
-          display: block;
-          white-space: normal; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom div.room-info,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom div.room-info {
-          padding: 0.3em 0;
-          clear: left;
-          width: 100%; }
   #conversejs #controlbox #chatrooms, #conversejs #controlbox #converse-roster {
     margin-top: 0.75em;
     padding-bottom: 0.75em; }

css/inverse.css

@@ -5816,14 +5816,22 @@ body {
     #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list {
       margin: 0.5em 0;
       text-align: left; }
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list dt {
-        border: none;
-        color: #777;
-        font-weight: normal;
-        padding: 0;
-        padding-bottom: 0.5em;
-        text-shadow: 0 1px 0 #FAFAFA;
-        word-wrap: break-word; }
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .room-info {
+        font-size: 14px;
+        font-style: normal;
+        font-weight: normal; }
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .room-info li.room-info {
+          display: block;
+          margin-left: 5px; }
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .room-info p.room-info {
+          line-height: 22px;
+          margin: 0;
+          display: block;
+          white-space: normal; }
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list div.room-info {
+        padding: 0.3em 0;
+        clear: left;
+        width: 100%; }
       #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom,
       #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom {
         border: none;
@@ -5872,26 +5880,6 @@ body {
             #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on:hover,
             #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on:hover {
               color: #206485; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .room-info,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .room-info {
-          font-size: 14px;
-          font-style: normal;
-          font-weight: normal; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom li.room-info,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom li.room-info {
-          display: block;
-          margin-left: 5px; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom p.room-info,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom p.room-info {
-          line-height: 22px;
-          margin: 0;
-          display: block;
-          white-space: normal; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom div.room-info,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom div.room-info {
-          padding: 0.3em 0;
-          clear: left;
-          width: 100%; }
   #conversejs #controlbox #chatrooms, #conversejs #controlbox #converse-roster {
     margin-top: 0.75em;
     padding-bottom: 0.75em; }

sass/_controlbox.scss

@@ -199,15 +199,28 @@
                 .rooms-list {
                     margin: 0.5em 0;
                     text-align: left;
-                    dt {
-                        border: none;
-                        color: $text-color;
+
+                    .room-info {
+                        font-size: $font-size-small;
+                        font-style: normal;
                         font-weight: normal;
-                        padding: 0;
-                        padding-bottom: 0.5em;
-                        text-shadow: 0 1px 0 $text-shadow-color;
-                        word-wrap: break-word;
+                        li.room-info {
+                            display: block;
+                            margin-left: 5px;
+                        }
+                        p.room-info {
+                            line-height: $line-height;
+                            margin: 0;
+                            display: block;
+                            white-space: normal;
+                        }
                     }
+                    div.room-info {
+                        padding: 0.3em 0;
+                        clear: left;
+                        width: 100%;
+                    }
+
                     .available-chatroom,
                     .open-chatroom {
                         border: none;
@@ -256,26 +269,6 @@
                             }
                             color: $subdued-color;
                         }
-                        .room-info {
-                            font-size: $font-size-small;
-                            font-style: normal;
-                            font-weight: normal;
-                        }
-                        li.room-info {
-                            display: block;
-                            margin-left: 5px;
-                        }
-                        p.room-info {
-                            line-height: $line-height;
-                            margin: 0;
-                            display: block;
-                            white-space: normal;
-                        }
-                        div.room-info {
-                            padding: 0.3em 0;
-                            clear: left;
-                            width: 100%;
-                        }
                     }
                 }
             }

src/converse-muc.js

@@ -2717,7 +2717,9 @@
                      *      info.
                      */
                     // All MUC features found here: http://xmpp.org/registrar/disco-features.html
-                    el.querySelector('span.spinner').outerHTML =
+                    el.querySelector('span.spinner').remove();
+                    el.insertAdjacentHTML(
+                        'beforeEnd', 
                         tpl_room_description({
                             'jid': stanza.getAttribute('from'),
                             'desc': _.get(_.head(sizzle('field[var="muc#roominfo_description"] value', stanza)), 'textContent'),
@@ -2748,13 +2750,13 @@
                             'label_semi_anon':  __('Semi-anonymous'),
                             'label_temp_room':  __('Temporary room'),
                             'label_unmoderated': __('Unmoderated')
-                        })
+                        }));
                 },
 
                 toggleRoomInfo (ev) {
                     /* Show/hide extra information about a room in the listing.
                      */
-                    const parent_el = ev.target.parentElement,
+                    const parent_el = ev.target.parentElement.parentElement,
                         div_el = parent_el.querySelector('div.room-info');
                     if (div_el) {
                         u.slideIn(div_el).then(u.removeElement)

src/templates/bookmark.html

@@ -1,3 +1,4 @@
+<div>
 <div class="available-chatroom d-flex flex-row {[ if (o.hidden) { ]} hidden {[ } ]}" data-room-jid="{{{o.jid}}}">
     <a class="open-room w-100" data-room-jid="{{{o.jid}}}" title="{{{o.open_title}}}" href="#">{{{o.name}}}</a>
     <a class="remove-bookmark fa fa-bookmark align-self-center {[ if (o.bookmarked) { ]} button-on {[ } ]}"
@@ -6,3 +7,4 @@
     <a class="room-info fa fa-info-circle align-self-center" data-room-jid="{{{o.jid}}}"
        title="{{{o.info_title}}}" href="#">&nbsp;</a>
 </div>
+</div>

src/templates/room_item.html

@@ -1,9 +1,11 @@
-<div class="available-chatroom d-flex flex-row">
-<a class="open-room available-room"
-   data-room-jid="{{{o.jid}}}"
-   title="{{{o.open_title}}}"
-   href="#">{{{o.name}}}</a>
-<a class="right room-info icon-room-info"
-   data-room-jid="{{{o.jid}}}"
-   title="{{{o.info_title}}}" href="#">&nbsp;</a>
+<div>
+  <div class="available-chatroom d-flex flex-row">
+    <a class="open-room available-room"
+       data-room-jid="{{{o.jid}}}"
+       title="{{{o.open_title}}}"
+       href="#">{{{o.name}}}</a>
+    <a class="right room-info icon-room-info"
+       data-room-jid="{{{o.jid}}}"
+       title="{{{o.info_title}}}" href="#">&nbsp;</a>
+  </div>
 </div>

src/templates/rooms_list_item.html

@@ -1,3 +1,4 @@
+<div>
 <div class="available-chatroom d-flex flex-row {[ if (o.num_unread_general) { ]} unread-msgs {[ } ]}" data-room-jid="{{{o.jid}}}">
 {[ if (o.num_unread) { ]}
     <span class="msgs-indicator">{{{ o.num_unread }}}</span>
@@ -20,3 +21,4 @@
 <a class="room-info fa fa-info-circle align-self-center" data-room-jid="{{{o.jid}}}"
    title="{{{o.info_title}}}" href="#">&nbsp;</a>
 </div>
+<div>