From af74ee83d33ef6b5b5822e4ed6734213a58e5051 Mon Sep 17 00:00:00 2001
From: Simon Grimme <9295182+grimsi@users.noreply.github.com>
Date: Mon, 15 Aug 2022 23:12:58 +0200
Subject: [PATCH] Fixed a few styling issues on smaller displays

---
 .../library-management.component.html         | 56 ++++++++++---------
 .../library-overview.component.html           | 10 ++--
 .../mapped-games-table.component.scss         | 10 ++--
 .../unmapped-files-table.component.scss       |  7 ++-
 4 files changed, 41 insertions(+), 42 deletions(-)

diff --git a/frontend/src/app/components/library-management/library-management.component.html b/frontend/src/app/components/library-management/library-management.component.html
index 56de44a..6f20987 100644
--- a/frontend/src/app/components/library-management/library-management.component.html
+++ b/frontend/src/app/components/library-management/library-management.component.html
@@ -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>
diff --git a/frontend/src/app/components/library-overview/library-overview.component.html b/frontend/src/app/components/library-overview/library-overview.component.html
index d741353..0fd6599 100644
--- a/frontend/src/app/components/library-overview/library-overview.component.html
+++ b/frontend/src/app/components/library-overview/library-overview.component.html
@@ -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"
diff --git a/frontend/src/app/components/mapped-games-table/mapped-games-table.component.scss b/frontend/src/app/components/mapped-games-table/mapped-games-table.component.scss
index 1c98660..88a79ab 100644
--- a/frontend/src/app/components/mapped-games-table/mapped-games-table.component.scss
+++ b/frontend/src/app/components/mapped-games-table/mapped-games-table.component.scss
@@ -1,10 +1,8 @@
 table {
-  min-width: 50vw;
+  width: 50vw;
+  min-width: 750px;
 }
 
-.mat-column-path {
-  width: 50%;
-}
-.mat-column-game {
-  width: 35%;
+.mat-column-actions {
+  width: 20%;
 }
diff --git a/frontend/src/app/components/unmapped-files-table/unmapped-files-table.component.scss b/frontend/src/app/components/unmapped-files-table/unmapped-files-table.component.scss
index a21bb6b..638c24b 100644
--- a/frontend/src/app/components/unmapped-files-table/unmapped-files-table.component.scss
+++ b/frontend/src/app/components/unmapped-files-table/unmapped-files-table.component.scss
@@ -1,8 +1,9 @@
 table {
-  min-width: 50vw;
+  width: 50vw;
+  min-width: 750px;
 }
 
-.mat-column-path {
-  width: 85%;
+.mat-column-actions {
+  width: 20%;
 }