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 70" fxLayoutGap="16px" fxFlex.lt-xl="95">
    <div fxLayout="row" fxLayout.lt-lg="column" fxLayoutGap="16px">

      <div fxLayoutAlign.lt-lg="center">
        <img style="max-width: 264px;" src="v1/images/{{game.coverId}}" alt="Game cover">
      </div>

      <div fxFlex="40" fxLayout="column" id="game-details">
        <h1>{{game.title}}</h1>
        <h3>Rating: {{game.totalRating}}/100</h3>
        <h3>Release: {{game.releaseDate | date: 'longDate'}}</h3>
        <p id="game-summary">{{game.summary}}</p>
      </div>

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

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

        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
          <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>
    </div>

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

      <div *ngIf="game.screenshotIds !== undefined && game.screenshotIds.length > 0">
        <h2>Screenshots</h2>
        <div fxLayout="row wrap" fxLayoutGap="8px grid">
          <game-screenshot *ngFor="let screenshotId of game.screenshotIds" [screenshotId]="screenshotId" style="margin-bottom: -6px"></game-screenshot>
        </div>
      </div>

      <div *ngIf="game.videoIds !== undefined && game.videoIds.length > 0">
        <h2>Videos</h2>
        <div fxLayout="row wrap" fxLayoutGap="8px grid">
          <game-video *ngFor="let videoId of game.videoIds" [videoId]="videoId" [width]="555" [height]="312"></game-video>
        </div>
      </div>

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