gkalpak · Jul 2, 2019 · Jul 2, 2019 · Jul 2, 2019 · Jul 2, 2019 · Jul 2, 2019
diff --git a/aio/src/app/shared/scroll.service.spec.ts b/aio/src/app/shared/scroll.service.spec.ts
@@ -51,6 +51,8 @@ describe('ScrollService', () => {
     spyOn(window, 'scrollBy');
   });
 
+  afterEach(() => scrollService.ngOnDestroy());
+
   it('should debounce `updateScrollPositonInHistory()`', fakeAsync(() => {
     const updateScrollPositionInHistorySpy = spyOn(scrollService, 'updateScrollPositionInHistory');
 
@@ -65,6 +67,25 @@ describe('ScrollService', () => {
     expect(updateScrollPositionInHistorySpy).toHaveBeenCalledTimes(1);
   }));
 
+  it('should stop updating scroll position once destroyed', fakeAsync(() => {
+    const updateScrollPositionInHistorySpy = spyOn(scrollService, 'updateScrollPositionInHistory');
+
+    window.dispatchEvent(new Event('scroll'));
+    tick(250);
+    expect(updateScrollPositionInHistorySpy).toHaveBeenCalledTimes(1);
+
+    window.dispatchEvent(new Event('scroll'));
+    tick(250);
+    expect(updateScrollPositionInHistorySpy).toHaveBeenCalledTimes(2);
+
+    updateScrollPositionInHistorySpy.calls.reset();
+    scrollService.ngOnDestroy();
+
+    window.dispatchEvent(new Event('scroll'));
+    tick(250);
+    expect(updateScrollPositionInHistorySpy).not.toHaveBeenCalled();
+  }));
+
   it('should set `scrollRestoration` to `manual` if supported', () => {
     if (scrollService.supportManualScrollRestoration) {
       expect(window.history.scrollRestoration).toBe('manual');
@@ -112,6 +133,23 @@ describe('ScrollService', () => {
       expect(scrollService.topOffset).toBe(100 + topMargin);
       expect(document.querySelector).toHaveBeenCalled();
     });
+
+    it('should stop updating on resize once destroyed', () => {
+      let clientHeight = 50;
+      (document.querySelector as jasmine.Spy).and.callFake(() => ({clientHeight}));
+
+      expect(scrollService.topOffset).toBe(50 + topMargin);
+
+      clientHeight = 100;
+      window.dispatchEvent(new Event('resize'));
+      expect(scrollService.topOffset).toBe(100 + topMargin);
+
+      scrollService.ngOnDestroy();
+
+      clientHeight = 200;
+      window.dispatchEvent(new Event('resize'));
+      expect(scrollService.topOffset).toBe(100 + topMargin);
+    });
   });
 
   describe('#topOfPageElement', () => {

diff --git a/aio/src/app/shared/scroll.service.ts b/aio/src/app/shared/scroll.service.ts
@@ -1,7 +1,7 @@
 import { DOCUMENT, Location, PlatformLocation, PopStateEvent, ViewportScroller } from '@angular/common';
-import { Injectable, Inject } from '@angular/core';
-import { fromEvent } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
+import { Injectable, Inject, OnDestroy } from '@angular/core';
+import { fromEvent, Subject } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
 
 type ScrollPosition = [number, number];
 interface ScrollPositionPopStateEvent extends PopStateEvent {
@@ -14,10 +14,11 @@ export const topMargin = 16;
  * A service that scrolls document elements into view
  */
 @Injectable()
-export class ScrollService {
+export class ScrollService implements OnDestroy {
 
   private _topOffset: number | null;
   private _topOfPageElement: Element;
+  private onDestroy = new Subject<void>();
 
   // The scroll position which has to be restored, after a `popstate` event.
   poppedStateScrollPosition: ScrollPosition | null = null;
@@ -49,10 +50,13 @@ export class ScrollService {
       private viewportScroller: ViewportScroller,
       private location: Location) {
     // On resize, the toolbar might change height, so "invalidate" the top offset.
-    fromEvent(window, 'resize').subscribe(() => this._topOffset = null);
+    fromEvent(window, 'resize')
+        .pipe(takeUntil(this.onDestroy))
+        .subscribe(() => this._topOffset = null);
 
     fromEvent(window, 'scroll')
-      .pipe(debounceTime(250)).subscribe(() => this.updateScrollPositionInHistory());
+        .pipe(debounceTime(250), takeUntil(this.onDestroy))
+        .subscribe(() => this.updateScrollPositionInHistory());
 
     // Change scroll restoration strategy to `manual` if it's supported
     if (this.supportManualScrollRestoration) {
@@ -75,6 +79,10 @@ export class ScrollService {
     }
   }
 
+  ngOnDestroy() {
+    this.onDestroy.next();
+  }
+
   /**
    * Scroll to the element with id extracted from the current location hash fragment.
    * Scroll to top if no hash.

diff --git a/aio/src/app/shared/search-results/search-results.component.html b/aio/src/app/shared/search-results/search-results.component.html
@@ -26,5 +26,5 @@ <h3 class="search-section-header">{{area.name}} ({{area.pages.length + area.prio
 </ng-template>
 
 <ng-template #notFound>
-  <p>{{notFoundMessage}}</p>
+  <p class="not-found">{{notFoundMessage}}</p>
 </ng-template>
diff --git a/aio/src/styles/1-layouts/_not-found.scss b/aio/src/styles/1-layouts/_not-found.scss
@@ -1,7 +1,3 @@
-#file-not-found {
-    padding: 3rem 3rem 3rem;
-}
-
 .nf-container {
     align-items: center;
     padding: 32px;

diff --git a/aio/src/styles/2-modules/_search-results.scss b/aio/src/styles/2-modules/_search-results.scss
@@ -1,14 +1,12 @@
 aio-search-results {
-    z-index: 10;
-}
+  z-index: 10;
 
-.search-results {
+  .search-results {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     overflow: auto;
     padding: 68px 32px 0;
-    color: $offwhite;
     width: auto;
     max-height: 95vh;
     position: fixed;
@@ -20,81 +18,91 @@ aio-search-results {
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
     box-sizing: border-box;
 
-    @media (max-width: 480px) {
-        display: block;
-        .search-area {
-            display: block;
-            margin: 16px 16px;
-        }
-    }
-}
+    .search-area {
+      margin: 16px;
+      height: 100%;
 
-aio-search-results.embedded .search-results {
-    padding: 0;
-    color: inherit;
-    width: auto;
-    max-height: 100%;
-    position: relative;
-    background-color: inherit;
-    box-shadow: none;
-    box-sizing: border-box;
-
-    .search-area a {
-        color: lighten($darkgray, 10);
-        &:hover {
-            color: $accentblue;
-        }
-    }
-}
-
-.search-area {
-    display: flex;
-    flex-direction: column;
-    margin: 16px 16px;
-    height: 100%;
-
-    .search-section-header {
+      .search-section-header {
         @include font-size(16);
         font-weight: 400;
         margin: 10px 0px 5px;
         text-transform: uppercase;
         color: $white;
-    }
+      }
 
-    ul {
+      ul {
         margin: 0;
         padding: 0;
 
         li {
-            list-style: none;
+          list-style: none;
         }
-    }
 
-    a {
-        @include font-size(14);
-        color: $lightgray;
-        text-decoration: none;
-        font-weight: normal;
-        &:hover {
+        .search-result-item {
+          @include font-size(14);
+          color: $lightgray;
+          font-weight: normal;
+
+          &a {
+            text-decoration: none;
+          }
+
+          &:hover {
             color: $white;
-        }
-        &:visited {
-          text-decoration: none;
-        }
+          }
 
-        span.symbol {
-          margin-right: 8px;
+          .symbol {
+            margin-right: 8px;
+          }
         }
-    }
 
-    .priority-pages {
-        padding: 0.5rem 0;
-        a {
+        &.priority-pages {
+          padding: 0.5rem 0;
+
+          .search-result-item {
             font-weight: bold;
+          }
         }
+      }
+    }
+
+    .not-found {
+      color: $white;
+      text-align: center;
+      margin: 16px;
+    }
+
+    @media (max-width: 600px) {
+      display: block;
     }
+  }
+
+  &.embedded {
+    .search-results {
+      padding: 0;
+      color: inherit;
+      max-height: 100%;
+      position: relative;
+      background-color: inherit;
+      box-shadow: none;
+
+      .search-area {
+        .search-section-header {
+          color: $darkgray;
+        }
+
+        .search-result-item {
+          color: lighten($darkgray, 10);
+
+          &:hover {
+            color: $accentblue;
+          }
+        }
+      }
 
-    @include bp(tiny) {
-        display: block;
+      .not-found {
+        color: $darkgray;
+      }
     }
+  }
 }