Skip to content

Commit ce51290

Browse files
jkurijkuri
committed
feat(ui): updated styles for build details
1 parent 69ed283 commit ce51290

File tree

4 files changed

+81
-45
lines changed

4 files changed

+81
-45
lines changed

‎src/app/assets/public/images/icons/clock.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎src/app/components/app-build-details/app-build-details.component.html‎

Lines changed: 35 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,17 @@
1212
<div class="column is-12" *ngIf="build">
1313
<div class="build-top-container" [ngClass]="{ green: status === 'success', yellow: status === 'running', red: status === 'failed' }">
1414
<div class="build-top-content">
15-
<div class="columns">
16-
<div class="column is-1">
17-
<span class="build-icon">
18-
<img src="images/icons/clock.svg" *ngIf="status === 'queued'">
19-
<img src="images/icons/flickr.svg" *ngIf="status === 'running'">
20-
<img src="images/icons/check-true.svg" *ngIf="status === 'success'">
21-
<img src="images/icons/check-false.svg" *ngIf="status === 'failed'">
22-
</span>
23-
</div>
24-
<div class="column is-9">
25-
<h1 class="bold">{{ build?.head_full_name }}</h1>
26-
<h2>{{ build?.message }}</h2>
15+
<div class="columns is-multiline">
16+
<div class="column is-10">
17+
<h1 class="bold">
18+
<span>{{ build?.head_full_name }}</span>
19+
<span class="build-icon">
20+
<img src="images/icons/clock.svg" *ngIf="status === 'queued'">
21+
<img src="images/icons/flickr.svg" *ngIf="status === 'running'">
22+
<img src="images/icons/check-true.svg" *ngIf="status === 'success'">
23+
<img src="images/icons/check-false.svg" *ngIf="status === 'failed'">
24+
</span>
25+
</h1>
2726
</div>
2827
<div class="column is-2">
2928
<button class="button is-fullwidth" type="button" (click)="restartBuild($event, build.id)" [disabled]="processingBuild">
@@ -35,25 +34,35 @@ <h2>{{ build?.message }}</h2>
3534
</div>
3635
</button>
3736
</div>
38-
</div>
39-
<div class="columns">
40-
<div class="column is-1"></div>
41-
<div class="column is-9">
42-
<p>{{ build?.head_sha }}</p>
37+
38+
<hr/>
39+
40+
<div class="column is-4">
41+
<h2>{{ build?.message }}</h2>
4342
</div>
4443
<div class="column is-2">
45-
<span class="total-time">
44+
<p>
4645
<span class="icon">
47-
<img src="images/icons/clock.svg">
46+
<img src="images/icons/git-commit.svg">
4847
</span>
49-
{{ totalTime }}
50-
</span>
48+
{{ build?.head_sha.slice(0, 7) }}
49+
</p>
5150
</div>
52-
</div>
53-
<div class="columns">
54-
<div class="column is-1"></div>
55-
<div class="column is-11">
56-
<p>{{ build?.author }} commited {{ timeWords }} ago.</p>
51+
<div class="column is-4">
52+
<p>
53+
<span class="icon">
54+
<img [src]="build?.head_user_avatar_url" class="avatar-img">
55+
</span>
56+
<span>{{ build?.author }} commited {{ timeWords }} ago</span>
57+
</p>
58+
</div>
59+
<div class="column is-2">
60+
<p class="total-time">
61+
<span class="icon">
62+
<img src="images/icons/clock.svg">
63+
</span>
64+
<span>{{ totalTime }}</span>
65+
</p>
5766
</div>
5867
</div>
5968
</div>

‎src/app/components/app-job/app-job.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<div class="container" [class.hidden]="loading">
88
<div class="columns">
99
<div class="column is-12">
10-
<div class="content bg-background">
10+
<div class="content">
1111
<div class="columns is-multiline">
1212
<div class="column is-12" *ngIf="job">
1313
<div class="job-top-container">

‎src/app/styles/build-details.sass‎

Lines changed: 44 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,43 @@
11
.build-top-container
22
margin-top: 30px
33
width: 100%
4-
border: 3px solid $background
4+
border: 3px solid $divider
55
border-radius: 4px
66
margin-bottom: 30px
7-
background: $background
87

98
&.green
10-
border-color: $green
9+
border-bottom: 3px solid $green
1110

1211
&.red
13-
border-color: $red
12+
border-bottom: 3px solid $red
1413

1514
&.yellow
16-
border-color: $yellow
15+
border-bottom: 3px solid $yellow
1716

1817
.build-top-content
19-
padding: 10px 20px
18+
padding: 20px
19+
background: linear-gradient(to bottom, $background, $background-secondary)
20+
21+
.avatar-img
22+
border-radius: 50%
23+
margin: 4px 5px 0 0
24+
display: block
25+
float: left
26+
27+
hr
28+
margin: 20px 0
2029

2130
h1
2231
font-size: 20px
2332
text-overflow: ellipsis
2433
white-space: nowrap
2534
overflow: hidden
26-
padding: 10px 20px 0 20px
35+
padding: 10px 20px 0 0
2736
margin: 0 0 5px 0
2837

38+
span
39+
display: block
40+
float: left
2941

3042
&.bold
3143
font-family: $font-family-bold
@@ -35,30 +47,45 @@
3547
text-overflow: ellipsis
3648
white-space: nowrap
3749
overflow: hidden
38-
padding: 5px 20px
50+
padding: 5px 20px 5px 0
3951

4052
p
4153
font-size: 14px
4254
color: $white
4355
padding: 5px 20px
56+
display: flex
57+
align-items: center
58+
59+
.icon
60+
margin-right: 5px
4461

4562
.build-icon
4663
display: block
47-
width: 50px
48-
height: 50px
49-
padding-top: 8px
50-
margin: 10px auto
64+
width: 16px
65+
height: 16px
66+
margin-left: 15px
67+
margin-top: 3px
68+
float: left
5169

5270
img
53-
width: 50px
54-
height: 50px
71+
width: 16px
72+
height: 16px
5573

5674
.total-time
5775
display: flex
58-
justify-content: center
76+
justify-content: flex-end
5977
align-items: center
60-
font-size: 24px
78+
font-size: 16px
6179
color: $white
80+
font-weight: bold
81+
padding-right: 0
82+
margin-right: 0
6283

6384
.icon
64-
margin-right: 20px
85+
margin-right: 5px
86+
width: 16px
87+
height: 16px
88+
89+
img
90+
width: 16px
91+
height: 16px

0 commit comments

Comments
 (0)