From 45e3a8fd5251e994100a50b3b2dc51040f33c62c Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Sat, 4 Mar 2023 00:49:20 +0100
Subject: [PATCH] Making filters scrollable on small screen #587 #44 #27 #615
 #427

---
 .../ui/gallery/navigator/navigator.gallery.component.css   | 5 +++++
 .../ui/gallery/navigator/navigator.gallery.component.html  | 7 +++++--
 .../ui/gallery/navigator/navigator.gallery.component.ts    | 5 ++++-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.css b/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.css
index cb0648b5..8d79a07a 100644
--- a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.css
+++ b/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.css
@@ -40,3 +40,8 @@ nav {
 .search-type {
   margin-left: 5px;
 }
+
+app-gallery-filter{
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
diff --git a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html b/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html
index 54068665..e63adef5 100644
--- a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html
+++ b/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html
@@ -1,4 +1,4 @@
-<div class="container-fluid mb-2 pt-1 pb-1 pe-0 ps-0">
+<div #navigator class="container-fluid pt-1 pb-1 pe-0 ps-0">
   <nav class="d-md-flex row" aria-label="breadcrumb">
     <div class="col-12 col-md-auto">
       <ol *ngIf="isDirectory" id="directory-path" class="mb-0 mt-1 breadcrumb">
@@ -77,5 +77,8 @@
 
 
 </div>
+<app-gallery-filter #filterComponent
+                    *ngIf="showFilters && ItemCount> 0"
+                    [style.height]="sanitizer.bypassSecurityTrustStyle('calc(100vh - '+(navigatorElement?.nativeElement?.getBoundingClientRect().top+navigatorElement?.nativeElement?.getBoundingClientRect().height)+'px)')"
 
-<app-gallery-filter *ngIf="showFilters && ItemCount> 0" class="position-absolute w-100"></app-gallery-filter>
+                    class="position-absolute w-100"></app-gallery-filter>
diff --git a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts b/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts
index f9495822..a75d7f7f 100644
--- a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts
+++ b/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts
@@ -1,5 +1,6 @@
-import {Component, HostListener, ViewChild} from '@angular/core';
+import {Component, ElementRef, HostListener, ViewChild} from '@angular/core';
 import {Router, RouterLink} from '@angular/router';
+import {DomSanitizer} from '@angular/platform-browser';
 import {UserDTOUtils} from '../../../../../common/entities/UserDTO';
 import {AuthenticationService} from '../../../model/network/authentication.service';
 import {QueryService} from '../../../model/query.service';
@@ -35,6 +36,7 @@ export class GalleryNavigatorComponent {
 
   private lastScroll = 0;
   @ViewChild('dropdown', {static: true}) dropdown: BsDropdownDirective;
+  @ViewChild('navigator', { read: ElementRef }) navigatorElement: ElementRef<HTMLInputElement>;
 
   constructor(
     public authService: AuthenticationService,
@@ -42,6 +44,7 @@ export class GalleryNavigatorComponent {
     public galleryService: ContentService,
     public sortingService: GallerySortingService,
     private router: Router,
+    public sanitizer: DomSanitizer
   ) {
     this.sortingMethodsType = Utils.enumToArray(SortingMethods);
     this.RootFolderName = $localize`Home`;