Hide the reset filters button on the home page & fixed spacing issue when showDiscoverFilters is disabled

This commit is contained in:
Alexandre Vryghem
2024-04-10 21:31:21 +02:00
parent ca167a2321
commit fcabea0ac5
4 changed files with 13 additions and 5 deletions

View File

@@ -1,8 +1,8 @@
<ds-themed-home-news></ds-themed-home-news>
<div [ngClass]="showDiscoverFilters ? 'container-fluid' : 'container'">
<ds-page-with-sidebar [sidebarContent]="sidebar" [sideBarWidth]="3" [class]="showDiscoverFilters ? 'row mx-3' : ''">
<ds-page-with-sidebar [sidebarContent]="sidebar" [sideBarWidth]="showDiscoverFilters ? 3 : 0" [class]="showDiscoverFilters ? 'row mx-3' : ''">
<div [class.col-sm-12]="showDiscoverFilters">
<button *ngIf="(isXsOrSm$ | async) && sidebarService.isCollapsed" (click)="sidebarService.expand()"
<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>

View File

@@ -7,4 +7,6 @@
</div>
<ds-advanced-search *ngIf="appConfig.search.advancedFilters.enabled"
[inPlaceSearch]="inPlaceSearch"></ds-advanced-search>
<a class="btn btn-primary" [routerLink]="[searchLink]" [queryParams]="clearParams | async" queryParamsHandling="merge" role="button"><i class="fas fa-undo"></i> {{"search.filters.reset" | translate}}</a>
<a *ngIf="inPlaceSearch" class="btn btn-primary" [routerLink]="[searchLink]" [queryParams]="clearParams | async" queryParamsHandling="merge" role="button">
<i class="fas fa-undo"></i> {{"search.filters.reset" | translate}}
</a>

View File

@@ -2,12 +2,13 @@
<div class="row">
<div class="row-with-sidebar row-offcanvas row-offcanvas-left"
[@pushInOut]="(isSidebarCollapsed$ | async) ? 'collapsed' : 'expanded'">
<div id="{{id}}-sidebar-content"
<div *ngIf="sideBarWidth > 0" id="{{id}}-sidebar-content"
[class.invisible]="(isSidebarCollapsed$ | async) === true && (isXsOrSm$ | async) === true"
class="col-12 col-md-{{sideBarWidth}} sidebar-content {{sidebarClasses | async}}">
<ng-container *ngTemplateOutlet="sidebarContent"></ng-container>
</div>
<div class="col-12 col-md-{{12 - sideBarWidth}}"
[class.px-0]="sideBarWidth === 0"
[class.invisible]="(isSidebarCollapsed$ | async) !== true && (isXsOrSm$ | async) === true">
<ng-content></ng-content>
</div>

View File

@@ -1,5 +1,6 @@
import {
AsyncPipe,
NgIf,
NgTemplateOutlet,
} from '@angular/common';
import {
@@ -21,7 +22,11 @@ import { SidebarService } from './sidebar.service';
templateUrl: './page-with-sidebar.component.html',
animations: [pushInOut],
standalone: true,
imports: [NgTemplateOutlet, AsyncPipe],
imports: [
AsyncPipe,
NgTemplateOutlet,
NgIf,
],
})
/**
* This component takes care of displaying the sidebar properly on all viewports. It does not