self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2024-12-23 01:27:14 +02:00
Code Issues Releases Activity

Making filters scrollable on small screen #587 #44 #27 #615 #427

Browse Source
This commit is contained in:
Patrik J. Braun 2023-03-04 00:49:20 +01:00
parent 625a6cdcee
commit 45e3a8fd52
3 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/frontend/app/ui/gallery/navigator/navigator.gallery.component.css
View File

@ -40,3 +40,8 @@ nav {
.search-type { .search-type {
margin-left: 5px; margin-left: 5px;
} }
app-gallery-filter{
overflow-y: auto;
overscroll-behavior: contain;
}

7
src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html
View File

@ -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"> <nav class="d-md-flex row" aria-label="breadcrumb">
<div class="col-12 col-md-auto"> <div class="col-12 col-md-auto">
<ol *ngIf="isDirectory" id="directory-path" class="mb-0 mt-1 breadcrumb"> <ol *ngIf="isDirectory" id="directory-path" class="mb-0 mt-1 breadcrumb">
@ -77,5 +77,8 @@
</div> </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>

5
src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts
View File

@ -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 {Router, RouterLink} from '@angular/router';
import {DomSanitizer} from '@angular/platform-browser';
import {UserDTOUtils} from '../../../../../common/entities/UserDTO'; import {UserDTOUtils} from '../../../../../common/entities/UserDTO';
import {AuthenticationService} from '../../../model/network/authentication.service'; import {AuthenticationService} from '../../../model/network/authentication.service';
import {QueryService} from '../../../model/query.service'; import {QueryService} from '../../../model/query.service';
@ -35,6 +36,7 @@ export class GalleryNavigatorComponent {
private lastScroll = 0; private lastScroll = 0;
@ViewChild('dropdown', {static: true}) dropdown: BsDropdownDirective; @ViewChild('dropdown', {static: true}) dropdown: BsDropdownDirective;
@ViewChild('navigator', { read: ElementRef }) navigatorElement: ElementRef<HTMLInputElement>;
constructor( constructor(
public authService: AuthenticationService, public authService: AuthenticationService,
@ -42,6 +44,7 @@ export class GalleryNavigatorComponent {
public galleryService: ContentService, public galleryService: ContentService,
public sortingService: GallerySortingService, public sortingService: GallerySortingService,
private router: Router, private router: Router,
public sanitizer: DomSanitizer
) { ) {
this.sortingMethodsType = Utils.enumToArray(SortingMethods); this.sortingMethodsType = Utils.enumToArray(SortingMethods);
this.RootFolderName = $localize`Home`; this.RootFolderName = $localize`Home`;