Permalink
Browse files

fix(ui): update ui accordingly

  • Loading branch information...
jkuri committed Aug 18, 2017
1 parent a032e35 commit 099406f131d3dad30b69fe1294e03996e61997dd
@@ -70,6 +70,39 @@ <h2>{{ build?.message }}</h2>
<span name="time-left">approximately {{ approximatelyRemainingTime }} remaining</span>
</div>
</div>

<div *ngIf="build.runs && build.runs.length > 1" class="column is-12">
<hr/>
<div class="columns">
<div class="column is-12">
<div class="build-history-btn-container">
<span *ngIf="!showBuildHistory" (click)="showBuildHistory = true" class="build-history-btn">
Show build history
</span>
<span *ngIf="showBuildHistory" (click)="showBuildHistory = false" class="build-history-btn hide">
Hide build history
</span>
</div>
<div *ngIf="showBuildHistory" class="mtop-20">
<div class="columns list-item list-item-mini"
*ngFor="let run of build.runs; let i = index;"
[ngClass]="{ 'is-queued': run.status === 'queued', 'is-success': run.status === 'success', 'is-running': run.status === 'running', 'is-errored': run.status === 'failed' || !run.status }"
>
<div class="column is-4">
<span>{{ run.start_time | date:'dd.MM.yyyy hh:mm:ss' }}</span>
</div>
<div class="column is-4">
<span *ngIf="run.end_time">{{ run.end_time | date:'dd.MM.yyyy hh:mm:ss' }}</span>
</div>
<div class="column is-4">
<span *ngIf="run.status">{{ run.status.charAt(0).toUpperCase() + run.status.slice(1) }}</span>
<span *ngIf="!run.status">Cancelled</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -131,26 +164,6 @@ <h2>{{ build?.message }}</h2>
</div>
</div>
</div>
<div class="column is-12" *ngIf="build.runs && build.runs.length > 1">
<div class="build-top-container">
<div class="build-top-content">
<h1 class="bold">
<span>Previous Runs:</span>
</h1>
<hr/>
<div class="columns list-item"
*ngFor="let run of build.runs; let i = index;"
[ngClass]="{ 'is-queued': run.status === 'queued', 'is-success': run.status === 'success', 'is-running': run.status === 'running', 'is-errored': run.status === 'failed' }">
<div class="column is-4">
<span>{{ run.start_time | date:'dd MM yyyy hh:mm:ss' }} - {{ run.end_time | date:'dd MM yyyy hh:mm:ss' }}</span>
</div>
<div class="column is-8">
<span>{{ run.message }} ({{ run.sha}})</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -86,6 +86,40 @@ <h2>{{ job?.build?.message }}</h2>
<progress class="progress is-small" [value]="expectedProgress" max="1">{{expectedProgress}}%</progress>
</div>
</div>

<div *ngIf="job.runs && job.runs.length > 1" class="column is-12">
<hr/>
<div class="columns">
<div class="column is-12">
<div class="build-history-btn-container">
<span *ngIf="!showBuildHistory" (click)="showBuildHistory = true" class="build-history-btn">
Show build history
</span>
<span *ngIf="showBuildHistory" (click)="showBuildHistory = false" class="build-history-btn hide">
Hide build history
</span>
</div>
<div *ngIf="showBuildHistory" class="mtop-20">
<div class="columns list-item list-item-mini"
*ngFor="let run of job.runs; let i = index;"
[ngClass]="{ 'is-queued': run.status === 'queued', 'is-success': run.status === 'success', 'is-running': run.status === 'running', 'is-errored': run.status === 'failed' || !run.status }"
>
<div class="column is-4">
<span>{{ run.start_time | date:'dd.MM.yyyy hh:mm:ss' }}</span>
</div>
<div class="column is-4">
<span *ngIf="run.end_time">{{ run.end_time | date:'dd.MM.yyyy hh:mm:ss' }}</span>
</div>
<div class="column is-4">
<span *ngIf="run.status">{{ run.status.charAt(0).toUpperCase() + run.status.slice(1) }}</span>
<span *ngIf="!run.status">Cancelled</span>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
</div>
</div>
@@ -104,23 +138,6 @@ <h2>{{ job?.build?.message }}</h2>
<div class="column is-12">
<app-terminal [data]="terminalInput" (outputData)="terminalOutput($event)" [options]="terminalOptions"></app-terminal>
</div>
<div class="column is-12" *ngIf="job.runs && job.runs.length > 1">
<div class="build-top-container">
<div class="build-top-content">
<h1 class="bold">
<span>Previous Runs:</span>
</h1>
<hr/>
<div class="columns list-item"
*ngFor="let run of job.runs; let i = index;"
[ngClass]="{ 'is-queued': run.status === 'queued', 'is-success': run.status === 'success', 'is-running': run.status === 'running', 'is-errored': run.status === 'failed' }">
<div class="column is-8">
<span>{{ run.start_time | date:'dd MM yyyy hh:mm:ss' }} - {{ run.end_time | date:'dd MM yyyy hh:mm:ss' }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -3,6 +3,7 @@
border: 3px solid $divider
border-radius: 4px
margin-bottom: 30px
margin-top: 30px

&.green
border-bottom: 3px solid $green
@@ -123,3 +124,21 @@
padding: 5px 10px
border-radius: 4px
margin: 0 5px

.build-history-btn-container
display: flex
justify-content: flex-end

.build-history-btn
width: 180px
display: block
text-align: center
background: $green
margin: 0
border-radius: 5px
border: 1px solid $divider
padding: 5px 20px
cursor: pointer

&.hide
background: linear-gradient(to bottom, #F95359, #DD151C)
@@ -76,3 +76,5 @@ hr
&.blue
background: $blue

.mtop-20
margin-top: 20px
@@ -88,6 +88,13 @@
border-radius: 3px
border: 1px solid $divider

&.list-item-mini
height: 30px

&:hover
cursor: default
background: linear-gradient(to bottom, $background, $background-secondary)

&.list-item-slim
height: 70px

0 comments on commit 099406f

Please sign in to comment.