results_feed/lib/src/components/app.html

<header class="material-header shadow">
  <div class="material-header-row">
    <material-button
        icon
        class="material-drawer-button"
        (trigger)="showFilter = true">
      <material-icon icon="filter_list"></material-icon>
    </material-button>
    <span class="material-header-title">{{title}}</span>
    <div class="material-spacer"></div>
    <span *ngIf="fetching != null">
      <material-icon icon="autorenew"></material-icon>
      fetching results...
    </span>
    <material-button
        class="material-drawer-button"
        (trigger)="toggleLogin()">
      {{loginMessage}}
    </material-button>
  </div>
</header>
<material-content
    style="margin:0px; background-color:ghostwhite; margin-top:64px">
  <modal [(visible)]="showFilter">
    <material-dialog
        info
        class="info-dialog"
        [autoDismissable]="showFilter"
        (dismiss)="showFilter = false">
      <h1 header>
        Filter
        <material-button icon autoFocus (trigger)="showFilter = false">
          <material-icon icon="close"></material-icon>
        </material-button>
      </h1>
      <app-filter style="padding: 16px; position: fixed"></app-filter>
    </material-dialog>
  </modal>
  <dart-commit
      *ngFor="let changeGroup of changeGroups.values"
      [changeGroup]="changeGroup"
      [filter]="filterService.filter"></dart-commit>
  <div style="text-align: center">
    <span *ngIf="fetchDate != null">
      Fetched results back to {{formattedFetchDate}}<br></span>
    <span *ngIf="infiniteScrollEnabled" #infiniteScroll>
      fetching results ...</span>
    <material-button raised *ngIf="!infiniteScrollEnabled" (trigger)="fetchData()">
      Fetch more results</material-button>
  </div>
</material-content>