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">
<ul class="no-bullet">
<li>
<strong><?= t('Status:') ?></strong>
<span>
<?php if ($task['is_active'] == 1): ?>
<?= t('open') ?>
<?php else: ?>
<?= t('closed') ?>
<?php endif ?> <?php endif ?>
<ul> </span>
<li>
<strong><?= t('Priority: %d', $task['priority']) ?></strong>
</li> </li>
<?php if ($task['reference']): ?>
<li> <li>
<strong><?= t('Reference: %s', $task['reference']) ?></strong> <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> </li>
<?php endif ?> <?php endif ?>
<?php if (! empty($task['swimlane_name'])): ?> <?php if (! empty($task['swimlane_name'])): ?>
<li> <li>
<?= t('Swimlane: %s', $task['swimlane_name']) ?> <strong><?= t('Swimlane:') ?></strong>
<span><?= $this->e($task['swimlane_name']) ?></span>
</li> </li>
<?php endif ?> <?php endif ?>
<li> <li>
<?= dt('Created on %B %e, %Y at %k:%M %p', $task['date_creation']) ?> <strong><?= t('Column:') ?></strong>
<span><?= $this->e($task['column_title']) ?></span>
</li> </li>
<?php if ($task['date_modification']): ?>
<li> <li>
<?= dt('Last modified on %B %e, %Y at %k:%M %p', $task['date_modification']) ?> <strong><?= t('Position:') ?></strong>
<span><?= $task['position'] ?></span>
</li> </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 ?> <?php endif ?>
<?php if ($task['date_completed']): ?> </span>
<li>
<?= dt('Completed on %B %e, %Y at %k:%M %p', $task['date_completed']) ?>
</li> </li>
<?php endif ?> <?php if ($task['creator_username']): ?>
<?php if ($task['date_started']): ?>
<li> <li>
<?= dt('Started on %B %e, %Y', $task['date_started']) ?> <strong><?= t('Creator:') ?></strong>
<span><?= $this->e($task['creator_name'] ?: $task['creator_username']) ?></span>
</li> </li>
<?php endif ?> <?php endif ?>
<?php if ($task['date_due']): ?> <?php if ($task['date_due']): ?>
<li> <li>
<strong><?= dt('Must be done before %B %e, %Y', $task['date_due']) ?></strong> <strong><?= t('Due date:') ?></strong>
<span><?= dt('%B %e, %Y', $task['date_due']) ?></span>
</li> </li>
<?php endif ?> <?php endif ?>
<?php if ($task['time_estimated']): ?> <?php if ($task['time_estimated']): ?>
<li> <li>
<?= t('Estimated time: %s hours', $task['time_estimated']) ?> <strong><?= t('Time estimated:') ?></strong>
<span><?= t('%s hours', $task['time_estimated']) ?></span>
</li> </li>
<?php endif ?> <?php endif ?>
<?php if ($task['time_spent']): ?> <?php if ($task['time_spent']): ?>
<li> <li>
<?= t('Time spent: %s hours', $task['time_spent']) ?> <strong><?= t('Time spent:') ?></strong>
</li> <span><?= t('%s hours', $task['time_spent']) ?></span>
<?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> </li>
<?php endif ?> <?php endif ?>
</ul> </ul>
</div> </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>

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 {