Redesign project list view

6 files changed, 133 insertions, 101 deletions

diff --git a/app/Template/project_list/header.php b/app/Template/project_list/header.php
new file mode 100644
index 00000000..24ac9041
--- /dev/null
+++ b/app/Template/project_list/header.php
@@ -0,0 +1,12 @@
+<div class="table-list-header">
+    <div class="table-list-header-count">
+        <?php if ($paginator->getTotal() > 1): ?>
+            <?= t('%d projects', $paginator->getTotal()) ?>
+        <?php else: ?>
+            <?= t('%d project', $paginator->getTotal()) ?>
+        <?php endif ?>
+    </div>
+    <div class="table-list-header-menu">
+        <?= $this->render('project_list/sort_menu', array('paginator' => $paginator)) ?>
+    </div>
+</div>
diff --git a/app/Template/project_list/listing.php b/app/Template/project_list/listing.php
new file mode 100644
index 00000000..9c5dfe0e
--- /dev/null
+++ b/app/Template/project_list/listing.php
@@ -0,0 +1,47 @@
+<div class="page-header">
+    <ul>
+        <?= $this->hook->render('template:project-list:menu:before') ?>
+
+        <?php if ($this->user->hasAccess('ProjectCreationController', 'create')): ?>
+            <li>
+                <?= $this->modal->medium('plus', t('New project'), 'ProjectCreationController', 'create') ?>
+            </li>
+        <?php endif ?>
+
+        <?php if ($this->app->config('disable_private_project', 0) == 0): ?>
+            <li>
+                <?= $this->modal->medium('lock', t('New private project'), 'ProjectCreationController', 'createPrivate') ?>
+            </li>
+        <?php endif ?>
+
+        <?php if ($this->user->hasAccess('ProjectUserOverviewController', 'managers')): ?>
+            <li><?= $this->url->icon('user', t('Users overview'), 'ProjectUserOverviewController', 'managers') ?></li>
+        <?php endif ?>
+
+        <?php if ($this->user->hasAccess('ProjectGanttController', 'show')): ?>
+            <li><?= $this->url->icon('sliders', t('Projects Gantt chart'), 'ProjectGanttController', 'show') ?></li>
+        <?php endif ?>
+
+        <?= $this->hook->render('template:project-list:menu:after') ?>
+    </ul>
+</div>
+<?php if ($paginator->isEmpty()): ?>
+    <p class="alert"><?= t('There is no project.') ?></p>
+<?php else: ?>
+    <div class="table-list">
+        <?= $this->render('project_list/header', array('paginator' => $paginator)) ?>
+        <?php foreach ($paginator->getCollection() as $project): ?>
+            <div class="table-list-row table-border-left">
+                <?= $this->render('project_list/project_title', array(
+                    'project' => $project,
+                )) ?>
+
+                <?= $this->render('project_list/project_details', array(
+                    'project' => $project,
+                )) ?>
+            </div>
+        <?php endforeach ?>
+    </div>
+
+    <?= $paginator ?>
+<?php endif ?>
diff --git a/app/Template/project_list/project_details.php b/app/Template/project_list/project_details.php
new file mode 100644
index 00000000..ccd7ba1b
--- /dev/null
+++ b/app/Template/project_list/project_details.php
@@ -0,0 +1,15 @@
+<div class="table-list-details">
+    <ul>
+        <?php if ($project['owner_id'] > 0): ?>
+            <li><?= $this->text->e($project['owner_name'] ?: $project['owner_username']) ?></li>
+        <?php endif ?>
+
+        <?php if ($project['start_date']): ?>
+            <li><?= t('Start Date: %s', $this->dt->date($project['start_date'])) ?></li>
+        <?php endif ?>
+
+        <?php if ($project['end_date']): ?>
+            <li><?= t('End Date: %s', $this->dt->date($project['end_date'])) ?></li>
+        <?php endif ?>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/app/Template/project_list/project_title.php b/app/Template/project_list/project_title.php
new file mode 100644
index 00000000..ddec4131
--- /dev/null
+++ b/app/Template/project_list/project_title.php
@@ -0,0 +1,33 @@
+<div>
+    <?php if ($this->user->hasProjectAccess('ProjectViewController', 'show', $project['id'])): ?>
+        <?= $this->render('project/dropdown', array('project' => $project)) ?>
+    <?php else: ?>
+        <strong><?= '#'.$project['id'] ?></strong>
+    <?php endif ?>
+
+    <span class="table-list-title <?= $project['is_active'] == 0 ? 'status-closed' : '' ?>">
+        <?= $this->url->link($this->text->e($project['name']), 'BoardViewController', 'show', array('project_id' => $project['id'])) ?>
+    </span>
+
+    <?php if ($project['is_public']): ?>
+        <i class="fa fa-share-alt fa-fw" title="<?= t('Shared project') ?>"></i>
+    <?php endif ?>
+
+    <?php if ($project['is_private']): ?>
+        <i class="fa fa-lock fa-fw" title="<?= t('Private project') ?>"></i>
+    <?php endif ?>
+
+    <?php if ($this->user->hasAccess('ProjectUserOverviewController', 'managers')): ?>
+        <span class="tooltip" title="<?= t('Members') ?>" data-href="<?= $this->url->href('ProjectUserOverviewController', 'users', array('project_id' => $project['id'])) ?>"><i class="fa fa-users"></i></span>&nbsp;
+    <?php endif ?>
+
+    <?php if (! empty($project['description'])): ?>
+        <span class="tooltip" title="<?= $this->text->markdownAttribute($project['description']) ?>">
+            <i class="fa fa-info-circle"></i>
+        </span>
+    <?php endif ?>
+
+    <?php if ($project['is_active'] == 0): ?>
+        <i class="fa fa-ban fa-fw" aria-hidden="true" title="<?= t('Closed') ?>"></i><?= t('Closed') ?>
+    <?php endif ?>
+</div>
diff --git a/app/Template/project_list/show.php b/app/Template/project_list/show.php
deleted file mode 100644
index 9a804588..00000000
--- a/app/Template/project_list/show.php
+++ /dev/null
@@ -1,101 +0,0 @@
-<section id="main">
-    <div class="page-header">
-        <ul>
-            <?= $this->hook->render('template:project-list:menu:before') ?>
-
-            <?php if ($this->user->hasAccess('ProjectCreationController', 'create')): ?>
-                <li>
-                    <?= $this->modal->medium('plus', t('New project'), 'ProjectCreationController', 'create') ?>
-                </li>
-            <?php endif ?>
-            <?php if ($this->app->config('disable_private_project', 0) == 0): ?>
-                <li>
-                    <?= $this->modal->medium('lock', t('New private project'), 'ProjectCreationController', 'createPrivate') ?>
-                </li>
-            <?php endif ?>
-
-            <?php if ($this->user->hasAccess('ProjectUserOverviewController', 'managers')): ?>
-                <li><?= $this->url->icon('user', t('Users overview'), 'ProjectUserOverviewController', 'managers') ?></li>
-            <?php endif ?>
-
-            <?php if ($this->user->hasAccess('ProjectGanttController', 'show')): ?>
-                <li><?= $this->url->icon('sliders', t('Projects Gantt chart'), 'ProjectGanttController', 'show') ?></li>
-            <?php endif ?>
-
-            <?= $this->hook->render('template:project-list:menu:after') ?>
-        </ul>
-    </div>
-    <?php if ($paginator->isEmpty()): ?>
-        <p class="alert"><?= t('No project') ?></p>
-    <?php else: ?>
-        <table class="table-striped table-scrolling">
-            <tr>
-                <th class="column-5"><?= $paginator->order(t('Id'), 'id') ?></th>
-                <th class="column-8"><?= $paginator->order(t('Status'), 'is_active') ?></th>
-                <th class="column-15"><?= $paginator->order(t('Project'), 'name') ?></th>
-                <th class="column-10"><?= $paginator->order(t('Start date'), 'start_date') ?></th>
-                <th class="column-10"><?= $paginator->order(t('End date'), 'end_date') ?></th>
-                <th class="column-15"><?= $paginator->order(t('Owner'), 'owner_id') ?></th>
-                <?php if ($this->user->hasAccess('ProjectUserOverviewController', 'managers')): ?>
-                    <th class="column-10"><?= t('Users') ?></th>
-                <?php endif ?>
-                <th><?= t('Columns') ?></th>
-            </tr>
-            <?php foreach ($paginator->getCollection() as $project): ?>
-            <tr>
-                <td>
-                    <?= $this->render('project/dropdown', array('project' => $project)) ?>
-                </td>
-                <td>
-                    <?php if ($project['is_active']): ?>
-                        <?= t('Open') ?>
-                    <?php else: ?>
-                        <?= t('Closed') ?>
-                    <?php endif ?>
-                </td>
-                <td>
-                    <?= $this->url->link($this->text->e($project['name']), 'BoardViewController', 'show', array('project_id' => $project['id'])) ?>
-
-                    <?php if ($project['is_public']): ?>
-                        <i class="fa fa-share-alt fa-fw" title="<?= t('Shared project') ?>"></i>
-                    <?php endif ?>
-                    <?php if ($project['is_private']): ?>
-                        <i class="fa fa-lock fa-fw" title="<?= t('Private project') ?>"></i>
-                    <?php endif ?>
-
-                    <?php if (! empty($project['description'])): ?>
-                        <span class="tooltip" title="<?= $this->text->markdownAttribute($project['description']) ?>">
-                            <i class="fa fa-info-circle"></i>
-                        </span>
-                    <?php endif ?>
-                </td>
-                <td>
-                    <?= $this->dt->date($project['start_date']) ?>
-                </td>
-                <td>
-                    <?= $this->dt->date($project['end_date']) ?>
-                </td>
-                <td>
-                    <?php if ($project['owner_id'] > 0): ?>
-                        <?= $this->text->e($project['owner_name'] ?: $project['owner_username']) ?>
-                    <?php endif ?>
-                </td>
-                <?php if ($this->user->hasAccess('ProjectUserOverviewController', 'managers')): ?>
-                    <td>
-                        <i class="fa fa-users fa-fw"></i>
-                        <span class="tooltip" title="<?= t('Members') ?>" data-href="<?= $this->url->href('ProjectUserOverviewController', 'users', array('project_id' => $project['id'])) ?>"><?= t('Members') ?></span>
-                    </td>
-                <?php endif ?>
-                <td class="dashboard-project-stats">
-                    <?php foreach ($project['columns'] as $column): ?>
-                        <strong title="<?= t('Task count') ?>"><?= $column['nb_open_tasks'] ?></strong>
-                        <small><?= $this->text->e($column['title']) ?></small>
-                    <?php endforeach ?>
-                </td>
-            </tr>
-            <?php endforeach ?>
-        </table>
-
-        <?= $paginator ?>
-    <?php endif ?>
-</section>
diff --git a/app/Template/project_list/sort_menu.php b/app/Template/project_list/sort_menu.php
new file mode 100644
index 00000000..4c6c6238
--- /dev/null
+++ b/app/Template/project_list/sort_menu.php
@@ -0,0 +1,26 @@
+<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('Project ID'), \Kanboard\Model\ProjectModel::TABLE.'.id') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Project Name'), \Kanboard\Model\ProjectModel::TABLE.'.name') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Status'), \Kanboard\Model\ProjectModel::TABLE.'.is_active') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Start Date'), \Kanboard\Model\ProjectModel::TABLE.'.start_date') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('End Date'), \Kanboard\Model\ProjectModel::TABLE.'.end_date') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Public'), \Kanboard\Model\ProjectModel::TABLE.'.is_public') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Private'), \Kanboard\Model\ProjectModel::TABLE.'.is_private') ?>
+        </li>
+    </ul>
+</div>