annotate src/app/analysis-item/analysis-item.component.html @ 365:9ba7d304a99d

Add css classes to the container divs for ngIf and ngSwitch to ensure they fill the height of their parents. The template needs tidying up to avoid these unnecessary divs.

<md-card>
  <md-card-header>
    <md-card-title>{{item.title}}</md-card-title>
    <md-card-subtitle>{{item.description}}</md-card-subtitle>
  </md-card-header>
  <md-card-content>
    <ng-template [ngIf]="isLoading()">
      <ugly-progress-bar
        [isDeterminate]="true"
        [progress]="item.progress"
      ></ugly-progress-bar>
    </ng-template>
    <div class="content">
      <ng-template [ngIf]="!isLoading()">
        <ng-template [ngIf]="isActive && isAudioItem()">
          <ugly-live-play-head
            [timeToPixel]="DOES_NOT_BELONG_HERE"
            [colour]="'#c33c54'"
          >
          </ugly-live-play-head>
        </ng-template>
        <ugly-waveform *ngIf="isAudioItem(); else notAudio"
          [timeline]="timeline"
          [trackIdPrefix]=" item.id"
          [width]="contentWidth"
          [audioBuffer]="item.audioData"
          [onSeek]="onSeek"
        ></ugly-waveform>

        <ng-template #notAudio>
          <div class="content"
            *ngIf="getFeatureShape() as shape; else showSpinner">
            <div [ngSwitch]="shape" class="content">
              <ugly-curve
                *ngSwitchCase="'vector'"
                [timeline]="timeline"
                [trackIdPrefix]="item.id"
                [width]="contentWidth"
                [onSeek]="onSeek"
                [feature]="item.collected"
              ></ugly-curve>
              <div *ngSwitchDefault>Feature cannot be visualised.</div>
            </div>
          </div>
          <ng-template #showSpinner>
            <ugly-progress-spinner></ugly-progress-spinner>
          </ng-template>
        </ng-template>

      </ng-template>
    </div>
  </md-card-content>
</md-card>