Merge pull request #21462 from ricardoasmarques/wip-backgroud-tasks-style

mgr/dashboard: Improve background tasks style

Reviewed-by: Laura Paduano <lpaduano@suse.com>
This commit is contained in:
Lenz Grimmer 2018-04-18 11:43:24 +02:00 committed by GitHub
commit f2051a96aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 19 deletions

View File

@ -1,6 +1 @@
@import '../../../../styles/popover.scss'; @import '../../../../styles/popover.scss';
.icon-col {
width: 50px !important;
font-size: 10px;
}

View File

@ -8,15 +8,19 @@
<div *ngFor="let executingTask of executingTasks"> <div *ngFor="let executingTask of executingTasks">
<table> <table>
<tr> <tr>
<td class="icon-col"> <td rowspan="3" class="icon-col text-center">
<i class="fa fa-spinner fa-spin fa-fw" aria-hidden="true"></i> <span class="fa-stack fa-2x text-info">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-stack-1x fa-inverse fa-spinner fa-spin"></i>
</span>
</td> </td>
<td>{{ executingTask.description }}</td> <td colspan="3"><strong>{{ executingTask.description }}</strong></td>
<td class="text-right italic" *ngIf="executingTask.progress"><span>{{ executingTask.progress }} %</span></td>
</tr> </tr>
<tr> <tr>
<td colspan="3" class="text-right"> <td colspan="2">
<span class="date">{{ executingTask.begin_time | cdDate }}</span></td> <small class="date">{{ executingTask.begin_time | cdDate }}</small>
</td>
<td class="text-right italic" nowrap *ngIf="executingTask.progress"><span>{{ executingTask.progress }} %</span></td>
</tr> </tr>
</table> </table>
<hr> <hr>
@ -31,16 +35,22 @@
<div *ngFor="let finishedTask of finishedTasks"> <div *ngFor="let finishedTask of finishedTasks">
<table> <table>
<tr> <tr>
<td class="icon-col"> <td rowspan="3" class="icon-col text-center">
<span *ngIf="!finishedTask.errorMessage"> <span *ngIf="!finishedTask.errorMessage">
<i class="fa fa-check text-success"></i> <span class="fa-stack fa-2x text-success">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-stack-1x fa-inverse fa-check"></i>
</span>
</span> </span>
<span *ngIf="finishedTask.errorMessage"> <span *ngIf="finishedTask.errorMessage">
<i class="fa fa-exclamation-triangle text-danger"></i> <span class="fa-stack fa-2x text-danger">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-stack-1x fa-inverse fa-exclamation-triangle"></i>
</span>
</span> </span>
</td> </td>
<td colspan="2"> <td colspan="2">
{{ finishedTask.description }} <strong>{{ finishedTask.description }}</strong>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -52,8 +62,8 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td colspan="2" class="text-right"> <td colspan="2">
<span class="date">{{ finishedTask.end_time | cdDate }}</span> <small class="date">{{ finishedTask.end_time | cdDate }}</small>
</td> </td>
</tr> </tr>
</table> </table>

View File

@ -30,8 +30,8 @@ table {
} }
.icon-col { .icon-col {
width: 20px; width: 50px;
font-size: 15px; font-size: 10px;
} }
.date { .date {