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
@@ -4,23 +4,21 @@
<h2>Loading library...</h2>
</div>
<div *ngIf="!this.loading && this.gameLibraryIsEmpty" fxFlex fxLayout="column" fxLayoutAlign="center center"
style="height: calc(100vh - 64px)">
<div *ngIf="!this.loading && this.gameLibraryIsEmpty" 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 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 class="content" fxLayout="row" fxLayout.lt-lg="column" fxFlexFill="100"
*ngIf="!this.loading && !this.gameLibraryIsEmpty">
<div class="content" fxLayout="row" fxLayout.lt-lg="column" fxFlexFill="100" *ngIf="!this.loading && !this.gameLibraryIsEmpty">
<div fxFlex="10" fxHide fxShow.gt-md><!--SPACER--></div>
<div fxFlex.gt-md="0 1 15" fxLayout="column" fxLayoutGap="16px" fxLayoutAlign.lt-lg="start center"