Renamed isMobileView() into isXsOrSm()

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

@@ -1,8 +1,8 @@
 <div class="container">
   <div class="search-page row">
-        <ds-search-sidebar *ngIf="!(isMobileView$ | async)" class="col-3 sidebar-md-sticky"
+        <ds-search-sidebar *ngIf="!(isXsOrSm$ | async)" class="col-3 sidebar-md-sticky"
-                         id="search-sidebar"
+                           id="search-sidebar"
-                         [resultCount]="(resultsRD$ | async)?.pageInfo?.totalElements"></ds-search-sidebar>
+                           [resultCount]="(resultsRD$ | async)?.pageInfo?.totalElements"></ds-search-sidebar>
         <div class="col-12 col-md-9">
         <ds-search-form id="search-form"
                         [query]="(searchOptions$ | async)?.query"
@@ -14,7 +14,7 @@
         <div id="search-body"
              class="row-offcanvas row-offcanvas-left"
              [@pushInOut]="(isSidebarCollapsed() | async) ? 'collapsed' : 'expanded'">
-          <ds-search-sidebar *ngIf="(isMobileView$ | async)" class="col-12"
+          <ds-search-sidebar *ngIf="(isXsOrSm$ | async)" class="col-12"
                              id="search-sidebar-sm"
                              [resultCount]="(resultsRD$ | async)?.pageInfo?.totalElements"
                              (toggleSidebar)="closeSidebar()"

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

@@ -6,6 +6,7 @@ import { Store } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
 import { cold, hot } from 'jasmine-marbles';
 import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
 import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
 import { CommunityDataService } from '../core/data/community-data.service';
 import { HostWindowService } from '../shared/host-window.service';
