Improve card icons alignment on board

3 files changed, 111 insertions, 96 deletions

diff --git a/app/Template/board/task_footer.php b/app/Template/board/task_footer.php
index 15f1f713..23f4e32e 100644
--- a/app/Template/board/task_footer.php
+++ b/app/Template/board/task_footer.php
@@ -29,84 +29,95 @@
 <?php endif ?>
 
 <div class="task-board-icons">
-    <?php if ($task['score']): ?>
-        <span class="task-score" title="<?= t('Complexity') ?>">
-            <i class="fa fa-trophy"></i>
-            <?= $this->text->e($task['score']) ?>
-        </span>
-    <?php endif ?>
-
-    <?php if (! empty($task['date_due'])): ?>
-        <?php if (date('Y-m-d') == date('Y-m-d', $task['date_due'])): ?>
-            <span class="task-board-date task-board-date-today">
-        <?php elseif (time() > $task['date_due']): ?>
-            <span class="task-board-date task-board-date-overdue">
+    <div class="task-board-icons-row">
+        <?php if ($task['reference']): ?>
+            <span class="task-board-reference" title="<?= t('Reference') ?>">
+                <?= $this->text->e($task['reference']) ?>
+            </span>
+        <?php endif ?>
+    </div>
+    <div class="task-board-icons-row">
+        <?php if ($task['is_milestone'] == 1): ?>
+            <span title="<?= t('Milestone') ?>">
+                <i class="fa fa-flag flag-milestone"></i>
+            </span>
+        <?php endif ?>
+
+        <?php if ($task['score']): ?>
+            <span class="task-score" title="<?= t('Complexity') ?>">
+                <i class="fa fa-trophy"></i>
+                <?= $this->text->e($task['score']) ?>
+            </span>
+        <?php endif ?>
+
+        <?php if (! empty($task['time_estimated']) || ! empty($task['time_spent'])): ?>
+            <span class="task-time-estimated" title="<?= t('Time spent and estimated') ?>">
+                <?= $this->text->e($task['time_spent']) ?>/<?= $this->text->e($task['time_estimated']) ?>h
+            </span>
+        <?php endif ?>
+
+        <?php if (! empty($task['date_due'])): ?>
+            <span class="task-board-date
+                <?php if (date('Y-m-d') == date('Y-m-d', $task['date_due'])): ?>
+                     task-board-date-today
+                <?php elseif (time() > $task['date_due']): ?>
+                     task-board-date-overdue
+                <?php endif ?>
+                ">
+                <i class="fa fa-calendar"></i>
+                <?= $this->dt->date($task['date_due']) ?>
+            </span>
+        <?php endif ?>
+    </div>
+    <div class="task-board-icons-row">
+
+        <?php if ($task['recurrence_status'] == \Kanboard\Model\TaskModel::RECURRING_STATUS_PENDING): ?>
+            <span title="<?= t('Recurrence') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-refresh fa-rotate-90"></i></span>
+        <?php endif ?>
+
+        <?php if ($task['recurrence_status'] == \Kanboard\Model\TaskModel::RECURRING_STATUS_PROCESSED): ?>
+            <span title="<?= t('Recurrence') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-refresh fa-rotate-90 fa-inverse"></i></span>
+        <?php endif ?>
+
+        <?php if (! empty($task['nb_links'])): ?>
+            <span title="<?= t('Links') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'tasklinks', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-code-fork fa-fw"></i><?= $task['nb_links'] ?></span>
+        <?php endif ?>
+
+        <?php if (! empty($task['nb_external_links'])): ?>
+            <span title="<?= t('External links') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'externallinks', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-external-link fa-fw"></i><?= $task['nb_external_links'] ?></span>
+        <?php endif ?>
+
+        <?php if (! empty($task['nb_subtasks'])): ?>
+            <span title="<?= t('Sub-Tasks') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'subtasks', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-bars"></i>&nbsp;<?= round($task['nb_completed_subtasks']/$task['nb_subtasks']*100, 0).'%' ?></span>
+        <?php endif ?>
+
+        <?php if (! empty($task['nb_files'])): ?>
+            <span title="<?= t('Attachments') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'attachments', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-paperclip"></i>&nbsp;<?= $task['nb_files'] ?></span>
+        <?php endif ?>
+
+        <?php if (! empty($task['nb_comments'])): ?>
+            <span title="<?= $task['nb_comments'] == 1 ? t('%d comment', $task['nb_comments']) : t('%d comments', $task['nb_comments']) ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'comments', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-comment-o"></i>&nbsp;<?= $task['nb_comments'] ?></span>
+        <?php endif ?>
+
+        <?php if (! empty($task['description'])): ?>
+            <span title="<?= t('Description') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'description', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>">
+                <i class="fa fa-file-text-o"></i>
+            </span>
+        <?php endif ?>
+
+        <?php if ($task['is_active'] == 1): ?>
+            <div class="task-board-age">
+                <span title="<?= t('Task age in days')?>" class="task-board-age-total"><?= $this->dt->age($task['date_creation']) ?></span>
+                <span title="<?= t('Days in this column')?>" class="task-board-age-column"><?= $this->dt->age($task['date_moved']) ?></span>
+            </div>
         <?php else: ?>
