45621: refactored to sm full width for search page

2025-10-12 12:33:07 +00:00 · 2017-11-17 14:37:59 +01:00
parent 889318f162
commit 970e77aed3
9 changed files with 45 additions and 29 deletions
--- a/src/app/+search-page/search-filters/search-filter/search-facet-filter/search-facet-filter.component.html
+++ b/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"/>
-                <span class="filter-value">{{value.value}}</span></span>
-                <span class="col-2 filter-value-count">({{value.count}})</span>
+                    <input type="checkbox" [checked]="false"/>
+                    <span class="filter-value">{{value.value}}</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"/>
--- a/src/app/+search-page/search-page.component.html
+++ b/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
--- a/src/app/+search-page/search-page.component.scss
+++ b/src/app/+search-page/search-page.component.scss
@@ -1,11 +1,13 @@
@import '../../styles/variables.scss';
@import '../../styles/mixins.scss';

-.container {
-    position: relative;
+@include media-breakpoint-down(md) {
+    .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(sm) {
+@include media-breakpoint-up(md) {
+    .sidebar-md-sticky {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
@@ -49,3 +51,4 @@
        display: block;
    }
 }
+
--- a/src/app/+search-page/search-page.component.spec.ts
+++ b/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();
    });
--- a/src/app/+search-page/search-page.component.ts
+++ b/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;
--- a/src/app/+search-page/search-service/search-filter-config.model.ts
+++ b/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
--- a/src/app/+search-page/search-service/search.service.ts
+++ b/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
            });
          }
--- a/src/app/+search-page/search-sidebar/search-sidebar.component.html
+++ b/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>
--- a/src/app/+search-page/search-sidebar/search-sidebar.service.ts
+++ b/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);
  }