Permalink
Browse files

feat(ui): updated styles for build details

  • Loading branch information...
jkuri committed Jul 30, 2017
1 parent 69ed283 commit ce51290a94b1ad211e9b30df022402295cc91e82
@@ -1,6 +1,6 @@
<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="clock" fill-rule="nonzero" fill="#ffd43b">
<g id="clock" fill-rule="nonzero" fill="#FFFFFF">
<path d="M20.642,0 C26.34,0 31.499,2.317 35.244,6.047 C38.974,9.793 41.291,14.952 41.291,20.65 C41.291,26.348 38.974,31.507 35.244,35.253 C31.498,38.983 26.34,41.3 20.642,41.3 C14.944,41.3 9.786,38.983 6.056,35.253 C2.31,31.507 0.008,26.349 0.008,20.65 C0.008,14.952 2.309,9.793 6.055,6.047 C9.786,2.317 14.944,0 20.642,0 L20.642,0 Z M31.166,19.523 C31.785,19.523 32.277,20.031 32.277,20.65 C32.277,21.269 31.785,21.777 31.166,21.777 L20.674,21.777 L20.642,21.777 C20.229,21.777 19.864,21.539 19.674,21.206 L19.658,21.19 L19.658,21.19 L19.642,21.158 L19.642,21.158 L19.642,21.142 L19.642,21.142 L19.626,21.11 L19.626,21.11 L19.61,21.078 L19.61,21.078 L19.61,21.062 L19.61,21.062 L19.594,21.03 L19.594,21.03 L19.578,21.014 L19.578,21.014 L19.578,20.982 L19.578,20.982 L19.562,20.95 L19.562,20.95 L19.562,20.934 L19.562,20.934 L19.546,20.902 L19.546,20.902 L19.546,20.87 L19.546,20.87 L19.546,20.854 L19.546,20.838 L19.53,20.822 L19.53,20.822 L19.53,20.79 L19.53,20.79 L19.53,20.758 L19.53,20.758 L19.53,20.73 L19.53,20.73 L19.53,20.714 L19.53,20.714 L19.53,20.682 L19.53,20.682 L19.53,20.65 L19.53,20.65 L19.53,7.206 C19.53,6.587 20.022,6.095 20.641,6.095 C21.26,6.095 21.768,6.587 21.768,7.206 L21.768,19.523 L31.166,19.523 Z M33.657,7.635 C30.324,4.302 25.721,2.254 20.642,2.254 C15.563,2.254 10.96,4.301 7.627,7.635 C4.31,10.968 2.246,15.571 2.246,20.65 C2.246,25.729 4.309,30.332 7.627,33.666 C10.96,36.999 15.563,39.047 20.642,39.047 C25.721,39.047 30.324,36.999 33.657,33.666 C36.99,30.333 39.054,25.73 39.054,20.65 C39.054,15.571 36.991,10.968 33.657,7.635 L33.657,7.635 Z" id="Shape"></path>
</g>
</g>
@@ -12,18 +12,17 @@
<div class="column is-12" *ngIf="build">
<div class="build-top-container" [ngClass]="{ green: status === 'success', yellow: status === 'running', red: status === 'failed' }">
<div class="build-top-content">
<div class="columns">
<div class="column is-1">
<span class="build-icon">
<img src="images/icons/clock.svg" *ngIf="status === 'queued'">
<img src="images/icons/flickr.svg" *ngIf="status === 'running'">
<img src="images/icons/check-true.svg" *ngIf="status === 'success'">
<img src="images/icons/check-false.svg" *ngIf="status === 'failed'">
</span>
</div>
<div class="column is-9">
<h1 class="bold">{{ build?.head_full_name }}</h1>
<h2>{{ build?.message }}</h2>
<div class="columns is-multiline">
<div class="column is-10">
<h1 class="bold">
<span>{{ build?.head_full_name }}</span>
<span class="build-icon">
<img src="images/icons/clock.svg" *ngIf="status === 'queued'">
<img src="images/icons/flickr.svg" *ngIf="status === 'running'">
<img src="images/icons/check-true.svg" *ngIf="status === 'success'">
<img src="images/icons/check-false.svg" *ngIf="status === 'failed'">
</span>
</h1>
</div>
<div class="column is-2">
<button class="button is-fullwidth" type="button" (click)="restartBuild($event, build.id)" [disabled]="processingBuild">
@@ -35,25 +34,35 @@ <h2>{{ build?.message }}</h2>
</div>
</button>
</div>
</div>
<div class="columns">
<div class="column is-1"></div>
<div class="column is-9">
<p>{{ build?.head_sha }}</p>

<hr/>

<div class="column is-4">
<h2>{{ build?.message }}</h2>
</div>
<div class="column is-2">
<span class="total-time">
<p>
<span class="icon">
<img src="images/icons/clock.svg">
<img src="images/icons/git-commit.svg">
</span>
{{ totalTime }}
</span>
{{ build?.head_sha.slice(0, 7) }}
</p>
</div>
</div>
<div class="columns">
<div class="column is-1"></div>
<div class="column is-11">
<p>{{ build?.author }} commited {{ timeWords }} ago.</p>
<div class="column is-4">
<p>
<span class="icon">
<img [src]="build?.head_user_avatar_url" class="avatar-img">
</span>
<span>{{ build?.author }} commited {{ timeWords }} ago</span>
</p>
</div>
<div class="column is-2">
<p class="total-time">
<span class="icon">
<img src="images/icons/clock.svg">
</span>
<span>{{ totalTime }}</span>
</p>
</div>
</div>
</div>
@@ -7,7 +7,7 @@
<div class="container" [class.hidden]="loading">
<div class="columns">
<div class="column is-12">
<div class="content bg-background">
<div class="content">
<div class="columns is-multiline">
<div class="column is-12" *ngIf="job">
<div class="job-top-container">
@@ -1,31 +1,43 @@
.build-top-container
margin-top: 30px
width: 100%
border: 3px solid $background
border: 3px solid $divider
border-radius: 4px
margin-bottom: 30px
background: $background

&.green
border-color: $green
border-bottom: 3px solid $green

&.red
border-color: $red
border-bottom: 3px solid $red

&.yellow
border-color: $yellow
border-bottom: 3px solid $yellow

.build-top-content
padding: 10px 20px
padding: 20px
background: linear-gradient(to bottom, $background, $background-secondary)

.avatar-img
border-radius: 50%
margin: 4px 5px 0 0
display: block
float: left

hr
margin: 20px 0

h1
font-size: 20px
text-overflow: ellipsis
white-space: nowrap
overflow: hidden
padding: 10px 20px 0 20px
padding: 10px 20px 0 0
margin: 0 0 5px 0

span
display: block
float: left

&.bold
font-family: $font-family-bold
@@ -35,30 +47,45 @@
text-overflow: ellipsis
white-space: nowrap
overflow: hidden
padding: 5px 20px
padding: 5px 20px 5px 0

p
font-size: 14px
color: $white
padding: 5px 20px
display: flex
align-items: center

.icon
margin-right: 5px

.build-icon
display: block
width: 50px
height: 50px
padding-top: 8px
margin: 10px auto
width: 16px
height: 16px
margin-left: 15px
margin-top: 3px
float: left

img
width: 50px
height: 50px
width: 16px
height: 16px

.total-time
display: flex
justify-content: center
justify-content: flex-end
align-items: center
font-size: 24px
font-size: 16px
color: $white
font-weight: bold
padding-right: 0
margin-right: 0

.icon
margin-right: 20px
margin-right: 5px
width: 16px
height: 16px

img
width: 16px
height: 16px

0 comments on commit ce51290

Please sign in to comment.