gameyfin/frontend/src/app/components/game-detail-view/game-detail-view.component.html

<div fxLayout="row" fxLayoutAlign="center" style="margin-top: 16px;"
     *ngIf="this.game !== null && this.game !== undefined">
  <div fxLayout="column" fxFlex="0 1 75" fxLayoutGap="16px" fxFlex.lt-lg="95">
    <div fxLayout="row" fxLayout.lt-lg="column" fxLayoutGap="16px">

      <mat-card fxFlex="100" fxLayout="row" fxLayout.lt-lg="column" fxLayoutGap="16px">
        <div fxLayoutAlign="start" fxLayoutAlign.lt-lg="center">
          <img src="v1/images/{{game.coverId}}" style="max-height: 352px" alt="Game cover">
        </div>

        <div fxLayout="column" fxLayoutGap="8px" fxLayoutAlign="space-between">
          <div fxLayoutGap="8px">
            <h1 style="display: inline-block">{{game.title}}</h1>
            <h3 style="display: inline-block; font-style: italic">{{game.releaseDate | date: 'yyyy'}}</h3>

            <h2>Description</h2>
            <p>{{game.summary}}</p>
          </div>

          <div *ngIf="companiesWithLogo.length > 0">
            <h2>Developed by</h2>
            <div fxLayout="row wrap" fxLayoutGap="8px grid">
              <div *ngFor="let company of companiesWithLogo" class="company-logos">
                <img src="v1/images/{{company.logoId}}" alt="{{company.name}}" [matTooltip]="company.name">
              </div>
            </div>
          </div>
        </div>
      </mat-card>

      <div fxFlex><!-- Spacer --></div>

      <div fxLayout="column" fxFlex="40" fxLayoutGap="16px">

        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
          <button mat-raised-button color="secondary" (click)="refreshGame()" title="Refresh metadata">
            <mat-icon>refresh</mat-icon>
          </button>
          <button mat-raised-button color="primary" (click)="downloadGame()">
            <mat-icon>download</mat-icon>
          </button>
          <b style="font-size: 24px">Download ({{bytesAsHumanReadableString(game.diskSize)}})</b>
        </div>

        <div fxLayout="column" fxLayoutGap="24px">
          <div *ngIf="game.genres !== undefined && game.genres.length > 0">
            <h2>Genres</h2>
            <mat-chip-list>
              <mat-chip *ngFor="let genre of game.genres"
                        (click)="goToLibraryWithFilter('genres', genre.slug)">{{genre.name}}</mat-chip>
            </mat-chip-list>
          </div>

          <div *ngIf="game.themes !== undefined && game.themes.length > 0">
            <h2>Themes</h2>
            <mat-chip-list>
              <mat-chip *ngFor="let theme of game.themes"
                        (click)="goToLibraryWithFilter('themes', theme.slug)">{{theme.name}}</mat-chip>
            </mat-chip-list>
          </div>
        </div>

        <div fxFlex fxLayout="row" fxLayoutGap="16px">
          <div fxFlex="40" *ngIf="game.criticsRating !== undefined && game.criticsRating > 0">
            <h2>Critics Rating <span style="font-weight: normal; font-size: medium">({{game.criticsRating}}/100)</span>
            </h2>
            <mat-progress-bar mode="determinate" [value]="game.criticsRating"
                              [progressBarColor]="mapRatingToColor(game.criticsRating)"></mat-progress-bar>
          </div>

          <div fxFlex="40" *ngIf="game.userRating !== undefined && game.userRating > 0">
            <h2>User Rating <span style="font-weight: normal; font-size: medium">({{game.userRating}}/100)</span></h2>
            <mat-progress-bar mode="determinate" [value]="game.userRating"
                              [progressBarColor]="mapRatingToColor(game.userRating)"></mat-progress-bar>
          </div>
        </div>
      </div>
    </div>

    <div id="game-media" fxLayout="column" fxLayoutGap="16px">

      <div *ngIf="game.screenshotIds !== undefined && game.screenshotIds.length > 0">
        <h2>Screenshots</h2>
        <mat-grid-list [cols]="gridColumnCount" gutterSize="8px" rowHeight="312px">
          <mat-grid-tile *ngFor="let screenshotId of game.screenshotIds">
            <game-screenshot [screenshotId]="screenshotId"></game-screenshot>
          </mat-grid-tile>
        </mat-grid-list>
      </div>

      <div *ngIf="game.videoIds !== undefined && game.videoIds.length > 0">
        <h2>Videos</h2>
        <mat-grid-list [cols]="gridColumnCount" gutterSize="8px" rowHeight="312px">
          <mat-grid-tile *ngFor="let videoId of game.videoIds" style="width: 555px; height: 312px;">
            <game-video [videoId]="videoId" [width]="555" [height]="312"></game-video>
          </mat-grid-tile>
        </mat-grid-list>
      </div>

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