feat(ui): updated styles for build details

bleenco · Jul 30, 2017 · ce51290 · ce51290
1 parent 69ed283
commit ce51290
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 45 deletions.
diff --git a/src/app/assets/public/images/icons/clock.svg b/src/app/assets/public/images/icons/clock.svg
diff --git a/src/app/components/app-build-details/app-build-details.component.html b/src/app/components/app-build-details/app-build-details.component.html
@@ -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>

diff --git a/src/app/components/app-job/app-job.component.html b/src/app/components/app-job/app-job.component.html
@@ -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">

diff --git a/src/app/styles/build-details.sass b/src/app/styles/build-details.sass
@@ -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