Hide previous/next dir buttons if screen too small

In future these will be removed to the dropdown
simplyboo6 · Nov 29, 2023 · 68ea9fe · 68ea9fe
1 parent dbe4e1a
commit 68ea9fe
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/client/src/app/components/navbar/navbar.component.html b/client/src/app/components/navbar/navbar.component.html
@@ -1,6 +1,6 @@
 <nav class="navbar navbar-expand-xl navbar-dark bg-dark navbar-override fixed-top" [class.height-override]="!isExpanded">
   <div class="container-fluid">
-    <div class="btn-group btn-group-toggle nav-button-group d-none d-md-block" *ngIf="getRoute() === '/viewer'; else emptyNav" title="Toggle Tags">
+    <div class="btn-group btn-group-toggle nav-button-group" *ngIf="getRoute() === '/viewer && showDirButtons'; else emptyNav" title="Toggle Tags">
       <button class="btn btn-primary" (click)="toggleTagsOpen()">
         <fa-icon [icon]="faTags" size="xl"></fa-icon>
       </button>
@@ -13,7 +13,7 @@
     <ng-container *ngIf="getRoute() === '/viewer' || getRoute() === '/metadata' || getRoute() === '/gallery' || getRoute() === '/clone-resolver'">
       <div class="btn-group">
         <button
-          *ngIf="getRoute() === '/viewer' || getRoute() === '/metadata' || getRoute() === '/clone-resolver'"
+          *ngIf="(getRoute() === '/viewer' || getRoute() === '/metadata' || getRoute() === '/clone-resolver') && showDirButtons"
           (click)="previousDirectory()"
           class="btn btn-outline-success"
           type="submit"
@@ -49,7 +49,7 @@
           <fa-icon [icon]="faArrowRight" size="xl"></fa-icon>
         </button>
         <button
-          *ngIf="getRoute() === '/viewer' || getRoute() === '/metadata' || getRoute() === '/clone-resolver'"
+          *ngIf="(getRoute() === '/viewer' || getRoute() === '/metadata' || getRoute() === '/clone-resolver') && showDirButtons"
           class="btn btn-outline-success"
           type="submit"
           title="Next Directory"

diff --git a/client/src/app/components/navbar/navbar.component.ts b/client/src/app/components/navbar/navbar.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { UiService } from 'services/ui.service';
 import { GalleryService, Page } from 'services/gallery.service';
 import { CollectionService } from 'services/collection.service';
@@ -28,6 +29,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
   public searchText?: string;
   public isExpanded = false;
   public page: Page = { current: 0, max: 0 };
+  protected showDirButtons: boolean = false;
   protected readonly faArrowLeft = faArrowLeft;
   protected readonly faArrowRight = faArrowRight;
   protected readonly faTags = faTags;
@@ -43,19 +45,22 @@ export class NavbarComponent implements OnInit, OnDestroy {
   private mediaService: MediaService;
   private galleryService: GalleryService;
   private subscriptions: Subscription[] = [];
+  private breakpointObserver: BreakpointObserver;
 
   public constructor(
     collectionService: CollectionService,
     uiService: UiService,
     route: ActivatedRoute,
     mediaService: MediaService,
     galleryService: GalleryService,
+    breakpointObserver: BreakpointObserver,
   ) {
     this.uiService = uiService;
     this.collectionService = collectionService;
     this.mediaService = mediaService;
     this.route = route;
     this.galleryService = galleryService;
+    this.breakpointObserver = breakpointObserver;
   }
 
   public ngOnInit() {
@@ -67,6 +72,12 @@ export class NavbarComponent implements OnInit, OnDestroy {
         this.searchText = searchModel.keywords;
       }),
     );
+
+    this.subscriptions.push(
+      this.breakpointObserver.observe(Breakpoints.XSmall).subscribe(result => {
+        this.showDirButtons = !result.matches;
+      }),
+    );
   }
 
   public ngOnDestroy() {