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

Fixed a few styling issues on smaller displays

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/components/library-management/library-management.component.html
+29 -27
View File
@@ -1,31 +1,33 @@
<div *ngIf="loggedIn && (this.unmappedFiles.length > 0 || this.mappedGames.length > 0)" fxFlexFill fxLayoutAlign="center start"> <div fxFlexFill>
<mat-tab-group> <div *ngIf="loggedIn && (this.unmappedFiles.length > 0 || this.mappedGames.length > 0)" fxFlex fxLayoutAlign="center start">
<mat-tab label="Game mappings"> <mat-tab-group>
<mapped-games-table [mappedGames]="mappedGames"></mapped-games-table> <mat-tab label="Game mappings">
</mat-tab> <mapped-games-table [mappedGames]="mappedGames"></mapped-games-table>
<mat-tab label="Unmapped files"> </mat-tab>
<unmapped-files-table [unmappedFiles]="unmappedFiles"></unmapped-files-table> <mat-tab label="Unmapped files">
</mat-tab> <unmapped-files-table [unmappedFiles]="unmappedFiles"></unmapped-files-table>
</mat-tab-group> </mat-tab>
</div> </mat-tab-group>
<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> </div>
<div fxLayout="column" fxLayoutAlign="center center"> <div *ngIf="!loggedIn" fxFlex 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> <div fxLayout="column" fxLayoutAlign="center center">
<h1>Your game library is empty!</h1> <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>
</div> </div>
frontend/src/app/components/library-overview/library-overview.component.html
+4 -6
View File
@@ -4,23 +4,21 @@
<h2>Loading library...</h2> <h2>Loading library...</h2>
</div> </div>
<div *ngIf="!this.loading && this.gameLibraryIsEmpty" fxFlex fxLayout="column" fxLayoutAlign="center center" <div *ngIf="!this.loading && this.gameLibraryIsEmpty" fxFlex fxLayout="column" fxLayoutAlign="center center">
style="height: calc(100vh - 64px)">
<div class="library-management-hint" fxLayout="column" fxLayoutAlign="start end"> <div class="library-management-hint" fxLayout="column" fxLayoutAlign="start end">
<mat-icon fontSet="material-icons-outlined">north_east</mat-icon> <mat-icon fontSet="material-icons-outlined">north_east</mat-icon>
<p>Use the library management to scan your file system for games</p> <p>Use the library management to scan your file system for games</p>
</div> </div>
<div fxLayout="column" fxLayoutAlign="center center"> <div fxLayout="column" fxLayoutAlign="center center">
<mat-icon fontSet="material-icons-outlined" color="primary" <mat-icon fontSet="material-icons-outlined" color="primary" style="font-size: 128px; height: 128px; width: 128px;">
style="font-size: 128px; height: 128px; width: 128px;">videogame_asset_off videogame_asset_off
</mat-icon> </mat-icon>
<h1>Your game library is empty!</h1> <h1>Your game library is empty!</h1>
</div> </div>
</div> </div>
<div class="content" fxLayout="row" fxLayout.lt-lg="column" fxFlexFill="100" <div class="content" fxLayout="row" fxLayout.lt-lg="column" fxFlexFill="100" *ngIf="!this.loading && !this.gameLibraryIsEmpty">
*ngIf="!this.loading && !this.gameLibraryIsEmpty">
<div fxFlex="10" fxHide fxShow.gt-md><!--SPACER--></div> <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" <div fxFlex.gt-md="0 1 15" fxLayout="column" fxLayoutGap="16px" fxLayoutAlign.lt-lg="start center"
frontend/src/app/components/mapped-games-table/mapped-games-table.component.scss
+4 -6
View File
@@ -1,10 +1,8 @@
table { table {
min-width: 50vw; width: 50vw;
min-width: 750px;
} }
.mat-column-path { .mat-column-actions {
width: 50%; width: 20%;
}
.mat-column-game {
width: 35%;
} }
frontend/src/app/components/unmapped-files-table/unmapped-files-table.component.scss
+4 -3
View File
@@ -1,8 +1,9 @@
table { table {
min-width: 50vw; width: 50vw;
min-width: 750px;
} }
.mat-column-path { .mat-column-actions {
width: 85%; width: 20%;
} }