Spit the Community widget in two

app/views/community.tpl

@@ -34,6 +34,7 @@
                 <?php $this->widget('Tabs');?>
                 <?php $this->widget('CommunitiesDiscover'); ?>
                 <?php $this->widget('Communities'); ?>
+                <?php $this->widget('CommunitiesServers'); ?>
             </div>
         <?php } elseif($_GET['s'] == 'subscriptions'
                     && $this->user->isSupported('pubsub')) { ?>

app/widgets/Communities/Communities.php

@@ -1,32 +1,14 @@
 <?php
 
-use Moxl\Xec\Action\Disco\Items;
 use Respect\Validation\Validator;
 
 class Communities extends \Movim\Widget\Base
 {
     public function load()
     {
-        $this->registerEvent('disco_items_handle', 'onDisco', 'community');
         $this->addjs('communities.js');
     }
 
-    function onDisco($packet)
-    {
-        $this->ajaxGet();
-    }
-
-    function ajaxDisco($origin)
-    {
-        if(!$this->validateServer($origin)) {
-            Notification::append(null, $this->__('communities.disco_error'));
-            return;
-        }
-
-        $r = new Items;
-        $r->setTo($origin)->request();
-    }
-
     function ajaxGet()
     {
         $this->rpc('MovimTpl.fill', '#communities', $this->prepareCommunities());
@@ -38,24 +20,9 @@ class Communities extends \Movim\Widget\Base
 
         $view = $this->tpl();
 
-        $view->assign('communities', $id->getItems(false, 0, 10));
+        $view->assign('communities', $id->getItems(false, 0, 30));
         $view->assign('servers', $id->getGroupServers());
 
         return $view->draw('_communities', true);
     }
-
-    /**
-     * @brief Validate the server
-     *
-     * @param string $origin
-     */
-    private function validateServer($origin)
-    {
-        $validate_server = Validator::noWhitespace()->alnum('.-_')->length(6, 40);
-        return ($validate_server->validate($origin));
-    }
-
-    public function display()
-    {
-    }
 }

app/widgets/Communities/_communities.tpl

@@ -1,4 +1,4 @@
-<ul class="list flex middle active">
+<ul class="list flex third middle active">
     {loop="$communities"}
         <li
             class="block
@@ -50,36 +50,3 @@
     {/loop}
 </ul>
 
-<ul class="list flex middle active">
-    <li class="subheader block large">
-        <p>{$c->__('communities.servers')}</p>
-    </li>
-    {loop="$servers"}
-        {if="!filter_var($value->server, FILTER_VALIDATE_EMAIL)"}
-            <li class="block
-                {if="empty($value->number)"}faded{/if}"
-                onclick="MovimUtils.redirect('{$c->route('community', $value->server)}')">
-                <span class="primary icon bubble color {$value->server|stringToColor}">
-                    {$value->server|firstLetterCapitalize}
-                </span>
-                <p class="line" title="{$value->server} - {$value->name}">
-                    {$value->server}
-                    <span class="second">{$value->name}</span>
-                </p>
-                <p>{$c->__('communities.counter', (empty($value->number)) ? 0 : $value->number)}</p>
-            </li>
-        {/if}
-    {/loop}
-    <li class="block large">
-        <span class="primary icon">
-            <i class="zmdi zmdi-search-for"></i>
-        </span>
-        <form>
-            <div>
-                <input placeholder="pubsub.server.com" onkeypress="
-                    if(event.keyCode == 13) { Communities_ajaxDisco(this.value); return false; }" >
-                <label>{$c->__('communities.search_server')}</label>
-            </div>
-        </form>
-    </li>
-</ul>

app/widgets/CommunitiesDiscover/communitiesdiscover.tpl

@@ -1,4 +1,4 @@
-<div id="communitiesdiscover" class="tabelem" title="{$c->__('button.discover')}">
+<div id="communities_discover" class="tabelem" title="{$c->__('button.discover')}">
     <ul class="list active middle card flex third">
         {$posts}
     </ul>

app/widgets/CommunitiesServers/CommunitiesServers.php

@@ -0,0 +1,55 @@
+<?php
+
+use Moxl\Xec\Action\Disco\Items;
+use Respect\Validation\Validator;
+
+class CommunitiesServers extends \Movim\Widget\Base
+{
+    public function load()
+    {
+        $this->registerEvent('disco_items_handle', 'onDisco', 'community');
+        $this->addjs('communitiesservers.js');
+    }
+
+    function onDisco($packet)
+    {
+        $this->ajaxGet();
+    }
+
+    function ajaxDisco($origin)
+    {
+        if(!$this->validateServer($origin)) {
+            Notification::append(null, $this->__('communities.disco_error'));
+            return;
+        }
+
+        $r = new Items;
+        $r->setTo($origin)->request();
+    }
+
+    function ajaxGet()
+    {
+        $this->rpc('MovimTpl.fill', '#communities_servers', $this->prepareCommunities());
+    }
+
+    /**
+     * @brief Validate the server
+     *
+     * @param string $origin
+     */
+    private function validateServer($origin)
+    {
+        $validate_server = Validator::noWhitespace()->alnum('.-_')->length(6, 40);
+        return ($validate_server->validate($origin));
+    }
+
+    function prepareCommunities()
+    {
+        $id = new \Modl\InfoDAO;
+
+        $view = $this->tpl();
+        $view->assign('servers', $id->getGroupServers());
+
+        return $view->draw('_communitiesservers', true);
+    }
+}

app/widgets/CommunitiesServers/_communitiesservers.tpl

@@ -0,0 +1,30 @@
+<ul class="list flex third middle active">
+    {loop="$servers"}
+        {if="!filter_var($value->server, FILTER_VALIDATE_EMAIL)"}
+            <li class="block
+                {if="empty($value->number)"}faded{/if}"
+                onclick="MovimUtils.redirect('{$c->route('community', $value->server)}')">
+                <span class="primary icon bubble color {$value->server|stringToColor}">
+                    {$value->server|firstLetterCapitalize}
+                </span>
+                <p class="line" title="{$value->server} - {$value->name}">
+                    {$value->server}
+                    <span class="second">{$value->name}</span>
+                </p>
+                <p>{$c->__('communities.counter', (empty($value->number)) ? 0 : $value->number)}</p>
+            </li>
+        {/if}
+    {/loop}
+    <li class="block large">
+        <span class="primary icon">
+            <i class="zmdi zmdi-search-for"></i>
+        </span>
+        <form>
+            <div>
+                <input placeholder="pubsub.server.com" onkeypress="
+                    if(event.keyCode == 13) { CommunitiesServers_ajaxDisco(this.value); return false; }" >
+                <label>{$c->__('communities.search_server')}</label>
+            </div>
+        </form>
+    </li>
+</ul>

app/widgets/CommunitiesServers/communitiesservers.js

@@ -0,0 +1,3 @@
+MovimWebsocket.attach(function() {
+    CommunitiesServers_ajaxGet();
+});

app/widgets/CommunitiesServers/communitiesservers.tpl

@@ -0,0 +1 @@
+<div id="communities_servers" class="tabelem" title="{$c->__('communities.servers')}"></div>

src/Movim/Bootstrap.php

@@ -338,8 +338,8 @@ class Bootstrap
         // Return a list of interesting widgets to load (to save memory)
         return ['Account','AccountNext','Ack','AdHoc','Avatar','Bookmark',
         'Communities','CommunityAffiliations','CommunityConfig','CommunityData',
-        'CommunityHeader','CommunityPosts','CommunitiesServer','Chat','Chats',
-        'Config','ContactData','ContactHeader','Dialog','Drawer',
+        'CommunityHeader','CommunityPosts','CommunitiesServer','CommunitiesServers',
+        'Chat','Chats','Config','ContactData','ContactHeader','Dialog','Drawer',
         'Header','Init','Login','LoginAnonymous','Menu','Notifs','Invitations',
         'Post','PostActions','Presence','Publish','PublishBrief','Rooms',
         'Roster','Stickers','Upload','Vcard4','Visio','VisioLink'];

themes/material/css/block.css

@@ -8,11 +8,6 @@
     overflow: hidden;
 }
 
-/*
-.flex.card {
-    padding: 0;
-}
-*/
 .flex.card .block:not(.subheader) {
     margin: 0.75rem;
     flex: 0 1 calc(50% - 1.5rem);
@@ -42,7 +37,8 @@
 
 @media screen and (max-width: 1024px) {
     .flex.card .block:not(.subheader),
-    .flex .block:not(.subheader) {
+    .flex .block:not(.subheader),
+    .flex.third .block:not(.subheader) {
         margin-bottom: 0;
         flex: 0 1 100%;
         max-width: 100%;