Home page facet refactor fixes

Author: alexandrevryghem

src/app/home-page/home-page.component.html

@@ -1,29 +1,25 @@
 <ds-home-coar></ds-home-coar>
 <ds-themed-home-news></ds-themed-home-news>
-<div [ngClass]="showDiscoverFilters ? 'container-fluid' : 'container'">
-  <ds-page-with-sidebar [sidebarContent]="sidebar" [sideBarWidth]="showDiscoverFilters ? 3 : 0" [class]="showDiscoverFilters ? 'row mx-3' : ''">
-    <div [class.col-sm-12]="showDiscoverFilters">
-      <button *ngIf="showDiscoverFilters && (isXsOrSm$ | async) && sidebarService.isCollapsed" (click)="sidebarService.expand()"
-              class="btn btn-outline-primary d-block ml-auto mb-3">
-        <i class="fas fa-sliders"></i> {{ 'search.sidebar.open' | translate }}
-      </button>
-      <ng-container *ngIf="(site$ | async) as site">
-        <ds-view-tracker [object]="site"></ds-view-tracker>
-      </ng-container>
-      <ds-themed-search-form [inPlaceSearch]="false"
-                             [searchPlaceholder]="'home.search-form.placeholder' | translate">
-      </ds-themed-search-form>
-      <ds-themed-top-level-community-list></ds-themed-top-level-community-list>
-      <ds-recent-item-list *ngIf="recentSubmissionspageSize>0"></ds-recent-item-list>
-    </div>
-  </ds-page-with-sidebar>
+<ds-themed-configuration-search-page *ngIf="showDiscoverFilters"
+                              [sideBarWidth]="3"
+                              [showViewModes]="false"
+                              [searchEnabled]="false"
+                              [inPlaceSearch]="false"
+                              [showScopeSelector]="false">
+  <ng-container searchContentTop *ngTemplateOutlet="homeContent"></ng-container>
+</ds-themed-configuration-search-page>
+<div *ngIf="!showDiscoverFilters" class="container">
+  <ng-container *ngTemplateOutlet="homeContent"></ng-container>
 </div>
 <ds-suggestions-popup></ds-suggestions-popup>
 
-<ng-template #sidebar>
-  <div *ngIf="showDiscoverFilters">
-    <ds-themed-configuration-search-page [sideBarWidth]="12" [showViewModes]="false" [searchEnabled]="false"
-                                         [inPlaceSearch]="false" [showScopeSelector]="false">
-    </ds-themed-configuration-search-page>
-  </div>
+<ng-template #homeContent>
+  <ng-container *ngIf="(site$ | async) as site">
+    <ds-view-tracker [object]="site"></ds-view-tracker>
+  </ng-container>
+  <ds-themed-search-form [inPlaceSearch]="false"
+                         [searchPlaceholder]="'home.search-form.placeholder' | translate">
+  </ds-themed-search-form>
+  <ds-themed-top-level-community-list></ds-themed-top-level-community-list>
+  <ds-recent-item-list *ngIf="recentSubmissionspageSize>0"></ds-recent-item-list>
 </ng-template>

src/app/home-page/home-page.component.scss

@@ -1,5 +1,6 @@
-:host ::ng-deep {
-  .container-fluid .container {
-    padding: 0;
+@include media-breakpoint-down(md) {
+  ds-themed-configuration-search-page + .container {
+    width: 100%;
+    max-width: none;
   }
 }

src/app/home-page/home-page.component.ts

@@ -2,6 +2,7 @@ import {
   AsyncPipe,
   NgClass,
   NgIf,
+  NgTemplateOutlet,
 } from '@angular/common';
 import {
   Component,
@@ -21,10 +22,8 @@ import { Site } from '../core/shared/site.model';
 import { SuggestionsPopupComponent } from '../notifications/suggestions-popup/suggestions-popup.component';
 import { ConfigurationSearchPageComponent } from '../search-page/configuration-search-page.component';
 import { ThemedConfigurationSearchPageComponent } from '../search-page/themed-configuration-search-page.component';
-import { HostWindowService } from '../shared/host-window.service';
 import { ThemedSearchFormComponent } from '../shared/search-form/themed-search-form.component';
 import { PageWithSidebarComponent } from '../shared/sidebar/page-with-sidebar.component';
-import { SidebarService } from '../shared/sidebar/sidebar.service';
 import { ViewTrackerComponent } from '../statistics/angulartics/dspace/view-tracker.component';
 import { HomeCoarComponent } from './home-coar/home-coar.component';
 import { ThemedHomeNewsComponent } from './home-news/themed-home-news.component';
@@ -36,27 +35,23 @@ import { ThemedTopLevelCommunityListComponent } from './top-level-community-list
   styleUrls: ['./home-page.component.scss'],
   templateUrl: './home-page.component.html',
   standalone: true,
-  imports: [ThemedHomeNewsComponent, NgIf, ViewTrackerComponent, ThemedSearchFormComponent, ThemedTopLevelCommunityListComponent, RecentItemListComponent, AsyncPipe, TranslateModule, NgClass, ConfigurationSearchPageComponent, SuggestionsPopupComponent, ThemedConfigurationSearchPageComponent, PageWithSidebarComponent, HomeCoarComponent],
+  imports: [ThemedHomeNewsComponent, NgTemplateOutlet, NgIf, ViewTrackerComponent, ThemedSearchFormComponent, ThemedTopLevelCommunityListComponent, RecentItemListComponent, AsyncPipe, TranslateModule, NgClass, ConfigurationSearchPageComponent, SuggestionsPopupComponent, ThemedConfigurationSearchPageComponent, PageWithSidebarComponent, HomeCoarComponent],
 })
 export class HomePageComponent implements OnInit {
 
   site$: Observable<Site>;
-  isXsOrSm$: Observable<boolean>;
   recentSubmissionspageSize: number;
   showDiscoverFilters: boolean;
 
   constructor(
     @Inject(APP_CONFIG) protected appConfig: AppConfig,
     protected route: ActivatedRoute,
-    protected sidebarService: SidebarService,
-    protected windowService: HostWindowService,
   ) {
     this.recentSubmissionspageSize = this.appConfig.homePage.recentSubmissions.pageSize;
     this.showDiscoverFilters = this.appConfig.homePage.showDiscoverFilters;
   }
 
   ngOnInit(): void {
-    this.isXsOrSm$ = this.windowService.isXsOrSm();
     this.site$ = this.route.data.pipe(
       map((data) => data.site as Site),
     );

src/app/shared/search/search.component.html

@@ -33,6 +33,7 @@
                        | translate}}
                 </button>
             </div>
+            <ng-content select="[searchContentTop]"></ng-content>
             <ds-themed-search-results *ngIf="inPlaceSearch"
                                       [searchResults]="resultsRD$ | async"
                                       [searchConfig]="searchOptions$ | async"