Change groups list layout

3 files changed, 86 insertions, 72 deletions

diff --git a/app/Template/group/dropdown.php b/app/Template/group/dropdown.php
new file mode 100644
index 00000000..9d807dc5
--- /dev/null
+++ b/app/Template/group/dropdown.php
@@ -0,0 +1,9 @@
+<div class="dropdown">
+    <a href="#" class="dropdown-menu dropdown-menu-link-icon"><strong>#<?= $group['id'] ?> <i class="fa fa-caret-down"></i></strong></a>
+    <ul>
+        <li><?= $this->modal->medium('plus', t('Add group member'), 'GroupListController', 'associate', array('group_id' => $group['id'])) ?></li>
+        <li><?= $this->url->icon('users', t('Members'), 'GroupListController', 'users', array('group_id' => $group['id'])) ?></li>
+        <li><?= $this->modal->medium('edit', t('Edit'), 'GroupModificationController', 'show', array('group_id' => $group['id'])) ?></li>
+        <li><?= $this->modal->confirm('trash-o', t('Remove'), 'GroupListController', 'confirm', array('group_id' => $group['id'])) ?></li>
+    </ul>
+</div>
diff --git a/app/Template/group/index.php b/app/Template/group/index.php
index 8370dc53..f85eab8b 100644
--- a/app/Template/group/index.php
+++ b/app/Template/group/index.php
@@ -1,42 +1,62 @@
-<section id="main">
-    <div class="page-header">
-        <ul>
-            <li><?= $this->url->icon('user', t('All users'), 'UserListController', 'show') ?></li>
-            <li><?= $this->modal->medium('user-plus', t('New group'), 'GroupCreationController', 'show') ?></li>
-        </ul>
+<div class="page-header">
+    <ul>
+        <li><?= $this->url->icon('user', t('All users'), 'UserListController', 'show') ?></li>
+        <li><?= $this->modal->medium('user-plus', t('New group'), 'GroupCreationController', 'show') ?></li>
+    </ul>
+</div>
+<?php if ($paginator->isEmpty()): ?>
+    <p class="alert"><?= t('There is no group.') ?></p>
+<?php else: ?>
+    <div class="table-list">
+        <div class="table-list-header">
+            <div class="table-list-header-count">
+                <?php if ($paginator->getTotal() > 1): ?>
+                    <?= t('%d groups', $paginator->getTotal()) ?>
+                <?php else: ?>
+                    <?= t('%d group', $paginator->getTotal()) ?>
+                <?php endif ?>
+            </div>
+            <div class="table-list-header-menu">
+                <div class="dropdown">
+                    <a href="#" class="dropdown-menu dropdown-menu-link-icon"><strong><?= t('Sort') ?> <i class="fa fa-caret-down"></i></strong></a>
+                    <ul>
+                        <li>
+                            <?= $paginator->order(t('Group ID'), \Kanboard\Model\GroupModel::TABLE.'.id') ?>
+                        </li>
+                        <li>
+                            <?= $paginator->order(t('Name'), \Kanboard\Model\GroupModel::TABLE.'.name') ?>
+                        </li>
+                        <li>
+                            <?= $paginator->order(t('External ID'), \Kanboard\Model\GroupModel::TABLE.'.external_id') ?>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <?php foreach ($paginator->getCollection() as $group): ?>
+        <div class="table-list-row table-border-left">
+            <span class="table-list-title">
+                <?= $this->render('group/dropdown', array('group' => $group)) ?>
+                <?= $this->url->link($this->text->e($group['name']), 'GroupListController', 'users', array('group_id' => $group['id'])) ?>
+            </span>
+
+            <div class="table-list-details">
+                <ul>
+                    <?php if ($group['nb_users'] > 1): ?>
+                        <li><?= t('%d users', $group['nb_users']) ?></li>
+                    <?php else: ?>
+                        <li><?= t('%d user', $group['nb_users']) ?></li>
+                    <?php endif ?>
+
+                    <?php if (! empty($group['external_id'])): ?>
+                        <li><?= $this->text->e($group['external_id']) ?></li>
+                    <?php endif ?>
+                </ul>
+            </div>
+        </div>
+        <?php endforeach ?>
     </div>
