45621: refactored to sm full width for search page

src/app/+search-page/search-filters/search-filter/search-facet-filter/search-facet-filter.component.html

@@ -6,13 +6,15 @@
             <input type="checkbox" [checked]="true"/>
             <span class="filter-value">{{value}}</span>
         </a>
-        <a *ngFor="let value of filterValues; let i=index" class="d-block row"
+        <a *ngFor="let value of filterValues; let i=index" class="d-block clearfix"
            [routerLink]="[getSearchLink()]"
            [queryParams]="getQueryParamsWith(value.value) | async">
             <ng-template [ngIf]="i < (facetCount | async)">
-                <span class="col-10"><input type="checkbox" [checked]="false"/>
+                    <input type="checkbox" [checked]="false"/>
-                <span class="filter-value">{{value.value}}</span></span>
+                    <span class="filter-value">{{value.value}}</span>
-                <span class="col-2 filter-value-count">({{value.count}})</span>
+                <span class="float-right filter-value-count">
+                    <span class="badge badge-secondary badge-pill">{{value.count}}</span>
+                </span>
             </ng-template>
         </a>
         <div class="clearfix toggle-more-filters">
@@ -23,7 +25,8 @@
                 | translate}}</a>
         </div>
     </div>
-    <form #form="ngForm" (ngSubmit)="onSubmit(form.value)" class="add-filter" [action]="getCurrentUrl()">
+    <form #form="ngForm" (ngSubmit)="onSubmit(form.value)" class="add-filter"
+          [action]="getCurrentUrl()">
         <input type="text" [(ngModel)]="filter" [name]="filterConfig.paramName" class="form-control"
                aria-label="New filter input"
                [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder'| translate"/>

src/app/+search-page/search-page.component.html

@@ -1,9 +1,9 @@
 <div class="container">
   <div class="search-page row">
-        <ds-search-sidebar *ngIf="!(isMobileView | async)" class="col-3 sidebar-sm-sticky"
+        <ds-search-sidebar *ngIf="!(isMobileView | async)" class="col-3 sidebar-md-sticky"
                          id="search-sidebar"
                          [resultCount]="(resultsRDObs | async)?.pageInfo?.totalElements"></ds-search-sidebar>
-        <div class="col-12 col-sm-9">
+        <div class="col-12 col-md-9">
         <ds-search-form id="search-form"
                         [query]="query"
                         [scope]="(scopeObjectRDObs | async)?.payload"
@@ -15,13 +15,13 @@
              class="row-offcanvas row-offcanvas-left"
              [@pushInOut]="(isSidebarCollapsed() | async) ? 'collapsed' : 'expanded'">
           <ds-search-sidebar *ngIf="(isMobileView | async)" class="col-12"
-                             id="search-sidebar-xs"
+                             id="search-sidebar-sm"
                              [resultCount]="(resultsRDObs | async)?.pageInfo?.totalElements"
                              (toggleSidebar)="closeSidebar()"
                              [ngClass]="{'active': !(isSidebarCollapsed() | async)}">
           </ds-search-sidebar>
           <div id="search-content" class="col-12">
-            <div class="d-block d-sm-none search-controls clearfix">
+            <div class="d-block d-md-none search-controls clearfix">
               <ds-view-mode-switch></ds-view-mode-switch>
               <button (click)="openSidebar()" aria-controls="#search-body"
                       class="btn btn-outline-primary float-right open-sidebar"><i

src/app/+search-page/search-page.component.scss

@@ -1,11 +1,13 @@
 @import '../../styles/variables.scss';
 @import '../../styles/mixins.scss';
 
-.container {
+@include media-breakpoint-down(md) {
-    position: relative;
+    .container {
+        width: 100%;
+        max-width: none;
+    }
 }
 
-
 /deep/ .search-controls {
     margin-bottom: $spacer;
 }
@@ -14,22 +16,22 @@
     &.row-offcanvas {
         width: 100%;
     }
-    @include media-breakpoint-down(xs) {
+    @include media-breakpoint-down(sm) {
         position: relative;
 
         &.row-offcanvas {
             position: relative;
         }
 
-        &.row-offcanvas-right #search-sidebar-xs {
+        &.row-offcanvas-right #search-sidebar-sm {
             right: -100%;
         }
 
-        &.row-offcanvas-left #search-sidebar-xs {
+        &.row-offcanvas-left #search-sidebar-sm {
             left: -100%;
         }
 
-        #search-sidebar-xs {
+        #search-sidebar-sm {
             position: absolute;
             top: 0;
             width: 100%;
@@ -37,8 +39,8 @@
     }
 }
 
