danielkuhlwein

<mat-paginator
    [length]="101"
    [pageSize]="50"
    [pageSizeOptions]="[5, 10, 25, 50, 100]"
    showFirstLastButtons="true">
</mat-paginator>

danielkuhlwein

<mat-card id="content-header" class="m-1d p-1d bl-3-green shadow">

  <!-- Row 1 -->
  <div class="content-header-row my-auto d-inline-flex flex-wrap">
    <span class="d-flex m-1d">
      <span class="font-medium-14 mr-3">Title:</span>
      <span class="font-regular-14 ss-green">An Interesting Title About DNA</span>
    </span>
  </div>

danielkuhlwein

<ss-layer-2 gobackURL="/admin/audit-standards">

  <ss-title-bar-short [gobackURL]="'admin/audit-standards'" [layer]="2">

    ...

  </ss-title-bar-short>

  <mat-progress-bar *ngIf="loading || saveLoading" mode="indeterminate"></mat-progress-bar>

danielkuhlwein

.scroll-area {
  overflow: auto;
  max-height: 100%;
}

danielkuhlwein

<mat-card class="table-card shadow">

  <mat-table #table matSort [dataSource]="dataSource">

    <!-- ID Column -->
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
      <mat-cell *matCellDef="let element">
        <div> {{element.id}} </div>
      </mat-cell>

danielkuhlwein

...

@Component({
    ...
    animations: [
        trigger('detailExpand', [
            state('collapsed', style({ height: '0px', borderBottomWidth: '0px', minHeight: '0', visibility: 'hidden', opacity: 0 })),
            state('expanded', style({ height: '*', visibility: 'visible', opacity: 1 })),
            transition('expanded <=> collapsed', animate('55ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
            transition('collapsed <=> expanded', animate('325ms cubic-bezier(0.4, 0.0, 0.2, 1)')),

danielkuhlwein

<div class="search-container table-compressed-search">
  <mat-form-field *ngIf="state === 'open'" class="search-input">
    <input #search matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
  </mat-form-field>
  <button mat-icon-button color="primary" *ngIf="state === 'closed'" class="search-icon-closed" (click)="toggleState()">
    <mat-icon>search</mat-icon>
  </button>
  <button mat-icon-button *ngIf="state === 'open'" (click)="toggleState()" class="search-icon-open">
    <mat-icon>close</mat-icon>
  </button>

danielkuhlwein

<!-- Action Column -->
<ng-container matColumnDef="action" class="mat-column-action">
  <mat-header-cell *matHeaderCellDef></mat-header-cell>
  <mat-cell *matCellDef="let element" class="d-sm-flex">
    <mat-menu #buttonDropdown="matMenu">
      <button mat-menu-item>
        <mat-icon>file_download</mat-icon>Download Handouts</button>
    </mat-menu>
    <!-- Put the if expression on this button: -->
    <button mat-icon-button [matMenuTriggerFor]="buttonDropdown" *ngIf="expression">

danielkuhlwein

<mat-icon svgIcon="my_account"></mat-icon>

danielkuhlwein

<mat-icon svgIcon="crop"></mat-icon>