Merge pull request #255 from krancour/build-list-view

make build list view more useful/navigable

src/app/project/project.component.html

@@ -23,13 +23,13 @@ <h1>{{ project?.name }} </h1>
           <app-build-status-badge [status]="build.worker?.status"></app-build-status-badge>
           <span class="act-author"
             title="Build triggered by {{ build.provider }} / {{ build.type }}: commit {{ build.revision.commit }} ref {{ build.revision.ref }}">
-            <span class="act-avatar">
-              <i [ngClass]="CalculateProviderLogoClass(build.provider)"></i>
-            </span>
             {{ build.provider }}
           </span>
+          <span class="act-type" title="Event Type: {{ build.type }}">
+            {{ build.type }}
+          </span>
           <span class="act-message" title="Build ID: {{ build.id }}">
-            <em>#</em><em class="truncate">{{ build.id }}</em>
+            {{ build.id }}
           </span>
 
           <!-- if build has data -->
@@ -54,7 +54,7 @@ <h1>{{ project?.name }} </h1>
               build.worker?.status == 'Failed' ||
               build.worker?.status == 'Succeeded'
             ">
-              <span class="act-time-duration">Build {{ build.worker?.status | lowercase }} after <span
+              <span class="act-time-duration">Ran for <span
                   title="Build started {{ build.worker?.start_time | date:'long' }}">{{ build.worker?.start_time | amDifference: build.worker?.end_time :'seconds' : true | amDuration:'seconds' }}.</span></span>
 
               <span class="act-time-ago right text-right"

src/app/project/project.component.scss

@@ -175,63 +175,33 @@
       }
 
       .act-author {
-        min-width: 18%;
-        position: relative;
-        padding-left: 32px;
-
-        .act-avatar {
-          position: absolute;
-          top: -7px;
-          left: -11px;
-          opacity: 0.5;
-          @include transition;
-
-          .icon {
-            font-size: 20px;
-            float: left;
-            min-width: 20px;
-            text-align: center;
-          }
-
-          img {
-            max-height: 1rem;
-            margin-left: 0.1rem;
-            margin-top: 0.75rem;
-            position: relative;
-          }
-        }
+        min-width: 12%;
       }
 
-      .act-message {
-        min-width: 12%;
+      .act-type {
+        min-width: 20%;
       }
-      .act-hash {
-        min-width: 11%;
+
+      .act-message {
+        min-width: 30%;
       }
 
       .text-right {
         float: right;
       }
+
       .act-times {
-        min-width: 56%;
+        min-width: 32.5%;
       }
+
       .act-times-wrap {
         min-width: 100%;
       }
-      .truncate {
-        width: 2.88rem;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: hidden;
-        display: inline-block;
-        line-height: 0.75;
-        font-style: normal;
-        padding: 0rem 0.125rem;
-        font-family: $mono;
-      }
+
       .act-time-duration {
         min-width: 60%;
       }
+
       .act-time-ago {
         min-width: 40%;
 
@@ -246,18 +216,6 @@
         }
       }
 
-      &:after {
-        content: "Details >";
-        color: $active;
-        font-size: 0.75rem;
-        position: absolute;
-        right: 1.5rem;
-        top: 0.6rem;
-        opacity: 0;
-        text-align: right;
-        @include nunitoBold;
-        @include transition;
-      }
     }
 
     &:hover a,

src/app/project/project.component.spec.ts

@@ -92,29 +92,4 @@ describe('ProjectComponent', () => {
     });
   });
 
-  describe('CalculateProviderLogoClass', () => {
-    let expected;
-
-    describe('when github is the argument', () => {
-      beforeEach(() => {
-        expected = 'icon ion-logo-github';
-      });
-
-      it('returns a github icon', () => {
-        expect(component.CalculateProviderLogoClass('github')).toEqual(expected);
-      });
-    });
-
-    describe('for any other argument', () => {
-      beforeEach(() => {
-        expected = 'icon ion-logo-tux';
-      });
-
-      it('returns a tux icon', () => {
-        expect(component.CalculateProviderLogoClass('foo')).toEqual(expected);
-        expect(component.CalculateProviderLogoClass('bar')).toEqual(expected);
-        expect(component.CalculateProviderLogoClass('baz')).toEqual(expected);
-      });
-    });
-  });
 });

src/app/project/project.component.ts

@@ -27,12 +27,4 @@ export class ProjectComponent implements OnInit {
     this.builds = this.route.snapshot.data['builds'];
   }
 
-  CalculateProviderLogoClass(buildProvider) {
-    switch (buildProvider) {
-      case 'github':
-        return 'icon ion-logo-github';
-      default:
-        return 'icon ion-logo-tux';
-    }
-  }
 }