111731: Search page UI fixes

- Hide advanced search when inPlaceSearch is false
- Fixed the search settings being invisible on small screens in the sidebar
- Fixed the view mode buttons not being selected unless the parameter view was defined in the url
This commit is contained in:
Alexandre Vryghem
2024-05-04 02:52:06 +02:00
parent f5ce79fb54
commit 029359bace
4 changed files with 7 additions and 7 deletions

View File

@@ -24,7 +24,7 @@
[refreshFilters]="refreshFilters" [refreshFilters]="refreshFilters"
[inPlaceSearch]="inPlaceSearch"> [inPlaceSearch]="inPlaceSearch">
</ds-search-filters> </ds-search-filters>
<ds-advanced-search *ngIf="appConfig.search.advancedFilters.enabled" <ds-advanced-search *ngIf="inPlaceSearch && appConfig.search.advancedFilters.enabled"
[configuration]="configuration" [configuration]="configuration"
[filtersConfig]="(filters | async)?.payload"> [filtersConfig]="(filters | async)?.payload">
</ds-advanced-search> </ds-advanced-search>

View File

@@ -93,7 +93,7 @@ export class SearchSidebarComponent {
/** /**
* True when the search component should show results on the current page * True when the search component should show results on the current page
*/ */
@Input() inPlaceSearch: boolean; @Input() inPlaceSearch = true;
/** /**
* The configuration for the current paginated search results * The configuration for the current paginated search results

View File

@@ -74,10 +74,11 @@
[currentScope]="(currentScope$ | async)" [currentScope]="(currentScope$ | async)"
[filters]="filtersRD$.asObservable()" [filters]="filtersRD$.asObservable()"
[refreshFilters]="refreshFilters" [refreshFilters]="refreshFilters"
[resultCount]="(resultsRD$ | async)?.payload.totalElements" [resultCount]="(resultsRD$ | async)?.payload?.totalElements"
[searchOptions]="(searchOptions$ | async)" [searchOptions]="(searchOptions$ | async)"
[sortOptionsList]="(sortOptionsList$ | async)" [sortOptionsList]="(sortOptionsList$ | async)"
[currentSortOption]="(currentSortOptions$ | async)" [currentSortOption]="(currentSortOptions$ | async)"
[inPlaceSearch]="inPlaceSearch"
[viewModeList]="viewModeList" [viewModeList]="viewModeList"
[showViewModes]="showViewModes" [showViewModes]="showViewModes"
(toggleSidebar)="closeSidebar()" (toggleSidebar)="closeSidebar()"

View File

@@ -6,7 +6,6 @@
[queryParams]="{view: 'list'}" [queryParams]="{view: 'list'}"
queryParamsHandling="merge" queryParamsHandling="merge"
(click)="switchViewTo(viewModeEnum.ListElement)" (click)="switchViewTo(viewModeEnum.ListElement)"
routerLinkActive="active"
[class.active]="currentMode === viewModeEnum.ListElement" [class.active]="currentMode === viewModeEnum.ListElement"
class="btn btn-secondary" class="btn btn-secondary"
[attr.data-test]="'list-view' | dsBrowserOnly"> [attr.data-test]="'list-view' | dsBrowserOnly">
@@ -19,21 +18,21 @@
[queryParams]="{view: 'grid'}" [queryParams]="{view: 'grid'}"
queryParamsHandling="merge" queryParamsHandling="merge"
(click)="switchViewTo(viewModeEnum.GridElement)" (click)="switchViewTo(viewModeEnum.GridElement)"
routerLinkActive="active"
[class.active]="currentMode === viewModeEnum.GridElement" [class.active]="currentMode === viewModeEnum.GridElement"
class="btn btn-secondary" class="btn btn-secondary"
[attr.data-test]="'grid-view' | dsBrowserOnly"> [attr.data-test]="'grid-view' | dsBrowserOnly">
<i class="fas fa-th-large"></i> <i class="fas fa-th-large"></i>
</button> </button>
<button *ngIf="isToShow(viewModeEnum.DetailedListElement)" <button *ngIf="isToShow(viewModeEnum.DetailedListElement)"
[attr.aria-current]="currentMode === viewModeEnum.DetailedListElement"
[attr.aria-label]="'search.view-switch.show-detail' | translate"
routerLink="." routerLink="."
[queryParams]="{view: 'detailed'}" [queryParams]="{view: 'detailed'}"
queryParamsHandling="merge" queryParamsHandling="merge"
(click)="switchViewTo(viewModeEnum.DetailedListElement)" (click)="switchViewTo(viewModeEnum.DetailedListElement)"
routerLinkActive="active"
[class.active]="currentMode === viewModeEnum.DetailedListElement" [class.active]="currentMode === viewModeEnum.DetailedListElement"
class="btn btn-secondary" class="btn btn-secondary"
[attr.data-test]="'detail-view' | dsBrowserOnly"> [attr.data-test]="'detail-view' | dsBrowserOnly">
<span class="far fa-square"></span><span class="sr-only">{{'search.view-switch.show-detail' | translate}}</span> <i class="far fa-square"></i>
</button> </button>
</div> </div>