@@ -77,7 +78,8 @@ describe('SearchPageComponent', () => {
           provide: HostWindowService, useValue: jasmine.createSpyObj('hostWindowService',
           {
             isXs: Observable.of(true),
-            isSm: Observable.of(false)
+            isSm: Observable.of(false),
+            isXsOrSm: Observable.of(true)
           })
         },
         {

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

@@ -34,7 +34,7 @@ export class SearchPageComponent implements OnInit {
   searchOptions$: Observable<PaginatedSearchOptions>;
   sortConfig: SortOptions;
   scopeListRD$: Observable<RemoteData<PaginatedList<Community>>>;
-  isMobileView$: Observable<boolean>;
+  isXsOrSm$: Observable<boolean>;
   pageSize;
   pageSizeOptions;
   defaults = {
@@ -52,11 +52,7 @@ export class SearchPageComponent implements OnInit {
               private sidebarService: SearchSidebarService,
               private windowService: HostWindowService,
               private filterService: SearchFilterService) {
-    this.isMobileView$ = Observable.combineLatest(
+    this.isXsOrSm$ = this.windowService.isXsOrSm();
-      this.windowService.isXs(),
-      this.windowService.isSm(),
-      ((isXs, isSm) => isXs || isSm)
-    );
     this.scopeListRD$ = communityService.findAll();
   }
 

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

@@ -3,6 +3,7 @@ import { SearchSidebarService } from './search-sidebar.service';
 import { AppState } from '../../app.reducer';
 import { async, inject, TestBed } from '@angular/core/testing';
 import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
 import { SearchSidebarCollapseAction, SearchSidebarExpandAction } from './search-sidebar.actions';
 import { HostWindowService } from '../../shared/host-window.service';
 
@@ -17,7 +18,8 @@ describe('SearchSidebarService', () => {
   const windowService = jasmine.createSpyObj('hostWindowService',
     {
       isXs: Observable.of(true),
-      isSm: Observable.of(false)
+      isSm: Observable.of(false),
+      isXsOrSm: Observable.of(true)
     });
   beforeEach(async(() => {
     TestBed.configureTestingModule({

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

@@ -11,22 +11,17 @@ const sidebarCollapsedSelector = createSelector(sidebarStateSelector, (sidebar:
 
 @Injectable()
 export class SearchSidebarService {
-  private isMobileView: Observable<boolean>;
+  private isXsOrSm$: Observable<boolean>;
   private isCollapsdeInStored: Observable<boolean>;
 
   constructor(private store: Store<AppState>, private windowService: HostWindowService) {
-    this.isMobileView =
+    this.isXsOrSm$ = this.windowService.isXsOrSm();
-      Observable.combineLatest(
-        this.windowService.isXs(),
-        this.windowService.isSm(),
-        ((isXs, isSm) => isXs || isSm)
-      );
     this.isCollapsdeInStored = this.store.select(sidebarCollapsedSelector);
   }
 
   get isCollapsed(): Observable<boolean> {
     return Observable.combineLatest(
-      this.isMobileView,
+      this.isXsOrSm$,
       this.isCollapsdeInStored,
       (mobile, store) => mobile ? store : true);
   }

src/app/shared/auth-nav-menu/auth-nav-menu.component.html

@@ -1,5 +1,5 @@
-<ul class="navbar-nav" [ngClass]="{'mr-auto': (windowService.isMobileView() | async)}">
+<ul class="navbar-nav" [ngClass]="{'mr-auto': (isXsOrSm$ | async)}">
-  <li *ngIf="!(isAuthenticated | async) && !(windowService.isMobileView() | async) && (showAuth | async)" class="nav-item dropdown" (click)="$event.stopPropagation();">
+  <li *ngIf="!(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item dropdown" (click)="$event.stopPropagation();">
     <div ngbDropdown placement="bottom-right" class="d-inline-block float-right" @fadeInOut>
       <a href="#" id="dropdownLogin" class="nav-link" (click)="$event.preventDefault()" ngbDropdownToggle><i class="fa fa-sign-in fa-fw" aria-hidden="true"></i> {{ 'nav.login' | translate }}<span class="caret"></span></a>
       <div id="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu aria-labelledby="dropdownLogin">
@@ -7,18 +7,18 @@
       </div>
     </div>
   </li>
-  <li *ngIf="!(isAuthenticated | async) && (windowService.isMobileView() | async)" class="nav-item">
+  <li *ngIf="!(isAuthenticated | async) && (isXsOrSm$ | async)" class="nav-item">
     <a id="loginLink" class="nav-link" routerLink="/login" routerLinkActive="active"><i class="fa fa-sign-in fa-fw" aria-hidden="true"></i> {{ 'nav.login' | translate }}<span class="sr-only">(current)</span></a>
   </li>
-  <li *ngIf="(isAuthenticated | async) && !(windowService.isMobileView() | async) && (showAuth | async)" class="nav-item">
+  <li *ngIf="(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item">
-    <div ngbDropdown placement="bottom-right" class="d-inline-block" [ngClass]="{'float-right': !(windowService.isMobileView() | async)}" @fadeInOut>
+    <div ngbDropdown placement="bottom-right" class="d-inline-block" [ngClass]="{'float-right': !(isXsOrSm$ | async)}" @fadeInOut>
       <a href="#" id="dropdownUser" class="nav-link" (click)="$event.preventDefault()" ngbDropdownToggle><i class="fa fa-user fa-fw" aria-hidden="true"></i>Hello {{(user | async).name}}<span class="caret"></span></a>
       <div id="logoutDropdownMenu" ngbDropdownMenu aria-labelledby="dropdownUser">
         <ds-log-out></ds-log-out>
       </div>
     </div>
   </li>
-  <li *ngIf="(isAuthenticated | async) && (windowService.isMobileView() | async)" class="nav-item">
+  <li *ngIf="(isAuthenticated | async) && (isXsOrSm$ | async)" class="nav-item">
     <a id="logoutLink" class="nav-link" routerLink="/logout" routerLinkActive="active"><i class="fa fa-sign-out fa-fw" aria-hidden="true"></i> {{ 'nav.logout' | translate }}<span class="sr-only">(current)</span></a>
   </li>
 </ul>

src/app/shared/auth-nav-menu/auth-nav-menu.component.ts

@@ -30,12 +30,15 @@ export class AuthNavMenuComponent implements OnInit {
    */
   public loading: Observable<boolean>;
 
+  public isXsOrSm$: Observable<boolean>;
+
   public showAuth = Observable.of(false);
 
   public user: Observable<Eperson>;
 
   constructor(private store: Store<AppState>,
-              public windowService: HostWindowService) {
+              private windowService: HostWindowService) {
+    this.isXsOrSm$ = this.windowService.isXsOrSm();
   }
 
   ngOnInit(): void {

src/app/shared/host-window.service.ts

@@ -93,9 +93,11 @@ export class HostWindowService {
     );
   }
 
-  isMobileView(): Observable<boolean> {
+  isXsOrSm(): Observable<boolean> {
-    return this.getWidthObs()
+    return Observable.combineLatest(
-      .map((width) => width < GridBreakpoint.MD_MIN)
+        this.isXs(),
-      .distinctUntilChanged();
+        this.isSm(),
+        ((isXs, isSm) => isXs || isSm)
+      ).distinctUntilChanged();
   }
 }

src/app/shared/testing/host-window-service-stub.ts

@@ -17,7 +17,7 @@ export class HostWindowServiceStub {
     return Observable.of(this.width < 576);
   }
 
-  isMobileView(): Observable<boolean> {
+  isXsOrSm(): Observable<boolean> {
     return this.isXs();
   }
 }