-.sidebar-sm-sticky{
+@include media-breakpoint-up(md) {
-    @include media-breakpoint-up(sm) {
+    .sidebar-md-sticky {
         position: sticky;
         position: -webkit-sticky;
         top: 0;
@@ -49,3 +51,4 @@
         display: block;
     }
 }
+

src/app/+search-page/search-page.component.spec.ts

@@ -157,7 +157,7 @@ describe('SearchPageComponent', () => {
 
     beforeEach(() => {
       spyOn(comp, 'closeSidebar');
-      const closeSidebarButton = fixture.debugElement.query(By.css('#search-sidebar-xs'));
+      const closeSidebarButton = fixture.debugElement.query(By.css('#search-sidebar-sm'));
       closeSidebarButton.triggerEventHandler('toggleSidebar', null);
     });
 
@@ -185,7 +185,7 @@ describe('SearchPageComponent', () => {
     let menu: HTMLElement;
 
     beforeEach(() => {
-      menu = fixture.debugElement.query(By.css('#search-sidebar-xs')).nativeElement;
+      menu = fixture.debugElement.query(By.css('#search-sidebar-sm')).nativeElement;
       comp.isSidebarCollapsed = () => Observable.of(true);
       fixture.detectChanges();
     });
@@ -200,7 +200,7 @@ describe('SearchPageComponent', () => {
     let menu: HTMLElement;
 
     beforeEach(() => {
-      menu = fixture.debugElement.query(By.css('#search-sidebar-xs')).nativeElement;
+      menu = fixture.debugElement.query(By.css('#search-sidebar-sm')).nativeElement;
       comp.isSidebarCollapsed = () => Observable.of(false);
       fixture.detectChanges();
     });

src/app/+search-page/search-page.component.ts

@@ -46,7 +46,11 @@ export class SearchPageComponent implements OnInit, OnDestroy {
               private communityService: CommunityDataService,
               private sidebarService: SearchSidebarService,
               private windowService: HostWindowService) {
-    this.isMobileView = this.windowService.isXs();
+    this.isMobileView =  Observable.combineLatest(
+      this.windowService.isXs(),
+      this.windowService.isSm(),
+      ((isXs, isSm) => isXs || isSm)
+    );
     this.scopeListRDObs = communityService.findAll();
     // Initial pagination config
     this.searchOptions = this.service.searchOptions;

src/app/+search-page/search-service/search-filter-config.model.ts

@@ -5,7 +5,7 @@ export class SearchFilterConfig {
   name: string;
   type: FilterType;
   hasFacets: boolean;
-  pageSize = 2;
+  pageSize = 5;
   isOpenByDefault: boolean;
   /**
    * Name of this configuration that can be used in a url

src/app/+search-page/search-service/search.service.ts

@@ -199,12 +199,13 @@ export class SearchService implements OnDestroy {
     const filterConfig = this.config.find((config: SearchFilterConfig) => config.name === searchFilterConfigName);
     return this.routeService.getQueryParameterValues(filterConfig.paramName).map((selectedValues: string[]) => {
         const values: FacetValue[] = [];
-        for (let i = 0; i < 5; i++) {
+        const totalFilters = 13;
+        for (let i = 0; i < totalFilters; i++) {
           const value = searchFilterConfigName + ' ' + (i + 1);
           if (!selectedValues.includes(value)) {
             values.push({
               value: value,
-              count: Math.floor(Math.random() * 20) + 20 * (5 - i), // make sure first results have the highest (random) count
+              count: Math.floor(Math.random() * 20) + 20 * (totalFilters - i), // make sure first results have the highest (random) count
               search: decodeURI(this.router.url) + (this.router.url.includes('?') ? '&' : '?') + filterConfig.paramName + '=' + value
             });
           }

src/app/+search-page/search-sidebar/search-sidebar.component.html

@@ -1,5 +1,5 @@
 <div>
-    <div id="sidebar-options" class="d-block d-sm-none search-controls clearfix">
+    <div id="sidebar-options" class="d-block d-md-none search-controls clearfix">
         <small class="results">{{resultCount}} {{"search.sidebar.results" | translate}}</small>
         <button (click)="toggleSidebar.emit()"
                 aria-controls="#search-body"
@@ -8,7 +8,7 @@
         </button>
     </div>
     <div id="search-sidebar-content">
-        <ds-view-mode-switch class="d-none d-sm-block"></ds-view-mode-switch>
+        <ds-view-mode-switch class="d-none d-md-block"></ds-view-mode-switch>
         <div class="sidebar-content">
             <ds-search-filters></ds-search-filters>
             <ds-search-settings></ds-search-settings>

src/app/+search-page/search-sidebar/search-sidebar.service.ts

@@ -15,7 +15,12 @@ export class SearchSidebarService {
   private isCollapsdeInStored: Observable<boolean>;
 
   constructor(private store: Store<AppState>, private windowService: HostWindowService) {
-    this.isMobileView = this.windowService.isXs();
+    this.isMobileView =
+      Observable.combineLatest(
+        this.windowService.isXs(),
+        this.windowService.isSm(),
+        ((isXs, isSm) => isXs || isSm)
+      );
     this.isCollapsdeInStored = this.store.select(sidebarCollapsedSelector);
   }