abstruse/src/app/components/app-builds/app-builds.component.html

Abstruse CI

<app-header></app-header>

<nav class="nav sub-nav">
  <div class="container">
    <div class="nav-left is-hidden-mobile">
      <span class="nav-item">
        <h1 *ngIf="show === 'all'">Latest builds</h1>
        <h1 *ngIf="show === 'commits'">Commits</h1>
        <h1 *ngIf="show === 'pr'">Pull requests</h1>
      </span>
    </div>
    <div class="nav-center is-hidden-mobile">

    </div>
    <div class="nav-right">
      <div class="group-buttons bright">
        <button class="group-button" [ngClass]="{ 'is-active': show === 'all' }" (click)="showAllBuilds()">
          <i class="ionicon ion-network"></i>
          All Builds
        </button>
        <button class="group-button" [ngClass]="{ 'is-active': show === 'commits' }" (click)="showCommits()">
          <i class="ionicon ion-merge"></i>
          Commits
        </button>
        <button class="group-button" [ngClass]="{ 'is-active': show === 'pr' }" (click)="showPullRequests()">
          <i class="ionicon ion-pull-request"></i>
          Pull Requests
        </button>
      </div>
    </div>
  </div>
</nav>

<div class="container">
  <div class="columns">
    <div class="column is-12">
      <div class="content">
        <div class="container" *ngIf="loading">
          <img src="/assets/images/icons/flickr.svg" class="main-loader">
        </div>

        <div class="columns is-multiline" *ngIf="!loading">

          <div class="column is-12" *ngIf="!builds?.length">
            <div class="notification">
              <p>No builds has been run yet.</p>
            </div>
          </div>

          <div class="column is-12" *ngIf="builds?.length">
            <div class="columns list-item" *ngFor="let build of builds; let i = index;" [ngClass]="{ 'is-queued': build.status === 'queued', 'is-success': build.status === 'success', 'is-running': build.status === 'running', 'is-errored': build.status === 'failed' }" (click)="gotoBuild(build.id)">
              <app-build-item [build]="build"></app-build-item>
            </div>
            <div layout-align="center" *ngIf="builds?.length" align="center" class="more-button-container">
              <button type="button" class="button" name="btn-loadmore" (click)="fetch($event)" [class.is-loading]="fetching" [class.is-hidden]="hideMoreButton">
                <img src="/assets/images/icons/more.svg">
                Load more builds
              </button>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>