From 36f49efd8e2a73084635944da0bd4dd5b01b7c07 Mon Sep 17 00:00:00 2001
From: rubikscraft <contact@rubikscraft.nl>
Date: Sat, 16 Apr 2022 18:11:28 +0200
Subject: [PATCH] fix visual bugs on responsive screens

---
 frontend/src/app/app.component.ts             | 14 ++++++-------
 .../components/footer/footer.component.scss   |  2 ++
 .../picsur-img/picsur-img.component.html      |  2 +-
 .../roles/settings-roles.component.html       |  3 ++-
 .../roles/settings-roles.component.ts         |  4 ++--
 .../users/settings-users.component.html       |  1 +
 .../users/settings-users.component.ts         |  2 +-
 .../src/app/routes/view/view.component.html   |  4 ++--
 .../src/app/routes/view/view.component.scss   |  2 +-
 frontend/src/app/util/util.service.ts         | 21 +++++++++++++++++--
 frontend/src/scss/fixes.scss                  |  4 ++++
 frontend/src/scss/personal.scss               |  1 +
 12 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 695fb9b..cb208a6 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -1,4 +1,3 @@
-import { BreakpointObserver } from '@angular/cdk/layout';
 import { Portal } from '@angular/cdk/portal';
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
@@ -11,6 +10,7 @@ import {
 import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
 import { RouteTransitionAnimations } from './app.animation';
 import { PRouteData } from './models/dto/picsur-routes.dto';
+import { UtilService } from './util/util.service';
 let b = 0;
 @Component({
   selector: 'app-root',
@@ -32,7 +32,7 @@ export class AppComponent implements OnInit {
   public constructor(
     private router: Router,
     private activatedRoute: ActivatedRoute,
-    private breakPointObserver: BreakpointObserver
+    private utilService: UtilService
   ) {}
 
   public getRouteAnimData() {
@@ -57,12 +57,10 @@ export class AppComponent implements OnInit {
 
   @AutoUnsubscribe()
   private subscribeMobile() {
-    return this.breakPointObserver
-      .observe(['(min-width: 576px)']) // Bootstrap breakpoints
-      .subscribe((state) => {
-        this.isDesktop = state.matches;
-        this.updateSidebar();
-      });
+    return this.utilService.isDesktop().subscribe((state) => {
+      this.isDesktop = state;
+      this.updateSidebar();
+    });
   }
 
   private async onNavigationError(event: NavigationError) {
diff --git a/frontend/src/app/components/footer/footer.component.scss b/frontend/src/app/components/footer/footer.component.scss
index 2416d2b..73fb6bf 100644
--- a/frontend/src/app/components/footer/footer.component.scss
+++ b/frontend/src/app/components/footer/footer.component.scss
@@ -15,4 +15,6 @@ span.line {
 .heart {
   font-size: 22px;
   transform: translate(0, 25%);
+
+  z-index: 0;
 }
diff --git a/frontend/src/app/components/picsur-img/picsur-img.component.html b/frontend/src/app/components/picsur-img/picsur-img.component.html
index e543e2f..5fe73ce 100644
--- a/frontend/src/app/components/picsur-img/picsur-img.component.html
+++ b/frontend/src/app/components/picsur-img/picsur-img.component.html
@@ -1,6 +1,6 @@
 <canvas
   *ngIf="state === 'canvas' || state === 'loading'"
-  [style.display]="state === 'loading' ? 'none' : 'unset'"
+  [style.display]="state === 'loading' ? 'none' : 'block'"
   height="0"
   width="0"
   #targetcanvas
diff --git a/frontend/src/app/routes/settings/roles/settings-roles.component.html b/frontend/src/app/routes/settings/roles/settings-roles.component.html
index 47ebf89..ddc3b71 100644
--- a/frontend/src/app/routes/settings/roles/settings-roles.component.html
+++ b/frontend/src/app/routes/settings/roles/settings-roles.component.html
@@ -73,7 +73,8 @@
   color="accent"
   [pageSizeOptions]="pageSizeOptions"
   [pageSize]="startingPageSize"
-  showFirstLastButtons
+  [showFirstLastButtons]="utilService.isDesktop() | async"
+  [hidePageSize]="utilService.isMobile() | async"
   aria-label="Select page of roles"
 >
 </mat-paginator>
diff --git a/frontend/src/app/routes/settings/roles/settings-roles.component.ts b/frontend/src/app/routes/settings/roles/settings-roles.component.ts
index d2c0b64..727326b 100644
--- a/frontend/src/app/routes/settings/roles/settings-roles.component.ts
+++ b/frontend/src/app/routes/settings/roles/settings-roles.component.ts
@@ -36,10 +36,10 @@ export class SettingsRolesComponent implements OnInit, AfterViewInit {
   @ViewChild(MatPaginator) paginator: MatPaginator;
 
   constructor(
+    public utilService: UtilService,
     private rolesService: RolesService,
-    private utilService: UtilService,
     private staticInfo: StaticInfoService,
-    private router: Router
+    private router: Router,
   ) {}
 
   ngOnInit(): void {
diff --git a/frontend/src/app/routes/settings/users/settings-users.component.html b/frontend/src/app/routes/settings/users/settings-users.component.html
index caa4713..bc2f6ab 100644
--- a/frontend/src/app/routes/settings/users/settings-users.component.html
+++ b/frontend/src/app/routes/settings/users/settings-users.component.html
@@ -64,6 +64,7 @@
   color="accent"
   [pageSizeOptions]="pageSizeOptions"
   [pageSize]="startingPageSize"
+  [hidePageSize]="utilService.isMobile() | async"
   length="Infinity"
   aria-label="Select page of users"
   (page)="updateSubject.next($event)"
diff --git a/frontend/src/app/routes/settings/users/settings-users.component.ts b/frontend/src/app/routes/settings/users/settings-users.component.ts
index 0c6a088..c0d1dcd 100644
--- a/frontend/src/app/routes/settings/users/settings-users.component.ts
+++ b/frontend/src/app/routes/settings/users/settings-users.component.ts
@@ -32,8 +32,8 @@ export class SettingsUsersComponent implements OnInit {
   @ViewChild(MatPaginator) paginator: MatPaginator;
 
   constructor(
+    public utilService: UtilService,
     private userManageService: UserManageService,
-    private utilService: UtilService,
     private staticInfo: StaticInfoService,
     private router: Router
   ) {}
diff --git a/frontend/src/app/routes/view/view.component.html b/frontend/src/app/routes/view/view.component.html
index e0469c8..549a4b4 100644
--- a/frontend/src/app/routes/view/view.component.html
+++ b/frontend/src/app/routes/view/view.component.html
@@ -30,7 +30,7 @@
       <div class="col-12">
         <button
           mat-raised-button
-          class="mx-1"
+          class="m-1"
           color="accent"
           (click)="downloadImage()"
         >
@@ -39,7 +39,7 @@
 
         <button
           mat-raised-button
-          class="mx-1"
+          class="m-1"
           color="primary"
           (click)="goBackHome()"
         >
diff --git a/frontend/src/app/routes/view/view.component.scss b/frontend/src/app/routes/view/view.component.scss
index 534b201..bd1ff2e 100644
--- a/frontend/src/app/routes/view/view.component.scss
+++ b/frontend/src/app/routes/view/view.component.scss
@@ -4,5 +4,5 @@
 }
 
 .content-border {
-  padding: 1rem;
+  padding-block: 1rem;
 }
diff --git a/frontend/src/app/util/util.service.ts b/frontend/src/app/util/util.service.ts
index 21acaac..48e0e44 100644
--- a/frontend/src/app/util/util.service.ts
+++ b/frontend/src/app/util/util.service.ts
@@ -1,7 +1,9 @@
+import { BreakpointObserver } from '@angular/cdk/layout';
 import { Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
+import { map, Observable } from 'rxjs';
 import { SnackBarType } from '../models/dto/snack-bar-type.dto';
 import {
   ConfirmDialogComponent,
@@ -12,17 +14,32 @@ import {
   providedIn: 'root',
 })
 export class UtilService {
+  private isDesktopObservable: Observable<boolean>;
+
   constructor(
     private snackBar: MatSnackBar,
     private dialog: MatDialog,
-    private router: Router
-  ) {}
+    private router: Router,
+    private breakPointObserver: BreakpointObserver
+  ) {
+    this.isDesktopObservable = this.breakPointObserver
+      .observe(['(min-width: 576px)']) // Bootstrap breakpoints
+      .pipe(map((result) => result.matches));
+  }
 
   public quitError(message: string) {
     this.showSnackBar(message, SnackBarType.Error);
     this.router.navigate(['/']);
   }
 
+  public isDesktop(): Observable<boolean> {
+    return this.isDesktopObservable;
+  }
+
+  public isMobile(): Observable<boolean> {
+    return this.isDesktopObservable.pipe(map((isDesktop) => !isDesktop));
+  }
+
   public showSnackBar(
     message: string,
     type: SnackBarType = SnackBarType.Default,
diff --git a/frontend/src/scss/fixes.scss b/frontend/src/scss/fixes.scss
index 194aaba..f6e399a 100644
--- a/frontend/src/scss/fixes.scss
+++ b/frontend/src/scss/fixes.scss
@@ -43,3 +43,7 @@ router-outlet ~ * {
   height: initial !important;
   width: initial !important;
 }
+
+.row {
+  width: 100%;
+}
diff --git a/frontend/src/scss/personal.scss b/frontend/src/scss/personal.scss
index a20ae2c..4652ff6 100644
--- a/frontend/src/scss/personal.scss
+++ b/frontend/src/scss/personal.scss
@@ -54,6 +54,7 @@
   & > .fabbutton {
     position: fixed;
     bottom: 1.5rem;
+    z-index: 8;
 
     @include media-breakpoint-up(xl) {
       bottom: 4rem;