Improve task summary layout

This commit is contained in:
Frederic Guillot
2016-02-02 22:41:24 -05:00
parent 5eb4b570a1
commit 6727d53e68
6 changed files with 163 additions and 119 deletions

View File

@@ -22,6 +22,7 @@ New features:
Improvements: Improvements:
* Change task summary layout
* Use inline popup for subtasks modification * Use inline popup for subtasks modification
* Move homepage menus to the user dropdown * Move homepage menus to the user dropdown
* Have a new task assigned to the creator by default instead of "no assignee" * Have a new task assigned to the creator by default instead of "no assignee"

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -70,3 +70,8 @@ hr {
.web-notification-icon:hover { .web-notification-icon:hover {
color: #000; color: #000;
} }
.smaller {
font-size: 0.85em;
}

View File

@@ -168,24 +168,36 @@ span.task-board-date-overdue {
} }
/* task view */ /* task view */
.task-show-details { #task-summary h2 {
position: relative; color: #666;
border-radius: 5px; font-size: 2.5em;
padding-bottom: 10px; margin-top: 0;
padding-top: 0;
} }
.task-show-details h2 { .task-summary-container {
font-size: 1.8em; border: 2px solid #000;
margin: 0; border-radius: 8px;
margin-bottom: 25px; padding: 15px;
padding: 0; display: -webkit-flex;
padding-left: 10px; display: flex;
padding-right: 10px; -webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: space-between;
justify-content: space-between;
} }
.task-show-details li { .task-summary-column {
margin-left: 25px; font-size: 0.9em;
list-style-type: circle; color: #666;
}
.task-summary-column span {
color: #777;
}
.task-summary-column li {
line-height: 23px;
} }
.task-show-section { .task-show-section {