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

Updated styling of frontend

Browse Source
This commit is contained in:
grimsi
2022-08-04 21:19:57 +02:00
parent f335d770eb
commit 195981d0f7
15 changed files with 119 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/components/error-dialog/error-dialog.component.ts
+6 -1
View File
@@ -11,7 +11,12 @@ import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
<mat-dialog-actions style="justify-content: end">
<button mat-raised-button color="primary" (click)="onClick()">OK</button>
</mat-dialog-actions>
`
`,
styles: [`
mat-dialog-content {
min-width: 250px;
}
`]
})
export class ErrorDialogComponent implements OnInit {
frontend/src/app/components/header/header.component.html
+1 -1
View File
@@ -9,7 +9,7 @@
<mat-icon>youtube_searched_for</mat-icon>
</button>
<button mat-icon-button (click)="goToLibraryManagementScreen()">
<button mat-icon-button (click)="goToLibraryManagementScreen()" *ngIf="!onLibraryManagementScreen()">
<mat-icon>settings</mat-icon>
</button>
</mat-toolbar>
frontend/src/app/components/header/header.component.ts
+1
View File
@@ -21,6 +21,7 @@ export class HeaderComponent {
next: value => this.snackBar.open(`Library scan completed in ${Math.trunc(value.interval / 1000)} seconds.`, undefined, {duration: 2000}),
error: error => this.snackBar.open(`Error while scanning library: ${error.error.message}`, undefined, {duration: 5000})
})
this.snackBar.open('Library scan started in the background. This could take some time.', undefined, {duration: 5000})
}
goToLibraryScreen(): void {
frontend/src/app/components/library-management/library-management.component.html
+8 -2
View File
@@ -1,4 +1,4 @@
<div *ngIf="loggedIn" fxLayoutAlign="center center">
<div *ngIf="loggedIn" fxFlexFill fxLayoutAlign="center center">
<div>
<mat-tab-group>
<mat-tab label="Game mappings">
@@ -67,5 +67,11 @@
</mat-tab>
</mat-tab-group>
</div>
</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>
frontend/src/app/components/library-management/library-management.component.scss
+15
View File
@@ -1,3 +1,18 @@
@use 'sass:map';
@use '@angular/material' as mat;
@import '../../theme/default-theme';
td, th {
padding: 16px !important;
}
table {
min-width: 50vw;
}
mat-tab-group {
$config: mat.get-color-config($custom-theme);
$background: map.get($config, background);
background: mat.get-color-from-palette($background, app-bar);
}
frontend/src/app/components/library-overview/library-overview.component.css
-16
View File
@@ -1,16 +0,0 @@
.fullscreen-overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.15);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.content {
padding: 16px;
}
frontend/src/app/components/library-overview/library-overview.component.html
+10 -2
View File
@@ -4,8 +4,16 @@
<h2>Loading library...</h2>
</div>
<div fxLayout="row" fxLayoutAlign="center center" *ngIf="!this.loading && this.detectedGames.length === 0">
<h2>Your game library is empty!</h2>
<div *ngIf="!this.loading && this.detectedGames.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 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 class="content" fxLayout="row" fxFlexFill="100" *ngIf="!this.loading && this.detectedGames.length > 0">
frontend/src/app/components/library-overview/library-overview.component.scss
+41
View File
@@ -0,0 +1,41 @@
@use 'sass:map';
@use '@angular/material' as mat;
@import '../../theme/default-theme';
.fullscreen-overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.15);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.library-management-hint {
@include mat.elevation(16);
$config: mat.get-color-config($custom-theme);
$background: map.get($config, background);
position: absolute;
right: 56px;
top: 72px;
width: 250px;
border-radius: 6px;
background: mat.get-color-from-palette($background, app-bar);
border-color: mat.get-color-from-palette($background, app-bar);
border-style: solid;
color: white;
p {
padding: 0 12px 12px 16px;
}
}
.content {
padding: 16px;
}
frontend/src/app/components/library-overview/library-overview.component.ts
+1 -1
View File
@@ -5,7 +5,7 @@ import {DetectedGameDto} from "../../models/dtos/DetectedGameDto";
@Component({
selector: 'app-gameserver-list',
templateUrl: './library-overview.component.html',
styleUrls: ['./library-overview.component.css']
styleUrls: ['./library-overview.component.scss']
})
export class LibraryOverviewComponent implements AfterViewInit {
frontend/src/app/services/games.service.spec.ts
+16
View File
@@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';
import { GamesService } from './games.service';
describe('GamesService', () => {
let service: GamesService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(GamesService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
frontend/src/app/services/library.service.spec.ts
+16
View File
@@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';
import { LibraryService } from './library.service';
describe('LibraryService', () => {
let service: LibraryService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(LibraryService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
frontend/src/app/services/library.service.ts
-3
View File
@@ -1,9 +1,6 @@
import {Injectable} from '@angular/core';
import {GamesApi} from "../api/GamesApi";
import {HttpClient, HttpResponse} from "@angular/common/http";
import {Observable} from "rxjs";
import {DetectedGameDto} from "../models/dtos/DetectedGameDto";
import {GameOverviewDto} from "../models/dtos/GameOverviewDto";
import {LibraryApi} from "../api/LibraryApi";
@Injectable({
frontend/src/app/theme/default-theme.scss
-4
View File
@@ -1,8 +1,6 @@
@use '@angular/material' as mat;
@import "@angular/material/theming";
@include mat.core();
$custom-theme-primary: mat.define-palette(mat.$green-palette);
$custom-theme-accent: mat.define-palette(mat.$grey-palette, A200, A100, A400);
$custom-theme-warn: mat.define-palette(mat.$red-palette);
@@ -14,5 +12,3 @@ $custom-theme: mat.define-dark-theme((
warn: $custom-theme-warn
)
));
@include mat.all-component-themes($custom-theme);
frontend/src/index.html
+1 -1
View File
@@ -8,7 +8,7 @@
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet"/>
</head>
<body class="mat-typography">
<app-root></app-root>
frontend/src/styles.scss
+3 -22
View File
@@ -1,37 +1,18 @@
// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
// Plus imports for other components in your app.
// Plus imports for other components in your app.
@import "src/app/theme/default-theme";
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$frontend-primary: mat.define-palette(mat.$indigo-palette);
$frontend-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
// The warn palette is optional (defaults to red).
$frontend-warn: mat.define-palette(mat.$red-palette);
// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$frontend-theme: mat.define-light-theme((
color: (
primary: $frontend-primary,
accent: $frontend-accent,
warn: $frontend-warn,
)
));
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($frontend-theme);
@include mat.all-component-themes($custom-theme);
/* You can add global styles to this file, and also import other style files */