-            <span class="task-board-date">
+            <span class="task-board-closed"><i class="fa fa-ban fa-fw"></i><?= t('Closed') ?></span>
         <?php endif ?>
-            <i class="fa fa-calendar"></i>
-            <?= $this->dt->date($task['date_due']) ?>
-        </span>
-    <?php endif ?>
-
-    <?php if ($task['recurrence_status'] == \Kanboard\Model\TaskModel::RECURRING_STATUS_PENDING): ?>
-        <span title="<?= t('Recurrence') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-refresh fa-rotate-90"></i></span>
-    <?php endif ?>
-
-    <?php if ($task['recurrence_status'] == \Kanboard\Model\TaskModel::RECURRING_STATUS_PROCESSED): ?>
-        <span title="<?= t('Recurrence') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-refresh fa-rotate-90 fa-inverse"></i></span>
-    <?php endif ?>
-
-    <?php if (! empty($task['nb_links'])): ?>
-        <span title="<?= t('Links') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'tasklinks', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-code-fork fa-fw"></i><?= $task['nb_links'] ?></span>
-    <?php endif ?>
-
-    <?php if (! empty($task['nb_external_links'])): ?>
-        <span title="<?= t('External links') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'externallinks', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-external-link fa-fw"></i><?= $task['nb_external_links'] ?></span>
-    <?php endif ?>
-
-    <?php if (! empty($task['nb_subtasks'])): ?>
-		<span title="<?= t('Sub-Tasks') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'subtasks', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-bars"></i>&nbsp;<?= round($task['nb_completed_subtasks']/$task['nb_subtasks']*100, 0).'%' ?></span>
-    <?php endif ?>
-
-    <?php if (! empty($task['nb_files'])): ?>
-        <span title="<?= t('Attachments') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'attachments', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-paperclip"></i>&nbsp;<?= $task['nb_files'] ?></span>
-    <?php endif ?>
-
-    <?php if (! empty($task['nb_comments'])): ?>
-        <span title="<?= $task['nb_comments'] == 1 ? t('%d comment', $task['nb_comments']) : t('%d comments', $task['nb_comments']) ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'comments', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-comment-o"></i>&nbsp;<?= $task['nb_comments'] ?></span>
-    <?php endif ?>
-
-    <?php if (! empty($task['description'])): ?>
-        <span title="<?= t('Description') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'description', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>">
-            <i class="fa fa-file-text-o"></i>
-        </span>
-    <?php endif ?>
-
-    <?php if (! empty($task['time_estimated']) || ! empty($task['time_spent'])): ?>
-        <span class="task-time-estimated" title="<?= t('Time spent and estimated') ?>">
-            <?= $this->text->e($task['time_spent']) ?>/<?= $this->text->e($task['time_estimated']) ?>h
-        </span>
-    <?php endif ?>
-
-    <?php if ($task['is_milestone'] == 1): ?>
-        <span title="<?= t('Milestone') ?>">
-            <i class="fa fa-flag flag-milestone"></i>
-        </span>
-    <?php endif ?>
-
-    <?= $this->hook->render('template:board:task:icons', array('task' => $task)) ?>
-
-    <?= $this->task->formatPriority($project, $task) ?>
-
-    <?php if ($task['is_active'] == 1): ?>
-        <div class="task-board-age">
-            <span title="<?= t('Task age in days')?>" class="task-board-age-total"><?= $this->dt->age($task['date_creation']) ?></span>
-            <span title="<?= t('Days in this column')?>" class="task-board-age-column"><?= $this->dt->age($task['date_moved']) ?></span>
-        </div>
-    <?php else: ?>
-        <span class="task-board-closed"><i class="fa fa-ban fa-fw"></i><?= t('Closed') ?></span>
-    <?php endif ?>
+
+        <?= $this->task->formatPriority($project, $task) ?>
+
+        <?= $this->hook->render('template:board:task:icons', array('task' => $task)) ?>
+    </div>
 </div>
 
 <?= $this->hook->render('template:board:task:footer', array('task' => $task)) ?>
