fix visual bugs on responsive screens

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) {

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;
 }

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

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>

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 {

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)"

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
   ) {}

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()"
         >

frontend/src/app/routes/view/view.component.scss

@@ -4,5 +4,5 @@
 }
 
 .content-border {
-  padding: 1rem;
+  padding-block: 1rem;
 }

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,

frontend/src/scss/fixes.scss

@@ -43,3 +43,7 @@ router-outlet ~ * {
   height: initial !important;
   width: initial !important;
 }
+
+.row {
+  width: 100%;
+}

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;