Small CSS adjustments in the Rooms list

app/views/community.tpl

@@ -39,7 +39,9 @@
             <?php $this->widget('CommunitiesServerInfo'); ?>
             <?php $this->widget('NewsNav');?>
         </aside>
-        <?php $this->widget('CommunitiesServer'); ?>
+        <div>
+            <?php $this->widget('CommunitiesServer'); ?>
+        </div>
 
     <?php } else { ?>
         <aside>

app/widgets/Rooms/_rooms_counter.tpl

@@ -1,8 +1,8 @@
-{if="$conference->unreads_count > 0"}
-    <span class="counter">{$conference->unreads_count}</span>
-{/if}
 {if="$withAvatar == false"}
     {autoescape="off"}
         {$conference->name|firstLetterCapitalize|addEmojis}
     {/autoescape}
 {/if}
+{if="$conference->unreads_count > 0"}
+    <span class="counter">{$conference->unreads_count}</span>
+{/if}

app/widgets/Rooms/_rooms_room.tpl

@@ -1,8 +1,7 @@
 <li id="{$conference->conference|cleanupId}"
     data-jid="{$conference->conference}"
     {if="$conference->nick != null"} data-nick="{$conference->nick}" {/if}
-    class="room {if="$conference->connected"}connected{/if}"
-    title="{$conference->conference}">
+    class="room {if="$conference->connected"}connected{/if}">
     {$url = $conference->getPhoto()}
     {if="$url"}
         <span class="primary icon bubble color small
@@ -27,14 +26,14 @@
 
     <div>
         <p class="normal line">
-            {$conference->name}
-            ·
             {if="$conference->connected"}
                 {$count = $conference->presences()->count()}
                 <span title="{$c->__('communitydata.sub', $count)}"
-                    {if="$conference->connected && $conference->presence->mucrole == 'moderator'"}
-                        class="moderator"
-                    {/if}>
+                    class="info
+                        {if="$conference->connected && $conference->presence->mucrole == 'moderator'"}
+                            moderator
+                        {/if}
+                    ">
                     {$count} <i class="material-icons">people</i>
                     {if="$conference->info && $conference->info->mucpublic"}
                         <i class="material-icons" title="{$c->__('room.public_muc_text')}">wifi_tethering</i>
@@ -42,12 +41,14 @@
                     {if="$conference->info && !$conference->info->mucsemianonymous"}
                         <i class="material-icons" title="{$c->__('room.nonanonymous_muc_text')}">face</i>
                     {/if}
-                </span> ·
+                </span>
             {elseif="isset($info) && $info->occupants > 0"}
                 <span title="{$c->__('communitydata.sub', $info->occupants)}"
-                    {if="$conference->connected && $conference->presence->mucrole == 'moderator'"}
-                        class="moderator"
-                    {/if}>
+                    class="info
+                        {if="$conference->connected && $conference->presence->mucrole == 'moderator'"}
+                            moderator
+                        {/if}
+                    ">
                     {$info->occupants} <i class="material-icons">people</i>
                     {if="$conference->info && $conference->info->mucpublic"}
                         <i class="material-icons" title="{$c->__('room.public_muc_text')}">wifi_tethering</i>
@@ -55,17 +56,15 @@
                     {if="$conference->info && !$conference->info->mucsemianonymous"}
                         <i class="material-icons" title="{$c->__('room.nonanonymous_muc_text')}">face</i>
                     {/if}
-                </span> ·
+                </span>
             {/if}
-            {if="$conference->connected"}
+
+            <span title="{$conference->conference}">{$conference->name}</span>
+            <span class="second">
                 {if="isset($info) && $info->description"}
                     {$info->description}
-                {else}
-                    {$conference->conference}
                 {/if}
-            {else}
-                <span class="second">{$conference->conference}</span>
-            {/if}
+            </span>
         </p>
     </div>
     <span class="control icon active gray" onclick="event.stopPropagation(); RoomsUtils_ajaxRemove('{$conference->conference|echapJS}');">

public/theme/css/color.css

@@ -98,7 +98,7 @@ span.icon span.counter.alt {
 .button.blue,   .icon.blue  , span.resource.blue     { color: #2196F3; }
 .button.green,  .icon.green , span.resource.green    { color: #689F38; }
 ul li div.bubble.moderator:after,
-ul li p span.moderator,
+ul li div > p > span.info.moderator,
 .button.orange, .icon.orange, span.resource.orange   { color: #FF9800; }
 .button.yellow, .icon.yellow, span.resource.yellow   { color: #FBC02D; }
 .button.brown,  .icon.brown , span.resource.brown    { color: #795548; }

public/theme/css/listn.css

@@ -182,6 +182,7 @@ ul li div.bubble:after {
     float: right;
     font-size: 1.5rem;
     color: gray;
+    margin-left: 0.5rem;
 }
 
 /* Size automagicaly the content */