Brendon/gameyfin
1
0
Fork 0
mirror of https://github.com/BrenBroZAYT/gameyfin.git synced 2026-06-17 00:30:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Made Screenshot and Video grid responsive in game detail view

Browse Source
This commit is contained in:
grimsi
2022-08-19 12:35:32 +02:00
parent 5de215a11a
commit a37a05551c
2 changed files with 60 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/components/game-detail-view/game-detail-view.component.html
+33 -26
View File
@@ -1,29 +1,33 @@
<div fxLayout="row" fxLayoutAlign="center" style="margin-top: 16px;" <div fxLayout="row" fxLayoutAlign="center" style="margin-top: 16px;"
*ngIf="this.game !== null && this.game !== undefined"> *ngIf="this.game !== null && this.game !== undefined">
<div fxLayout="column" fxFlex="0 1 70" fxLayoutGap="16px" fxFlex.lt-xl="95"> <div fxLayout="column" fxFlex="0 1 75" fxLayoutGap="16px" fxFlex.lt-lg="95">
<div fxLayout="row" fxLayout.lt-lg="column" fxLayoutGap="16px"> <div fxLayout="row" fxLayout.lt-lg="column" fxLayoutGap="16px">
<div fxLayoutAlign.lt-lg="center"> <mat-card fxFlex="60" fxLayout="row" fxLayout.lt-lg="column" fxLayoutGap="16px">
<img style="max-width: 264px;" src="v1/images/{{game.coverId}}" alt="Game cover"> <div fxLayoutAlign="start" fxLayoutAlign.lt-lg="center">
</div> <img src="v1/images/{{game.coverId}}" style="max-height: 352px" alt="Game cover">
</div>
<div fxFlex="40" fxLayout="column" fxLayoutGap="16px"> <div fxLayout="column" fxLayoutGap="8px" fxLayoutAlign="space-between">
<h1>{{game.title}}</h1> <div fxLayoutGap="8px">
<h3>Release: {{game.releaseDate | date: 'longDate'}}</h3> <h1 style="display: inline-block">{{game.title}}</h1>
<h3 style="display: inline-block; font-style: italic">{{game.releaseDate | date: 'yyyy'}}</h3>
<h2>Description</h2> <h2>Description</h2>
<p>{{game.summary}}</p> <p>{{game.summary}}</p>
</div>
<div *ngIf="game.companies !== undefined && game.companies.length > 0"> <div *ngIf="game.companies !== undefined && game.companies.length > 0">
<h2>Developed by</h2> <h2>Developed by</h2>
<div fxLayout="row wrap" fxLayoutGap="16px"> <div fxLayout="row wrap" fxLayoutGap="8px grid">
<div *ngFor="let company of game.companies"> <div *ngFor="let company of game.companies">
<img *ngIf="company.logoId !== undefined && company.logoId.length > 0" style="height: 52px;" <img *ngIf="company.logoId !== undefined && company.logoId.length > 0" style="height: 52px;"
src="v1/images/{{company.logoId}}" alt="{{company.name}}"> src="v1/images/{{company.logoId}}" alt="{{company.name}}">
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </mat-card>
<div fxFlex><!-- Spacer --></div> <div fxFlex><!-- Spacer --></div>
@@ -71,23 +75,26 @@
</div> </div>
</div> </div>
<div fxLayout="column" fxLayoutGap="16px"> <div id="game-media" fxLayout="column" fxLayoutGap="16px">
<div *ngIf="game.screenshotIds !== undefined && game.screenshotIds.length > 0"> <div *ngIf="game.screenshotIds !== undefined && game.screenshotIds.length > 0">
<h2>Screenshots</h2> <h2>Screenshots</h2>
<div fxLayout="row wrap" fxLayoutGap="8px grid"> <mat-grid-list [cols]="gridColumnCount" gutterSize="8px" rowHeight="312px">
<game-screenshot *ngFor="let screenshotId of game.screenshotIds" [screenshotId]="screenshotId" <mat-grid-tile *ngFor="let screenshotId of game.screenshotIds">
style="margin-bottom: -6px"></game-screenshot> <game-screenshot [screenshotId]="screenshotId"></game-screenshot>
</div> </mat-grid-tile>
</mat-grid-list>
</div> </div>
<div *ngIf="game.videoIds !== undefined && game.videoIds.length > 0"> <div *ngIf="game.screenshotIds !== undefined && game.screenshotIds.length > 0">
<h2>Videos</h2> <h2>Videos</h2>
<div fxLayout="row wrap" fxLayoutGap="8px grid"> <mat-grid-list [cols]="gridColumnCount" gutterSize="8px" rowHeight="312px">
<game-video *ngFor="let videoId of game.videoIds" [videoId]="videoId" [width]="555" <mat-grid-tile *ngFor="let videoId of game.videoIds" style="width: 555px; height: 312px;">
[height]="312"></game-video> <game-video [videoId]="videoId" [width]="555" [height]="312"></game-video>
</div> </mat-grid-tile>
</mat-grid-list>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
frontend/src/app/components/game-detail-view/game-detail-view.component.ts
+27 -5
View File
@@ -1,7 +1,8 @@
import {Component} from '@angular/core'; import {Component, HostListener} from '@angular/core';
import {ActivatedRoute, Params, Router} from "@angular/router"; import {ActivatedRoute, Params, Router} from "@angular/router";
import {DetectedGameDto} from "../../models/dtos/DetectedGameDto"; import {DetectedGameDto} from "../../models/dtos/DetectedGameDto";
import {GamesService} from "../../services/games.service"; import {GamesService} from "../../services/games.service";
import {MediaObserver} from "@angular/flex-layout";
@Component({ @Component({
selector: 'app-game-detail-view', selector: 'app-game-detail-view',
@@ -12,9 +13,12 @@ export class GameDetailViewComponent {
game!: DetectedGameDto; game!: DetectedGameDto;
gridColumnCount: number;
constructor(private route: ActivatedRoute, constructor(private route: ActivatedRoute,
private router: Router, private router: Router,
private gamesService: GamesService) { private gamesService: GamesService,
private mediaObserver: MediaObserver) {
this.gamesService.getGame(this.route.snapshot.params['slug']).subscribe({ this.gamesService.getGame(this.route.snapshot.params['slug']).subscribe({
next: game => this.game = game, next: game => this.game = game,
error: error => { error: error => {
@@ -25,6 +29,13 @@ export class GameDetailViewComponent {
} }
} }
}); });
this.gridColumnCount = this.calculateColumnCount();
}
@HostListener('window:resize', ['$event'])
onResize() {
this.gridColumnCount = this.calculateColumnCount();
} }
public downloadGame(): void { public downloadGame(): void {
@@ -58,10 +69,21 @@ export class GameDetailViewComponent {
} }
mapRatingToColor(rating: number): string { mapRatingToColor(rating: number): string {
if(rating >= 75) return '#388e3c'; if (rating >= 75) return '#388e3c';
if(rating >= 50) return '#fbc02d'; if (rating >= 50) return '#fbc02d';
if(rating >= 25) return '#f57c00'; if (rating >= 25) return '#f57c00';
return '#d32f2f'; return '#d32f2f';
} }
private calculateColumnCount(): number {
const elementWidth: number = 555;
const containerWidth: number | undefined = document.getElementById('game-media')?.offsetWidth;
const defaultColumnCount = 3;
if (containerWidth === undefined) return defaultColumnCount
if (containerWidth < elementWidth) return 1;
return Math.floor(containerWidth / elementWidth);
}
} }