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

Author: alexandrevryghem

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

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

src/app/shared/search/search-sidebar/search-sidebar.component.ts

@@ -93,7 +93,7 @@ export class SearchSidebarComponent {
   /**
    * 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

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

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

src/app/shared/view-mode-switch/view-mode-switch.component.html

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