From 6c6c1822f414f2e370c662bf926bc43472e9b4a1 Mon Sep 17 00:00:00 2001 From: guillermo2519 Date: Wed, 11 Mar 2026 15:45:24 -0600 Subject: [PATCH 1/4] Fix #2680 breadcrumbs collapse in mobile mode --- .../breadcrumbs/breadcrumbs.component.html | 83 ++++++++++++++++--- .../breadcrumbs/breadcrumbs.component.scss | 15 ++++ src/app/breadcrumbs/breadcrumbs.component.ts | 23 ++++- src/app/root.module.ts | 8 +- src/app/shared/host-window.service.ts | 2 + src/app/shared/test-module.ts | 1 + 6 files changed, 116 insertions(+), 16 deletions(-) diff --git a/src/app/breadcrumbs/breadcrumbs.component.html b/src/app/breadcrumbs/breadcrumbs.component.html index b16f46f082e..d06d0e0a0ec 100644 --- a/src/app/breadcrumbs/breadcrumbs.component.html +++ b/src/app/breadcrumbs/breadcrumbs.component.html @@ -1,22 +1,79 @@ @if ((showBreadcrumbs$ | async)) { } - -
  • {{text | translate}}
    • +
  • +
    + + {{text | translate}} + +
    +
    • - -
  • {{text | translate}}
    • +
  • +
    +
    {{text | translate}}
    +
    +
    • -     - + +
  • +
    +
    +
    + +
      +
    • +
      + + @for (bc of breadcrumbs; track $index; let last = $last) { + @if (!last) { +
      + +
      + } + } +
      +
      • +
    +
    +
    +
    +
    • +     + + @for (bc of breadcrumbs; track $index; let last = $last) { + @if (last) { +
    + +
    + } + } +     + \ No newline at end of file diff --git a/src/app/breadcrumbs/breadcrumbs.component.scss b/src/app/breadcrumbs/breadcrumbs.component.scss index 7da9ad02d8c..1ad1fa92d1d 100644 --- a/src/app/breadcrumbs/breadcrumbs.component.scss +++ b/src/app/breadcrumbs/breadcrumbs.component.scss @@ -38,3 +38,18 @@ li.breadcrumb-item.active { display: block; content: quote("•") !important; } + +.breadcrumb-action { + font-size: 17px; + padding-right: 5px; + padding-bottom: 5px; +} + +.breadcrumb-separator { + padding-right: 5px; + padding-left: 5px; +} + +.dropdown-toggle::after { + display: none !important; +} \ No newline at end of file diff --git a/src/app/breadcrumbs/breadcrumbs.component.ts b/src/app/breadcrumbs/breadcrumbs.component.ts index bc8dbf61cab..d36ffa23200 100644 --- a/src/app/breadcrumbs/breadcrumbs.component.ts +++ b/src/app/breadcrumbs/breadcrumbs.component.ts @@ -2,13 +2,20 @@ import { AsyncPipe, NgTemplateOutlet, } from '@angular/common'; -import { Component } from '@angular/core'; +import { + Component, + OnInit, +} from '@angular/core'; import { RouterLink } from '@angular/router'; import { Breadcrumb } from '@dspace/core/breadcrumbs/models/breadcrumb.model'; import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'; import { TranslateModule } from '@ngx-translate/core'; import { Observable } from 'rxjs'; +import { + HostWindowService, + WidthCategory, +} from '../shared/host-window.service'; import { VarDirective } from '../shared/utils/var.directive'; import { BreadcrumbsService } from './breadcrumbs.service'; @@ -28,7 +35,14 @@ import { BreadcrumbsService } from './breadcrumbs.service'; VarDirective, ], }) -export class BreadcrumbsComponent { +export class BreadcrumbsComponent implements OnInit { + + public isMobile$: Observable; + + /** + * Observable of max mobile width + */ + maxMobileWidth = WidthCategory.SM; /** * Observable of the list of breadcrumbs for this page @@ -42,9 +56,14 @@ export class BreadcrumbsComponent { constructor( private breadcrumbsService: BreadcrumbsService, + public windowService: HostWindowService, ) { this.breadcrumbs$ = breadcrumbsService.breadcrumbs$; this.showBreadcrumbs$ = breadcrumbsService.showBreadcrumbs$; } + ngOnInit(): void { + this.isMobile$ = this.windowService.isUpTo(this.maxMobileWidth); + } + } diff --git a/src/app/root.module.ts b/src/app/root.module.ts index cd0d17da7e3..8236bcffd76 100644 --- a/src/app/root.module.ts +++ b/src/app/root.module.ts @@ -1,6 +1,10 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; +import { + NgbDropdownModule, + NgbModule, + NgbTooltipModule, +} from '@ng-bootstrap/ng-bootstrap'; import { EAGER_THEME_COMPONENTS } from '../themes/eager-themes-components'; import { AdminSidebarComponent } from './admin/admin-sidebar/admin-sidebar.component'; @@ -33,6 +37,8 @@ import { IdleModalComponent } from './shared/idle-modal/idle-modal.component'; const IMPORTS = [ CommonModule, NgbModule, + NgbDropdownModule, + NgbTooltipModule, ]; const PROVIDERS = [ diff --git a/src/app/shared/host-window.service.ts b/src/app/shared/host-window.service.ts index 7db690eb1ee..a2f99547f3a 100644 --- a/src/app/shared/host-window.service.ts +++ b/src/app/shared/host-window.service.ts @@ -150,3 +150,5 @@ export class HostWindowService { ); } } +export { WidthCategory }; + diff --git a/src/app/shared/test-module.ts b/src/app/shared/test-module.ts index 222b58b79d8..337469f2448 100644 --- a/src/app/shared/test-module.ts +++ b/src/app/shared/test-module.ts @@ -29,6 +29,7 @@ import { MySimpleItemActionComponent } from '../item-page/edit-item-page/simple- QueryParamsDirectiveStub, RouterLinkDirectiveStub, BrowserOnlyMockPipe, + NgComponentOutletDirectiveStub, ], schemas: [ CUSTOM_ELEMENTS_SCHEMA, From 67a22dd112355aeee651d677d329858d62bd86b8 Mon Sep 17 00:00:00 2001 From: guillermo2519 Date: Wed, 11 Mar 2026 18:31:02 -0600 Subject: [PATCH 2/4] Fix 2680 BreadcrumbsComponent test by mocking HostWindowService --- src/app/breadcrumbs/breadcrumbs.component.spec.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/app/breadcrumbs/breadcrumbs.component.spec.ts b/src/app/breadcrumbs/breadcrumbs.component.spec.ts index ef5aaf36853..323dad25e06 100644 --- a/src/app/breadcrumbs/breadcrumbs.component.spec.ts +++ b/src/app/breadcrumbs/breadcrumbs.component.spec.ts @@ -14,6 +14,7 @@ import { } from '@ngx-translate/core'; import { of } from 'rxjs'; +import { HostWindowService } from '../shared/host-window.service'; import { VarDirective } from '../shared/utils/var.directive'; import { BreadcrumbsComponent } from './breadcrumbs.component'; import { BreadcrumbsService } from './breadcrumbs.service'; @@ -61,7 +62,17 @@ describe('BreadcrumbsComponent', () => { providers: [ { provide: BreadcrumbsService, useValue: breadcrumbsServiceMock }, ], - }).compileComponents(); + }); + + TestBed.overrideComponent(BreadcrumbsComponent, { + set: { + providers: [ + { provide: HostWindowService, useValue: {} }, + ], + }, + }); + + TestBed.compileComponents(); fixture = TestBed.createComponent(BreadcrumbsComponent); component = fixture.componentInstance; From 464164fdd65470678395a2bbfebc8e63d105fe71 Mon Sep 17 00:00:00 2001 From: guillermo2519 Date: Wed, 11 Mar 2026 20:44:43 -0600 Subject: [PATCH 3/4] Fix 2680 BreadcrumbsComponent test by mocking HostWindowService --- src/app/breadcrumbs/breadcrumbs.component.spec.ts | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/app/breadcrumbs/breadcrumbs.component.spec.ts b/src/app/breadcrumbs/breadcrumbs.component.spec.ts index 323dad25e06..4af6c953d60 100644 --- a/src/app/breadcrumbs/breadcrumbs.component.spec.ts +++ b/src/app/breadcrumbs/breadcrumbs.component.spec.ts @@ -47,6 +47,10 @@ describe('BreadcrumbsComponent', () => { showBreadcrumbs$: of(true), } as BreadcrumbsService; + const hostWindowServiceMock = { + isUpTo: (width: number) => true, + }; + TestBed.configureTestingModule({ imports: [ RouterTestingModule.withRoutes([]), @@ -61,17 +65,10 @@ describe('BreadcrumbsComponent', () => { ], providers: [ { provide: BreadcrumbsService, useValue: breadcrumbsServiceMock }, + { provide: HostWindowService, useValue: hostWindowServiceMock }, ], }); - TestBed.overrideComponent(BreadcrumbsComponent, { - set: { - providers: [ - { provide: HostWindowService, useValue: {} }, - ], - }, - }); - TestBed.compileComponents(); fixture = TestBed.createComponent(BreadcrumbsComponent); From 8775f25405fde273bca477fb84982398d0bb29ec Mon Sep 17 00:00:00 2001 From: guillermo2519 Date: Wed, 11 Mar 2026 21:24:27 -0600 Subject: [PATCH 4/4] Fix 2680 BreadcrumbsComponent test by mocking HostWindowService html --- .../breadcrumbs/breadcrumbs.component.html | 62 ++++++++++--------- 1 file changed, 34 insertions(+), 28 deletions(-) diff --git a/src/app/breadcrumbs/breadcrumbs.component.html b/src/app/breadcrumbs/breadcrumbs.component.html index d06d0e0a0ec..c57011929d2 100644 --- a/src/app/breadcrumbs/breadcrumbs.component.html +++ b/src/app/breadcrumbs/breadcrumbs.component.html @@ -1,24 +1,27 @@ - @if ((showBreadcrumbs$ | async)) { + - } + + + +
      + +

    1. {{'/'}}

      2. + +
    +     + + +
      + + + + +
    +     +
  • @@ -33,6 +36,7 @@
    • +
  • @@ -40,6 +44,7 @@
    • +
  • @@ -52,13 +57,13 @@
  • - @for (bc of breadcrumbs; track $index; let last = $last) { - @if (!last) { -
    - -
    - } - } + + +
    + +
    +     +
    • @@ -67,13 +72,14 @@     + - @for (bc of breadcrumbs; track $index; let last = $last) { - @if (last) { + +
    - } - } +     +     \ No newline at end of file