45621: commit before small sidebar changes

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

@@ -6,13 +6,13 @@
             <input type="checkbox" [checked]="true"/>
             <span class="filter-value">{{value}}</span>
         </a>
-        <a *ngFor="let value of filterValues; let i=index" class="d-block"
+        <a *ngFor="let value of filterValues; let i=index" class="d-block row"
            [routerLink]="[getSearchLink()]"
            [queryParams]="getQueryParamsWith(value.value) | async">
             <ng-template [ngIf]="i < (facetCount | async)">
-                <input type="checkbox" [checked]="false"/>
+                <span class="col-10"><input type="checkbox" [checked]="false"/>
-                <span class="filter-value">{{value.value}}</span>
+                <span class="filter-value">{{value.value}}</span></span>
-                <span class="filter-value-count float-right">({{value.count}})</span>
+                <span class="col-2 filter-value-count">({{value.count}})</span>
             </ng-template>
         </a>
         <div class="clearfix toggle-more-filters">

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

@@ -1,4 +1,4 @@
-<h2>{{"search.filters.head" | translate}}</h2>
+<h3>{{"search.filters.head" | translate}}</h3>
 <div *ngIf="(filters | async).hasSucceeded">
     <div *ngFor="let filter of (filters | async).payload">
         <ds-search-filter class="d-block mb-3 p-3" [filter]="filter"></ds-search-filter>

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

@@ -1,19 +1,15 @@
 <div class="container">
   <div class="search-page row">
-    <div class="col-3">
+        <ds-search-sidebar *ngIf="!(isMobileView | async)" class="col-3 sidebar-sm-sticky"
-      <ds-search-sidebar *ngIf="!(isMobileView | async)" class="sidebar-sm-sticky"
                          id="search-sidebar"
                          [resultCount]="(resultsRDObs | async)?.pageInfo?.totalElements"></ds-search-sidebar>
-    </div>
+        <div class="col-12 col-sm-9">
-    <div class="col-9">
-      <div id="search-header" class="row">
         <ds-search-form id="search-form"
                         [query]="query"
                         [scope]="(scopeObjectRDObs | async)?.payload"
                         [currentParams]="currentParams"
                         [scopes]="(scopeListRDObs | async)?.payload">
         </ds-search-form>
-      </div>
       <div class="row">
         <div id="search-body"
              class="row-offcanvas row-offcanvas-left"

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

@@ -1,25 +1,22 @@
-<h3 class="mt-3">{{ 'search.sidebar.settings.title' | translate}}</h3>
+<h3>{{ 'search.sidebar.settings.title' | translate}}</h3>
-<div *ngIf="[searchOptions].sort" class="setting-option result-order-settings d-block mb-3 px-3 py-2 ng-tns-c13-5">
+<div *ngIf="[searchOptions].sort" class="setting-option result-order-settings mb-3 p-3">
-  <h4>{{ 'search.sidebar.settings.sort-by' | translate}}</h4>
+    <h5>{{ 'search.sidebar.settings.sort-by' | translate}}</h5>
-    <div class="form-group">
+    <select class="form-control" (change)="reloadOrder($event)">
-      <select class="form-control" (change)="reloadOrder($event)">
+        <option *ngFor="let direction of (sortDirections | dsKeys); let currentElementIndex = index"
-        <option *ngFor="let direction of (sortDirections | dsKeys); let currentElementIndex = index" [value]="currentElementIndex"
+                [value]="currentElementIndex"
                 [selected]="direction === searchOptions.sort? 'selected': null">
-          {{direction.value}}
+            {{direction.value}}
         </option>
-      </select>
+    </select>
-    </div>
 </div>
 
-<div *ngIf="searchOptions.pagination.pageSize" class="setting-option page-size-settings d-block mb-3 px-3 py-2 ng-tns-c13-5">
+<div *ngIf="searchOptions.pagination.pageSize" class="setting-option page-size-settings mb-3 p-3">
-  <h4>{{ 'search.sidebar.settings.rpp' | translate}}</h4>
+    <h5>{{ 'search.sidebar.settings.rpp' | translate}}</h5>
 