-    <?php if ($paginator->isEmpty()): ?>
-        <p class="alert"><?= t('There is no group.') ?></p>
-    <?php else: ?>
-        <table class="table-fixed table-scrolling table-hover">
-            <tr>
-                <th class="column-5"><?= $paginator->order(t('Id'), 'id') ?></th>
-                <th><?= $paginator->order(t('Name'), 'name') ?></th>
-                <th class="column-30"><?= $paginator->order(t('External Id'), 'external_id') ?></th>
-            </tr>
-            <?php foreach ($paginator->getCollection() as $group): ?>
-            <tr>
-                <td>
-                    <div class="dropdown">
-                        <a href="#" class="dropdown-menu dropdown-menu-link-icon"><strong>#<?= $group['id'] ?> <i class="fa fa-caret-down"></i></strong></a>
-                        <ul>
-                            <li><?= $this->modal->medium('plus', t('Add group member'), 'GroupListController', 'associate', array('group_id' => $group['id'])) ?></li>
-                            <li><?= $this->url->icon('users', t('Members'), 'GroupListController', 'users', array('group_id' => $group['id'])) ?></li>
-                            <li><?= $this->modal->medium('edit', t('Edit'), 'GroupModificationController', 'show', array('group_id' => $group['id'])) ?></li>
-                            <li><?= $this->modal->confirm('trash-o', t('Remove'), 'GroupListController', 'confirm', array('group_id' => $group['id'])) ?></li>
-                        </ul>
-                    </div>
-                </td>
-                <td>
-                    <?= $this->url->link($this->text->e($group['name']), 'GroupListController', 'users', array('group_id' => $group['id'])) ?>
-                </td>
-                <td>
-                    <?= $this->text->e($group['external_id']) ?>
-                </td>
-            </tr>
-            <?php endforeach ?>
-        </table>
 
-        <?= $paginator ?>
-    <?php endif ?>
-</section>
+    <?= $paginator ?>
+<?php endif ?>
diff --git a/app/Template/group/users.php b/app/Template/group/users.php
index 63cec338..5025ca7a 100644
--- a/app/Template/group/users.php
+++ b/app/Template/group/users.php
@@ -1,6 +1,7 @@
 <section id="main">
     <div class="page-header">
         <ul>
+            <li><?= $this->url->icon('user', t('All users'), 'UserListController', 'show') ?></li>
             <li><?= $this->url->icon('users', t('View all groups'), 'GroupListController', 'index') ?></li>
             <li><?= $this->modal->medium('plus', t('Add group member'), 'GroupListController', 'associate', array('group_id' => $group['id'])) ?></li>
         </ul>
@@ -8,40 +9,24 @@
     <?php if ($paginator->isEmpty()): ?>
         <p class="alert"><?= t('There is no user in this group.') ?></p>
     <?php else: ?>
-        <table class="table-striped table-scrolling table-hover">
-            <tr>
-                <th class="column-5"><?= $paginator->order(t('Id'), 'id') ?></th>
-                <th><?= $paginator->order(t('Username'), 'username') ?></th>
-                <th><?= $paginator->order(t('Name'), 'name') ?></th>
-                <th><?= $paginator->order(t('Email'), 'email') ?></th>
-            </tr>
+        <div class="table-list">
+            <?= $this->render('user_list/header', array('paginator' => $paginator)) ?>
             <?php foreach ($paginator->getCollection() as $user): ?>
-            <tr>
-                <td>
-                    <div class="dropdown">
-                        <a href="#" class="dropdown-menu dropdown-menu-link-icon"><strong><?= '#'.$user['id'] ?> <i class="fa fa-caret-down"></i></strong></a>
-                        <ul>
-                            <li>
-                                <?= $this->url->icon('user', t('View profile'), 'UserViewController', 'show', array('user_id' => $user['id'])) ?>
-                            </li>
-                            <li>
-                                <?= $this->modal->confirm('trash-o', t('Remove this user from group'), 'GroupListController', 'dissociate', array('group_id' => $group['id'], 'user_id' => $user['id'])) ?>
-                            </li>
-                        </ul>
-                    </div>
-                </td>
-                <td>
-                    <?= $this->url->link($this->text->e($user['username']), 'UserViewController', 'show', array('user_id' => $user['id'])) ?>
-                </td>
-                <td>
-                    <?= $this->text->e($user['name']) ?>
-                </td>
-                <td>
-                    <a href="mailto:<?= $this->text->e($user['email']) ?>"><?= $this->text->e($user['email']) ?></a>
-                </td>
-            </tr>
+                <div class="table-list-row table-border-left">
+                    <?= $this->render('user_list/user_title', array(
+                        'user' => $user,
+                    )) ?>
+
+                    <?= $this->render('user_list/user_details', array(
+                        'user' => $user,
+                    )) ?>
+
+                    <?= $this->render('user_list/user_icons', array(
+                        'user' => $user,
+                    )) ?>
+                </div>
             <?php endforeach ?>
-        </table>
+        </div>
 
         <?= $paginator ?>
     <?php endif ?>