Improve task summary layout

1 files changed, 129 insertions, 103 deletions

diff --git a/app/Template/task/details.php b/app/Template/task/details.php
index 2e70e561..838eb260 100644
--- a/app/Template/task/details.php
+++ b/app/Template/task/details.php
@@ -1,104 +1,130 @@
-<div class="color-<?= $task['color_id'] ?> task-show-details">
+<section id="task-summary">
     <h2><?= $this->e($task['title']) ?></h2>
-    <?php if ($task['score']): ?>
-        <span class="task-score"><?= $this->e($task['score']) ?></span>
-    <?php endif ?>
-    <ul>
-        <li>
-            <strong><?= t('Priority: %d', $task['priority']) ?></strong>
-        </li>
-        <?php if ($task['reference']): ?>
-        <li>
-            <strong><?= t('Reference: %s', $task['reference']) ?></strong>
-        </li>
-        <?php endif ?>
-        <?php if (! empty($task['swimlane_name'])): ?>
-        <li>
-            <?= t('Swimlane: %s', $task['swimlane_name']) ?>
-        </li>
-        <?php endif ?>
-        <li>
-            <?= dt('Created on %B %e, %Y at %k:%M %p', $task['date_creation']) ?>
-        </li>
-        <?php if ($task['date_modification']): ?>
-        <li>
-            <?= dt('Last modified on %B %e, %Y at %k:%M %p', $task['date_modification']) ?>
-        </li>
-        <?php endif ?>
-        <?php if ($task['date_completed']): ?>
-        <li>
-            <?= dt('Completed on %B %e, %Y at %k:%M %p', $task['date_completed']) ?>
-        </li>
-        <?php endif ?>
-        <?php if ($task['date_started']): ?>
-        <li>
-            <?= dt('Started on %B %e, %Y', $task['date_started']) ?>
-        </li>
-        <?php endif ?>
-        <?php if ($task['date_due']): ?>
-        <li>
-            <strong><?= dt('Must be done before %B %e, %Y', $task['date_due']) ?></strong>
-        </li>
-        <?php endif ?>
-        <?php if ($task['time_estimated']): ?>
-        <li>
-            <?= t('Estimated time: %s hours', $task['time_estimated']) ?>
-        </li>
-        <?php endif ?>
-        <?php if ($task['time_spent']): ?>
-        <li>
-            <?= t('Time spent: %s hours', $task['time_spent']) ?>
-        </li>
-        <?php endif ?>
-        <?php if ($task['creator_username']): ?>
-        <li>
-            <?= t('Created by %s', $task['creator_name'] ?: $task['creator_username']) ?>
-        </li>
-        <?php endif ?>
-        <li>
-            <strong>
-            <?php if ($task['assignee_username']): ?>
-                <?= t('Assigned to %s', $task['assignee_name'] ?: $task['assignee_username']) ?>
-            <?php else: ?>
-                <?= t('There is nobody assigned') ?>
-            <?php endif ?>
-            </strong>
-        </li>
-        <li>
-            <?= t('Column on the board:') ?>
-            <strong><?= $this->e($task['column_title']) ?></strong>
-            (<?= $this->e($task['project_name']) ?>)
-            <?= dt('since %B %e, %Y at %k:%M %p', $task['date_moved']) ?>
-        </li>
-        <li><?= t('Task position:').' '.$this->e($task['position']) ?></li>
-        <?php if ($task['category_name']): ?>
-        <li>
-            <?= t('Category:') ?> <strong><?= $this->e($task['category_name']) ?></strong>
-        </li>
-        <?php endif ?>
-        <li>
-            <?php if ($task['is_active'] == 1): ?>
-                <?= t('Status is open') ?>
-            <?php else: ?>
-                <?= t('Status is closed') ?>
-            <?php endif ?>
-        </li>
-        <?php if ($project['is_public']): ?>
-        <li>
-            <?= $this->url->link(t('Public link'), 'task', 'readonly', array('task_id' => $task['id'], 'token' => $project['token']), false, '', '', true) ?>
-        </li>
-        <?php endif ?>
-
-        <?php if ($editable && $task['recurrence_status'] != \Kanboard\Model\Task::RECURRING_STATUS_NONE): ?>
-        <li>
-            <strong><?= t('Recurring information') ?></strong>
-            <?= $this->render('task/recurring_info', array(
-                'task' => $task,
-                'recurrence_trigger_list' => $recurrence_trigger_list,
-                'recurrence_timeframe_list' => $recurrence_timeframe_list,
-                'recurrence_basedate_list' => $recurrence_basedate_list,
-            )) ?>
-        </li>
-        <?php endif ?>
-    </ul>
-</div>
+    <div class="task-summary-container color-<?= $task['color_id'] ?>">
+        <div class="task-summary-column">
+            <ul class="no-bullet">
+                <li>
+                    <strong><?= t('Status:') ?></strong>
+                    <span>
+                    <?php if ($task['is_active'] == 1): ?>
+                        <?= t('open') ?>
+                    <?php else: ?>
+                        <?= t('closed') ?>
+                    <?php endif ?>
+                    </span>
+                </li>
+                <li>
+                    <strong><?= t('Priority:') ?></strong> <span><?= $task['priority'] ?></span>
+                </li>
+                <?php if (! empty($task['reference'])): ?>
+                    <li>
+                        <strong><?= t('Reference:') ?></strong> <span><?= $this->e($task['reference']) ?></span>
+                    </li>
+                <?php endif ?>
+                <?php if (! empty($task['score'])): ?>
+                    <li>
+                        <strong><?= t('Complexity:') ?></strong> <span><?= $this->e($task['score']) ?></span>
+                    </li>
+                <?php endif ?>
+                <?php if ($project['is_public']): ?>
+                <li class="smaller">
+                    <i class="fa fa-external-link fa-fw"></i>
+                    <?= $this->url->link(t('Public link'), 'task', 'readonly', array('task_id' => $task['id'], 'token' => $project['token']), false, '', '', true) ?>
+                </li>
+                <?php endif ?>
+            </ul>
+        </div>
+        <div class="task-summary-column">
+            <ul class="no-bullet">
+                <?php if (! empty($task['category_name'])): ?>
+                    <li>
+                        <strong><?= t('Category:') ?></strong>
+                        <span><?= $this->e($task['category_name']) ?></span>
+                    </li>
+                <?php endif ?>
+                <?php if (! empty($task['swimlane_name'])): ?>
+                    <li>
+                        <strong><?= t('Swimlane:') ?></strong>
+                        <span><?= $this->e($task['swimlane_name']) ?></span>
+                    </li>
+                <?php endif ?>
+                <li>
+                    <strong><?= t('Column:') ?></strong>
+                    <span><?= $this->e($task['column_title']) ?></span>
+                </li>
+                <li>
+                    <strong><?= t('Position:') ?></strong>
+                    <span><?= $task['position'] ?></span>
+                </li>
+            </ul>
+        </div>
+        <div class="task-summary-column">
+            <ul class="no-bullet">
+                <li>
+                    <strong><?= t('Assignee:') ?></strong>
+                    <span>
+                    <?php if ($task['assignee_username']): ?>
+                        <?= $this->e($task['assignee_name'] ?: $task['assignee_username']) ?>
+                    <?php else: ?>
+                        <?= t('not assigned') ?>
+                    <?php endif ?>
+                    </span>
+                </li>
+                <?php if ($task['creator_username']): ?>
+                    <li>
+                        <strong><?= t('Creator:') ?></strong>
+                        <span><?= $this->e($task['creator_name'] ?: $task['creator_username']) ?></span>
+                    </li>
+                <?php endif ?>
+                <?php if ($task['date_due']): ?>
+                <li>
+                    <strong><?= t('Due date:') ?></strong>
+                    <span><?= dt('%B %e, %Y', $task['date_due']) ?></span>
+                </li>
+                <?php endif ?>
+                <?php if ($task['time_estimated']): ?>
+                <li>
+                    <strong><?= t('Time estimated:') ?></strong>
+                    <span><?= t('%s hours', $task['time_estimated']) ?></span>
+                </li>
+                <?php endif ?>
+                <?php if ($task['time_spent']): ?>
+                <li>
+                    <strong><?= t('Time spent:') ?></strong>
+                    <span><?= t('%s hours', $task['time_spent']) ?></span>
+                </li>
+                <?php endif ?>
+            </ul>
+        </div>
+        <div class="task-summary-column">
+            <ul class="no-bullet">
+                <li>
+                    <strong><?= t('Created:') ?></strong>
+                    <span><?= dt('%B %e, %Y at %k:%M %p', $task['date_creation']) ?></span>
+                </li>
+                <li>
+                    <strong><?= t('Modified:') ?></strong>
+                    <span><?= dt('%B %e, %Y at %k:%M %p', $task['date_modification']) ?></span>
+                </li>
+                <?php if ($task['date_completed']): ?>
+                <li>
+                    <strong><?= t('Completed:') ?></strong>
+                    <span><?= dt('%B %e, %Y at %k:%M %p', $task['date_completed']) ?></span>
+                </li>
+                <?php endif ?>
+                <?php if ($task['date_started']): ?>
+                <li>
+                    <strong><?= t('Started:') ?></strong>
+                    <span><?= dt('%B %e, %Y at %k:%M %p', $task['date_started']) ?></span>
+                </li>
+                <?php endif ?>
+                <?php if ($task['date_moved']): ?>
+                <li>
+                    <strong><?= t('Moved:') ?></strong>
+                    <span><?= dt('%B %e, %Y at %k:%M %p', $task['date_moved']) ?></span>
+                </li>
+                <?php endif ?>
+            </ul>
+        </div>
+    </div>
+</section>