-    <div class="form-group">
+    <select class="form-control" (change)="reloadRPP($event)">
-      <select class="form-control" (change)="reloadRPP($event)">
         <option *ngFor="let item of searchOptions.pagination.pageSizeOptions" [value]="item"
                 [selected]="item === searchOptions.pagination.pageSize ? 'selected': null">
-          {{item}}
+            {{item}}
         </option>
-      </select>
+    </select>
-    </div>
 </div>

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

@@ -2,13 +2,16 @@
     <div id="sidebar-options" class="d-block d-sm-none search-controls clearfix">
         <small class="results">{{resultCount}} {{"search.sidebar.results" | translate}}</small>
         <button (click)="toggleSidebar.emit()"
-                aria-controls="#search-body" class="btn btn-outline-primary float-right close-sidebar"><i
+                aria-controls="#search-body"
+                class="btn btn-outline-primary float-right close-sidebar"><i
                 class="fa fa-arrow-right"></i> {{"search.sidebar.close" | translate}}
         </button>
     </div>
     <div id="search-sidebar-content">
         <ds-view-mode-switch class="d-none d-sm-block"></ds-view-mode-switch>
-        <ds-search-filters></ds-search-filters>
+        <div class="sidebar-content">
-        <ds-search-settings></ds-search-settings>
+            <ds-search-filters></ds-search-filters>
+            <ds-search-settings></ds-search-settings>
+        </div>
     </div>
 </div>

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

@@ -8,4 +8,8 @@
     ds-view-mode-switch {
         margin-bottom: $spacer;
     }
+    .sidebar-content > *:not(:last-child) {
+        margin-bottom: 4*$spacer;
+        display: block;
+    }
 }

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

@@ -3,16 +3,26 @@ import { Effect, Actions } from '@ngrx/effects'
 import * as fromRouter from '@ngrx/router-store';
 
 import { SearchSidebarCollapseAction } from './search-sidebar.actions';
+import { URLBaser } from '../../core/url-baser/url-baser';
 
 @Injectable()
 export class SearchSidebarEffects {
-
+  private previousPath: string;
   @Effect() routeChange$ = this.actions$
     .ofType(fromRouter.ROUTER_NAVIGATION)
+    .filter((action) => this.previousPath !== this.getBaseUrl(action))
+    .do((action) => {this.previousPath = this.getBaseUrl(action)})
     .map(() => new SearchSidebarCollapseAction());
 
   constructor(private actions$: Actions) {
 
   }
 
+  getBaseUrl(action: any): string {
+    /* tslint:disable:no-string-literal */
+    const url: string = action['payload'].routerState.url;
+    return new URLBaser(url).toString();
+    /* tslint:enable:no-string-literal */
+  }
+
 }

src/app/core/url-baser/url-baser.ts

@@ -0,0 +1,39 @@
+import { isEmpty } from '../../shared/empty.util';
+
+/**
+ * Extracts the base URL
+ * from a URL with query parameters
+ */
+export class URLBaser {
+  private original: string;
+
+  /**
+   * Creates a new URLBaser
+   *
+   * @param originalURL
+   *      a string representing the original URL with possible query parameters
+   */
+  constructor(originalURL: string) {
+    this.original = originalURL;
+  }
+
+  /**
+   * Removes the query parameters from the original URL of this URLBaser
+   *
+   * @return {string}
+   *      The base URL
+   */
+  toString(): string {
+    if (isEmpty(this.original)) {
+      return '';
+    } else {
+      const index = this.original.indexOf('?');
+      if (index < 0) {
+        return this.original;
+      } else {
+        return this.original.substring(0, index);
+      }
+    }
+  }
+
+}

src/app/shared/route.service.ts

@@ -25,7 +25,6 @@ export class RouteService {
     return this.route.queryParamMap.map((map) => map.getAll(paramName).indexOf(paramValue) > -1);
   }
 
-
   addQueryParameterValue(paramName: string, paramValue: string): Observable<Params> {
     return this.route.queryParams.map((currentParams) => {
       const newParam = {};