Tweak chatroom headings

css/converse.css

@@ -8065,12 +8065,15 @@ body.reset {
 #conversejs.converse-embedded .chat-head-chatroom,
 #conversejs .chat-head-chatroom {
   background-color: #E77051; }
-  #conversejs.converse-embedded .chat-head-chatroom .chatroom-topic,
-  #conversejs .chat-head-chatroom .chatroom-topic {
-    white-space: nowrap;
+  #conversejs.converse-embedded .chat-head-chatroom .chatroom-description,
+  #conversejs .chat-head-chatroom .chatroom-description {
+    color: white;
+    font-size: 16px;
+    font-size: 80%;
     overflow-y: hidden;
+    overflow: hidden;
     text-overflow: ellipsis;
-    font-size: 16px; }
+    white-space: nowrap; }
   #conversejs.converse-embedded .chat-head-chatroom a.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:visited.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:hover.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
   #conversejs .chat-head-chatroom a.chatbox-btn.fa,
   #conversejs .chat-head-chatroom a:visited.chatbox-btn.fa,
@@ -8095,15 +8098,6 @@ body.reset {
     #conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-jid,
     #conversejs .chat-head-chatroom .chat-title .chatroom-jid {
       font-size: 12px; }
-    #conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-description,
-    #conversejs .chat-head-chatroom .chat-title .chatroom-description {
-      color: white;
-      font-size: 80%;
-      font-style: italic;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      margin: 0.3em 0; }
 #conversejs.converse-embedded .chatroom,
 #conversejs .chatroom {
   width: 400px; }

css/inverse.css

@@ -8207,12 +8207,15 @@ body {
 #conversejs.converse-embedded .chat-head-chatroom,
 #conversejs .chat-head-chatroom {
   background-color: #E77051; }
-  #conversejs.converse-embedded .chat-head-chatroom .chatroom-topic,
-  #conversejs .chat-head-chatroom .chatroom-topic {
-    white-space: nowrap;
+  #conversejs.converse-embedded .chat-head-chatroom .chatroom-description,
+  #conversejs .chat-head-chatroom .chatroom-description {
+    color: white;
+    font-size: 18px;
+    font-size: 80%;
     overflow-y: hidden;
+    overflow: hidden;
     text-overflow: ellipsis;
-    font-size: 18px; }
+    white-space: nowrap; }
   #conversejs.converse-embedded .chat-head-chatroom a.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:visited.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:hover.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
   #conversejs .chat-head-chatroom a.chatbox-btn.fa,
   #conversejs .chat-head-chatroom a:visited.chatbox-btn.fa,
@@ -8237,15 +8240,6 @@ body {
     #conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-jid,
     #conversejs .chat-head-chatroom .chat-title .chatroom-jid {
       font-size: 14px; }
-    #conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-description,
-    #conversejs .chat-head-chatroom .chat-title .chatroom-description {
-      color: white;
-      font-size: 80%;
-      font-style: italic;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      margin: 0.3em 0; }
 #conversejs.converse-embedded .chatroom,
 #conversejs .chatroom {
   width: 300px; }

mockup/chatroom.html

@@ -25,7 +25,7 @@
                     <div class="chat-head chat-head-chatroom row no-gutters">
                         <div class="col col-9">
                             <div class="chat-title">Capulet's orchard</div>
-                            <p class="chatroom-topic">Two households, both alike in dignity, In fair Verona, where we lay our scene.</p>
+                            <p class="chatroom-description">Two households, both alike in dignity, In fair Verona, where we lay our scene.</p>
                         </div>
                         <div class="chatbox-buttons row no-gutters">
                             <a class="chatbox-btn fa fa-minus"></a>

sass/_chatrooms.scss

@@ -10,11 +10,14 @@
     .chat-head-chatroom {
         background-color: $chatroom-head-color;
 
-        .chatroom-topic {
-            white-space: nowrap;
+        .chatroom-description {
+            color: white;
+            font-size: $font-size-large;
+            font-size: 80%;
             overflow-y: hidden;
+            overflow: hidden;
             text-overflow: ellipsis;
-            font-size: $font-size-large;
+            white-space: nowrap;
         }
 
         a, a:visited, a:hover, a:not([href]):not([tabindex]) {
@@ -41,15 +44,6 @@
             .chatroom-jid {
                 font-size: $font-size-small;
             }
-            .chatroom-description {
-                color: white;
-                font-size: 80%;
-                font-style: italic;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                margin: 0.3em 0;
-            }
         }
     }
 

src/templates/chatroom_head.html

@@ -1,12 +1,12 @@
 <div class="col col-9">
     <div class="chat-title" title="{{{o.jid}}}">
         {[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
-            <span class="chatroom-name">{{{ o.name }}}</span>
+            {{{ o.name }}}
         {[ } else { ]}
-            <span class="chatroom-name">{{{ o.Strophe.getNodeFromJid(o.jid) }}}</span>@{{{ o.Strophe.getDomainFromJid(o.jid) }}}
+            {{{ o.Strophe.getNodeFromJid(o.jid) }}}@{{{ o.Strophe.getDomainFromJid(o.jid) }}}
         {[ } ]}
-        <p class="chatroom-description">{{{ o.description }}}<p/>
     </div>
+    <p class="chatroom-description">{{{ o.description }}}<p/>
 </div>
 <div class="chatbox-buttons row no-gutters">
     <a class="chatbox-btn close-chatbox-button fa fa-sign-out" title="{{{o.info_close}}}"></a>