diff --git a/app/Template/board/task_private.php b/app/Template/board/task_private.php
index 01da46db..3201d4e2 100644
--- a/app/Template/board/task_private.php
+++ b/app/Template/board/task_private.php
@@ -32,20 +32,21 @@
         </div>
     <?php else: ?>
         <div class="task-board-expanded">
-            <div class="task-board-saving-icon" style="display: none;"><i class="fa fa-spinner fa-pulse fa-2x"></i></div>
-            <?php if ($this->user->hasProjectAccess('TaskModificationController', 'edit', $task['project_id'])): ?>
-                <?= $this->render('task/dropdown', array('task' => $task)) ?>
-            <?php else: ?>
-                <strong><?= '#'.$task['id'] ?></strong>
-            <?php endif ?>
+            <div class="task-board-header">
+                <?php if ($this->user->hasProjectAccess('TaskModificationController', 'edit', $task['project_id'])): ?>
+                    <?= $this->render('task/dropdown', array('task' => $task)) ?>
+                <?php else: ?>
+                    <strong><?= '#'.$task['id'] ?></strong>
+                <?php endif ?>
 
-            <?php if ($task['reference']): ?>
-            <span class="task-board-reference" title="<?= t('Reference') ?>">
-                (<?= $task['reference'] ?>)
-            </span>
-            <?php endif ?>
+                <?php if (! empty($task['owner_id'])): ?>
+                    <span class="task-board-assignee">
+                        <?= $this->text->e($task['assignee_name'] ?: $task['assignee_username']) ?>
+                    </span>
+                <?php endif ?>
 
-            <?= $this->render('board/task_avatar', array('task' => $task)) ?>
+                <?= $this->render('board/task_avatar', array('task' => $task)) ?>
+            </div>
 
             <?= $this->hook->render('template:board:private:task:before-title', array('task' => $task)) ?>
             <div class="task-board-title">
@@ -53,6 +54,8 @@
             </div>
             <?= $this->hook->render('template:board:private:task:after-title', array('task' => $task)) ?>
 
+            <div class="task-board-saving-icon" style="display: none;"><i class="fa fa-spinner fa-pulse fa-2x"></i></div>
+
             <?= $this->render('board/task_footer', array(
                 'task' => $task,
                 'not_editable' => $not_editable,
diff --git a/app/Template/board/task_public.php b/app/Template/board/task_public.php
index 82eb6535..8e429ea4 100644
--- a/app/Template/board/task_public.php
+++ b/app/Template/board/task_public.php
@@ -1,14 +1,15 @@
 <div class="task-board color-<?= $task['color_id'] ?> <?= $task['date_modification'] > time() - $board_highlight_period ? 'task-board-recent' : '' ?>">
+    <div class="task-board-header">
+        <?= $this->url->link('#'.$task['id'], 'TaskViewController', 'readonly', array('task_id' => $task['id'], 'token' => $project['token'])) ?>
 
-    <?= $this->url->link('#'.$task['id'], 'TaskViewController', 'readonly', array('task_id' => $task['id'], 'token' => $project['token'])) ?>
+        <?php if (! empty($task['owner_id'])): ?>
+            <span class="task-board-assignee">
+                <?= $this->text->e($task['assignee_name'] ?: $task['assignee_username']) ?>
+            </span>
+        <?php endif ?>
 
-    <?php if ($task['reference']): ?>
-    <span class="task-board-reference" title="<?= t('Reference') ?>">
-        (<?= $task['reference'] ?>)
-    </span>
-    <?php endif ?>
-
-    <?= $this->render('board/task_avatar', array('task' => $task)) ?>
+        <?= $this->render('board/task_avatar', array('task' => $task)) ?>
+    </div>
 
     <?= $this->hook->render('template:board:public:task:before-title', array('task' => $task)) ?>
     <div class="task-board-title">