Fixed a few styling issues on smaller displays

This commit is contained in:
Simon Grimme
2022-08-15 23:12:58 +02:00
parent b9bd257c1d
commit af74ee83d3
4 changed files with 41 additions and 42 deletions
@@ -1,31 +1,33 @@
<div *ngIf="loggedIn && (this.unmappedFiles.length > 0 || this.mappedGames.length > 0)" fxFlexFill fxLayoutAlign="center start">
<mat-tab-group>
<mat-tab label="Game mappings">
<mapped-games-table [mappedGames]="mappedGames"></mapped-games-table>
</mat-tab>
<mat-tab label="Unmapped files">
<unmapped-files-table [unmappedFiles]="unmappedFiles"></unmapped-files-table>
</mat-tab>
</mat-tab-group>
</div>
<div *ngIf="!loggedIn" fxFlex fxLayout="column" fxLayoutAlign="center center" style="height: calc(100vh - 64px)">
<div fxLayout="column" fxLayoutAlign="center center">
<mat-icon fontSet="material-icons-outlined" color="primary" style="font-size: 128px; height: 128px; width: 128px;">
lock
</mat-icon>
<h1>Please log in to manage your game library</h1>
</div>
</div>
<div *ngIf="loggedIn && this.unmappedFiles.length === 0 && this.mappedGames.length === 0" fxFlex fxLayout="column" fxLayoutAlign="center center" style="height: calc(100vh - 64px)">
<div class="library-management-hint" fxLayout="column" fxLayoutAlign="start end">
<mat-icon fontSet="material-icons-outlined">north_east</mat-icon>
<p>Use the library management to scan your file system for games</p>
<div fxFlexFill>
<div *ngIf="loggedIn && (this.unmappedFiles.length > 0 || this.mappedGames.length > 0)" fxFlex fxLayoutAlign="center start">
<mat-tab-group>
<mat-tab label="Game mappings">
<mapped-games-table [mappedGames]="mappedGames"></mapped-games-table>
</mat-tab>
<mat-tab label="Unmapped files">
<unmapped-files-table [unmappedFiles]="unmappedFiles"></unmapped-files-table>
</mat-tab>
</mat-tab-group>
</div>
<div fxLayout="column" fxLayoutAlign="center center">
<mat-icon fontSet="material-icons-outlined" color="primary" style="font-size: 128px; height: 128px; width: 128px;">videogame_asset_off</mat-icon>
<h1>Your game library is empty!</h1>
<div *ngIf="!loggedIn" fxFlex fxLayout="column" fxLayoutAlign="center center">
<div fxLayout="column" fxLayoutAlign="center center">
<mat-icon fontSet="material-icons-outlined" color="primary" style="font-size: 128px; height: 128px; width: 128px;">
lock
</mat-icon>
<h1>Please log in to manage your game library</h1>
</div>
</div>
<div *ngIf="loggedIn && this.unmappedFiles.length === 0 && this.mappedGames.length === 0" fxFlex fxLayout="column" fxLayoutAlign="center center">
<div class="library-management-hint" fxLayout="column" fxLayoutAlign="start end">
<mat-icon fontSet="material-icons-outlined">north_east</mat-icon>
<p>Use the library management to scan your file system for games</p>
</div>
<div fxLayout="column" fxLayoutAlign="center center">
<mat-icon fontSet="material-icons-outlined" color="primary" style="font-size: 128px; height: 128px; width: 128px;">videogame_asset_off</mat-icon>
<h1>Your game library is empty!</h1>
</div>
</div>
</div>