From 71a8ed05d17e30b973d2dc3100cf28d7b9ff6ade Mon Sep 17 00:00:00 2001
From: Lotte Hofstede <lotte_hofstede@hotmail.com>
Date: Fri, 24 Nov 2017 10:45:50 +0100
Subject: [PATCH 01/23] 46063: object list truncation start

---
 package.json                                  |  1 +
 .../search-results.component.html             |  2 +-
 ...-search-result-list-element.component.html |  4 ++-
 ...em-search-result-list-element.component.ts |  7 ++--
 .../search-form/search-form.component.ts      |  1 -
 src/app/shared/shared.module.ts               |  8 +++--
 .../truncatable/truncatable.component.html    |  1 +
 .../truncatable/truncatable.component.ts      | 26 +++++++++++++++
 src/app/shared/utils/shave.directive.ts       | 33 +++++++++++++++++++
 src/app/typings.d.ts                          | 10 ++++++
 yarn.lock                                     |  4 +++
 11 files changed, 90 insertions(+), 7 deletions(-)
 create mode 100644 src/app/shared/truncatable/truncatable.component.html
 create mode 100644 src/app/shared/truncatable/truncatable.component.ts
 create mode 100644 src/app/shared/utils/shave.directive.ts

diff --git a/package.json b/package.json
index 2f74dd6cb8..84060e61a2 100644
--- a/package.json
+++ b/package.json
@@ -105,6 +105,7 @@
     "pem": "1.12.3",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.4.3",
+    "shave": "^2.1.3",
     "ts-md5": "1.2.2",
     "webfontloader": "1.6.28",
     "zone.js": "0.8.18"
diff --git a/src/app/+search-page/search-results/search-results.component.html b/src/app/+search-page/search-results/search-results.component.html
index 70e315671b..e4fceb75d0 100644
--- a/src/app/+search-page/search-results/search-results.component.html
+++ b/src/app/+search-page/search-results/search-results.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="searchResults?.hasSucceeded" @fadeIn>
+<div *ngIf="searchResults?.hasSucceeded && !searchResults?.isLoading" @fadeIn>
   <h2 *ngIf="searchResults?.payload ?.length > 0">{{ 'search.results.head' | translate }}</h2>
 <ds-object-list
   [config]="searchConfig.pagination"
diff --git a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
index 27b40eeeeb..48698b6b40 100644
--- a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
+++ b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
@@ -8,5 +8,7 @@
     </span>
     (<span *ngIf="dso.findMetadata('dc.publisher')" class="item-list-publisher" [innerHTML]="getFirstValue('dc.publisher')">, </span><span *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date" [innerHTML]="getFirstValue('dc.date.issued')"></span>)
   </span>
-    <div *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract" [innerHTML]="getFirstValue('dc.description.abstract') | dsTruncate:[200]"></div>
+    <div *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract">
+        <ds-truncatable [lines]="lines" [innerHTML]="getFirstValue('dc.description.abstract')" ></ds-truncatable>
+    </div>
 </div>
diff --git a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts
index ef968db0b8..0d4ccff129 100644
--- a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts
+++ b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts
@@ -4,12 +4,15 @@ import { listElementFor } from '../../list-element-decorator';
 import { ItemSearchResult } from './item-search-result.model';
 import { SearchResultListElementComponent } from '../search-result-list-element.component';
 import { Item } from '../../../core/shared/item.model';
+import { Observable } from 'rxjs/Observable';
 
 @Component({
   selector: 'ds-item-search-result-list-element',
   styleUrls: ['../search-result-list-element.component.scss', 'item-search-result-list-element.component.scss'],
-  templateUrl: 'item-search-result-list-element.component.html'
+  templateUrl: 'item-search-result-list-element.component.html',
 })
 
 @listElementFor(ItemSearchResult)
-export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> {}
+export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> {
+  lines = Observable.of(3);
+}
diff --git a/src/app/shared/search-form/search-form.component.ts b/src/app/shared/search-form/search-form.component.ts
index 76b33a8fd6..fb3c6ba5a2 100644
--- a/src/app/shared/search-form/search-form.component.ts
+++ b/src/app/shared/search-form/search-form.component.ts
@@ -2,7 +2,6 @@ import { Component, Input } from '@angular/core';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { Router } from '@angular/router';
 import { isNotEmpty, hasValue, isEmpty } from '../empty.util';
-import { Observable } from 'rxjs/Observable';
 
 /**
  * This component renders a simple item page.
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 245d45ea4e..9710a4f2d1 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -31,6 +31,8 @@ import { SearchFormComponent } from './search-form/search-form.component';
 import { WrapperListElementComponent } from '../object-list/wrapper-list-element/wrapper-list-element.component';
 import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component';
 import { VarDirective } from './utils/var.directive';
+import { TruncatableComponent } from './truncatable/truncatable.component';
+import { ShaveDirective } from './utils/shave.directive';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -64,7 +66,8 @@ const COMPONENTS = [
   SearchFormComponent,
   ThumbnailComponent,
   WrapperListElementComponent,
-  ViewModeSwitchComponent
+  ViewModeSwitchComponent,
+  TruncatableComponent
 ];
 
 const ENTRY_COMPONENTS = [
@@ -76,7 +79,8 @@ const ENTRY_COMPONENTS = [
 ];
 
 const DIRECTIVES = [
-  VarDirective
+  VarDirective,
+  ShaveDirective
 ];
 
 @NgModule({
diff --git a/src/app/shared/truncatable/truncatable.component.html b/src/app/shared/truncatable/truncatable.component.html
new file mode 100644
index 0000000000..1a778d1ea6
--- /dev/null
+++ b/src/app/shared/truncatable/truncatable.component.html
@@ -0,0 +1 @@
+<span dsShave [shave]="{character: '...'}" [shaveHeight]="height | async" [innerHTML]="innerHTML"></span>
\ No newline at end of file
diff --git a/src/app/shared/truncatable/truncatable.component.ts b/src/app/shared/truncatable/truncatable.component.ts
new file mode 100644
index 0000000000..cec9c287ac
--- /dev/null
+++ b/src/app/shared/truncatable/truncatable.component.ts
@@ -0,0 +1,26 @@
+
+import {
+  AfterViewChecked,
+  AfterViewInit, Component, ElementRef, Inject, Input,
+  OnInit
+} from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { NativeWindowRef, NativeWindowService } from '../window.service';
+
+@Component({
+  selector: 'ds-truncatable',
+  templateUrl: './truncatable.component.html'
+})
+export class TruncatableComponent implements AfterViewChecked {
+
+  @Input() lines: Observable<number>;
+  @Input() innerHTML;
+  @Input() height: Observable<number>;
+  public constructor(private elementRef:ElementRef, @Inject(NativeWindowService) private _window: NativeWindowRef) { }
+
+  ngAfterViewChecked(): void {
+    const lineHeight = this._window.nativeWindow.getComputedStyle(this.elementRef.nativeElement).lineHeight.replace('px', '');
+    this.height = this.lines.map((lines) => (lines * lineHeight)).startWith(0);
+    this.height.subscribe((h) => console.log('height: ', h));
+  }
+}
diff --git a/src/app/shared/utils/shave.directive.ts b/src/app/shared/utils/shave.directive.ts
new file mode 100644
index 0000000000..7a8403aef0
--- /dev/null
+++ b/src/app/shared/utils/shave.directive.ts
@@ -0,0 +1,33 @@
+import { Directive, ElementRef, Inject, Input, OnDestroy } from '@angular/core';
+import { default as shave } from 'shave';
+import { NativeWindowRef, NativeWindowService } from '../window.service';
+import { Observable } from 'rxjs/Observable';
+
+@Directive({
+  selector: '[dsShave]'
+})
+export class ShaveDirective implements OnDestroy {
+  @Input() shave: IShaveOptions = {};
+  @Input() shaveHeight: 100;
+  private sub;
+
+  constructor(private ele: ElementRef, @Inject(NativeWindowService) private _window: NativeWindowRef) {
+    this.subscribeForResizeEvent();
+  }
+
+  subscribeForResizeEvent() {
+    const obs = Observable.fromEvent(this._window.nativeWindow, 'resize');
+    this.sub = obs.subscribe((e) => this.runShave());
+  }
+
+  private runShave() {
+    shave(this.ele.nativeElement, this.shaveHeight, this.shave);
+  }
+
+  ngOnDestroy(): void {
+    if (this.sub) {
+      this.sub.unsubscribe();
+    }
+  }
+
+}
diff --git a/src/app/typings.d.ts b/src/app/typings.d.ts
index f3b4a1a548..c256b0f09d 100644
--- a/src/app/typings.d.ts
+++ b/src/app/typings.d.ts
@@ -82,3 +82,13 @@ declare module '*.json' {
 }
 
 declare module 'reflect-metadata';
+
+interface IShaveOptions {
+  classname?: string,
+  character?: string
+}
+
+declare module 'shave' {
+  export default function shave(selector: string | Node, maxHeight: number, options?: IShaveOptions): void;
+
+}
diff --git a/yarn.lock b/yarn.lock
index 91b2a787e2..6088cf16f8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6647,6 +6647,10 @@ shallow-clone@^0.1.2:
     lazy-cache "^0.2.3"
     mixin-object "^2.0.1"
 
+shave@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/shave/-/shave-2.1.3.tgz#89c7df997d35a95bc31703c9150161bc98d3fa3b"
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"

From d7c2b09697e682bef8f731482a91214bfb0d1949 Mon Sep 17 00:00:00 2001
From: Lotte Hofstede <lotte_hofstede@hotmail.com>
Date: Mon, 18 Dec 2017 13:57:01 +0100
Subject: [PATCH 02/23] print commit

---
 .../shared/truncatable/truncatable.component.html    |  3 ++-
 src/app/shared/truncatable/truncatable.component.ts  | 12 +++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/app/shared/truncatable/truncatable.component.html b/src/app/shared/truncatable/truncatable.component.html
index 1a778d1ea6..7b5c540a50 100644
--- a/src/app/shared/truncatable/truncatable.component.html
+++ b/src/app/shared/truncatable/truncatable.component.html
@@ -1 +1,2 @@
-<span dsShave [shave]="{character: '...'}" [shaveHeight]="height | async" [innerHTML]="innerHTML"></span>
\ No newline at end of file
+<span dsShave [shave]="{character: '...'}" [shaveHeight]="styles.toString()" [innerHTML]="innerHTML"></span>
+{{print(styles)}}
\ No newline at end of file
diff --git a/src/app/shared/truncatable/truncatable.component.ts b/src/app/shared/truncatable/truncatable.component.ts
index cec9c287ac..ab4ca21b71 100644
--- a/src/app/shared/truncatable/truncatable.component.ts
+++ b/src/app/shared/truncatable/truncatable.component.ts
@@ -11,16 +11,22 @@ import { NativeWindowRef, NativeWindowService } from '../window.service';
   selector: 'ds-truncatable',
   templateUrl: './truncatable.component.html'
 })
-export class TruncatableComponent implements AfterViewChecked {
+export class TruncatableComponent implements OnInit {
 
   @Input() lines: Observable<number>;
   @Input() innerHTML;
   @Input() height: Observable<number>;
+  styles: any;
   public constructor(private elementRef:ElementRef, @Inject(NativeWindowService) private _window: NativeWindowRef) { }
 
-  ngAfterViewChecked(): void {
+  ngOnInit(): void {
     const lineHeight = this._window.nativeWindow.getComputedStyle(this.elementRef.nativeElement).lineHeight.replace('px', '');
+    this.styles =  this._window.nativeWindow.getComputedStyle(this.elementRef.nativeElement);
     this.height = this.lines.map((lines) => (lines * lineHeight)).startWith(0);
-    this.height.subscribe((h) => console.log('height: ', h));
+    this.print(this.styles);
+  }
+
+  print(styles) {
+    console.log(styles);
   }
 }

From 970b1f6b742e47078e414b52318e60c4009bfe6e Mon Sep 17 00:00:00 2001
From: Lotte Hofstede <lotte_hofstede@hotmail.com>
Date: Tue, 19 Dec 2017 11:54:20 +0100
Subject: [PATCH 03/23] 47063: truncation option with shave library

---
 src/app/app.module.ts                         |  2 +-
 .../item-list-element.component.html          |  3 +-
 .../item-list-element.component.ts            |  4 ++-
 ...em-search-result-list-element.component.ts |  3 +-
 .../truncatable/truncatable.component.html    |  3 +-
 .../truncatable/truncatable.component.ts      | 26 +++++++---------
 src/app/shared/utils/shave.directive.ts       | 30 +++++++++++++++++--
 7 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ef1e098f02..7ae394be32 100755
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -38,7 +38,7 @@ export function getBase() {
 }
 
 export function getMetaReducers(config: GlobalConfig): Array<MetaReducer<AppState>> {
-  const metaReducers: Array<MetaReducer<AppState>> = config.production ? appMetaReducers : [...appMetaReducers, storeFreeze];
+  const metaReducers: Array<MetaReducer<AppState>> = config.production ? appMetaReducers : [...appMetaReducers];
   return config.debug ? [...metaReducers, ...debugMetaReducers] : metaReducers;
 }
 
diff --git a/src/app/object-list/item-list-element/item-list-element.component.html b/src/app/object-list/item-list-element/item-list-element.component.html
index cc24ba76b8..ef5cf8aec4 100644
--- a/src/app/object-list/item-list-element/item-list-element.component.html
+++ b/src/app/object-list/item-list-element/item-list-element.component.html
@@ -10,5 +10,6 @@
     </span>
     (<span *ngIf="object.findMetadata('dc.publisher')" class="item-list-publisher">{{object.findMetadata("dc.publisher")}}, </span><span *ngIf="object.findMetadata('dc.date.issued')" class="item-list-date">{{object.findMetadata("dc.date.issued")}}</span>)
   </span>
-  <div *ngIf="object.findMetadata('dc.description.abstract')" class="item-list-abstract">{{object.findMetadata("dc.description.abstract") | dsTruncate:[200] }}</div>
+  <div *ngIf="object.findMetadata('dc.description.abstract')" class="item-list-abstract">
+      <ds-truncatable [lines]="lines" [innerHTML]="object.findMetadata('dc.description.abstract')"></ds-truncatable></div>
 </div>
diff --git a/src/app/object-list/item-list-element/item-list-element.component.ts b/src/app/object-list/item-list-element/item-list-element.component.ts
index cc6c837bb7..b3eff81a47 100644
--- a/src/app/object-list/item-list-element/item-list-element.component.ts
+++ b/src/app/object-list/item-list-element/item-list-element.component.ts
@@ -11,4 +11,6 @@ import { listElementFor } from '../list-element-decorator';
 })
 
 @listElementFor(Item)
-export class ItemListElementComponent extends ObjectListElementComponent<Item> {}
+export class ItemListElementComponent extends ObjectListElementComponent<Item> {
+  private lines = 3;
+}
diff --git a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts
index 0d4ccff129..79af7a82c9 100644
--- a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts
+++ b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts
@@ -4,7 +4,6 @@ import { listElementFor } from '../../list-element-decorator';
 import { ItemSearchResult } from './item-search-result.model';
 import { SearchResultListElementComponent } from '../search-result-list-element.component';
 import { Item } from '../../../core/shared/item.model';
-import { Observable } from 'rxjs/Observable';
 
 @Component({
   selector: 'ds-item-search-result-list-element',
@@ -14,5 +13,5 @@ import { Observable } from 'rxjs/Observable';
 
 @listElementFor(ItemSearchResult)
 export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> {
-  lines = Observable.of(3);
+  lines = 3;
 }
diff --git a/src/app/shared/truncatable/truncatable.component.html b/src/app/shared/truncatable/truncatable.component.html
index 7b5c540a50..aa070c834b 100644
--- a/src/app/shared/truncatable/truncatable.component.html
+++ b/src/app/shared/truncatable/truncatable.component.html
@@ -1,2 +1 @@
-<span dsShave [shave]="{character: '...'}" [shaveHeight]="styles.toString()" [innerHTML]="innerHTML"></span>
-{{print(styles)}}
\ No newline at end of file
+<span dsShave [shave]="{character: '...'}" [shaveHeight]="height" [innerHTML]="innerHTML"></span>
\ No newline at end of file
diff --git a/src/app/shared/truncatable/truncatable.component.ts b/src/app/shared/truncatable/truncatable.component.ts
index ab4ca21b71..ddece47fd9 100644
--- a/src/app/shared/truncatable/truncatable.component.ts
+++ b/src/app/shared/truncatable/truncatable.component.ts
@@ -1,10 +1,7 @@
-
 import {
-  AfterViewChecked,
-  AfterViewInit, Component, ElementRef, Inject, Input,
+  ChangeDetectorRef, Component, ElementRef, Inject, Input,
   OnInit
 } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
 import { NativeWindowRef, NativeWindowService } from '../window.service';
 
 @Component({
@@ -13,20 +10,19 @@ import { NativeWindowRef, NativeWindowService } from '../window.service';
 })
 export class TruncatableComponent implements OnInit {
 
-  @Input() lines: Observable<number>;
+  @Input() lines: number;
   @Input() innerHTML;
-  @Input() height: Observable<number>;
+  height;
   styles: any;
-  public constructor(private elementRef:ElementRef, @Inject(NativeWindowService) private _window: NativeWindowRef) { }
+
+  public constructor(private elementRef: ElementRef, @Inject(NativeWindowService) private _window: NativeWindowRef, private changeDetectorRef: ChangeDetectorRef) {
+  }
 
   ngOnInit(): void {
-    const lineHeight = this._window.nativeWindow.getComputedStyle(this.elementRef.nativeElement).lineHeight.replace('px', '');
-    this.styles =  this._window.nativeWindow.getComputedStyle(this.elementRef.nativeElement);
-    this.height = this.lines.map((lines) => (lines * lineHeight)).startWith(0);
-    this.print(this.styles);
-  }
-
-  print(styles) {
-    console.log(styles);
+    this.styles = this._window.nativeWindow.getComputedStyle(this.elementRef.nativeElement);
+    setTimeout(() => {
+      this.height = this.styles.lineHeight.replace('px', '') * this.lines;
+      this.changeDetectorRef.detectChanges();
+    }, 0);
   }
 }
diff --git a/src/app/shared/utils/shave.directive.ts b/src/app/shared/utils/shave.directive.ts
index 7a8403aef0..0622b8bb0c 100644
--- a/src/app/shared/utils/shave.directive.ts
+++ b/src/app/shared/utils/shave.directive.ts
@@ -1,4 +1,7 @@
-import { Directive, ElementRef, Inject, Input, OnDestroy } from '@angular/core';
+import {
+  Directive, ElementRef, Inject, Input, OnChanges, OnDestroy,
+  OnInit
+} from '@angular/core';
 import { default as shave } from 'shave';
 import { NativeWindowRef, NativeWindowService } from '../window.service';
 import { Observable } from 'rxjs/Observable';
@@ -6,12 +9,33 @@ import { Observable } from 'rxjs/Observable';
 @Directive({
   selector: '[dsShave]'
 })
-export class ShaveDirective implements OnDestroy {
+export class ShaveDirective implements OnDestroy, OnChanges {
+
   @Input() shave: IShaveOptions = {};
-  @Input() shaveHeight: 100;
+
+  @Input()
+  set shaveHeight(value) {
+    if (value > 0) {
+      console.log(value);
+      this._shaveHeight = value;
+    }
+  };
+
+  get shaveHeight() {
+    return this._shaveHeight;
+  }
+
+  private _shaveHeight = 72;
   private sub;
 
   constructor(private ele: ElementRef, @Inject(NativeWindowService) private _window: NativeWindowRef) {
+  }
+
+  ngOnChanges(): void {
+    console.log("onchange");
+    if (this.shaveHeight > 0) {
+      this.runShave();
+    }
     this.subscribeForResizeEvent();
   }
 

From eb2143d0a1b3585e318a4dd9ef513fce0b71bd21 Mon Sep 17 00:00:00 2001
From: Lotte Hofstede <lotte_hofstede@hotmail.com>
Date: Wed, 20 Dec 2017 08:55:45 +0100
Subject: [PATCH 04/23] 46063: overflow-text-clamp wrapper attempt

---
 package.json                                  |  1 +
 src/app/app.component.scss                    |  1 +
 ...-search-result-list-element.component.html |  6 ++---
 ...em-search-result-list-element.component.ts | 16 +++++++++--
 src/app/shared/shared.module.ts               |  5 +++-
 src/app/shared/utils/clamp-directive.ts       | 20 ++++++++++++++
 src/app/shared/utils/shave.directive.ts       |  1 -
 yarn.lock                                     | 27 +++++++++++++++++++
 8 files changed, 70 insertions(+), 7 deletions(-)
 create mode 100644 src/app/shared/utils/clamp-directive.ts

diff --git a/package.json b/package.json
index 84060e61a2..74bb10bfed 100644
--- a/package.json
+++ b/package.json
@@ -106,6 +106,7 @@
     "reflect-metadata": "0.1.10",
     "rxjs": "5.4.3",
     "shave": "^2.1.3",
+    "text-overflow-clamp": "^1.0.0",
     "ts-md5": "1.2.2",
     "webfontloader": "1.6.28",
     "zone.js": "0.8.18"
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 01c72ecef2..00a3e56121 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -23,6 +23,7 @@ body {
   display: flex;
   min-height: 100vh;
   flex-direction: column;
+  width: 100%;
 }
 
 .main-content {
diff --git a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
index 48698b6b40..bce61e9036 100644
--- a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
+++ b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
@@ -8,7 +8,7 @@
     </span>
     (<span *ngIf="dso.findMetadata('dc.publisher')" class="item-list-publisher" [innerHTML]="getFirstValue('dc.publisher')">, </span><span *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date" [innerHTML]="getFirstValue('dc.date.issued')"></span>)
   </span>
-    <div *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract">
-        <ds-truncatable [lines]="lines" [innerHTML]="getFirstValue('dc.description.abstract')" ></ds-truncatable>
+    <div  width="100%" *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract">
+        <span [dsClamp]="lines" [innerHTML]="getFirstValue('dc.description.abstract')" ></span>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts
index 79af7a82c9..82d31ca33c 100644
--- a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts
+++ b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts
@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
 
 import { listElementFor } from '../../list-element-decorator';
 import { ItemSearchResult } from './item-search-result.model';
 import { SearchResultListElementComponent } from '../search-result-list-element.component';
 import { Item } from '../../../core/shared/item.model';
+import { ListableObject } from '../../listable-object/listable-object.model';
 
 @Component({
   selector: 'ds-item-search-result-list-element',
@@ -12,6 +13,17 @@ import { Item } from '../../../core/shared/item.model';
 })
 
 @listElementFor(ItemSearchResult)
-export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> {
+export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> implements OnInit {
   lines = 3;
+
+  constructor(@Inject('objectElementProvider') public listable: ListableObject, private changeDetectorRef: ChangeDetectorRef) {
+    super(listable);
+  }
+
+  ngOnInit() {
+    setTimeout(() => {
+      this.lines = 4;
+      this.changeDetectorRef.detectChanges();
+    }, 0);
+  }
 }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 9710a4f2d1..16a7009ae6 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -33,6 +33,8 @@ import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.com
 import { VarDirective } from './utils/var.directive';
 import { TruncatableComponent } from './truncatable/truncatable.component';
 import { ShaveDirective } from './utils/shave.directive';
+import { TextOverflowClampDirective } from './utils/clamp-directive';
+
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -80,7 +82,8 @@ const ENTRY_COMPONENTS = [
 
 const DIRECTIVES = [
   VarDirective,
-  ShaveDirective
+  ShaveDirective,
+  TextOverflowClampDirective
 ];
 
 @NgModule({
diff --git a/src/app/shared/utils/clamp-directive.ts b/src/app/shared/utils/clamp-directive.ts
new file mode 100644
index 0000000000..0cac019dcb
--- /dev/null
+++ b/src/app/shared/utils/clamp-directive.ts
@@ -0,0 +1,20 @@
+import {
+  Directive,
+  ElementRef,
+  Input,
+  OnChanges
+} from '@angular/core';
+
+import * as clampLib from 'text-overflow-clamp';
+
+@Directive({selector: '[dsClamp]'})
+export class TextOverflowClampDirective implements OnChanges {
+    @Input('dsClamp') lines: number;
+
+    constructor(private el: ElementRef) {
+    }
+
+    ngOnChanges(): void {
+        clampLib(this.el.nativeElement, this.lines);
+    }
+}
diff --git a/src/app/shared/utils/shave.directive.ts b/src/app/shared/utils/shave.directive.ts
index 0622b8bb0c..df37a9a8c5 100644
--- a/src/app/shared/utils/shave.directive.ts
+++ b/src/app/shared/utils/shave.directive.ts
@@ -32,7 +32,6 @@ export class ShaveDirective implements OnDestroy, OnChanges {
   }
 
   ngOnChanges(): void {
-    console.log("onchange");
     if (this.shaveHeight > 0) {
       this.runShave();
     }
diff --git a/yarn.lock b/yarn.lock
index 6088cf16f8..53cd4a6b72 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1942,6 +1942,10 @@ dom-serializer@0:
     domelementtype "~1.1.1"
     entities "~1.1.1"
 
+dom-walk@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
+
 domain-browser@^1.1.1:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
@@ -2791,6 +2795,13 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.0.6, glob@^7.1.1, glob@^7.1.2, gl
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+global@^4.3.1:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f"
+  dependencies:
+    min-document "^2.19.0"
+    process "~0.5.1"
+
 globals@^9.18.0:
   version "9.18.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
@@ -4432,6 +4443,12 @@ mimic-fn@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
 
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  dependencies:
+    dom-walk "^0.1.0"
+
 minimalistic-assert@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
@@ -5781,6 +5798,10 @@ process@^0.11.0:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
 
+process@~0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf"
+
 progress@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f"
@@ -7144,6 +7165,12 @@ term-size@^1.2.0:
   dependencies:
     execa "^0.7.0"
 
+text-overflow-clamp@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/text-overflow-clamp/-/text-overflow-clamp-1.0.0.tgz#9327faec1b85bf0b293d8c8df32243cbee5c050e"
+  dependencies:
+    global "^4.3.1"
+
 throttleit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"

From f38164911267c862cb2ee4c0a3603d901b51cb73 Mon Sep 17 00:00:00 2001
From: Lotte Hofstede <lotte_hofstede@hotmail.com>
Date: Wed, 20 Dec 2017 12:38:59 +0100
Subject: [PATCH 05/23] 46063: css attempt to fix multiline clamping

---
 .../search-service/search.service.ts          |  2 +-
 src/app/app.component.scss                    |  5 ++++
 .../item-list-element.component.html          | 11 +++++---
 ...-search-result-list-element.component.html |  4 +--
 ...-search-result-list-element.component.scss |  3 +-
 src/app/shared/shared.module.ts               |  6 +---
 .../truncatable/truncatable.component.html    |  1 -
 .../truncatable/truncatable.component.ts      | 28 -------------------
 src/app/shared/utils/clamp-directive.ts       | 20 -------------
 src/styles/_custom_variables.scss             |  2 +-
 src/styles/_mixins.scss                       | 24 +++++++++++++++-
 11 files changed, 42 insertions(+), 64 deletions(-)
 delete mode 100644 src/app/shared/truncatable/truncatable.component.html
 delete mode 100644 src/app/shared/truncatable/truncatable.component.ts
 delete mode 100644 src/app/shared/utils/clamp-directive.ts

diff --git a/src/app/+search-page/search-service/search.service.ts b/src/app/+search-page/search-service/search.service.ts
index 4b5ba7b702..77327ee219 100644
--- a/src/app/+search-page/search-service/search.service.ts
+++ b/src/app/+search-page/search-service/search.service.ts
@@ -39,7 +39,7 @@ export class SearchService implements OnDestroy {
   totalPages = 5;
   mockedHighlights: string[] = new Array(
     'This is a <em>sample abstract</em>.',
-    'This is a sample abstract. But, to fill up some space, here\'s <em>"Hello"</em> in several different languages : ',
+    'This is a sample abstractabstractabstractabstractabstractabstractabstractabstract. But, to fill up some space, here\'s <em>"Hello"</em> in several different languages : ',
     'This is a Sample HTML webpage including several <em>images</em> and styles (CSS).',
     'This is <em>really</em> just a sample abstract. But, Í’vé thrown ïn a cõuple of spëciâl charactèrs för êxtrå fuñ!',
     'This abstract is <em>really quite great</em>',
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 00a3e56121..29be537891 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,4 +1,5 @@
 @import '../styles/variables.scss';
+@import '../styles/mixins.scss';
 @import '../../node_modules/bootstrap/scss/bootstrap.scss';
 @import "../../node_modules/font-awesome/scss/font-awesome.scss";
 
@@ -31,3 +32,7 @@ body {
   margin-top: $content-spacing;
   margin-bottom: $content-spacing;
 }
+
+.clamp-3 {
+  @include clamp(3);
+}
\ No newline at end of file
diff --git a/src/app/object-list/item-list-element/item-list-element.component.html b/src/app/object-list/item-list-element/item-list-element.component.html
index ef5cf8aec4..1e88cc4889 100644
--- a/src/app/object-list/item-list-element/item-list-element.component.html
+++ b/src/app/object-list/item-list-element/item-list-element.component.html
@@ -3,13 +3,16 @@
 </a>
 <div>
   <span class="text-muted">
-    <span *ngIf="object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);" class="item-list-authors">
+    <span *ngIf="object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);"
+          class="item-list-authors">
         <span *ngFor="let authorMd of object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let last=last;">{{authorMd.value}}
             <span *ngIf="!last">; </span>
         </span>
     </span>
-    (<span *ngIf="object.findMetadata('dc.publisher')" class="item-list-publisher">{{object.findMetadata("dc.publisher")}}, </span><span *ngIf="object.findMetadata('dc.date.issued')" class="item-list-date">{{object.findMetadata("dc.date.issued")}}</span>)
+    (<span *ngIf="object.findMetadata('dc.publisher')" class="item-list-publisher">{{object.findMetadata("dc.publisher")}}, </span><span
+          *ngIf="object.findMetadata('dc.date.issued')" class="item-list-date">{{object.findMetadata("dc.date.issued")}}</span>)
   </span>
-  <div *ngIf="object.findMetadata('dc.description.abstract')" class="item-list-abstract">
-      <ds-truncatable [lines]="lines" [innerHTML]="object.findMetadata('dc.description.abstract')"></ds-truncatable></div>
+    <div *ngIf="item.findMetadata('dc.description.abstract')" class="item-list-abstract">
+        {{item.findMetadata("dc.description.abstract") | dsTruncate:[200] }}
+    </div>
 </div>
diff --git a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
index bce61e9036..b1af777bcb 100644
--- a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
+++ b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
@@ -8,7 +8,7 @@
     </span>
     (<span *ngIf="dso.findMetadata('dc.publisher')" class="item-list-publisher" [innerHTML]="getFirstValue('dc.publisher')">, </span><span *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date" [innerHTML]="getFirstValue('dc.date.issued')"></span>)
   </span>
-    <div  width="100%" *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract">
-        <span [dsClamp]="lines" [innerHTML]="getFirstValue('dc.description.abstract')" ></span>
+    <div *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract">
+        <div class="clamp-3" [innerHTML]="getFirstValue('dc.description.abstract')"></div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss
index 88eb98509a..5a1e457327 100644
--- a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss
+++ b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss
@@ -1 +1,2 @@
-@import '../../../../styles/variables.scss';
\ No newline at end of file
+@import '../../../../styles/variables.scss';
+
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 16a7009ae6..89df25a38e 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -31,9 +31,7 @@ import { SearchFormComponent } from './search-form/search-form.component';
 import { WrapperListElementComponent } from '../object-list/wrapper-list-element/wrapper-list-element.component';
 import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component';
 import { VarDirective } from './utils/var.directive';
-import { TruncatableComponent } from './truncatable/truncatable.component';
 import { ShaveDirective } from './utils/shave.directive';
-import { TextOverflowClampDirective } from './utils/clamp-directive';
 
 
 const MODULES = [
@@ -69,7 +67,6 @@ const COMPONENTS = [
   ThumbnailComponent,
   WrapperListElementComponent,
   ViewModeSwitchComponent,
-  TruncatableComponent
 ];
 
 const ENTRY_COMPONENTS = [
@@ -82,8 +79,7 @@ const ENTRY_COMPONENTS = [
 
 const DIRECTIVES = [
   VarDirective,
-  ShaveDirective,
-  TextOverflowClampDirective
+  ShaveDirective
 ];
 
 @NgModule({
diff --git a/src/app/shared/truncatable/truncatable.component.html b/src/app/shared/truncatable/truncatable.component.html
deleted file mode 100644
index aa070c834b..0000000000
--- a/src/app/shared/truncatable/truncatable.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<span dsShave [shave]="{character: '...'}" [shaveHeight]="height" [innerHTML]="innerHTML"></span>
\ No newline at end of file
diff --git a/src/app/shared/truncatable/truncatable.component.ts b/src/app/shared/truncatable/truncatable.component.ts
deleted file mode 100644
index ddece47fd9..0000000000
--- a/src/app/shared/truncatable/truncatable.component.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import {
-  ChangeDetectorRef, Component, ElementRef, Inject, Input,
-  OnInit
-} from '@angular/core';
-import { NativeWindowRef, NativeWindowService } from '../window.service';
-
-@Component({
-  selector: 'ds-truncatable',
-  templateUrl: './truncatable.component.html'
-})
-export class TruncatableComponent implements OnInit {
-
-  @Input() lines: number;
-  @Input() innerHTML;
-  height;
-  styles: any;
-
-  public constructor(private elementRef: ElementRef, @Inject(NativeWindowService) private _window: NativeWindowRef, private changeDetectorRef: ChangeDetectorRef) {
-  }
-
-  ngOnInit(): void {
-    this.styles = this._window.nativeWindow.getComputedStyle(this.elementRef.nativeElement);
-    setTimeout(() => {
-      this.height = this.styles.lineHeight.replace('px', '') * this.lines;
-      this.changeDetectorRef.detectChanges();
-    }, 0);
-  }
-}
diff --git a/src/app/shared/utils/clamp-directive.ts b/src/app/shared/utils/clamp-directive.ts
deleted file mode 100644
index 0cac019dcb..0000000000
--- a/src/app/shared/utils/clamp-directive.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  Input,
-  OnChanges
-} from '@angular/core';
-
-import * as clampLib from 'text-overflow-clamp';
-
-@Directive({selector: '[dsClamp]'})
-export class TextOverflowClampDirective implements OnChanges {
-    @Input('dsClamp') lines: number;
-
-    constructor(private el: ElementRef) {
-    }
-
-    ngOnChanges(): void {
-        clampLib(this.el.nativeElement, this.lines);
-    }
-}
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 12ebfd6618..f52a99f014 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -1,3 +1,3 @@
 $content-spacing: $spacer * 1.5;
 
-$button-height: $input-btn-padding-y * 2 + $input-btn-line-height + calculateRem($input-btn-border-width*2);
\ No newline at end of file
+$button-height: $input-btn-padding-y * 2 + $input-btn-line-height + calculateRem($input-btn-border-width*2);
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 73aa27eccc..6c773e34a3 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -1,4 +1,26 @@
 @import '../../node_modules/bootstrap/scss/functions.scss';
 @import '../../node_modules/bootstrap/scss/mixins.scss';
+@import '../../node_modules/bootstrap/scss/variables.scss';
 
-/* Custom mixins go here */
+@mixin clamp($lines) {
+    max-height: $lines * $line-height-base * $font-size-base;
+    position: relative;
+    overflow: hidden;
+    line-height: $line-height-base;
+    overflow-wrap: break-word;
+
+    &:after {
+        content: "...";
+        color: $link-color;
+        text-align: right;
+        position: absolute;
+        padding-right: 15px;
+        top: ($lines - 1) * $line-height-base * $font-size-base;
+        right: 0;
+        width: 30%;
+        min-width: 75px;
+        max-width: 150px;
+        height: $line-height-base * $font-size-base;
+        background: linear-gradient(to right, rgba(255, 255, 255, 0), $body-bg 50%);
+    }
+}
\ No newline at end of file

From 33e04fd324fd29aa22c2cc7873ef02710bbaa5f1 Mon Sep 17 00:00:00 2001
From: Lotte Hofstede <lotte_hofstede@hotmail.com>
Date: Tue, 23 Jan 2018 10:21:35 +0100
Subject: [PATCH 06/23] 46063: saved currect state

---
 package.json                                  |  2 -
 src/app/app.component.scss                    |  5 --
 src/app/app.reducer.ts                        |  5 +-
 src/app/core/cache/response-cache.service.ts  |  2 +-
 ...-search-result-list-element.component.html |  2 +-
 src/app/shared/shared.module.ts               | 17 ++++--
 .../shared/truncatable/truncatable.actions.ts | 29 ++++++++++
 .../truncatable/truncatable.component.html    |  1 +
 .../truncatable/truncatable.component.scss    | 41 ++++++++++++++
 .../truncatable/truncatable.component.ts      | 42 ++++++++++++++
 .../shared/truncatable/truncatable.reducer.ts | 31 ++++++++++
 .../shared/truncatable/truncatable.service.ts | 47 ++++++++++++++++
 src/app/shared/utils/shave.directive.ts       | 56 -------------------
 src/styles/_mixins.scss                       | 25 +--------
 yarn.lock                                     | 31 ----------
 15 files changed, 210 insertions(+), 126 deletions(-)
 create mode 100644 src/app/shared/truncatable/truncatable.actions.ts
 create mode 100644 src/app/shared/truncatable/truncatable.component.html
 create mode 100644 src/app/shared/truncatable/truncatable.component.scss
 create mode 100644 src/app/shared/truncatable/truncatable.component.ts
 create mode 100644 src/app/shared/truncatable/truncatable.reducer.ts
 create mode 100644 src/app/shared/truncatable/truncatable.service.ts
 delete mode 100644 src/app/shared/utils/shave.directive.ts

diff --git a/package.json b/package.json
index 74bb10bfed..2f74dd6cb8 100644
--- a/package.json
+++ b/package.json
@@ -105,8 +105,6 @@
     "pem": "1.12.3",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.4.3",
-    "shave": "^2.1.3",
-    "text-overflow-clamp": "^1.0.0",
     "ts-md5": "1.2.2",
     "webfontloader": "1.6.28",
     "zone.js": "0.8.18"
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 29be537891..00a3e56121 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,5 +1,4 @@
 @import '../styles/variables.scss';
-@import '../styles/mixins.scss';
 @import '../../node_modules/bootstrap/scss/bootstrap.scss';
 @import "../../node_modules/font-awesome/scss/font-awesome.scss";
 
@@ -32,7 +31,3 @@ body {
   margin-top: $content-spacing;
   margin-bottom: $content-spacing;
 }
-
-.clamp-3 {
-  @include clamp(3);
-}
\ No newline at end of file
diff --git a/src/app/app.reducer.ts b/src/app/app.reducer.ts
index 72b29519de..117710e3c0 100644
--- a/src/app/app.reducer.ts
+++ b/src/app/app.reducer.ts
@@ -11,6 +11,7 @@ import {
   filterReducer,
   SearchFiltersState
 } from './+search-page/search-filters/search-filter/search-filter.reducer';
+import { truncatableReducer, TruncatablesState } from './shared/truncatable/truncatable.reducer';
 
 export interface AppState {
   router: fromRouter.RouterReducerState;
@@ -18,6 +19,7 @@ export interface AppState {
   header: HeaderState;
   searchSidebar: SearchSidebarState;
   searchFilter: SearchFiltersState;
+  truncatable: TruncatablesState;
 }
 
 export const appReducers: ActionReducerMap<AppState> = {
@@ -25,5 +27,6 @@ export const appReducers: ActionReducerMap<AppState> = {
   hostWindow: hostWindowReducer,
   header: headerReducer,
   searchSidebar: sidebarReducer,
-  searchFilter: filterReducer
+  searchFilter: filterReducer,
+  truncatable: truncatableReducer
 };
diff --git a/src/app/core/cache/response-cache.service.ts b/src/app/core/cache/response-cache.service.ts
index d734940496..eac76c519e 100644
--- a/src/app/core/cache/response-cache.service.ts
+++ b/src/app/core/cache/response-cache.service.ts
@@ -4,7 +4,7 @@ import { MemoizedSelector, Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 
 import { ResponseCacheEntry } from './response-cache.reducer';
-import { hasNoValue, hasValue } from '../../shared/empty.util';
+import { hasNoValue } from '../../shared/empty.util';
 import { ResponseCacheRemoveAction, ResponseCacheAddAction } from './response-cache.actions';
 import { RestResponse } from './response-cache.models';
 import { CoreState } from '../core.reducers';
diff --git a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
index b1af777bcb..4e5d890b89 100644
--- a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
+++ b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
@@ -9,6 +9,6 @@
     (<span *ngIf="dso.findMetadata('dc.publisher')" class="item-list-publisher" [innerHTML]="getFirstValue('dc.publisher')">, </span><span *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date" [innerHTML]="getFirstValue('dc.date.issued')"></span>)
   </span>
     <div *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract">
-        <div class="clamp-3" [innerHTML]="getFirstValue('dc.description.abstract')"></div>
+        <ds-truncatable [id]="dso.id" [minLines]="3" [maxLines]="15" [content]="getFirstValue('dc.description.abstract')"></ds-truncatable>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 89df25a38e..0a20938f5d 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -12,7 +12,6 @@ import { NgxPaginationModule } from 'ngx-pagination';
 import { EnumKeysPipe } from './utils/enum-keys-pipe';
 import { FileSizePipe } from './utils/file-size-pipe';
 import { SafeUrlPipe } from './utils/safe-url-pipe';
-import { TruncatePipe } from './utils/truncate.pipe';
 
 import { CollectionListElementComponent } from '../object-list/collection-list-element/collection-list-element.component';
 import { ComcolPageContentComponent } from './comcol-page-content/comcol-page-content.component';
@@ -31,8 +30,9 @@ import { SearchFormComponent } from './search-form/search-form.component';
 import { WrapperListElementComponent } from '../object-list/wrapper-list-element/wrapper-list-element.component';
 import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component';
 import { VarDirective } from './utils/var.directive';
-import { ShaveDirective } from './utils/shave.directive';
-
+import { TruncatePipe } from './utils/truncate.pipe';
+import { TruncatableComponent } from './truncatable/truncatable.component';
+import { TruncatableService } from './truncatable/truncatable.service';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -67,6 +67,7 @@ const COMPONENTS = [
   ThumbnailComponent,
   WrapperListElementComponent,
   ViewModeSwitchComponent,
+  TruncatableComponent
 ];
 
 const ENTRY_COMPONENTS = [
@@ -77,9 +78,12 @@ const ENTRY_COMPONENTS = [
   SearchResultListElementComponent
 ];
 
+const PROVIDERS = [
+  TruncatableService
+];
+
 const DIRECTIVES = [
-  VarDirective,
-  ShaveDirective
+  VarDirective
 ];
 
 @NgModule({
@@ -93,6 +97,9 @@ const DIRECTIVES = [
     ...ENTRY_COMPONENTS,
     ...DIRECTIVES
   ],
+  providers: [
+    ...PROVIDERS
+  ],
   exports: [
     ...MODULES,
     ...PIPES,
diff --git a/src/app/shared/truncatable/truncatable.actions.ts b/src/app/shared/truncatable/truncatable.actions.ts
new file mode 100644
index 0000000000..bc9a7e2258
--- /dev/null
+++ b/src/app/shared/truncatable/truncatable.actions.ts
@@ -0,0 +1,29 @@
+import { Action } from '@ngrx/store';
+import { type } from '../ngrx/type';
+
+/**
+ * For each action type in an action group, make a simple
+ * enum object for all of this group's action types.
+ *
+ * The 'type' utility function coerces strings into string
+ * literal types and runs a simple check to guarantee all
+ * action types in the application are unique.
+ */
+export const TruncatableActionTypes = {
+  TOGGLE: type('dspace/truncatable/TOGGLE'),
+};
+
+export class TruncatableAction implements Action {
+  id: string;
+  type;
+  constructor(name: string) {
+    this.id = name;
+  }
+}
+
+/* tslint:disable:max-classes-per-file */
+export class TruncatableToggleAction extends TruncatableAction {
+  type = TruncatableActionTypes.TOGGLE;
+}
+
+/* tslint:enable:max-classes-per-file */
diff --git a/src/app/shared/truncatable/truncatable.component.html b/src/app/shared/truncatable/truncatable.component.html
new file mode 100644
index 0000000000..bf03d73eca
--- /dev/null
+++ b/src/app/shared/truncatable/truncatable.component.html
@@ -0,0 +1 @@
+<div class="clamp-{{lines}}" [innerHTML]="content" (click)="toggleCollapse()"></div>
\ No newline at end of file
diff --git a/src/app/shared/truncatable/truncatable.component.scss b/src/app/shared/truncatable/truncatable.component.scss
new file mode 100644
index 0000000000..b68bfd1d6e
--- /dev/null
+++ b/src/app/shared/truncatable/truncatable.component.scss
@@ -0,0 +1,41 @@
+@import '../../../styles/_variables.scss';
+@import '../../../styles/_mixins.scss';
+
+@mixin clamp($lines) {
+    max-height: $lines * $line-height-base * $font-size-base;
+    position: relative;
+    overflow: hidden;
+    line-height: $line-height-base;
+    overflow-wrap: break-word;
+
+    &:after {
+        content: "...";
+        color: $link-color;
+        text-align: right;
+        position: absolute;
+        padding-right: 15px;
+        top: ($lines - 1) * $line-height-base * $font-size-base;
+        right: 0;
+        width: 30%;
+        min-width: 75px;
+        max-width: 150px;
+        height: $line-height-base * $font-size-base;
+        background: linear-gradient(to right, rgba(255, 255, 255, 0), $body-bg 50%);
+    }
+
+
+}
+.clamp-1 {
+@include clamp(1);
+}
+.clamp-2 {
+ @include clamp(2);
+ }
+.clamp-3 {
+@include clamp(3);
+}
+.clamp-15 {
+@include clamp(15);
+}
+
+
diff --git a/src/app/shared/truncatable/truncatable.component.ts b/src/app/shared/truncatable/truncatable.component.ts
new file mode 100644
index 0000000000..88185140ed
--- /dev/null
+++ b/src/app/shared/truncatable/truncatable.component.ts
@@ -0,0 +1,42 @@
+import {
+  Component, Input
+} from '@angular/core';
+import { TruncatableService } from './truncatable.service';
+
+@Component({
+  selector: 'ds-truncatable',
+  templateUrl: './truncatable.component.html',
+  styleUrls: ['./truncatable.component.scss']
+})
+export class TruncatableComponent {
+  @Input() minLines: number;
+  @Input() maxLines: number;
+  @Input() initialExpand = false;
+  @Input() id: string;
+  @Input() content;
+  private lines: number;
+
+  public constructor(private service: TruncatableService) {
+
+  }
+
+  ngOnInit() {
+    if (this.initialExpand) {
+      this.service.toggle(this.id);
+    }
+    this.setLines();
+  }
+
+  public toggleCollapse() {
+    this.service.toggle(this.id);
+    this.setLines();
+  }
+
+  private setLines() {
+    if (this.service.isCollapsed(this.id)) {
+      this.lines = this.minLines;
+    } else {
+      this.lines = this.maxLines;
+    }
+  }
+}
diff --git a/src/app/shared/truncatable/truncatable.reducer.ts b/src/app/shared/truncatable/truncatable.reducer.ts
new file mode 100644
index 0000000000..f48d92f49c
--- /dev/null
+++ b/src/app/shared/truncatable/truncatable.reducer.ts
@@ -0,0 +1,31 @@
+import { TruncatableAction, TruncatableActionTypes } from './truncatable.actions';
+
+export interface TruncatableState {
+  collapsed: boolean;
+}
+
+export interface TruncatablesState {
+  [id: string]: TruncatableState
+}
+
+const initialState: TruncatablesState = Object.create(null);
+
+export function truncatableReducer(state = initialState, action: TruncatableAction): TruncatablesState {
+
+  switch (action.type) {
+
+    case TruncatableActionTypes.TOGGLE: {
+      if (!state[action.id]) {
+        state[action.id] = {collapsed: false};
+      }
+      return Object.assign({}, state, {
+        [action.id]: {
+          collapsed: !state[action.id].collapsed,
+        }
+      });
+    }
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/src/app/shared/truncatable/truncatable.service.ts b/src/app/shared/truncatable/truncatable.service.ts
new file mode 100644
index 0000000000..e2851a8a3b
--- /dev/null
+++ b/src/app/shared/truncatable/truncatable.service.ts
@@ -0,0 +1,47 @@
+import { Injectable } from '@angular/core';
+import { createSelector, MemoizedSelector, Store } from '@ngrx/store';
+import { Observable } from 'rxjs/Observable';
+import { TruncatablesState, TruncatableState } from './truncatable.reducer';
+import { TruncatableToggleAction } from './truncatable.actions';
+import { hasValue } from '../empty.util';
+
+const truncatableStateSelector = (state: TruncatablesState) => state.truncatable;
+
+@Injectable()
+export class TruncatableService {
+
+  constructor(private store: Store<TruncatablesState>) {
+  }
+
+  isCollapsed(id: string): Observable<boolean> {
+    return this.store.select(truncatableByIdSelector(id))
+      .map((object: TruncatableState) => {
+      console.log(object);
+        if (object) {
+          return object.collapsed;
+        } else {
+          return false;
+        }
+      });
+  }
+
+  public toggle(id: string): void {
+    this.store.dispatch(new TruncatableToggleAction(id));
+  }
+}
+
+function truncatableByIdSelector(id: string): MemoizedSelector<TruncatablesState, TruncatableState> {
+  return keySelector<TruncatableState>(id);
+}
+
+export function keySelector<T>(key: string): MemoizedSelector<TruncatablesState, T> {
+  return createSelector(truncatableStateSelector, (state: TruncatableState) => {
+    console.log(state, 'test');
+
+    if (hasValue(state)) {
+      return state[key];
+    } else {
+      return undefined;
+    }
+  });
+}
diff --git a/src/app/shared/utils/shave.directive.ts b/src/app/shared/utils/shave.directive.ts
deleted file mode 100644
index df37a9a8c5..0000000000
--- a/src/app/shared/utils/shave.directive.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import {
-  Directive, ElementRef, Inject, Input, OnChanges, OnDestroy,
-  OnInit
-} from '@angular/core';
-import { default as shave } from 'shave';
-import { NativeWindowRef, NativeWindowService } from '../window.service';
-import { Observable } from 'rxjs/Observable';
-
-@Directive({
-  selector: '[dsShave]'
-})
-export class ShaveDirective implements OnDestroy, OnChanges {
-
-  @Input() shave: IShaveOptions = {};
-
-  @Input()
-  set shaveHeight(value) {
-    if (value > 0) {
-      console.log(value);
-      this._shaveHeight = value;
-    }
-  };
-
-  get shaveHeight() {
-    return this._shaveHeight;
-  }
-
-  private _shaveHeight = 72;
-  private sub;
-
-  constructor(private ele: ElementRef, @Inject(NativeWindowService) private _window: NativeWindowRef) {
-  }
-
-  ngOnChanges(): void {
-    if (this.shaveHeight > 0) {
-      this.runShave();
-    }
-    this.subscribeForResizeEvent();
-  }
-
-  subscribeForResizeEvent() {
-    const obs = Observable.fromEvent(this._window.nativeWindow, 'resize');
-    this.sub = obs.subscribe((e) => this.runShave());
-  }
-
-  private runShave() {
-    shave(this.ele.nativeElement, this.shaveHeight, this.shave);
-  }
-
-  ngOnDestroy(): void {
-    if (this.sub) {
-      this.sub.unsubscribe();
-    }
-  }
-
-}
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 6c773e34a3..564ffc7755 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -1,26 +1,3 @@
 @import '../../node_modules/bootstrap/scss/functions.scss';
 @import '../../node_modules/bootstrap/scss/mixins.scss';
-@import '../../node_modules/bootstrap/scss/variables.scss';
-
-@mixin clamp($lines) {
-    max-height: $lines * $line-height-base * $font-size-base;
-    position: relative;
-    overflow: hidden;
-    line-height: $line-height-base;
-    overflow-wrap: break-word;
-
-    &:after {
-        content: "...";
-        color: $link-color;
-        text-align: right;
-        position: absolute;
-        padding-right: 15px;
-        top: ($lines - 1) * $line-height-base * $font-size-base;
-        right: 0;
-        width: 30%;
-        min-width: 75px;
-        max-width: 150px;
-        height: $line-height-base * $font-size-base;
-        background: linear-gradient(to right, rgba(255, 255, 255, 0), $body-bg 50%);
-    }
-}
\ No newline at end of file
+@import '../../node_modules/bootstrap/scss/variables.scss';
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 53cd4a6b72..91b2a787e2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1942,10 +1942,6 @@ dom-serializer@0:
     domelementtype "~1.1.1"
     entities "~1.1.1"
 
-dom-walk@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
-
 domain-browser@^1.1.1:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
@@ -2795,13 +2791,6 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.0.6, glob@^7.1.1, glob@^7.1.2, gl
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-global@^4.3.1:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f"
-  dependencies:
-    min-document "^2.19.0"
-    process "~0.5.1"
-
 globals@^9.18.0:
   version "9.18.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
@@ -4443,12 +4432,6 @@ mimic-fn@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
 
-min-document@^2.19.0:
-  version "2.19.0"
-  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
-  dependencies:
-    dom-walk "^0.1.0"
-
 minimalistic-assert@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
@@ -5798,10 +5781,6 @@ process@^0.11.0:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
 
-process@~0.5.1:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf"
-
 progress@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f"
@@ -6668,10 +6647,6 @@ shallow-clone@^0.1.2:
     lazy-cache "^0.2.3"
     mixin-object "^2.0.1"
 
-shave@^2.1.3:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/shave/-/shave-2.1.3.tgz#89c7df997d35a95bc31703c9150161bc98d3fa3b"
-
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -7165,12 +7140,6 @@ term-size@^1.2.0:
   dependencies:
     execa "^0.7.0"
 
-text-overflow-clamp@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/text-overflow-clamp/-/text-overflow-clamp-1.0.0.tgz#9327faec1b85bf0b293d8c8df32243cbee5c050e"
-  dependencies:
-    global "^4.3.1"
-
 throttleit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"

From 1b0fc45b6d745d4d3a5583fb089fb5e13a5b5182 Mon Sep 17 00:00:00 2001
From: Lotte Hofstede <lotte_hofstede@hotmail.com>
Date: Wed, 24 Jan 2018 15:22:31 +0100
Subject: [PATCH 07/23] 46063: working CSS truncation, but were switching to JS
 again...

---
 src/app/shared/animations/overlay.ts          | 10 +++
 .../object-grid/object-grid.component.html    |  4 +-
 .../object-grid/object-grid.component.scss    | 29 ++++----
 ...-search-result-grid-element.component.html | 67 ++++++++++---------
 ...-search-result-grid-element.component.scss | 12 ++++
 ...em-search-result-grid-element.component.ts |  5 +-
 .../search-result-grid-element.component.ts   | 10 ++-
 .../object-list/object-list.component.html    |  2 +-
 ...-search-result-list-element.component.html | 36 +++++++---
 src/app/shared/shared.module.ts               |  4 +-
 .../truncatable-part.component.html           |  3 +
 .../truncatable-part.component.scss           | 42 ++++++++++++
 .../truncatable-part.component.ts             | 42 ++++++++++++
 .../shared/truncatable/truncatable.actions.ts | 10 +++
 .../truncatable/truncatable.component.html    |  4 +-
 .../truncatable/truncatable.component.scss    | 41 ------------
 .../truncatable/truncatable.component.ts      | 38 +++++------
 .../shared/truncatable/truncatable.reducer.ts | 14 +++-
 .../shared/truncatable/truncatable.service.ts | 13 ++--
 src/styles/_functions.scss                    |  8 +++
 20 files changed, 262 insertions(+), 132 deletions(-)
 create mode 100644 src/app/shared/animations/overlay.ts
 create mode 100644 src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
 create mode 100644 src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
 create mode 100644 src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts

diff --git a/src/app/shared/animations/overlay.ts b/src/app/shared/animations/overlay.ts
new file mode 100644
index 0000000000..15d6bf79de
--- /dev/null
+++ b/src/app/shared/animations/overlay.ts
@@ -0,0 +1,10 @@
+import { animate, state, transition, trigger, style } from '@angular/animations';
+
+export const overlay = trigger('overlay', [
+
+  state('show', style({ opacity: 0.5 })),
+
+  state('hide', style({ opacity: 0 })),
+
+  transition('show <=> hide', animate(250))
+]);
diff --git a/src/app/shared/object-grid/object-grid.component.html b/src/app/shared/object-grid/object-grid.component.html
index 8040a99552..fcf3a42662 100644
--- a/src/app/shared/object-grid/object-grid.component.html
+++ b/src/app/shared/object-grid/object-grid.component.html
@@ -10,8 +10,8 @@
   (sortDirectionChange)="onSortDirectionChange($event)"
   (sortFieldChange)="onSortFieldChange($event)"
   (paginationChange)="onPaginationChange($event)">
-    <div class="row mt-2" *ngIf="objects?.hasSucceeded" @fadeIn>
-        <div class="col-lg-4 col-sm-6 col-xs-12 "
+    <div class="card-columns" *ngIf="objects?.hasSucceeded" @fadeIn>
+        <div
           *ngFor="let object of objects?.payload?.page">
           <ds-wrapper-grid-element [object]="object"></ds-wrapper-grid-element>
       </div>
diff --git a/src/app/shared/object-grid/object-grid.component.scss b/src/app/shared/object-grid/object-grid.component.scss
index a85e38d26f..32ad2df187 100644
--- a/src/app/shared/object-grid/object-grid.component.scss
+++ b/src/app/shared/object-grid/object-grid.component.scss
@@ -1,27 +1,24 @@
 @import '../../../styles/variables';
+@import '../../../styles/mixins';
 
 ds-wrapper-grid-element ::ng-deep {
   div.thumbnail > img {
     height: $card-thumbnail-height;
     width: 100%;
   }
-  .card-title {
-    line-height: $headings-line-height;
-    height: ($headings-line-height*3) +em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .item-abstract {
-    line-height: $line-height-base;
-    height: ($line-height-base*5)+em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .item-authors{
-    line-height: $line-height-base;
-    height: ($line-height-base*1.5)+em;
-  }
   div.card {
     margin-bottom: 20px;
   }
 }
+
+.card-columns {
+  @include media-breakpoint-only(lg) {
+    column-count: 3;
+  }
+  @include media-breakpoint-only(sm) {
+    column-count: 2;
+  }
+  @include media-breakpoint-only(xs) {
+    column-count: 1;
+  }
+}
\ No newline at end of file
diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
index ce9324477f..d1f37c952e 100644
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
@@ -1,34 +1,37 @@
-<div class="card">
-  <a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
-    <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()">
-    </ds-grid-thumbnail>
-  </a>
-  <div class="card-body">
-    <h4 class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></h4>
+<ds-truncatable [id]="dso.id">
+    <div class="card">
+        <a [@slide]="(isCollapsed() | async)? 'expanded' : 'collapsed'"
+           [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
+            <div>
+                <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()">
+                </ds-grid-thumbnail>
+                <div [@overlay]="(isCollapsed() | async)? 'hide' : 'show'"
+                     class="thumbnail-overlay"></div>
+            </div>
+        </a>
+        <div class="card-body">
+            <ds-truncatable-part [id]="dso.id" [minLines]="1" [maxLines]="3" type="h4">
+                <h4 class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></h4>
+            </ds-truncatable-part>
+            <p *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])"
+               class="item-authors card-text text-muted">
+                <ds-truncatable-part [id]="dso.id" [minLines]="1" [maxLines]="3">
+                    <span *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date">{{dso.findMetadata("dc.date.issued")}}</span>
+                    <span *ngFor="let authorMd of dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);">,
+                        <span [innerHTML]="authorMd.value"></span>
+                    </span>
+                </ds-truncatable-part>
+            </p>
+            <ds-truncatable-part [id]="dso.id" [minLines]="3" [maxLines]="15">
+                <p class="item-abstract card-text"
+                   [innerHTML]="getFirstValue('dc.description.abstract')">
+                </p>
+            </ds-truncatable-part>
+            <div class="text-center">
+                <a [routerLink]="['/items/' + dso.id]"
+                   class="lead btn btn-primary viewButton">View</a>
+            </div>
+        </div>
 
-    <p *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])"
-       class="item-authors card-text text-muted">
-        <span
-          *ngFor="let authorMd of dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let first=first;">
-          <span *ngIf="first" [innerHTML]="authorMd.value">
-          <span
-            *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length>1">, ...</span>
-          </span>
-        </span>
-      <span *ngIf="dso.findMetadata('dc.date.issued')"
-            class="item-list-date">
-      <span *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length>1">,</span>
-      {{dso.findMetadata("dc.date.issued")}}</span>
-
-
-    </p>
-    <p class="item-abstract card-text" [innerHTML]="getFirstValue('dc.description.abstract') | dsTruncate:[200]">
-    </p>
-
-    <div class="text-center">
-      <a [routerLink]="['/items/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
     </div>
-  </div>
-
-</div>
-
+</ds-truncatable>
\ No newline at end of file
diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
index bd63aa6a3a..e2751279b6 100644
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
@@ -1,2 +1,14 @@
 @import '../../../../../styles/variables';
 
+.card {
+    a > div {
+        position: relative;
+        .thumbnail-overlay {
+            height: 100%;
+            position: absolute;
+            top: 0;
+            width: 100%;
+            background-color: map-get($theme-colors, primary);
+        }
+    }
+}
diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
index f9fe13cb88..ee03a8b545 100644
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
@@ -5,11 +5,14 @@ import { SearchResultGridElementComponent } from '../search-result-grid-element.
 import { Item } from '../../../../core/shared/item.model';
 import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
 import { ViewMode } from '../../../../+search-page/search-options.model';
+import { slide } from '../../../animations/slide';
+import { overlay } from '../../../animations/overlay';
 
 @Component({
   selector: 'ds-item-search-result-grid-element',
   styleUrls: ['../search-result-grid-element.component.scss', 'item-search-result-grid-element.component.scss'],
-  templateUrl: 'item-search-result-grid-element.component.html'
+  templateUrl: 'item-search-result-grid-element.component.html',
+  animations: [slide, overlay],
 })
 
 @renderElementsFor(ItemSearchResult, ViewMode.Grid)
diff --git a/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts
index 8e1d7e0647..9be2647cba 100644
--- a/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts
@@ -6,6 +6,8 @@ import { Metadatum } from '../../../core/shared/metadatum.model';
 import { isEmpty, hasNoValue } from '../../empty.util';
 import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
 import { ListableObject } from '../../object-collection/shared/listable-object.model';
+import { TruncatableService } from '../../truncatable/truncatable.service';
+import { Observable } from 'rxjs/Observable';
 
 @Component({
   selector: 'ds-search-result-grid-element',
@@ -15,7 +17,7 @@ import { ListableObject } from '../../object-collection/shared/listable-object.m
 export class SearchResultGridElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends AbstractListableElementComponent<T> {
   dso: K;
 
-  public constructor(@Inject('objectElementProvider') public gridable: ListableObject) {
+  public constructor(@Inject('objectElementProvider') public gridable: ListableObject, private truncatableService: TruncatableService) {
     super(gridable);
     this.dso = this.object.dspaceObject;
   }
@@ -44,7 +46,7 @@ export class SearchResultGridElementComponent<T extends SearchResult<K>, K exten
     this.object.hitHighlights.some(
       (md: Metadatum) => {
         if (key === md.key) {
-          result =  md.value;
+          result = md.value;
           return true;
         }
       }
@@ -54,4 +56,8 @@ export class SearchResultGridElementComponent<T extends SearchResult<K>, K exten
     }
     return result;
   }
+
+  isCollapsed(): Observable<boolean> {
+    return this.truncatableService.isCollapsed(this.dso.id);
+  }
 }
diff --git a/src/app/shared/object-list/object-list.component.html b/src/app/shared/object-list/object-list.component.html
index 8de695ae58..4a7221d3e6 100644
--- a/src/app/shared/object-list/object-list.component.html
+++ b/src/app/shared/object-list/object-list.component.html
@@ -10,7 +10,7 @@
   (sortDirectionChange)="onSortDirectionChange($event)"
   (sortFieldChange)="onSortFieldChange($event)"
   (paginationChange)="onPaginationChange($event)">
-  <ul *ngIf="objects?.hasSucceeded"> <!--class="list-unstyled"-->
+  <ul *ngIf="objects?.hasSucceeded" class="list-unstyled">
       <li *ngFor="let object of objects?.payload?.page">
         <ds-wrapper-list-element [object]="object"></ds-wrapper-list-element>
       </li>
diff --git a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
index 4e5d890b89..104a6be716 100644
--- a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
+++ b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
@@ -1,14 +1,28 @@
-<a [routerLink]="['/items/' + dso.id]" class="lead" [innerHTML]="getFirstValue('dc.title')"></a>
-<div>
+<ds-truncatable [id]="dso.id">
+    <ds-truncatable-part [id]="dso.id" [minLines]="1" [maxLines]="5" type="title">
+        <a [routerLink]="['/items/' + dso.id]" class="lead"
+           [innerHTML]="getFirstValue('dc.title')"></a>
+    </ds-truncatable-part>
+    <div>
   <span class="text-muted">
-    <span *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);" class="item-list-authors">
-        <span *ngFor="let author of getValues(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let last=last;">
-            <span [innerHTML]="author"><span [innerHTML]="author"></span></span>
-        </span>
-    </span>
-    (<span *ngIf="dso.findMetadata('dc.publisher')" class="item-list-publisher" [innerHTML]="getFirstValue('dc.publisher')">, </span><span *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date" [innerHTML]="getFirstValue('dc.date.issued')"></span>)
+
+    <ds-truncatable-part [id]="dso.id" [minLines]="1" [maxLines]="5">
+            (<span *ngIf="dso.findMetadata('dc.publisher')" class="item-list-publisher"
+                   [innerHTML]="getFirstValue('dc.publisher')">, </span><span
+            *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date"
+            [innerHTML]="getFirstValue('dc.date.issued')"></span>)
+            <span *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);"
+                  class="item-list-authors">
+                    <span *ngFor="let author of getValues(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let last=last;">
+                        <span [innerHTML]="author"><span [innerHTML]="author"></span></span>
+                    </span>
+            </span>
+        </ds-truncatable-part>
   </span>
-    <div *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract">
-        <ds-truncatable [id]="dso.id" [minLines]="3" [maxLines]="15" [content]="getFirstValue('dc.description.abstract')"></ds-truncatable>
+        <div *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract">
+            <ds-truncatable-part [id]="dso.id" [minLines]="3" [maxLines]="15"><span
+                    [innerHTML]="getFirstValue('dc.description.abstract')"></span>
+            </ds-truncatable-part>
+        </div>
     </div>
-</div>
\ No newline at end of file
+</ds-truncatable>
\ No newline at end of file
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index e05a086f60..202a4b0c23 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -43,6 +43,7 @@ import { VarDirective } from './utils/var.directive';
 import { TruncatePipe } from './utils/truncate.pipe';
 import { TruncatableComponent } from './truncatable/truncatable.component';
 import { TruncatableService } from './truncatable/truncatable.service';
+import { TruncatablePartComponent } from './truncatable/truncatable-part/truncatable-part.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -82,7 +83,8 @@ const COMPONENTS = [
   GridThumbnailComponent,
   WrapperListElementComponent,
   ViewModeSwitchComponent,
-  TruncatableComponent
+  TruncatableComponent,
+  TruncatablePartComponent,
 ];
 
 const ENTRY_COMPONENTS = [
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
new file mode 100644
index 0000000000..60c474395b
--- /dev/null
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
@@ -0,0 +1,3 @@
+<div class="clamp-{{lines}} {{type}}">
+    <ng-content></ng-content>
+</div>
\ No newline at end of file
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
new file mode 100644
index 0000000000..cd3d245f7f
--- /dev/null
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
@@ -0,0 +1,42 @@
+@import '../../../../styles/variables';
+@import '../../../../styles/mixins';
+
+@mixin clamp($lines, $size-factor: 1, $line-height: $line-height-base) {
+    $height: $line-height * $font-size-base * $size-factor;
+    max-height: $lines * $height;
+    position: relative;
+    overflow: hidden;
+    line-height: $line-height;
+    overflow-wrap: break-word;
+    &:after {
+        content: "...";
+        color: $link-color;
+        text-align: right;
+        position: absolute;
+        padding-right: 15px;
+        top: ($lines - 1) * $height;
+        right: 0;
+        width: 30%;
+        min-width: 75px;
+        max-width: 150px;
+        height: $height;
+        background: linear-gradient(to right, rgba(255, 255, 255, 0), $body-bg 50%);
+    }
+
+}
+
+$h4-factor: strip-unit($h4-font-size);
+@for $i from 1 through 15 {
+    .clamp-#{$i} {
+        @include clamp($i);
+        &.title {
+            @include clamp($i, 1.25);
+        }
+        &.h4 {
+            @include clamp($i, $h4-factor, $headings-line-height);
+
+        }
+    }
+}
+
+
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts
new file mode 100644
index 0000000000..83a5f04ba4
--- /dev/null
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts
@@ -0,0 +1,42 @@
+import {
+  Component, Input, OnDestroy, OnInit, ElementRef, ViewChild
+} from '@angular/core';
+import { TruncatableService } from '../truncatable.service';
+
+@Component({
+  selector: 'ds-truncatable-part',
+  templateUrl: './truncatable-part.component.html',
+  styleUrls: ['./truncatable-part.component.scss']
+})
+
+export class TruncatablePartComponent implements OnInit, OnDestroy {
+  @Input() minLines: number;
+  @Input() maxLines: number;
+  @Input() initialExpand = false;
+  @Input() id: string;
+  @Input() type: string;
+  private lines: number;
+  private sub;
+
+  public constructor(private service: TruncatableService) {
+  }
+
+  ngOnInit() {
+    this.setLines();
+  }
+
+  private setLines() {
+    this.sub = this.service.isCollapsed(this.id).subscribe((collapsed: boolean) => {
+      if (collapsed) {
+        this.lines = this.minLines;
+      } else {
+        this.lines = this.maxLines;
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.sub.unsubscribe();
+  }
+
+}
diff --git a/src/app/shared/truncatable/truncatable.actions.ts b/src/app/shared/truncatable/truncatable.actions.ts
index bc9a7e2258..9d3a51219b 100644
--- a/src/app/shared/truncatable/truncatable.actions.ts
+++ b/src/app/shared/truncatable/truncatable.actions.ts
@@ -11,6 +11,8 @@ import { type } from '../ngrx/type';
  */
 export const TruncatableActionTypes = {
   TOGGLE: type('dspace/truncatable/TOGGLE'),
+  COLLAPSE: type('dspace/truncatable/COLLAPSE'),
+  EXPAND: type('dspace/truncatable/EXPAND'),
 };
 
 export class TruncatableAction implements Action {
@@ -26,4 +28,12 @@ export class TruncatableToggleAction extends TruncatableAction {
   type = TruncatableActionTypes.TOGGLE;
 }
 
+export class TruncatableCollapseAction extends TruncatableAction {
+  type = TruncatableActionTypes.COLLAPSE;
+}
+
+export class TruncatableExpandAction extends TruncatableAction {
+  type = TruncatableActionTypes.EXPAND;
+}
+
 /* tslint:enable:max-classes-per-file */
diff --git a/src/app/shared/truncatable/truncatable.component.html b/src/app/shared/truncatable/truncatable.component.html
index bf03d73eca..d3ed37e596 100644
--- a/src/app/shared/truncatable/truncatable.component.html
+++ b/src/app/shared/truncatable/truncatable.component.html
@@ -1 +1,3 @@
-<div class="clamp-{{lines}}" [innerHTML]="content" (click)="toggleCollapse()"></div>
\ No newline at end of file
+<div (click)="toggle()" (mouseenter)="hoverExpand()" (mouseleave)="hoverCollapse">
+    <ng-content></ng-content>
+</div>
\ No newline at end of file
diff --git a/src/app/shared/truncatable/truncatable.component.scss b/src/app/shared/truncatable/truncatable.component.scss
index b68bfd1d6e..e69de29bb2 100644
--- a/src/app/shared/truncatable/truncatable.component.scss
+++ b/src/app/shared/truncatable/truncatable.component.scss
@@ -1,41 +0,0 @@
-@import '../../../styles/_variables.scss';
-@import '../../../styles/_mixins.scss';
-
-@mixin clamp($lines) {
-    max-height: $lines * $line-height-base * $font-size-base;
-    position: relative;
-    overflow: hidden;
-    line-height: $line-height-base;
-    overflow-wrap: break-word;
-
-    &:after {
-        content: "...";
-        color: $link-color;
-        text-align: right;
-        position: absolute;
-        padding-right: 15px;
-        top: ($lines - 1) * $line-height-base * $font-size-base;
-        right: 0;
-        width: 30%;
-        min-width: 75px;
-        max-width: 150px;
-        height: $line-height-base * $font-size-base;
-        background: linear-gradient(to right, rgba(255, 255, 255, 0), $body-bg 50%);
-    }
-
-
-}
-.clamp-1 {
-@include clamp(1);
-}
-.clamp-2 {
- @include clamp(2);
- }
-.clamp-3 {
-@include clamp(3);
-}
-.clamp-15 {
-@include clamp(15);
-}
-
-
diff --git a/src/app/shared/truncatable/truncatable.component.ts b/src/app/shared/truncatable/truncatable.component.ts
index 88185140ed..b7667f6f51 100644
--- a/src/app/shared/truncatable/truncatable.component.ts
+++ b/src/app/shared/truncatable/truncatable.component.ts
@@ -9,34 +9,34 @@ import { TruncatableService } from './truncatable.service';
   styleUrls: ['./truncatable.component.scss']
 })
 export class TruncatableComponent {
-  @Input() minLines: number;
-  @Input() maxLines: number;
   @Input() initialExpand = false;
   @Input() id: string;
-  @Input() content;
-  private lines: number;
+  @Input() onHover = false;
 
   public constructor(private service: TruncatableService) {
-
   }
 
   ngOnInit() {
     if (this.initialExpand) {
-      this.service.toggle(this.id);
-    }
-    this.setLines();
-  }
-
-  public toggleCollapse() {
-    this.service.toggle(this.id);
-    this.setLines();
-  }
-
-  private setLines() {
-    if (this.service.isCollapsed(this.id)) {
-      this.lines = this.minLines;
+      this.service.expand(this.id);
     } else {
-      this.lines = this.maxLines;
+      this.service.collapse(this.id);
     }
   }
+
+  public hoverCollapse() {
+    if (this.onHover) {
+      this.service.collapse(this.id);
+    }
+  }
+
+  public hoverExpand() {
+    if (this.onHover) {
+      this.service.expand(this.id);
+    }
+  }
+
+  public toggle() {
+    this.service.toggle(this.id);
+  }
 }
diff --git a/src/app/shared/truncatable/truncatable.reducer.ts b/src/app/shared/truncatable/truncatable.reducer.ts
index f48d92f49c..d9a2111682 100644
--- a/src/app/shared/truncatable/truncatable.reducer.ts
+++ b/src/app/shared/truncatable/truncatable.reducer.ts
@@ -14,7 +14,19 @@ export function truncatableReducer(state = initialState, action: TruncatableActi
 
   switch (action.type) {
 
-    case TruncatableActionTypes.TOGGLE: {
+    case TruncatableActionTypes.COLLAPSE: {
+      return Object.assign({}, state, {
+        [action.id]: {
+          collapsed: true,
+        }
+      });
+    } case TruncatableActionTypes.EXPAND: {
+      return Object.assign({}, state, {
+        [action.id]: {
+          collapsed: false,
+        }
+      });
+    } case TruncatableActionTypes.TOGGLE: {
       if (!state[action.id]) {
         state[action.id] = {collapsed: false};
       }
diff --git a/src/app/shared/truncatable/truncatable.service.ts b/src/app/shared/truncatable/truncatable.service.ts
index e2851a8a3b..5f36c6a60d 100644
--- a/src/app/shared/truncatable/truncatable.service.ts
+++ b/src/app/shared/truncatable/truncatable.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { createSelector, MemoizedSelector, Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 import { TruncatablesState, TruncatableState } from './truncatable.reducer';
-import { TruncatableToggleAction } from './truncatable.actions';
+import { TruncatableExpandAction, TruncatableToggleAction, TruncatableCollapseAction } from './truncatable.actions';
 import { hasValue } from '../empty.util';
 
 const truncatableStateSelector = (state: TruncatablesState) => state.truncatable;
@@ -16,7 +16,6 @@ export class TruncatableService {
   isCollapsed(id: string): Observable<boolean> {
     return this.store.select(truncatableByIdSelector(id))
       .map((object: TruncatableState) => {
-      console.log(object);
         if (object) {
           return object.collapsed;
         } else {
@@ -28,6 +27,14 @@ export class TruncatableService {
   public toggle(id: string): void {
     this.store.dispatch(new TruncatableToggleAction(id));
   }
+
+  public collapse(id: string): void {
+    this.store.dispatch(new TruncatableCollapseAction(id));
+  }
+
+  public expand(id: string): void {
+    this.store.dispatch(new TruncatableExpandAction(id));
+  }
 }
 
 function truncatableByIdSelector(id: string): MemoizedSelector<TruncatablesState, TruncatableState> {
@@ -36,8 +43,6 @@ function truncatableByIdSelector(id: string): MemoizedSelector<TruncatablesState
 
 export function keySelector<T>(key: string): MemoizedSelector<TruncatablesState, T> {
   return createSelector(truncatableStateSelector, (state: TruncatableState) => {
-    console.log(state, 'test');
-
     if (hasValue(state)) {
       return state[key];
     } else {
diff --git a/src/styles/_functions.scss b/src/styles/_functions.scss
index 16c5040e03..81de954285 100644
--- a/src/styles/_functions.scss
+++ b/src/styles/_functions.scss
@@ -1,4 +1,12 @@
 @function calculateRem($size) {
     $remSize: $size / 16px;
     @return $remSize;
+}
+
+@function strip-unit($number) {
+    @if type-of($number) == 'number' and not unitless($number) {
+        @return $number / ($number * 0 + 1);
+    }
+
+    @return $number;
 }
\ No newline at end of file

From 58a26c03ccb4fafb41e6d7db387e143ab739573e Mon Sep 17 00:00:00 2001
From: Lotte Hofstede <lotte_hofstede@hotmail.com>
Date: Thu, 25 Jan 2018 14:01:02 +0100
Subject: [PATCH 08/23] 46063: removed ellipsis, added other animations..

---
 src/app/shared/animations/focus.ts            | 19 ++++++++++++++++
 .../object-grid/object-grid.component.scss    |  2 +-
 ...-search-result-grid-element.component.html | 16 +++++---------
 ...em-search-result-grid-element.component.ts |  5 ++---
 .../object-list/object-list.component.html    |  2 +-
 .../object-list/object-list.component.scss    |  2 +-
 ...-search-result-list-element.component.html | 22 +++++++++----------
 ...em-search-result-list-element.component.ts | 19 +++++-----------
 .../search-result-list-element.component.ts   |  8 ++++++-
 .../truncatable-part.component.scss           |  4 +---
 .../truncatable-part.component.ts             |  8 +++----
 11 files changed, 57 insertions(+), 50 deletions(-)
 create mode 100644 src/app/shared/animations/focus.ts

diff --git a/src/app/shared/animations/focus.ts b/src/app/shared/animations/focus.ts
new file mode 100644
index 0000000000..6458fd0d78
--- /dev/null
+++ b/src/app/shared/animations/focus.ts
@@ -0,0 +1,19 @@
+import { animate, state, transition, trigger, style } from '@angular/animations';
+
+export const focusShadow = trigger('focusShadow', [
+
+  state('focus', style({ 'box-shadow': '0 0 6px #777777' })),
+
+  state('blur', style({ 'box-shadow': 'none' })),
+
+  transition('focus <=> blur', animate(250))
+]);
+
+export const focusBackground = trigger('focusBackground', [
+
+  state('focus', style({ 'background-color': 'rgba(119, 119, 119, 0.1)' })),
+
+  state('blur', style({ 'background-color': 'transparent' })),
+
+  transition('focus <=> blur', animate(250))
+]);
diff --git a/src/app/shared/object-grid/object-grid.component.scss b/src/app/shared/object-grid/object-grid.component.scss
index 32ad2df187..1b9418be48 100644
--- a/src/app/shared/object-grid/object-grid.component.scss
+++ b/src/app/shared/object-grid/object-grid.component.scss
@@ -7,7 +7,7 @@ ds-wrapper-grid-element ::ng-deep {
     width: 100%;
   }
   div.card {
-    margin-bottom: 20px;
+    margin-bottom: $spacer;
   }
 }
 
diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
index d1f37c952e..e35e06ec03 100644
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
@@ -1,28 +1,23 @@
 <ds-truncatable [id]="dso.id">
-    <div class="card">
-        <a [@slide]="(isCollapsed() | async)? 'expanded' : 'collapsed'"
-           [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
+    <div class="card mt-1" [@focusShadow]="(isCollapsed() | async)?'blur':'focus'">
+        <a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
             <div>
                 <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()">
                 </ds-grid-thumbnail>
-                <div [@overlay]="(isCollapsed() | async)? 'hide' : 'show'"
-                     class="thumbnail-overlay"></div>
             </div>
         </a>
         <div class="card-body">
-            <ds-truncatable-part [id]="dso.id" [minLines]="1" [maxLines]="3" type="h4">
-                <h4 class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></h4>
-            </ds-truncatable-part>
+            <h4 class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></h4>
             <p *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])"
                class="item-authors card-text text-muted">
-                <ds-truncatable-part [id]="dso.id" [minLines]="1" [maxLines]="3">
+                <ds-truncatable-part [id]="dso.id" [minLines]="1">
                     <span *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date">{{dso.findMetadata("dc.date.issued")}}</span>
                     <span *ngFor="let authorMd of dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);">,
                         <span [innerHTML]="authorMd.value"></span>
                     </span>
                 </ds-truncatable-part>
             </p>
-            <ds-truncatable-part [id]="dso.id" [minLines]="3" [maxLines]="15">
+            <ds-truncatable-part [id]="dso.id" [minLines]="3">
                 <p class="item-abstract card-text"
                    [innerHTML]="getFirstValue('dc.description.abstract')">
                 </p>
@@ -32,6 +27,5 @@
                    class="lead btn btn-primary viewButton">View</a>
             </div>
         </div>
-
     </div>
 </ds-truncatable>
\ No newline at end of file
diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
index ee03a8b545..518fc23a44 100644
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
@@ -5,14 +5,13 @@ import { SearchResultGridElementComponent } from '../search-result-grid-element.
 import { Item } from '../../../../core/shared/item.model';
 import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
 import { ViewMode } from '../../../../+search-page/search-options.model';
-import { slide } from '../../../animations/slide';
-import { overlay } from '../../../animations/overlay';
+import { focusShadow } from '../../../../shared/animations/focus';
 
 @Component({
   selector: 'ds-item-search-result-grid-element',
   styleUrls: ['../search-result-grid-element.component.scss', 'item-search-result-grid-element.component.scss'],
   templateUrl: 'item-search-result-grid-element.component.html',
-  animations: [slide, overlay],
+  animations: [focusShadow],
 })
 
 @renderElementsFor(ItemSearchResult, ViewMode.Grid)
diff --git a/src/app/shared/object-list/object-list.component.html b/src/app/shared/object-list/object-list.component.html
index 4a7221d3e6..6ccac35464 100644
--- a/src/app/shared/object-list/object-list.component.html
+++ b/src/app/shared/object-list/object-list.component.html
@@ -11,7 +11,7 @@
   (sortFieldChange)="onSortFieldChange($event)"
   (paginationChange)="onPaginationChange($event)">
   <ul *ngIf="objects?.hasSucceeded" class="list-unstyled">
-      <li *ngFor="let object of objects?.payload?.page">
+      <li *ngFor="let object of objects?.payload?.page" class="mt-2 mb-2">
         <ds-wrapper-list-element [object]="object"></ds-wrapper-list-element>
       </li>
   </ul>
diff --git a/src/app/shared/object-list/object-list.component.scss b/src/app/shared/object-list/object-list.component.scss
index 48e6526dff..3d2af4d023 100644
--- a/src/app/shared/object-list/object-list.component.scss
+++ b/src/app/shared/object-list/object-list.component.scss
@@ -1 +1 @@
-@import '../../../styles/variables';
+@import '../../../styles/variables';
\ No newline at end of file
diff --git a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
index 104a6be716..9aa176fb08 100644
--- a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
+++ b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
@@ -1,12 +1,11 @@
 <ds-truncatable [id]="dso.id">
-    <ds-truncatable-part [id]="dso.id" [minLines]="1" [maxLines]="5" type="title">
-        <a [routerLink]="['/items/' + dso.id]" class="lead"
-           [innerHTML]="getFirstValue('dc.title')"></a>
-    </ds-truncatable-part>
-    <div>
+    <div [@focusBackground]="(isCollapsed() | async)?'blur':'focus'">
+        <a
+            [routerLink]="['/items/' + dso.id]" class="lead"
+            [innerHTML]="getFirstValue('dc.title')"></a>
+        <div>
   <span class="text-muted">
-
-    <ds-truncatable-part [id]="dso.id" [minLines]="1" [maxLines]="5">
+    <ds-truncatable-part [id]="dso.id" [minLines]="1">
             (<span *ngIf="dso.findMetadata('dc.publisher')" class="item-list-publisher"
                    [innerHTML]="getFirstValue('dc.publisher')">, </span><span
             *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date"
@@ -19,10 +18,11 @@
             </span>
         </ds-truncatable-part>
   </span>
-        <div *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract">
-            <ds-truncatable-part [id]="dso.id" [minLines]="3" [maxLines]="15"><span
-                    [innerHTML]="getFirstValue('dc.description.abstract')"></span>
-            </ds-truncatable-part>
+            <div *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract">
+                <ds-truncatable-part [id]="dso.id" [minLines]="3"><span
+                        [innerHTML]="getFirstValue('dc.description.abstract')"></span>
+                </ds-truncatable-part>
+            </div>
         </div>
     </div>
 </ds-truncatable>
\ No newline at end of file
diff --git a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts
index 76e8eb288f..b776abc214 100644
--- a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts
+++ b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts
@@ -6,25 +6,16 @@ import { Item } from '../../../../core/shared/item.model';
 import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
 import { ViewMode } from '../../../../+search-page/search-options.model';
 import { ListableObject } from '../../../object-collection/shared/listable-object.model';
+import { focusBackground } from '../../../animations/focus';
 
 @Component({
   selector: 'ds-item-search-result-list-element',
   styleUrls: ['../search-result-list-element.component.scss', 'item-search-result-list-element.component.scss'],
-  templateUrl: 'item-search-result-list-element.component.html'
+  templateUrl: 'item-search-result-list-element.component.html',
+  animations: [focusBackground],
+
 })
 
 @renderElementsFor(ItemSearchResult, ViewMode.List)
-export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> implements OnInit {
-  lines = 3;
-
-  constructor(@Inject('objectElementProvider') public listable: ListableObject, private changeDetectorRef: ChangeDetectorRef) {
-    super(listable);
-  }
-
-  ngOnInit() {
-    setTimeout(() => {
-      this.lines = 4;
-      this.changeDetectorRef.detectChanges();
-    }, 0);
-  }
+export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> {
 }
diff --git a/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.ts b/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.ts
index 6c79eaad53..9675a58a1e 100644
--- a/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.ts
+++ b/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.ts
@@ -6,6 +6,8 @@ import { Metadatum } from '../../../core/shared/metadatum.model';
 import { isEmpty, hasNoValue } from '../../empty.util';
 import { ListableObject } from '../../object-collection/shared/listable-object.model';
 import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
+import { Observable } from 'rxjs/Observable';
+import { TruncatableService } from '../../truncatable/truncatable.service';
 
 @Component({
   selector: 'ds-search-result-list-element',
@@ -15,7 +17,7 @@ import { AbstractListableElementComponent } from '../../object-collection/shared
 export class SearchResultListElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends AbstractListableElementComponent<T> {
   dso: K;
 
-  public constructor(@Inject('objectElementProvider') public listable: ListableObject) {
+  public constructor(@Inject('objectElementProvider') public listable: ListableObject, private truncatableService: TruncatableService) {
     super(listable);
     this.dso = this.object.dspaceObject;
   }
@@ -54,4 +56,8 @@ export class SearchResultListElementComponent<T extends SearchResult<K>, K exten
     }
     return result;
   }
+
+  isCollapsed(): Observable<boolean> {
+    return this.truncatableService.isCollapsed(this.dso.id);
+  }
 }
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
index cd3d245f7f..b66eab7005 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
@@ -9,9 +9,7 @@
     line-height: $line-height;
     overflow-wrap: break-word;
     &:after {
-        content: "...";
-        color: $link-color;
-        text-align: right;
+        content: "";
         position: absolute;
         padding-right: 15px;
         top: ($lines - 1) * $height;
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts
index 83a5f04ba4..2d643f4a33 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts
@@ -11,11 +11,11 @@ import { TruncatableService } from '../truncatable.service';
 
 export class TruncatablePartComponent implements OnInit, OnDestroy {
   @Input() minLines: number;
-  @Input() maxLines: number;
+  @Input() maxLines = -1;
   @Input() initialExpand = false;
   @Input() id: string;
   @Input() type: string;
-  private lines: number;
+  private lines: string;
   private sub;
 
   public constructor(private service: TruncatableService) {
@@ -28,9 +28,9 @@ export class TruncatablePartComponent implements OnInit, OnDestroy {
   private setLines() {
     this.sub = this.service.isCollapsed(this.id).subscribe((collapsed: boolean) => {
       if (collapsed) {
-        this.lines = this.minLines;
+        this.lines = this.minLines.toString();
       } else {
-        this.lines = this.maxLines;
+        this.lines = this.maxLines < 0 ? 'none' : this.maxLines.toString();
       }
     });
   }

From 5f76bba05065bc6710080cbf79d3d7d78270a0f9 Mon Sep 17 00:00:00 2001
From: Lotte Hofstede <lotte_hofstede@hotmail.com>
Date: Mon, 5 Feb 2018 11:32:26 +0100
Subject: [PATCH 09/23] 46063: truncation finished, still have to fix some
 existing tests

---
 src/app/shared/animations/focus.ts            |  2 +-
 ...arch-result-grid-element.component.spec.ts | 21 ++--
 ...arch-result-grid-element.component.spec.ts |  9 +-
 ...-search-result-grid-element.component.html | 16 +--
 ...arch-result-grid-element.component.spec.ts | 24 +++--
 .../collection-list-element.component.spec.ts | 59 +++++++++++
 .../community-list-element.component.spec.ts  | 65 ++++++++++++
 .../item-list-element.component.spec.ts       | 67 +++++++++++++
 .../object-list/object-list.component.html    |  2 +-
 ...arch-result-list-element.component.spec.ts | 68 +++++++++++++
 ...arch-result-list-element.component.spec.ts | 69 +++++++++++++
 ...-search-result-list-element.component.html |  4 -
 ...arch-result-list-element.component.spec.ts | 86 ++++++++++++++++
 .../truncatable-part.component.html           |  6 +-
 .../truncatable-part.component.scss           | 42 ++++----
 .../truncatable-part.component.spec.ts        | 76 ++++++++++++++
 .../truncatable-part.component.ts             | 13 ++-
 .../truncatable/truncatable.component.spec.ts | 99 +++++++++++++++++++
 .../truncatable/truncatable.component.ts      |  6 +-
 .../truncatable/truncatable.reducer.spec.ts   | 96 ++++++++++++++++++
 .../truncatable/truncatable.service.spec.ts   | 54 ++++++++++
 21 files changed, 826 insertions(+), 58 deletions(-)
 create mode 100644 src/app/shared/object-list/collection-list-element/collection-list-element.component.spec.ts
 create mode 100644 src/app/shared/object-list/community-list-element/community-list-element.component.spec.ts
 create mode 100644 src/app/shared/object-list/item-list-element/item-list-element.component.spec.ts
 create mode 100644 src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.spec.ts
 create mode 100644 src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.spec.ts
 create mode 100644 src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.spec.ts
 create mode 100644 src/app/shared/truncatable/truncatable-part/truncatable-part.component.spec.ts
 create mode 100644 src/app/shared/truncatable/truncatable.component.spec.ts
 create mode 100644 src/app/shared/truncatable/truncatable.reducer.spec.ts
 create mode 100644 src/app/shared/truncatable/truncatable.service.spec.ts

diff --git a/src/app/shared/animations/focus.ts b/src/app/shared/animations/focus.ts
index 6458fd0d78..33a5010629 100644
--- a/src/app/shared/animations/focus.ts
+++ b/src/app/shared/animations/focus.ts
@@ -2,7 +2,7 @@ import { animate, state, transition, trigger, style } from '@angular/animations'
 
 export const focusShadow = trigger('focusShadow', [
 
-  state('focus', style({ 'box-shadow': '0 0 6px #777777' })),
+  state('focus', style({ 'box-shadow': 'rgba(119, 119, 119, 0.6) 0px 0px 6px' })),
 
   state('blur', style({ 'box-shadow': 'none' })),
 
diff --git a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.spec.ts b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.spec.ts
index a3b3710080..9eb65dbbdd 100644
--- a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.spec.ts
@@ -1,4 +1,4 @@
-import {CollectionSearchResultGridElementComponent } from './collection-search-result-grid-element.component';
+import { CollectionSearchResultGridElementComponent } from './collection-search-result-grid-element.component';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Observable } from 'rxjs/Observable';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -8,6 +8,7 @@ import { By } from '@angular/platform-browser';
 import { TruncatePipe } from '../../../utils/truncate.pipe';
 import { Community } from '../../../../core/shared/community.model';
 import { Collection } from '../../../../core/shared/collection.model';
+import { TruncatableService } from '../../../truncatable/truncatable.service';
 
 let fixture: ComponentFixture<CollectionSearchResultGridElementComponent>;
 const queryParam = 'test query';
@@ -18,29 +19,33 @@ const activatedRouteStub = {
     scope: scopeParam
   })
 };
+const truncatableServiceStub: any = {
+  isCollapsed: (id: number) => Observable.of(true),
+};
+
 const mockCollection: Collection = Object.assign(new Collection(), {
   metadata: [
     {
       key: 'dc.description.abstract',
       language: 'en_US',
       value: 'Short description'
-    } ]
+    }]
 
 });
-
-const createdGridElementComponent: CollectionSearchResultGridElementComponent = new CollectionSearchResultGridElementComponent(mockCollection);
+const createdGridElementComponent: CollectionSearchResultGridElementComponent = new CollectionSearchResultGridElementComponent(mockCollection, truncatableServiceStub as TruncatableService);
 
 describe('CollectionSearchResultGridElementComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ CollectionSearchResultGridElementComponent, TruncatePipe ],
+      declarations: [CollectionSearchResultGridElementComponent, TruncatePipe],
       providers: [
+        { provide: TruncatableService, useValue: truncatableServiceStub },
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: Router, useClass: RouterStub },
         { provide: 'objectElementProvider', useValue: (createdGridElementComponent) }
       ],
 
-      schemas: [ NO_ERRORS_SCHEMA ]
+      schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();  // compile template and css
   }));
 
@@ -52,12 +57,12 @@ describe('CollectionSearchResultGridElementComponent', () => {
     expect(fixture.debugElement.query(By.css('ds-collection-search-result-grid-element'))).toBeDefined();
   });
 
-  it('should only show the description if "short description" metadata is present',() => {
+  it('should only show the description if "short description" metadata is present', () => {
     const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
 
     if (mockCollection.shortDescription.length > 0) {
       expect(descriptionText).toBeDefined();
-    }else {
+    } else {
       expect(descriptionText).not.toBeDefined();
     }
   });
diff --git a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.spec.ts b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.spec.ts
index dd9e16a120..6d70d08901 100644
--- a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.spec.ts
@@ -7,6 +7,8 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { TruncatePipe } from '../../../utils/truncate.pipe';
 import { Community } from '../../../../core/shared/community.model';
+import { TruncatableService } from '../../../truncatable/truncatable.service';
+
 
 let fixture: ComponentFixture<CommunitySearchResultGridElementComponent>;
 const queryParam = 'test query';
@@ -17,6 +19,10 @@ const activatedRouteStub = {
     scope: scopeParam
   })
 };
+const truncatableServiceStub: any = {
+  isCollapsed: (id: number) => Observable.of(true),
+};
+
 const mockCommunity: Community = Object.assign(new Community(), {
   metadata: [
     {
@@ -27,13 +33,14 @@ const mockCommunity: Community = Object.assign(new Community(), {
 
 });
 
-const createdGridElementComponent: CommunitySearchResultGridElementComponent = new CommunitySearchResultGridElementComponent(mockCommunity);
+const createdGridElementComponent: CommunitySearchResultGridElementComponent = new CommunitySearchResultGridElementComponent(mockCommunity, truncatableServiceStub as TruncatableService);
 
 describe('CommunitySearchResultGridElementComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ CommunitySearchResultGridElementComponent, TruncatePipe ],
       providers: [
+        { provide: TruncatableService, useValue: truncatableServiceStub },
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: Router, useClass: RouterStub },
         { provide: 'objectElementProvider', useValue: (createdGridElementComponent) }
diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
index e35e06ec03..352ba4881d 100644
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
@@ -7,21 +7,23 @@
             </div>
         </a>
         <div class="card-body">
-            <h4 class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></h4>
+            <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="3" type="h4">
+                <h4 class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></h4>
+            </ds-truncatable-part>
             <p *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])"
                class="item-authors card-text text-muted">
-                <ds-truncatable-part [id]="dso.id" [minLines]="1">
+                <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="1">
                     <span *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date">{{dso.findMetadata("dc.date.issued")}}</span>
                     <span *ngFor="let authorMd of dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);">,
                         <span [innerHTML]="authorMd.value"></span>
                     </span>
                 </ds-truncatable-part>
             </p>
-            <ds-truncatable-part [id]="dso.id" [minLines]="3">
-                <p class="item-abstract card-text"
-                   [innerHTML]="getFirstValue('dc.description.abstract')">
-                </p>
-            </ds-truncatable-part>
+            <p class="item-abstract card-text">
+                <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="3">
+                    <span [innerHTML]="getFirstValue('dc.description.abstract')"></span>
+                </ds-truncatable-part>
+            </p>
             <div class="text-center">
                 <a [routerLink]="['/items/' + dso.id]"
                    class="lead btn btn-primary viewButton">View</a>
diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.spec.ts b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.spec.ts
index 1a2ca908e2..172888e98c 100644
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.spec.ts
@@ -7,6 +7,7 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { TruncatePipe } from '../../../utils/truncate.pipe';
 import { Item } from '../../../../core/shared/item.model';
+import { TruncatableService } from '../../../truncatable/truncatable.service';
 
 let itemSearchResultGridElementComponent: ItemSearchResultGridElementComponent;
 let fixture: ComponentFixture<ItemSearchResultGridElementComponent>;
@@ -18,6 +19,11 @@ const activatedRouteStub = {
     scope: scopeParam
   })
 };
+
+const truncatableServiceStub: any = {
+  isCollapsed: (id: number) => Observable.of(true),
+};
+
 const mockItem: Item = Object.assign(new Item(), {
   metadata: [
     {
@@ -31,48 +37,48 @@ const mockItem: Item = Object.assign(new Item(), {
       value: '1650-06-26'
     }]
 });
-const createdGridElementComponent:ItemSearchResultGridElementComponent= new ItemSearchResultGridElementComponent(mockItem);
+const createdGridElementComponent: ItemSearchResultGridElementComponent = new ItemSearchResultGridElementComponent(mockItem, truncatableServiceStub as TruncatableService);
 
 describe('ItemSearchResultGridElementComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ItemSearchResultGridElementComponent, TruncatePipe ],
+      declarations: [ItemSearchResultGridElementComponent, TruncatePipe],
       providers: [
+        { provide: TruncatableService, useValue: truncatableServiceStub },
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: Router, useClass: RouterStub },
         { provide: 'objectElementProvider', useValue: (createdGridElementComponent) }
       ],
 
-      schemas: [ NO_ERRORS_SCHEMA ]
+      schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();  // compile template and css
   }));
 
   beforeEach(async(() => {
     fixture = TestBed.createComponent(ItemSearchResultGridElementComponent);
     itemSearchResultGridElementComponent = fixture.componentInstance;
-
   }));
 
-  it('should show the item result cards in the grid element',() => {
+  it('should show the item result cards in the grid element', () => {
     expect(fixture.debugElement.query(By.css('ds-item-search-result-grid-element'))).toBeDefined();
   });
 
-  it('should only show the author span if the author metadata is present',() => {
+  it('should only show the author span if the author metadata is present', () => {
     const itemAuthorField = expect(fixture.debugElement.query(By.css('p.item-authors')));
 
     if (mockItem.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length > 0) {
       expect(itemAuthorField).toBeDefined();
-    }else {
+    } else {
       expect(itemAuthorField).not.toBeDefined();
     }
   });
 
-  it('should only show the date span if the issuedate is present',() => {
+  it('should only show the date span if the issuedate is present', () => {
     const dateField = expect(fixture.debugElement.query(By.css('span.item-list-date')));
 
     if (mockItem.findMetadata('dc.date.issued').length > 0) {
       expect(dateField).toBeDefined();
-    }else {
+    } else {
       expect(dateField).not.toBeDefined();
     }
   });
diff --git a/src/app/shared/object-list/collection-list-element/collection-list-element.component.spec.ts b/src/app/shared/object-list/collection-list-element/collection-list-element.component.spec.ts
new file mode 100644
index 0000000000..0f1b7c4444
--- /dev/null
+++ b/src/app/shared/object-list/collection-list-element/collection-list-element.component.spec.ts
@@ -0,0 +1,59 @@
+import { CollectionListElementComponent } from './collection-list-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../testing/router-stub';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { Collection } from '../../../core/shared/collection.model';
+let fixture: ComponentFixture<CollectionListElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+const mockCollection: Collection = Object.assign(new Collection(), {
+  metadata: [
+    {
+      key: 'dc.description.abstract',
+      language: 'en_US',
+      value: 'Short description'
+    }]
+});
+const createdListElementComponent:CollectionListElementComponent= new CollectionListElementComponent(mockCollection);
+
+describe('CollectionListElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CollectionListElementComponent ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: (createdListElementComponent)}
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(CollectionListElementComponent);
+  }));
+
+  it('should show the collection cards in the list element',() => {
+    expect(fixture.debugElement.query(By.css('ds-collection-list-element'))).toBeDefined();
+  });
+
+  it('should only show the description if "short description" metadata is present',() => {
+    const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
+
+    if (mockCollection.shortDescription.length > 0) {
+      expect(descriptionText).toBeDefined();
+    }else {
+      expect(descriptionText).not.toBeDefined();
+    }
+  });
+})
diff --git a/src/app/shared/object-list/community-list-element/community-list-element.component.spec.ts b/src/app/shared/object-list/community-list-element/community-list-element.component.spec.ts
new file mode 100644
index 0000000000..ff5a7fa441
--- /dev/null
+++ b/src/app/shared/object-list/community-list-element/community-list-element.component.spec.ts
@@ -0,0 +1,65 @@
+import { CommunityListElementComponent } from './community-list-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../testing/router-stub';
+import { Observable } from 'rxjs/Observable';
+import { By } from '@angular/platform-browser';
+import { Community } from '../../../core/shared/community.model';
+
+let communityListElementComponent: CommunityListElementComponent;
+let fixture: ComponentFixture<CommunityListElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+
+const mockCommunity: Community = Object.assign(new Community(), {
+  metadata: [
+    {
+      key: 'dc.description.abstract',
+      language: 'en_US',
+      value: 'Short description'
+    }]
+});
+
+const createdListElementComponent:CommunityListElementComponent= new CommunityListElementComponent(mockCommunity);
+
+describe('CommunityListElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommunityListElementComponent ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: (createdListElementComponent)}
+      ],
+
+    schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(CommunityListElementComponent);
+    communityListElementComponent = fixture.componentInstance;
+
+  }));
+
+  it('should show the community cards in the list element',() => {
+    expect(fixture.debugElement.query(By.css('ds-community-list-element'))).toBeDefined();
+  })
+
+  it('should only show the description if "short description" metadata is present',() => {
+    const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
+
+    if (mockCommunity.shortDescription.length > 0) {
+      expect(descriptionText).toBeDefined();
+    }else {
+      expect(descriptionText).not.toBeDefined();
+    }
+  });
+});
diff --git a/src/app/shared/object-list/item-list-element/item-list-element.component.spec.ts b/src/app/shared/object-list/item-list-element/item-list-element.component.spec.ts
new file mode 100644
index 0000000000..3383ed8454
--- /dev/null
+++ b/src/app/shared/object-list/item-list-element/item-list-element.component.spec.ts
@@ -0,0 +1,67 @@
+import { ItemListElementComponent } from './item-list-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../testing/router-stub';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { TruncatePipe } from '../../utils/truncate.pipe';
+import { Item } from '../../../core/shared/item.model';
+
+let itemListElementComponent: ItemListElementComponent;
+let fixture: ComponentFixture<ItemListElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+/* tslint:disable:no-shadowed-variable */
+const mockItem: Item = Object.assign(new Item(), {
+  metadata: [
+    {
+      key: 'dc.contributor.author',
+      language: 'en_US',
+      value: 'Smith, Donald'
+    }]
+});
+
+const createdListElementComponent:ItemListElementComponent= new ItemListElementComponent(mockItem);
+
+describe('ItemListElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ItemListElementComponent , TruncatePipe],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: {createdListElementComponent}}
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(ItemListElementComponent);
+    itemListElementComponent = fixture.componentInstance;
+
+  }));
+
+  it('should show the item cards in the list element',() => {
+    expect(fixture.debugElement.query(By.css('ds-item-list-element'))).toBeDefined()
+  });
+
+  it('should only show the author span if the author metadata is present',() => {
+    const itemAuthorField = expect(fixture.debugElement.query(By.css('p.item-authors')));
+
+    if (mockItem.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length > 0) {
+      expect(itemAuthorField).toBeDefined();
+    }else {
+      expect(itemAuthorField).toBeDefined();
+    }
+  });
+
+})
diff --git a/src/app/shared/object-list/object-list.component.html b/src/app/shared/object-list/object-list.component.html
index 6ccac35464..420886668a 100644
--- a/src/app/shared/object-list/object-list.component.html
+++ b/src/app/shared/object-list/object-list.component.html
@@ -11,7 +11,7 @@
   (sortFieldChange)="onSortFieldChange($event)"
   (paginationChange)="onPaginationChange($event)">
   <ul *ngIf="objects?.hasSucceeded" class="list-unstyled">
-      <li *ngFor="let object of objects?.payload?.page" class="mt-2 mb-2">
+      <li *ngFor="let object of objects?.payload?.page" class="mt-4 mb-4">
         <ds-wrapper-list-element [object]="object"></ds-wrapper-list-element>
       </li>
   </ul>
diff --git a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.spec.ts b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.spec.ts
new file mode 100644
index 0000000000..37756b5916
--- /dev/null
+++ b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.spec.ts
@@ -0,0 +1,68 @@
+import { CollectionSearchResultListElementComponent } from './collection-search-result-list-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../../testing/router-stub';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { TruncatePipe } from '../../../utils/truncate.pipe';
+import { Collection } from '../../../../core/shared/collection.model';
+import { TruncatableService } from '../../../truncatable/truncatable.service';
+
+let fixture: ComponentFixture<CollectionSearchResultListElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+const truncatableServiceStub: any = {
+  isCollapsed: (id: number) => Observable.of(true),
+};
+
+const mockCollection: Collection = Object.assign(new Collection(), {
+  metadata: [
+    {
+      key: 'dc.description.abstract',
+      language: 'en_US',
+      value: 'Short description'
+    }]
+
+});
+const createdListElementComponent: CollectionSearchResultListElementComponent = new CollectionSearchResultListElementComponent(mockCollection, truncatableServiceStub as TruncatableService);
+
+describe('CollectionSearchResultListElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [CollectionSearchResultListElementComponent, TruncatePipe],
+      providers: [
+        { provide: TruncatableService, useValue: truncatableServiceStub },
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: (createdListElementComponent) }
+      ],
+
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(CollectionSearchResultListElementComponent);
+  }));
+
+  it('should show the item result cards in the list element', () => {
+    expect(fixture.debugElement.query(By.css('ds-collection-search-result-list-element'))).toBeDefined();
+  });
+
+  it('should only show the description if "short description" metadata is present', () => {
+    const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
+
+    if (mockCollection.shortDescription.length > 0) {
+      expect(descriptionText).toBeDefined();
+    } else {
+      expect(descriptionText).not.toBeDefined();
+    }
+  });
+});
diff --git a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.spec.ts b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.spec.ts
new file mode 100644
index 0000000000..3e82e824ec
--- /dev/null
+++ b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.spec.ts
@@ -0,0 +1,69 @@
+import { CommunitySearchResultListElementComponent } from './community-search-result-list-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../../testing/router-stub';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { TruncatePipe } from '../../../utils/truncate.pipe';
+import { Community } from '../../../../core/shared/community.model';
+import { TruncatableService } from '../../../truncatable/truncatable.service';
+
+let fixture: ComponentFixture<CommunitySearchResultListElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+const truncatableServiceStub: any = {
+  isCollapsed: (id: number) => Observable.of(true),
+};
+
+const mockCommunity: Community = Object.assign(new Community(), {
+  metadata: [
+    {
+      key: 'dc.description.abstract',
+      language: 'en_US',
+      value: 'Short description'
+    } ]
+
+});
+
+const createdListElementComponent: CommunitySearchResultListElementComponent = new CommunitySearchResultListElementComponent(mockCommunity, truncatableServiceStub as TruncatableService);
+
+describe('CommunitySearchResultListElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommunitySearchResultListElementComponent, TruncatePipe ],
+      providers: [
+        { provide: TruncatableService, useValue: truncatableServiceStub },
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: (createdListElementComponent) }
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(CommunitySearchResultListElementComponent);
+  }));
+
+  it('should show the item result cards in the list element', () => {
+    expect(fixture.debugElement.query(By.css('ds-community-search-result-list-element'))).toBeDefined();
+  });
+
+  it('should only show the description if "short description" metadata is present',() => {
+    const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
+
+    if (mockCommunity.shortDescription.length > 0) {
+      expect(descriptionText).toBeDefined();
+    }else {
+      expect(descriptionText).not.toBeDefined();
+    }
+  });
+});
diff --git a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
index 9aa176fb08..d7ef1c673c 100644
--- a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
+++ b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
@@ -1,9 +1,7 @@
 <ds-truncatable [id]="dso.id">
-    <div [@focusBackground]="(isCollapsed() | async)?'blur':'focus'">
         <a
             [routerLink]="['/items/' + dso.id]" class="lead"
             [innerHTML]="getFirstValue('dc.title')"></a>
-        <div>
   <span class="text-muted">
     <ds-truncatable-part [id]="dso.id" [minLines]="1">
             (<span *ngIf="dso.findMetadata('dc.publisher')" class="item-list-publisher"
@@ -23,6 +21,4 @@
                         [innerHTML]="getFirstValue('dc.description.abstract')"></span>
                 </ds-truncatable-part>
             </div>
-        </div>
-    </div>
 </ds-truncatable>
\ No newline at end of file
diff --git a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.spec.ts b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.spec.ts
new file mode 100644
index 0000000000..c7bf09ea1e
--- /dev/null
+++ b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.spec.ts
@@ -0,0 +1,86 @@
+import { ItemSearchResultListElementComponent } from './item-search-result-list-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../../testing/router-stub';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { TruncatePipe } from '../../../utils/truncate.pipe';
+import { Item } from '../../../../core/shared/item.model';
+import { TruncatableService } from '../../../truncatable/truncatable.service';
+
+let itemSearchResultListElementComponent: ItemSearchResultListElementComponent;
+let fixture: ComponentFixture<ItemSearchResultListElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+
+const truncatableServiceStub: any = {
+  isCollapsed: (id: number) => Observable.of(true),
+};
+
+const mockItem: Item = Object.assign(new Item(), {
+  metadata: [
+    {
+      key: 'dc.contributor.author',
+      language: 'en_US',
+      value: 'Smith, Donald'
+    },
+    {
+      key: 'dc.date.issued',
+      language: null,
+      value: '1650-06-26'
+    }]
+});
+const createdListElementComponent: ItemSearchResultListElementComponent = new ItemSearchResultListElementComponent(mockItem, truncatableServiceStub as TruncatableService);
+
+describe('ItemSearchResultListElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ItemSearchResultListElementComponent, TruncatePipe],
+      providers: [
+        { provide: TruncatableService, useValue: truncatableServiceStub },
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: (createdListElementComponent) }
+      ],
+
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(ItemSearchResultListElementComponent);
+    itemSearchResultListElementComponent = fixture.componentInstance;
+  }));
+
+  it('should show the item result cards in the list element', () => {
+    expect(fixture.debugElement.query(By.css('ds-item-search-result-list-element'))).toBeDefined();
+  });
+
+  it('should only show the author span if the author metadata is present', () => {
+    const itemAuthorField = expect(fixture.debugElement.query(By.css('p.item-authors')));
+
+    if (mockItem.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length > 0) {
+      expect(itemAuthorField).toBeDefined();
+    } else {
+      expect(itemAuthorField).not.toBeDefined();
+    }
+  });
+
+  it('should only show the date span if the issuedate is present', () => {
+    const dateField = expect(fixture.debugElement.query(By.css('span.item-list-date')));
+
+    if (mockItem.findMetadata('dc.date.issued').length > 0) {
+      expect(dateField).toBeDefined();
+    } else {
+      expect(dateField).not.toBeDefined();
+    }
+  });
+
+});
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
index 60c474395b..964e52603f 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
@@ -1,3 +1,5 @@
-<div class="clamp-{{lines}} {{type}}">
-    <ng-content></ng-content>
+<div class="clamp-{{lines}} {{type}} {{fixedHeight ? 'fixedHeight' : ''}}">
+    <div class="content">
+        <ng-content></ng-content>
+    </div>
 </div>
\ No newline at end of file
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
index b66eab7005..698f1fb1aa 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
@@ -3,22 +3,27 @@
 
 @mixin clamp($lines, $size-factor: 1, $line-height: $line-height-base) {
     $height: $line-height * $font-size-base * $size-factor;
-    max-height: $lines * $height;
-    position: relative;
-    overflow: hidden;
-    line-height: $line-height;
-    overflow-wrap: break-word;
-    &:after {
-        content: "";
-        position: absolute;
-        padding-right: 15px;
-        top: ($lines - 1) * $height;
-        right: 0;
-        width: 30%;
-        min-width: 75px;
-        max-width: 150px;
-        height: $height;
-        background: linear-gradient(to right, rgba(255, 255, 255, 0), $body-bg 50%);
+    &.fixedHeight {
+        height: $lines * $height;
+    }
+    .content {
+        max-height: $lines * $height;
+        position: relative;
+        overflow: hidden;
+        line-height: $line-height;
+        overflow-wrap: break-word;
+        &:after {
+            content: "";
+            position: absolute;
+            padding-right: 15px;
+            top: ($lines - 1) * $height;
+            right: 0;
+            width: 30%;
+            min-width: 75px;
+            max-width: 150px;
+            height: $height;
+            background: linear-gradient(to right, rgba(255, 255, 255, 0), $body-bg 70%);
+        }
     }
 
 }
@@ -26,15 +31,18 @@
 $h4-factor: strip-unit($h4-font-size);
 @for $i from 1 through 15 {
     .clamp-#{$i} {
+        transition: height 1s;
         @include clamp($i);
         &.title {
             @include clamp($i, 1.25);
         }
         &.h4 {
             @include clamp($i, $h4-factor, $headings-line-height);
-
         }
     }
 }
 
 
+.clamp-none {
+    overflow: hidden;
+}
\ No newline at end of file
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.spec.ts b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.spec.ts
new file mode 100644
index 0000000000..4c3af4cd7d
--- /dev/null
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.spec.ts
@@ -0,0 +1,76 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { TruncatablePartComponent } from './truncatable-part.component';
+import { TruncatableService } from '../truncatable.service';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('TruncatablePartComponent', () => {
+  let comp: TruncatablePartComponent;
+  let fixture: ComponentFixture<TruncatablePartComponent>;
+  const id1 = '123';
+  const id2 = '456';
+
+  let truncatableService;
+  const truncatableServiceStub: any = {
+    isCollapsed: (id: string) => {
+      if (id === id1) {
+        return Observable.of(true)
+      } else {
+        return Observable.of(false);
+      }
+    }
+  };
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule],
+      declarations: [TruncatablePartComponent],
+      providers: [
+        { provide: TruncatableService, useValue: truncatableServiceStub },
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).overrideComponent(TruncatablePartComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    }).compileComponents();
+  }));
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TruncatablePartComponent);
+    comp = fixture.componentInstance; // TruncatablePartComponent test instance
+    fixture.detectChanges();
+    truncatableService = (comp as any).filterService;
+  });
+
+  describe('When the item is collapsed', () => {
+    beforeEach(() => {
+      comp.id = id1;
+      comp.minLines = 5;
+      (comp as any).setLines();
+      fixture.detectChanges();
+    })
+    ;
+
+    it('lines should equal minlines', () => {
+      expect((comp as any).lines).toEqual(comp.minLines.toString());
+    });
+  });
+
+  describe('When the item is expanded', () => {
+    beforeEach(() => {
+      comp.id = id2;
+    })
+    ;
+
+    it('lines should equal maxlines when maxlines has a value', () => {
+      comp.maxLines = 5;
+      (comp as any).setLines();
+      fixture.detectChanges();
+      expect((comp as any).lines).toEqual(comp.maxLines.toString());
+    });
+
+    it('lines should equal \'none\' when maxlines has no value', () => {
+      (comp as any).setLines();
+      fixture.detectChanges();
+      expect((comp as any).lines).toEqual('none');
+    });
+  });
+});
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts
index 2d643f4a33..1392271db7 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts
@@ -1,21 +1,21 @@
-import {
-  Component, Input, OnDestroy, OnInit, ElementRef, ViewChild
-} from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { TruncatableService } from '../truncatable.service';
+import { cardExpand } from '../../animations/card-expand';
 
 @Component({
   selector: 'ds-truncatable-part',
   templateUrl: './truncatable-part.component.html',
-  styleUrls: ['./truncatable-part.component.scss']
+  styleUrls: ['./truncatable-part.component.scss'],
+  animations: [cardExpand]
 })
 
 export class TruncatablePartComponent implements OnInit, OnDestroy {
   @Input() minLines: number;
   @Input() maxLines = -1;
-  @Input() initialExpand = false;
   @Input() id: string;
   @Input() type: string;
-  private lines: string;
+  @Input() fixedHeight = false;
+  lines: string;
   private sub;
 
   public constructor(private service: TruncatableService) {
@@ -38,5 +38,4 @@ export class TruncatablePartComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.sub.unsubscribe();
   }
-
 }
diff --git a/src/app/shared/truncatable/truncatable.component.spec.ts b/src/app/shared/truncatable/truncatable.component.spec.ts
new file mode 100644
index 0000000000..14a499f4e0
--- /dev/null
+++ b/src/app/shared/truncatable/truncatable.component.spec.ts
@@ -0,0 +1,99 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { TruncatableComponent } from './truncatable.component';
+import { TruncatableService } from './truncatable.service';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('TruncatableComponent', () => {
+  let comp: TruncatableComponent;
+  let fixture: ComponentFixture<TruncatableComponent>;
+  const identifier = '1234567890';
+  let truncatableService;
+  const truncatableServiceStub: any = {
+    isCollapsed: (id: string) => {
+      if (id === '1') {
+        return Observable.of(true)
+      } else {
+        return Observable.of(false);
+      }
+    },
+    expand: (id: string) => {
+    },
+    collapse: (id: string) => {
+    },
+    toggle: (id: string) => {
+    }
+  };
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule],
+      declarations: [TruncatableComponent],
+      providers: [
+        { provide: TruncatableService, useValue: truncatableServiceStub },
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).overrideComponent(TruncatableComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    }).compileComponents();
+  }));
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TruncatableComponent);
+    comp = fixture.componentInstance; // TruncatableComponent test instance
+    comp.id = identifier;
+    fixture.detectChanges();
+    truncatableService = (comp as any).service;
+  });
+
+  describe('When the item is hoverable', () => {
+    beforeEach(() => {
+      comp.onHover = true;
+      fixture.detectChanges();
+    })
+    ;
+
+    it('should call collapse on the TruncatableService', () => {
+      spyOn(truncatableService, 'collapse');
+      comp.hoverCollapse();
+      expect(truncatableService.collapse).toHaveBeenCalledWith(identifier);
+    });
+
+    it('should call expand on the TruncatableService', () => {
+      spyOn(truncatableService, 'expand');
+      comp.hoverExpand();
+      expect(truncatableService.expand).toHaveBeenCalledWith(identifier);
+    });
+  });
+
+  describe('When the item is not hoverable', () => {
+    beforeEach(() => {
+      comp.onHover = false;
+      fixture.detectChanges();
+    })
+    ;
+
+    it('should not call collapse on the TruncatableService', () => {
+      spyOn(truncatableService, 'collapse');
+      comp.hoverCollapse();
+      expect(truncatableService.collapse).not.toHaveBeenCalled();
+    });
+
+    it('should not call expand on the TruncatableService', () => {
+      spyOn(truncatableService, 'expand');
+      comp.hoverExpand();
+      expect(truncatableService.expand).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('When toggle is called', () => {
+    beforeEach(() => {
+      spyOn(truncatableService, 'toggle');
+      comp.toggle();
+    });
+
+    it('should call toggle on the TruncatableService', () => {
+      expect(truncatableService.toggle).toHaveBeenCalledWith(identifier);
+    });
+  });
+
+});
diff --git a/src/app/shared/truncatable/truncatable.component.ts b/src/app/shared/truncatable/truncatable.component.ts
index b7667f6f51..64477389b9 100644
--- a/src/app/shared/truncatable/truncatable.component.ts
+++ b/src/app/shared/truncatable/truncatable.component.ts
@@ -2,11 +2,14 @@ import {
   Component, Input
 } from '@angular/core';
 import { TruncatableService } from './truncatable.service';
+import { Observable } from 'rxjs/Observable';
+import { cardExpand } from '../animations/card-expand';
 
 @Component({
   selector: 'ds-truncatable',
   templateUrl: './truncatable.component.html',
-  styleUrls: ['./truncatable.component.scss']
+  styleUrls: ['./truncatable.component.scss'],
+
 })
 export class TruncatableComponent {
   @Input() initialExpand = false;
@@ -39,4 +42,5 @@ export class TruncatableComponent {
   public toggle() {
     this.service.toggle(this.id);
   }
+
 }
diff --git a/src/app/shared/truncatable/truncatable.reducer.spec.ts b/src/app/shared/truncatable/truncatable.reducer.spec.ts
new file mode 100644
index 0000000000..00949d1113
--- /dev/null
+++ b/src/app/shared/truncatable/truncatable.reducer.spec.ts
@@ -0,0 +1,96 @@
+import * as deepFreeze from 'deep-freeze';
+
+import { truncatableReducer } from './truncatable.reducer';
+import {
+  TruncatableCollapseAction, TruncatableExpandAction,
+  TruncatableToggleAction
+} from './truncatable.actions';
+
+const id1 = '123';
+const id2 = '456';
+class NullAction extends TruncatableCollapseAction {
+  type = null;
+  constructor() {
+    super(undefined);
+  }
+}
+
+describe('truncatableReducer', () => {
+
+  it('should return the current state when no valid actions have been made', () => {
+    const state = { 123: { collapsed: true, page: 1 } };
+    const action = new NullAction();
+    const newState = truncatableReducer(state, action);
+
+    expect(newState).toEqual(state);
+  });
+
+  it('should start with an empty object', () => {
+    const state = Object.create({});
+    const action = new NullAction();
+    const initialState = truncatableReducer(undefined, action);
+
+    // The search filter starts collapsed
+    expect(initialState).toEqual(state);
+  });
+
+  it('should set collapsed to true in response to the COLLAPSE action', () => {
+    const state = {};
+    state[id1] = { collapsed: false};
+    const action = new TruncatableCollapseAction(id1);
+    const newState = truncatableReducer(state, action);
+
+    expect(newState[id1].collapsed).toEqual(true);
+  });
+
+  it('should perform the COLLAPSE action without affecting the previous state', () => {
+    const state = {};
+    state[id1] = { collapsed: false};
+    deepFreeze([state]);
+
+    const action = new TruncatableCollapseAction(id1);
+    truncatableReducer(state, action);
+
+    // no expect required, deepFreeze will ensure an exception is thrown if the state
+    // is mutated, and any uncaught exception will cause the test to fail
+  });
+
+  it('should set filterCollapsed to false in response to the EXPAND action', () => {
+    const state = {};
+    state[id1] = { collapsed: true };
+    const action = new TruncatableExpandAction(id1);
+    const newState = truncatableReducer(state, action);
+
+    expect(newState[id1].collapsed).toEqual(false);
+  });
+
+  it('should perform the EXPAND action without affecting the previous state', () => {
+    const state = {};
+    state[id1] = { collapsed: true };
+    deepFreeze([state]);
+
+    const action = new TruncatableExpandAction(id1);
+    truncatableReducer(state, action);
+  });
+
+  it('should flip the value of filterCollapsed in response to the TOGGLE action', () => {
+    const state1 = {};
+    state1[id1] = { collapsed: true };
+    const action = new TruncatableToggleAction(id1);
+
+    const state2 = truncatableReducer(state1, action);
+    const state3 = truncatableReducer(state2, action);
+
+    expect(state2[id1].collapsed).toEqual(false);
+    expect(state3[id1].collapsed).toEqual(true);
+  });
+
+  it('should perform the TOGGLE action without affecting the previous state', () => {
+    const state = {};
+    state[id2] = { collapsed: true };
+    deepFreeze([state]);
+
+    const action = new TruncatableToggleAction(id2);
+    truncatableReducer(state, action);
+  });
+});
diff --git a/src/app/shared/truncatable/truncatable.service.spec.ts b/src/app/shared/truncatable/truncatable.service.spec.ts
new file mode 100644
index 0000000000..dafa889b87
--- /dev/null
+++ b/src/app/shared/truncatable/truncatable.service.spec.ts
@@ -0,0 +1,54 @@
+import { Store } from '@ngrx/store';
+import { async, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { TruncatableService } from './truncatable.service';
+import { TruncatableCollapseAction, TruncatableExpandAction } from './truncatable.actions';
+import { TruncatablesState } from './truncatable.reducer';
+
+describe('TruncatableService', () => {
+  const id1 = '123';
+  const id2 = '456';
+  let service: TruncatableService;
+  const store: Store<TruncatablesState> = jasmine.createSpyObj('store', {
+    /* tslint:disable:no-empty */
+    dispatch: {},
+    /* tslint:enable:no-empty */
+    select: Observable.of(true)
+  });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+
+      providers: [
+        {
+          provide: Store, useValue: store
+        }
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    service = new TruncatableService(store);
+  });
+
+  describe('when the collapse method is triggered', () => {
+    beforeEach(() => {
+      service.collapse(id1);
+    });
+
+    it('TruncatableCollapseAction should be dispatched to the store', () => {
+      expect(store.dispatch).toHaveBeenCalledWith(new TruncatableCollapseAction(id1));
+    });
+
+  });
+
+  describe('when the expand method is triggered', () => {
+    beforeEach(() => {
+      service.expand(id2);
+    });
+
+    it('TruncatableExpandAction should be dispatched to the store', () => {
+      expect(store.dispatch).toHaveBeenCalledWith(new TruncatableExpandAction(id2));
+    });
+  });
+
+});

From 42b315f8fb541cdc1a6ac8cdaea18955f7229128 Mon Sep 17 00:00:00 2001
From: Lotte Hofstede <lotte_hofstede@hotmail.com>
Date: Mon, 5 Feb 2018 12:51:36 +0100
Subject: [PATCH 10/23] 46063: clean up

---
 src/app/+search-page/search-service/search.service.ts  |  2 +-
 src/app/app.module.ts                                  |  2 +-
 .../item-list-element/item-list-element.component.html |  4 ++--
 .../truncatable-part/truncatable-part.component.ts     |  4 +---
 src/app/shared/truncatable/truncatable.component.ts    |  2 --
 src/app/typings.d.ts                                   | 10 ----------
 6 files changed, 5 insertions(+), 19 deletions(-)

diff --git a/src/app/+search-page/search-service/search.service.ts b/src/app/+search-page/search-service/search.service.ts
index 89efd1d15d..c70fe22ce0 100644
--- a/src/app/+search-page/search-service/search.service.ts
+++ b/src/app/+search-page/search-service/search.service.ts
@@ -40,7 +40,7 @@ export class SearchService implements OnDestroy {
   totalPages = 5;
   mockedHighlights: string[] = new Array(
     'This is a <em>sample abstract</em>.',
-    'This is a sample abstractabstractabstractabstractabstractabstractabstractabstract. But, to fill up some space, here\'s <em>"Hello"</em> in several different languages : ',
+    'This is a sample abstract. But, to fill up some space, here\'s <em>"Hello"</em> in several different languages : ',
     'This is a Sample HTML webpage including several <em>images</em> and styles (CSS).',
     'This is <em>really</em> just a sample abstract. But, Í’vé thrown ïn a cõuple of spëciâl charactèrs för êxtrå fuñ!',
     'This abstract is <em>really quite great</em>',
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 44092d373e..c2728941d0 100755
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -38,7 +38,7 @@ export function getBase() {
 }
 
 export function getMetaReducers(config: GlobalConfig): Array<MetaReducer<AppState>> {
-  const metaReducers: Array<MetaReducer<AppState>> = config.production ? appMetaReducers : [...appMetaReducers];
+  const metaReducers: Array<MetaReducer<AppState>> = config.production ? appMetaReducers : [...appMetaReducers, storeFreeze];
   return config.debug ? [...metaReducers, ...debugMetaReducers] : metaReducers;
 }
 
diff --git a/src/app/shared/object-list/item-list-element/item-list-element.component.html b/src/app/shared/object-list/item-list-element/item-list-element.component.html
index 1e88cc4889..e9bde67295 100644
--- a/src/app/shared/object-list/item-list-element/item-list-element.component.html
+++ b/src/app/shared/object-list/item-list-element/item-list-element.component.html
@@ -12,7 +12,7 @@
     (<span *ngIf="object.findMetadata('dc.publisher')" class="item-list-publisher">{{object.findMetadata("dc.publisher")}}, </span><span
           *ngIf="object.findMetadata('dc.date.issued')" class="item-list-date">{{object.findMetadata("dc.date.issued")}}</span>)
   </span>
-    <div *ngIf="item.findMetadata('dc.description.abstract')" class="item-list-abstract">
-        {{item.findMetadata("dc.description.abstract") | dsTruncate:[200] }}
+    <div *ngIf="object.findMetadata('dc.description.abstract')" class="item-list-abstract">
+        {{object.findMetadata("dc.description.abstract") | dsTruncate:[200] }}
     </div>
 </div>
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts
index 1392271db7..0f695625ec 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts
@@ -1,12 +1,10 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { TruncatableService } from '../truncatable.service';
-import { cardExpand } from '../../animations/card-expand';
 
 @Component({
   selector: 'ds-truncatable-part',
   templateUrl: './truncatable-part.component.html',
-  styleUrls: ['./truncatable-part.component.scss'],
-  animations: [cardExpand]
+  styleUrls: ['./truncatable-part.component.scss']
 })
 
 export class TruncatablePartComponent implements OnInit, OnDestroy {
diff --git a/src/app/shared/truncatable/truncatable.component.ts b/src/app/shared/truncatable/truncatable.component.ts
index 64477389b9..81ad2b3cff 100644
--- a/src/app/shared/truncatable/truncatable.component.ts
+++ b/src/app/shared/truncatable/truncatable.component.ts
@@ -2,8 +2,6 @@ import {
   Component, Input
 } from '@angular/core';
 import { TruncatableService } from './truncatable.service';
-import { Observable } from 'rxjs/Observable';
-import { cardExpand } from '../animations/card-expand';
 
 @Component({
   selector: 'ds-truncatable',
diff --git a/src/app/typings.d.ts b/src/app/typings.d.ts
index c256b0f09d..f3b4a1a548 100644
--- a/src/app/typings.d.ts
+++ b/src/app/typings.d.ts
@@ -82,13 +82,3 @@ declare module '*.json' {
 }
 
 declare module 'reflect-metadata';
-
-interface IShaveOptions {
-  classname?: string,
-  character?: string
-}
-
-declare module 'shave' {
-  export default function shave(selector: string | Node, maxHeight: number, options?: IShaveOptions): void;
-
-}

From 7bf23d1b7a362a9bbf8ba4651d464679544f5fa9 Mon Sep 17 00:00:00 2001
From: Lotte Hofstede <lotte_hofstede@hotmail.com>
Date: Thu, 8 Feb 2018 14:39:13 +0100
Subject: [PATCH 11/23] 466063: test fixes

---
 .../shared/collection-search-result.model.ts  |  5 ++
 .../shared/community-search-result.model.ts   |  5 ++
 .../community-grid-element.component.spec.ts  |  2 +-
 .../item-grid-element.component.html          |  1 -
 .../item-grid-element.component.spec.ts       |  2 +-
 ...on-search-result-grid-element.component.ts |  2 +-
 .../collection-search-result.model.ts         |  5 --
 ...ty-search-result-grid-element.component.ts |  4 +-
 .../community-search-result.model.ts          |  5 --
 ...-search-result-grid-element.component.html |  4 +-
 ...arch-result-grid-element.component.spec.ts | 89 ++++++++++++++-----
 .../search-result-grid-element.component.ts   |  2 +
 .../collection-list-element.component.spec.ts |  2 +-
 ...on-search-result-list-element.component.ts |  2 +-
 .../collection-search-result.model.ts         |  5 --
 ...ty-search-result-list-element.component.ts |  2 +-
 .../community-search-result.model.ts          |  5 --
 .../truncatable-part.component.html           |  2 +-
 .../truncatable-part.component.scss           | 17 +++-
 19 files changed, 106 insertions(+), 55 deletions(-)
 create mode 100644 src/app/shared/object-collection/shared/collection-search-result.model.ts
 create mode 100644 src/app/shared/object-collection/shared/community-search-result.model.ts
 delete mode 100644 src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts
 delete mode 100644 src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result.model.ts
 delete mode 100644 src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result.model.ts
 delete mode 100644 src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result.model.ts

diff --git a/src/app/shared/object-collection/shared/collection-search-result.model.ts b/src/app/shared/object-collection/shared/collection-search-result.model.ts
new file mode 100644
index 0000000000..63b6a0d37a
--- /dev/null
+++ b/src/app/shared/object-collection/shared/collection-search-result.model.ts
@@ -0,0 +1,5 @@
+import { Collection } from '../../../core/shared/collection.model';
+import { SearchResult } from '../../../+search-page/search-result.model';
+
+export class CollectionSearchResult extends SearchResult<Collection> {
+}
diff --git a/src/app/shared/object-collection/shared/community-search-result.model.ts b/src/app/shared/object-collection/shared/community-search-result.model.ts
new file mode 100644
index 0000000000..79ea34b6cd
--- /dev/null
+++ b/src/app/shared/object-collection/shared/community-search-result.model.ts
@@ -0,0 +1,5 @@
+import { SearchResult } from '../../../+search-page/search-result.model';
+import { Community } from '../../../core/shared/community.model';
+
+export class CommunitySearchResult extends SearchResult<Community> {
+}
diff --git a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.spec.ts b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.spec.ts
index cb9e20449e..1fd98bf225 100644
--- a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.spec.ts
@@ -5,7 +5,6 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { RouterStub } from '../../testing/router-stub';
 import { Observable } from 'rxjs/Observable';
 import { By } from '@angular/platform-browser';
-import { ListableObject } from '../../object-collection/shared/listable-object.model';
 import { Community } from '../../../core/shared/community.model';
 
 let communityGridElementComponent: CommunityGridElementComponent;
@@ -51,6 +50,7 @@ describe('CommunityGridElementComponent', () => {
   }));
 
   it('should show the community cards in the grid element',() => {
+    console.log(fixture.debugElement.query(By.css('ds-community-grid-element')));
     expect(fixture.debugElement.query(By.css('ds-community-grid-element'))).toBeDefined();
   })
 
diff --git a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.html b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.html
index b8bacfaf2e..47b5a6b2e6 100644
--- a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.html
+++ b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.html
@@ -6,7 +6,6 @@
   </a>
   <div class="card-body">
     <h4 class="card-title">{{object.findMetadata('dc.title')}}</h4>
-
     <p *ngIf="object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);" class="item-authors card-text text-muted">
         <span *ngFor="let authorMd of object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let last=last;">{{authorMd.value}}
             <span *ngIf="!last">; </span>
diff --git a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.spec.ts b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.spec.ts
index 3be46965ee..8c7f856450 100644
--- a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.spec.ts
@@ -64,4 +64,4 @@ describe('ItemGridElementComponent', () => {
     }
   });
 
-})
+});
diff --git a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts
index 0228107a57..e5747a1243 100644
--- a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 
 import { renderElementsFor} from '../../../object-collection/shared/dso-element-decorator';
 
-import { CollectionSearchResult } from './collection-search-result.model';
+import { CollectionSearchResult } from '../../../object-collection/shared/collection-search-result.model';
 import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
 import { Collection } from '../../../../core/shared/collection.model';
 import { ViewMode } from '../../../../+search-page/search-options.model';
diff --git a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts
deleted file mode 100644
index ad48247e70..0000000000
--- a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { SearchResult } from '../../../../+search-page/search-result.model';
-import { Collection } from '../../../../core/shared/collection.model';
-
-export class CollectionSearchResult extends SearchResult<Collection> {
-}
diff --git a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
index 4876a784fc..d490560919 100644
--- a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
 
-import { CommunitySearchResult } from './community-search-result.model';
 import { Community } from '../../../../core/shared/community.model';
 import { renderElementsFor } from '../../../object-collection/shared/dso-element-decorator';
 import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
 import { ViewMode } from '../../../../+search-page/search-options.model';
+import { CommunitySearchResult } from '../../../object-collection/shared/community-search-result.model';
 
 @Component({
   selector: 'ds-community-search-result-grid-element',
@@ -15,4 +15,4 @@ import { ViewMode } from '../../../../+search-page/search-options.model';
 @renderElementsFor(CommunitySearchResult, ViewMode.Grid)
 export class CommunitySearchResultGridElementComponent extends SearchResultGridElementComponent<CommunitySearchResult, Community> {
 
-}
+}
\ No newline at end of file
diff --git a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result.model.ts b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result.model.ts
deleted file mode 100644
index efeb328e11..0000000000
--- a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result.model.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { SearchResult } from '../../../../+search-page/search-result.model';
-import { Community } from '../../../../core/shared/community.model';
-
-export class CommunitySearchResult extends SearchResult<Community> {
-}
diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
index 352ba4881d..b185caa18f 100644
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
@@ -10,10 +10,10 @@
             <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="3" type="h4">
                 <h4 class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></h4>
             </ds-truncatable-part>
-            <p *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])"
+            <p *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length > 0"
                class="item-authors card-text text-muted">
                 <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="1">
-                    <span *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date">{{dso.findMetadata("dc.date.issued")}}</span>
+                    <span *ngIf="dso.findMetadata('dc.date.issued').length > 0" class="item-date">{{dso.findMetadata("dc.date.issued")}}</span>
                     <span *ngFor="let authorMd of dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);">,
                         <span [innerHTML]="authorMd.value"></span>
                     </span>
diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.spec.ts b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.spec.ts
index 172888e98c..fbb267b8e6 100644
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.spec.ts
@@ -3,11 +3,13 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Observable } from 'rxjs/Observable';
 import { ActivatedRoute, Router } from '@angular/router';
 import { RouterStub } from '../../../testing/router-stub';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA, ChangeDetectionStrategy } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { TruncatePipe } from '../../../utils/truncate.pipe';
 import { Item } from '../../../../core/shared/item.model';
 import { TruncatableService } from '../../../truncatable/truncatable.service';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
 
 let itemSearchResultGridElementComponent: ItemSearchResultGridElementComponent;
 let fixture: ComponentFixture<ItemSearchResultGridElementComponent>;
@@ -24,7 +26,10 @@ const truncatableServiceStub: any = {
   isCollapsed: (id: number) => Observable.of(true),
 };
 
-const mockItem: Item = Object.assign(new Item(), {
+const mockItemWithAuthorAndDate: ItemSearchResult = new ItemSearchResult();
+mockItemWithAuthorAndDate.hitHighlights = [];
+mockItemWithAuthorAndDate.dspaceObject = Object.assign(new Item(), {
+  bitstreams: Observable.of({}),
   metadata: [
     {
       key: 'dc.contributor.author',
@@ -34,14 +39,33 @@ const mockItem: Item = Object.assign(new Item(), {
     {
       key: 'dc.date.issued',
       language: null,
-      value: '1650-06-26'
+      value: '2015-06-26'
     }]
 });
-const createdGridElementComponent: ItemSearchResultGridElementComponent = new ItemSearchResultGridElementComponent(mockItem, truncatableServiceStub as TruncatableService);
+
+const mockItemWithoutAuthorAndDate: ItemSearchResult = new ItemSearchResult();
+mockItemWithoutAuthorAndDate.hitHighlights = [];
+mockItemWithoutAuthorAndDate.dspaceObject = Object.assign(new Item(), {
+  bitstream: Observable.of({}),
+  metadata: [
+    {
+      key: 'dc.title',
+      language: 'en_US',
+      value: 'This is just another title'
+    },
+    {
+      key: 'dc.type',
+      language: null,
+      value: 'Article'
+    }]
+});
+
+const createdGridElementComponent: ItemSearchResultGridElementComponent = new ItemSearchResultGridElementComponent(mockItemWithAuthorAndDate, truncatableServiceStub as TruncatableService);
 
 describe('ItemSearchResultGridElementComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule],
       declarations: [ItemSearchResultGridElementComponent, TruncatePipe],
       providers: [
         { provide: TruncatableService, useValue: truncatableServiceStub },
@@ -49,9 +73,10 @@ describe('ItemSearchResultGridElementComponent', () => {
         { provide: Router, useClass: RouterStub },
         { provide: 'objectElementProvider', useValue: (createdGridElementComponent) }
       ],
-
       schemas: [NO_ERRORS_SCHEMA]
-    }).compileComponents();  // compile template and css
+    }).overrideComponent(ItemSearchResultGridElementComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    }).compileComponents();
   }));
 
   beforeEach(async(() => {
@@ -59,28 +84,48 @@ describe('ItemSearchResultGridElementComponent', () => {
     itemSearchResultGridElementComponent = fixture.componentInstance;
   }));
 
-  it('should show the item result cards in the grid element', () => {
-    expect(fixture.debugElement.query(By.css('ds-item-search-result-grid-element'))).toBeDefined();
+  fdescribe('When the item has an author', () => {
+    beforeEach(() => {
+      itemSearchResultGridElementComponent.dso = mockItemWithAuthorAndDate.dspaceObject;
+      fixture.detectChanges();
+    });
+
+    it('should show the author paragraph', () => {
+      const itemAuthorField = fixture.debugElement.query(By.css('p.item-authors'));
+      expect(itemAuthorField).not.toBeNull();
+    });
   });
 
-  it('should only show the author span if the author metadata is present', () => {
-    const itemAuthorField = expect(fixture.debugElement.query(By.css('p.item-authors')));
+  describe('When the item has no author', () => {
+    beforeEach(() => {
+      itemSearchResultGridElementComponent.dso = mockItemWithoutAuthorAndDate.dspaceObject;
+    });
 
-    if (mockItem.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length > 0) {
-      expect(itemAuthorField).toBeDefined();
-    } else {
-      expect(itemAuthorField).not.toBeDefined();
-    }
+    it('should not show the author paragraph', () => {
+      const itemAuthorField = fixture.debugElement.query(By.css('p.item-authors'));
+      expect(itemAuthorField).toBeNull();
+    });
   });
 
-  it('should only show the date span if the issuedate is present', () => {
-    const dateField = expect(fixture.debugElement.query(By.css('span.item-list-date')));
+  describe('When the item has an issuedate', () => {
+    beforeEach(() => {
+      itemSearchResultGridElementComponent.dso = mockItemWithAuthorAndDate.dspaceObject;
+    });
 
-    if (mockItem.findMetadata('dc.date.issued').length > 0) {
-      expect(dateField).toBeDefined();
-    } else {
-      expect(dateField).not.toBeDefined();
-    }
+    it('should show the issuedate span', () => {
+      const itemAuthorField = fixture.debugElement.query(By.css('span.item-date'));
+      expect(itemAuthorField).not.toBeNull();
+    });
   });
 
+  describe('When the item has no issuedate', () => {
+    beforeEach(() => {
+      itemSearchResultGridElementComponent.dso = mockItemWithoutAuthorAndDate.dspaceObject;
+    });
+
+    it('should not show the issuedate span', () => {
+      const dateField = fixture.debugElement.query(By.css('span.item-date'));
+      expect(dateField).toBeNull();
+    });
+  });
 });
diff --git a/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts
index 9be2647cba..c04c1d54f4 100644
--- a/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts
@@ -20,6 +20,7 @@ export class SearchResultGridElementComponent<T extends SearchResult<K>, K exten
   public constructor(@Inject('objectElementProvider') public gridable: ListableObject, private truncatableService: TruncatableService) {
     super(gridable);
     this.dso = this.object.dspaceObject;
+    console.log(JSON.stringify(this.object.hitHighlights));
   }
 
   getValues(keys: string[]): string[] {
@@ -43,6 +44,7 @@ export class SearchResultGridElementComponent<T extends SearchResult<K>, K exten
 
   getFirstValue(key: string): string {
     let result: string;
+    console.log(JSON.stringify(this.object.hitHighlights));
     this.object.hitHighlights.some(
       (md: Metadatum) => {
         if (key === md.key) {
diff --git a/src/app/shared/object-list/collection-list-element/collection-list-element.component.spec.ts b/src/app/shared/object-list/collection-list-element/collection-list-element.component.spec.ts
index 0f1b7c4444..fe54b8195e 100644
--- a/src/app/shared/object-list/collection-list-element/collection-list-element.component.spec.ts
+++ b/src/app/shared/object-list/collection-list-element/collection-list-element.component.spec.ts
@@ -56,4 +56,4 @@ describe('CollectionListElementComponent', () => {
       expect(descriptionText).not.toBeDefined();
     }
   });
-})
+});
diff --git a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.ts b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.ts
index 5545ea17ec..9a462c124e 100644
--- a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.ts
+++ b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.ts
@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
 
 import { renderElementsFor } from '../../../object-collection/shared/dso-element-decorator';
-import { CollectionSearchResult } from './collection-search-result.model';
 import { SearchResultListElementComponent } from '../search-result-list-element.component';
 import { Collection } from '../../../../core/shared/collection.model';
 import { ViewMode } from '../../../../+search-page/search-options.model';
+import { CollectionSearchResult } from '../../../object-collection/shared/collection-search-result.model';
 
 @Component({
   selector: 'ds-collection-search-result-list-element',
diff --git a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result.model.ts b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result.model.ts
deleted file mode 100644
index ad48247e70..0000000000
--- a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result.model.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { SearchResult } from '../../../../+search-page/search-result.model';
-import { Collection } from '../../../../core/shared/collection.model';
-
-export class CollectionSearchResult extends SearchResult<Collection> {
-}
diff --git a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.ts b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.ts
index 2d96f61833..5664e840e3 100644
--- a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.ts
+++ b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 import { renderElementsFor } from '../../../object-collection/shared/dso-element-decorator';
-import { CommunitySearchResult } from './community-search-result.model';
+import { CommunitySearchResult } from '../../../object-collection/shared/community-search-result.model';
 import { SearchResultListElementComponent } from '../search-result-list-element.component';
 import { Community } from '../../../../core/shared/community.model';
 import { ViewMode } from '../../../../+search-page/search-options.model';
diff --git a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result.model.ts b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result.model.ts
deleted file mode 100644
index efeb328e11..0000000000
--- a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result.model.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { SearchResult } from '../../../../+search-page/search-result.model';
-import { Community } from '../../../../core/shared/community.model';
-
-export class CommunitySearchResult extends SearchResult<Community> {
-}
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
index 964e52603f..72f41cd770 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
@@ -1,4 +1,4 @@
-<div class="clamp-{{lines}} {{type}} {{fixedHeight ? 'fixedHeight' : ''}}">
+<div class="clamp-{{lines}} min-{{minLines}} {{type}} {{fixedHeight ? 'fixedHeight' : ''}}">
     <div class="content">
         <ng-content></ng-content>
     </div>
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
index 698f1fb1aa..bb26239c57 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
@@ -25,7 +25,11 @@
             background: linear-gradient(to right, rgba(255, 255, 255, 0), $body-bg 70%);
         }
     }
+}
 
+@mixin min($lines, $size-factor: 1, $line-height: $line-height-base) {
+    $height: $line-height * $font-size-base * $size-factor;
+    min-height: $lines * $height;
 }
 
 $h4-factor: strip-unit($h4-font-size);
@@ -42,7 +46,18 @@ $h4-factor: strip-unit($h4-font-size);
     }
 }
 
-
 .clamp-none {
     overflow: hidden;
+    @for $i from 1 through 15 {
+        &.min-#{$i} {
+            transition: height 1s;
+            @include min($i);
+            &.title {
+                @include min($i, 1.25);
+            }
+            &.h4 {
+                @include min($i, $h4-factor, $headings-line-height);
+            }
+        }
+    }
 }
\ No newline at end of file

From 9fd7b0ab2eaee1272c3fdeb28ac630cd8dff246d Mon Sep 17 00:00:00 2001
From: Lotte Hofstede <lotte_hofstede@hotmail.com>
Date: Thu, 8 Feb 2018 14:42:13 +0100
Subject: [PATCH 12/23] tslint fixes

---
 .../community-search-result-grid-element.component.spec.ts      | 1 -
 src/app/shared/truncatable/truncatable.component.spec.ts        | 2 ++
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.spec.ts b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.spec.ts
index 6d70d08901..6d65466f4d 100644
--- a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.spec.ts
@@ -9,7 +9,6 @@ import { TruncatePipe } from '../../../utils/truncate.pipe';
 import { Community } from '../../../../core/shared/community.model';
 import { TruncatableService } from '../../../truncatable/truncatable.service';
 
-
 let fixture: ComponentFixture<CommunitySearchResultGridElementComponent>;
 const queryParam = 'test query';
 const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
diff --git a/src/app/shared/truncatable/truncatable.component.spec.ts b/src/app/shared/truncatable/truncatable.component.spec.ts
index 14a499f4e0..3c2ce7150a 100644
--- a/src/app/shared/truncatable/truncatable.component.spec.ts
+++ b/src/app/shared/truncatable/truncatable.component.spec.ts
@@ -11,6 +11,7 @@ describe('TruncatableComponent', () => {
   const identifier = '1234567890';
   let truncatableService;
   const truncatableServiceStub: any = {
+    /* tslint:disable:no-empty */
     isCollapsed: (id: string) => {
       if (id === '1') {
         return Observable.of(true)
@@ -24,6 +25,7 @@ describe('TruncatableComponent', () => {
     },
     toggle: (id: string) => {
     }
+    /* tslint:enable:no-empty */
   };
   beforeEach(async(() => {
     TestBed.configureTestingModule({

From 52781d02c448a04734af2eaabe2b946b77584afe Mon Sep 17 00:00:00 2001
From: Lotte Hofstede <lotte_hofstede@hotmail.com>
Date: Tue, 13 Feb 2018 11:50:35 +0100
Subject: [PATCH 13/23] drag/click differensiating directive + fix for
 fixedheight truncatable elements

---
 src/app/shared/shared.module.ts               |  4 +++-
 .../truncatable-part.component.scss           |  2 +-
 .../truncatable/truncatable.component.html    |  2 +-
 src/app/shared/utils/drag-click.directive.ts  | 23 +++++++++++++++++++
 4 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 src/app/shared/utils/drag-click.directive.ts

diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 202a4b0c23..c78c218fa9 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -40,6 +40,7 @@ import { SearchResultGridElementComponent } from './object-grid/search-result-gr
 import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component';
 import { GridThumbnailComponent } from './object-grid/grid-thumbnail/grid-thumbnail.component';
 import { VarDirective } from './utils/var.directive';
+import { DragClickDirective } from './utils/drag-click.directive';
 import { TruncatePipe } from './utils/truncate.pipe';
 import { TruncatableComponent } from './truncatable/truncatable.component';
 import { TruncatableService } from './truncatable/truncatable.service';
@@ -104,7 +105,8 @@ const PROVIDERS = [
 ];
 
 const DIRECTIVES = [
-  VarDirective
+  VarDirective,
+  DragClickDirective
 ];
 
 @NgModule({
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
index bb26239c57..ac3641df39 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
@@ -49,7 +49,7 @@ $h4-factor: strip-unit($h4-font-size);
 .clamp-none {
     overflow: hidden;
     @for $i from 1 through 15 {
-        &.min-#{$i} {
+        &.fixedHeight.min-#{$i} {
             transition: height 1s;
             @include min($i);
             &.title {
diff --git a/src/app/shared/truncatable/truncatable.component.html b/src/app/shared/truncatable/truncatable.component.html
index d3ed37e596..c03e93c2ce 100644
--- a/src/app/shared/truncatable/truncatable.component.html
+++ b/src/app/shared/truncatable/truncatable.component.html
@@ -1,3 +1,3 @@
-<div (click)="toggle()" (mouseenter)="hoverExpand()" (mouseleave)="hoverCollapse">
+<div dsDragClick (actualClick)="toggle()" (mouseenter)="hoverExpand()" (mouseleave)="hoverCollapse">
     <ng-content></ng-content>
 </div>
\ No newline at end of file
diff --git a/src/app/shared/utils/drag-click.directive.ts b/src/app/shared/utils/drag-click.directive.ts
new file mode 100644
index 0000000000..ec9b02dea5
--- /dev/null
+++ b/src/app/shared/utils/drag-click.directive.ts
@@ -0,0 +1,23 @@
+import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
+
+@Directive({
+  selector: '[dsDragClick]'
+})
+export class DragClickDirective {
+  private start;
+  @Output() actualClick = new EventEmitter();
+
+  @HostListener('mousedown', ['$event'])
+  mousedownEvent(event) {
+    this.start = new Date();
+  }
+
+  @HostListener('mouseup', ['$event'])
+  mouseupEvent(event) {
+    const end: any = new Date();
+    const clickTime = end - this.start;
+    if (clickTime < 250) {
+      this.actualClick.emit(event)
+    }
+  }
+}

From 2895bb61e83fe01f164ea69aa11055efe162ab47 Mon Sep 17 00:00:00 2001
From: Lotte Hofstede <lotte_hofstede@hotmail.com>
Date: Tue, 13 Feb 2018 15:06:07 +0100
Subject: [PATCH 14/23] fixed list element tests

---
 src/app/core/shared/community.model.ts        |   1 +
 .../collection-grid-element.component.spec.ts |  67 ++++++-----
 .../community-grid-element.component.spec.ts  |  64 ++++++-----
 .../item-grid-element.component.html          |   4 +-
 .../item-grid-element.component.spec.ts       |  99 ++++++++++++-----
 ...arch-result-grid-element.component.spec.ts |  76 +++++++------
 ...arch-result-grid-element.component.spec.ts |  69 +++++++-----
 ...arch-result-grid-element.component.spec.ts |  23 +---
 .../search-result-grid-element.component.ts   |   6 +-
 .../collection-list-element.component.html    |   2 +-
 .../collection-list-element.component.spec.ts |  65 ++++++-----
 .../community-list-element.component.html     |   2 +-
 .../community-list-element.component.spec.ts  |  65 ++++++-----
 .../item-list-element.component.html          |   2 +-
 .../item-list-element.component.spec.ts       | 101 ++++++++++++-----
 ...-search-result-list-element.component.html |   2 +-
 ...arch-result-list-element.component.spec.ts |  75 ++++++++-----
 ...-search-result-list-element.component.html |   2 +-
 ...arch-result-list-element.component.spec.ts |  68 +++++++-----
 ...-search-result-list-element.component.html |   2 +-
 ...arch-result-list-element.component.spec.ts | 104 ++++++++++++------
 21 files changed, 545 insertions(+), 354 deletions(-)

diff --git a/src/app/core/shared/community.model.ts b/src/app/core/shared/community.model.ts
index c34666b0f0..ea80a02269 100644
--- a/src/app/core/shared/community.model.ts
+++ b/src/app/core/shared/community.model.ts
@@ -24,6 +24,7 @@ export class Community extends DSpaceObject {
    * Corresponds to the metadata field dc.description.abstract
    */
   get shortDescription(): string {
+    debugger;
     return this.findMetadata('dc.description.abstract');
   }
 
diff --git a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.spec.ts b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.spec.ts
index eaa6edc4d0..cc72ff3043 100644
--- a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.spec.ts
@@ -1,21 +1,13 @@
 import { CollectionGridElementComponent } from './collection-grid-element.component';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { Observable } from 'rxjs/Observable';
-import { ActivatedRoute, Router } from '@angular/router';
-import { RouterStub } from '../../testing/router-stub';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { Collection } from '../../../core/shared/collection.model';
+
+let collectionGridElementComponent: CollectionGridElementComponent;
 let fixture: ComponentFixture<CollectionGridElementComponent>;
-const queryParam = 'test query';
-const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
-const activatedRouteStub = {
-  queryParams: Observable.of({
-    query: queryParam,
-    scope: scopeParam
-  })
-};
-const mockCollection: Collection = Object.assign(new Collection(), {
+
+const mockCollectionWithAbstract: Collection = Object.assign(new Collection(), {
   metadata: [
     {
       key: 'dc.description.abstract',
@@ -23,37 +15,56 @@ const mockCollection: Collection = Object.assign(new Collection(), {
       value: 'Short description'
     }]
 });
-const createdGridElementComponent:CollectionGridElementComponent= new CollectionGridElementComponent(mockCollection);
+
+const mockCollectionWithoutAbstract: Collection = Object.assign(new Collection(), {
+  metadata: [
+    {
+      key: 'dc.title',
+      language: 'en_US',
+      value: 'Test title'
+    }]
+});
 
 describe('CollectionGridElementComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ CollectionGridElementComponent ],
       providers: [
-        { provide: ActivatedRoute, useValue: activatedRouteStub },
-        { provide: Router, useClass: RouterStub },
-        { provide: 'objectElementProvider', useValue: (createdGridElementComponent)}
+        { provide: 'objectElementProvider', useValue: (mockCollectionWithAbstract)}
       ],
 
       schemas: [ NO_ERRORS_SCHEMA ]
-    }).compileComponents();  // compile template and css
+    }).overrideComponent(CollectionGridElementComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    }).compileComponents();
   }));
 
   beforeEach(async(() => {
     fixture = TestBed.createComponent(CollectionGridElementComponent);
+    collectionGridElementComponent = fixture.componentInstance;
   }));
 
-  it('should show the collection cards in the grid element',() => {
-    expect(fixture.debugElement.query(By.css('ds-collection-grid-element'))).toBeDefined();
+  describe('When the collection has an abstract', () => {
+    beforeEach(() => {
+      collectionGridElementComponent.object = mockCollectionWithAbstract;
+      fixture.detectChanges();
+    });
+
+    it('should show the description paragraph', () => {
+      const collectionAbstractField = fixture.debugElement.query(By.css('p.card-text'));
+      expect(collectionAbstractField).not.toBeNull();
+    });
   });
 
-  it('should only show the description if "short description" metadata is present',() => {
-    const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
+  describe('When the collection has no abstract', () => {
+    beforeEach(() => {
+      collectionGridElementComponent.object = mockCollectionWithoutAbstract;
+      fixture.detectChanges();
+    });
 
-    if (mockCollection.shortDescription.length > 0) {
-      expect(descriptionText).toBeDefined();
-    }else {
-      expect(descriptionText).not.toBeDefined();
-    }
+    it('should not show the description paragraph', () => {
+      const collectionAbstractField = fixture.debugElement.query(By.css('p.card-text'));
+      expect(collectionAbstractField).toBeNull();
+    });
   });
-})
+});
diff --git a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.spec.ts b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.spec.ts
index 1fd98bf225..dabb137ea7 100644
--- a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.spec.ts
@@ -1,24 +1,13 @@
 import { CommunityGridElementComponent } from './community-grid-element.component';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { RouterStub } from '../../testing/router-stub';
-import { Observable } from 'rxjs/Observable';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { Community } from '../../../core/shared/community.model';
 
 let communityGridElementComponent: CommunityGridElementComponent;
 let fixture: ComponentFixture<CommunityGridElementComponent>;
-const queryParam = 'test query';
-const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
-const activatedRouteStub = {
-  queryParams: Observable.of({
-    query: queryParam,
-    scope: scopeParam
-  })
-};
 
-const mockCommunity: Community = Object.assign(new Community(), {
+const mockCommunityWithAbstract: Community = Object.assign(new Community(), {
   metadata: [
     {
       key: 'dc.description.abstract',
@@ -27,40 +16,55 @@ const mockCommunity: Community = Object.assign(new Community(), {
     }]
 });
 
-const createdGridElementComponent:CommunityGridElementComponent= new CommunityGridElementComponent(mockCommunity);
+const mockCommunityWithoutAbstract: Community = Object.assign(new Community(), {
+  metadata: [
+    {
+      key: 'dc.title',
+      language: 'en_US',
+      value: 'Test title'
+    }]
+});
 
 describe('CommunityGridElementComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ CommunityGridElementComponent ],
       providers: [
-        { provide: ActivatedRoute, useValue: activatedRouteStub },
-        { provide: Router, useClass: RouterStub },
-        { provide: 'objectElementProvider', useValue: (createdGridElementComponent)}
+        { provide: 'objectElementProvider', useValue: (mockCommunityWithAbstract)}
       ],
 
     schemas: [ NO_ERRORS_SCHEMA ]
-    }).compileComponents();  // compile template and css
+    }).overrideComponent(CommunityGridElementComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    }).compileComponents();
   }));
 
   beforeEach(async(() => {
     fixture = TestBed.createComponent(CommunityGridElementComponent);
     communityGridElementComponent = fixture.componentInstance;
-
   }));
 
-  it('should show the community cards in the grid element',() => {
-    console.log(fixture.debugElement.query(By.css('ds-community-grid-element')));
-    expect(fixture.debugElement.query(By.css('ds-community-grid-element'))).toBeDefined();
-  })
+  describe('When the community has an abstract', () => {
+    beforeEach(() => {
+      communityGridElementComponent.object = mockCommunityWithAbstract;
+      fixture.detectChanges();
+    });
 
-  it('should only show the description if "short description" metadata is present',() => {
-    const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
+    it('should show the description paragraph', () => {
+      const communityAbstractField = fixture.debugElement.query(By.css('p.card-text'));
+      expect(communityAbstractField).not.toBeNull();
+    });
+  });
 
-    if (mockCommunity.shortDescription.length > 0) {
-      expect(descriptionText).toBeDefined();
-    }else {
-      expect(descriptionText).not.toBeDefined();
-    }
+  describe('When the community has no abstract', () => {
+    beforeEach(() => {
+      communityGridElementComponent.object = mockCommunityWithoutAbstract;
+      fixture.detectChanges();
+    });
+
+    it('should not show the description paragraph', () => {
+      const communityAbstractField = fixture.debugElement.query(By.css('p.card-text'));
+      expect(communityAbstractField).toBeNull();
+    });
   });
 });
diff --git a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.html b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.html
index 47b5a6b2e6..328bfc3bc9 100644
--- a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.html
+++ b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.html
@@ -6,11 +6,11 @@
   </a>
   <div class="card-body">
     <h4 class="card-title">{{object.findMetadata('dc.title')}}</h4>
-    <p *ngIf="object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);" class="item-authors card-text text-muted">
+    <p *ngIf="object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length > 0" class="item-authors card-text text-muted">
         <span *ngFor="let authorMd of object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let last=last;">{{authorMd.value}}
             <span *ngIf="!last">; </span>
         </span>
-      <span *ngIf="object.findMetadata('dc.date.issued')">{{object.findMetadata("dc.date.issued")}}</span>
+      <span *ngIf="object.findMetadata('dc.date.issued')" class="item-date">{{object.findMetadata("dc.date.issued")}}</span>
     </p>
 
     <p *ngIf="object.findMetadata('dc.description.abstract')" class="item-abstract card-text">{{object.findMetadata("dc.description.abstract") | dsTruncate:[200] }}</p>
diff --git a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.spec.ts b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.spec.ts
index 8c7f856450..0dd7f0be0a 100644
--- a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.spec.ts
@@ -1,47 +1,55 @@
 import { ItemGridElementComponent } from './item-grid-element.component';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { Observable } from 'rxjs/Observable';
-import { ActivatedRoute, Router } from '@angular/router';
-import { RouterStub } from '../../testing/router-stub';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { TruncatePipe } from '../../utils/truncate.pipe';
 import { Item } from '../../../core/shared/item.model';
+import { Observable } from 'rxjs/Observable';
 
 let itemGridElementComponent: ItemGridElementComponent;
 let fixture: ComponentFixture<ItemGridElementComponent>;
-const queryParam = 'test query';
-const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
-const activatedRouteStub = {
-  queryParams: Observable.of({
-    query: queryParam,
-    scope: scopeParam
-  })
-};
-/* tslint:disable:no-shadowed-variable */
-const mockItem: Item = Object.assign(new Item(), {
+
+const mockItemWithAuthorAndDate: Item = Object.assign(new Item(), {
+  bitstreams: Observable.of({}),
   metadata: [
     {
       key: 'dc.contributor.author',
       language: 'en_US',
       value: 'Smith, Donald'
+    },
+    {
+      key: 'dc.date.issued',
+      language: null,
+      value: '2015-06-26'
+    }]
+});
+const mockItemWithoutAuthorAndDate: Item = Object.assign(new Item(), {
+  bitstreams: Observable.of({}),
+  metadata: [
+    {
+      key: 'dc.title',
+      language: 'en_US',
+      value: 'This is just another title'
+    },
+    {
+      key: 'dc.type',
+      language: null,
+      value: 'Article'
     }]
 });
-
-const createdGridElementComponent:ItemGridElementComponent= new ItemGridElementComponent(mockItem);
 
 describe('ItemGridElementComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ ItemGridElementComponent , TruncatePipe],
       providers: [
-        { provide: ActivatedRoute, useValue: activatedRouteStub },
-        { provide: Router, useClass: RouterStub },
-        { provide: 'objectElementProvider', useValue: {createdGridElementComponent}}
+        { provide: 'objectElementProvider', useValue: {mockItemWithAuthorAndDate}}
       ],
 
       schemas: [ NO_ERRORS_SCHEMA ]
-    }).compileComponents();  // compile template and css
+    }).overrideComponent(ItemGridElementComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    }).compileComponents();
   }));
 
   beforeEach(async(() => {
@@ -50,18 +58,51 @@ describe('ItemGridElementComponent', () => {
 
   }));
 
-  it('should show the item cards in the grid element',() => {
-    expect(fixture.debugElement.query(By.css('ds-item-grid-element'))).toBeDefined()
+  describe('When the item has an author', () => {
+    beforeEach(() => {
+      itemGridElementComponent.object = mockItemWithAuthorAndDate;
+      fixture.detectChanges();
+    });
+
+    it('should show the author paragraph', () => {
+      const itemAuthorField = fixture.debugElement.query(By.css('p.item-authors'));
+      expect(itemAuthorField).not.toBeNull();
+    });
   });
 
-  it('should only show the author span if the author metadata is present',() => {
-    const itemAuthorField = expect(fixture.debugElement.query(By.css('p.item-authors')));
+  describe('When the item has no author', () => {
+    beforeEach(() => {
+      itemGridElementComponent.object = mockItemWithoutAuthorAndDate;
+      fixture.detectChanges();
+    });
 
-    if (mockItem.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length > 0) {
-      expect(itemAuthorField).toBeDefined();
-    }else {
-      expect(itemAuthorField).toBeDefined();
-    }
+    it('should not show the author paragraph', () => {
+      const itemAuthorField = fixture.debugElement.query(By.css('p.item-authors'));
+      expect(itemAuthorField).toBeNull();
+    });
   });
 
+  describe('When the item has an issuedate', () => {
+    beforeEach(() => {
+      itemGridElementComponent.object = mockItemWithAuthorAndDate;
+      fixture.detectChanges();
+    });
+
+    it('should show the issuedate span', () => {
+      const itemAuthorField = fixture.debugElement.query(By.css('span.item-date'));
+      expect(itemAuthorField).not.toBeNull();
+    });
+  });
+
+  describe('When the item has no issuedate', () => {
+    beforeEach(() => {
+      itemGridElementComponent.object = mockItemWithoutAuthorAndDate;
+      fixture.detectChanges();
+    });
+
+    it('should not show the issuedate span', () => {
+      const dateField = fixture.debugElement.query(By.css('span.item-date'));
+      expect(dateField).toBeNull();
+    });
+  });
 });
diff --git a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.spec.ts b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.spec.ts
index 9eb65dbbdd..f3220baaa3 100644
--- a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.spec.ts
@@ -1,69 +1,83 @@
 import { CollectionSearchResultGridElementComponent } from './collection-search-result-grid-element.component';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Observable } from 'rxjs/Observable';
-import { ActivatedRoute, Router } from '@angular/router';
-import { RouterStub } from '../../../testing/router-stub';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { TruncatePipe } from '../../../utils/truncate.pipe';
-import { Community } from '../../../../core/shared/community.model';
 import { Collection } from '../../../../core/shared/collection.model';
 import { TruncatableService } from '../../../truncatable/truncatable.service';
+import { CollectionSearchResult } from '../../../object-collection/shared/collection-search-result.model';
 
+let collectionSearchResultGridElementComponent: CollectionSearchResultGridElementComponent;
 let fixture: ComponentFixture<CollectionSearchResultGridElementComponent>;
-const queryParam = 'test query';
-const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
-const activatedRouteStub = {
-  queryParams: Observable.of({
-    query: queryParam,
-    scope: scopeParam
-  })
-};
+
 const truncatableServiceStub: any = {
   isCollapsed: (id: number) => Observable.of(true),
 };
 
-const mockCollection: Collection = Object.assign(new Collection(), {
+const mockCollectionWithAbstract: CollectionSearchResult = new CollectionSearchResult();
+mockCollectionWithAbstract.hitHighlights = [];
+mockCollectionWithAbstract.dspaceObject = Object.assign(new Collection(), {
   metadata: [
     {
       key: 'dc.description.abstract',
       language: 'en_US',
       value: 'Short description'
-    }]
-
+    } ]
+});
+
+const mockCollectionWithoutAbstract: CollectionSearchResult = new CollectionSearchResult();
+mockCollectionWithoutAbstract.hitHighlights = [];
+mockCollectionWithoutAbstract.dspaceObject = Object.assign(new Collection(), {
+  metadata: [
+    {
+      key: 'dc.title',
+      language: 'en_US',
+      value: 'Test title'
+    } ]
 });
-const createdGridElementComponent: CollectionSearchResultGridElementComponent = new CollectionSearchResultGridElementComponent(mockCollection, truncatableServiceStub as TruncatableService);
 
 describe('CollectionSearchResultGridElementComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [CollectionSearchResultGridElementComponent, TruncatePipe],
+      declarations: [ CollectionSearchResultGridElementComponent, TruncatePipe ],
       providers: [
         { provide: TruncatableService, useValue: truncatableServiceStub },
-        { provide: ActivatedRoute, useValue: activatedRouteStub },
-        { provide: Router, useClass: RouterStub },
-        { provide: 'objectElementProvider', useValue: (createdGridElementComponent) }
+        { provide: 'objectElementProvider', useValue: (mockCollectionWithAbstract) }
       ],
 
-      schemas: [NO_ERRORS_SCHEMA]
-    }).compileComponents();  // compile template and css
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).overrideComponent(CollectionSearchResultGridElementComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    }).compileComponents();
   }));
 
   beforeEach(async(() => {
     fixture = TestBed.createComponent(CollectionSearchResultGridElementComponent);
+    collectionSearchResultGridElementComponent = fixture.componentInstance;
   }));
 
-  it('should show the item result cards in the grid element', () => {
-    expect(fixture.debugElement.query(By.css('ds-collection-search-result-grid-element'))).toBeDefined();
+  describe('When the collection has an abstract', () => {
+    beforeEach(() => {
+      collectionSearchResultGridElementComponent.dso = mockCollectionWithAbstract.dspaceObject;
+      fixture.detectChanges();
+    });
+
+    it('should show the description paragraph', () => {
+      const collectionAbstractField = fixture.debugElement.query(By.css('p.card-text'));
+      expect(collectionAbstractField).not.toBeNull();
+    });
   });
 
-  it('should only show the description if "short description" metadata is present', () => {
-    const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
+  describe('When the collection has no abstract', () => {
+    beforeEach(() => {
+      collectionSearchResultGridElementComponent.dso = mockCollectionWithoutAbstract.dspaceObject;
+      fixture.detectChanges();
+    });
 
-    if (mockCollection.shortDescription.length > 0) {
-      expect(descriptionText).toBeDefined();
-    } else {
-      expect(descriptionText).not.toBeDefined();
-    }
+    it('should not show the description paragraph', () => {
+      const collectionAbstractField = fixture.debugElement.query(By.css('p.card-text'));
+      expect(collectionAbstractField).toBeNull();
+    });
   });
 });
diff --git a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.spec.ts b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.spec.ts
index 6d70d08901..aa62baadc9 100644
--- a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.spec.ts
@@ -1,39 +1,41 @@
 import { CommunitySearchResultGridElementComponent } from './community-search-result-grid-element.component';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Observable } from 'rxjs/Observable';
-import { ActivatedRoute, Router } from '@angular/router';
-import { RouterStub } from '../../../testing/router-stub';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { TruncatePipe } from '../../../utils/truncate.pipe';
 import { Community } from '../../../../core/shared/community.model';
 import { TruncatableService } from '../../../truncatable/truncatable.service';
+import { CommunitySearchResult } from '../../../object-collection/shared/community-search-result.model';
 
-
+let communitySearchResultGridElementComponent: CommunitySearchResultGridElementComponent;
 let fixture: ComponentFixture<CommunitySearchResultGridElementComponent>;
-const queryParam = 'test query';
-const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
-const activatedRouteStub = {
-  queryParams: Observable.of({
-    query: queryParam,
-    scope: scopeParam
-  })
-};
+
 const truncatableServiceStub: any = {
   isCollapsed: (id: number) => Observable.of(true),
 };
 
-const mockCommunity: Community = Object.assign(new Community(), {
+const mockCommunityWithAbstract: CommunitySearchResult = new CommunitySearchResult();
+mockCommunityWithAbstract.hitHighlights = [];
+mockCommunityWithAbstract.dspaceObject = Object.assign(new Community(), {
   metadata: [
     {
       key: 'dc.description.abstract',
       language: 'en_US',
       value: 'Short description'
     } ]
-
 });
 
-const createdGridElementComponent: CommunitySearchResultGridElementComponent = new CommunitySearchResultGridElementComponent(mockCommunity, truncatableServiceStub as TruncatableService);
+const mockCommunityWithoutAbstract: CommunitySearchResult = new CommunitySearchResult();
+mockCommunityWithoutAbstract.hitHighlights = [];
+mockCommunityWithoutAbstract.dspaceObject = Object.assign(new Community(), {
+  metadata: [
+    {
+      key: 'dc.title',
+      language: 'en_US',
+      value: 'Test title'
+    } ]
+});
 
 describe('CommunitySearchResultGridElementComponent', () => {
   beforeEach(async(() => {
@@ -41,30 +43,41 @@ describe('CommunitySearchResultGridElementComponent', () => {
       declarations: [ CommunitySearchResultGridElementComponent, TruncatePipe ],
       providers: [
         { provide: TruncatableService, useValue: truncatableServiceStub },
-        { provide: ActivatedRoute, useValue: activatedRouteStub },
-        { provide: Router, useClass: RouterStub },
-        { provide: 'objectElementProvider', useValue: (createdGridElementComponent) }
+        { provide: 'objectElementProvider', useValue: (mockCommunityWithAbstract) }
       ],
 
       schemas: [ NO_ERRORS_SCHEMA ]
-    }).compileComponents();  // compile template and css
+    }).overrideComponent(CommunitySearchResultGridElementComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    }).compileComponents();
   }));
 
   beforeEach(async(() => {
     fixture = TestBed.createComponent(CommunitySearchResultGridElementComponent);
+    communitySearchResultGridElementComponent = fixture.componentInstance;
   }));
 
-  it('should show the item result cards in the grid element', () => {
-    expect(fixture.debugElement.query(By.css('ds-community-search-result-grid-element'))).toBeDefined();
+  describe('When the community has an abstract', () => {
+    beforeEach(() => {
+      communitySearchResultGridElementComponent.dso = mockCommunityWithAbstract.dspaceObject;
+      fixture.detectChanges();
+    });
+
+    it('should show the description paragraph', () => {
+      const communityAbstractField = fixture.debugElement.query(By.css('p.card-text'));
+      expect(communityAbstractField).not.toBeNull();
+    });
   });
 
-  it('should only show the description if "short description" metadata is present',() => {
-    const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
+  describe('When the community has no abstract', () => {
+    beforeEach(() => {
+      communitySearchResultGridElementComponent.dso = mockCommunityWithoutAbstract.dspaceObject;
+      fixture.detectChanges();
+    });
 
-    if (mockCommunity.shortDescription.length > 0) {
-      expect(descriptionText).toBeDefined();
-    }else {
-      expect(descriptionText).not.toBeDefined();
-    }
+    it('should not show the description paragraph', () => {
+      const communityAbstractField = fixture.debugElement.query(By.css('p.card-text'));
+      expect(communityAbstractField).toBeNull();
+    });
   });
 });
diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.spec.ts b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.spec.ts
index fbb267b8e6..cf8a097ddb 100644
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.spec.ts
@@ -1,8 +1,6 @@
 import { ItemSearchResultGridElementComponent } from './item-search-result-grid-element.component';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Observable } from 'rxjs/Observable';
-import { ActivatedRoute, Router } from '@angular/router';
-import { RouterStub } from '../../../testing/router-stub';
 import { NO_ERRORS_SCHEMA, ChangeDetectionStrategy } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { TruncatePipe } from '../../../utils/truncate.pipe';
@@ -13,14 +11,6 @@ import { ItemSearchResult } from '../../../object-collection/shared/item-search-
 
 let itemSearchResultGridElementComponent: ItemSearchResultGridElementComponent;
 let fixture: ComponentFixture<ItemSearchResultGridElementComponent>;
-const queryParam = 'test query';
-const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
-const activatedRouteStub = {
-  queryParams: Observable.of({
-    query: queryParam,
-    scope: scopeParam
-  })
-};
 
 const truncatableServiceStub: any = {
   isCollapsed: (id: number) => Observable.of(true),
@@ -46,7 +36,7 @@ mockItemWithAuthorAndDate.dspaceObject = Object.assign(new Item(), {
 const mockItemWithoutAuthorAndDate: ItemSearchResult = new ItemSearchResult();
 mockItemWithoutAuthorAndDate.hitHighlights = [];
 mockItemWithoutAuthorAndDate.dspaceObject = Object.assign(new Item(), {
-  bitstream: Observable.of({}),
+  bitstreams: Observable.of({}),
   metadata: [
     {
       key: 'dc.title',
@@ -60,8 +50,6 @@ mockItemWithoutAuthorAndDate.dspaceObject = Object.assign(new Item(), {
     }]
 });
 
-const createdGridElementComponent: ItemSearchResultGridElementComponent = new ItemSearchResultGridElementComponent(mockItemWithAuthorAndDate, truncatableServiceStub as TruncatableService);
-
 describe('ItemSearchResultGridElementComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -69,9 +57,7 @@ describe('ItemSearchResultGridElementComponent', () => {
       declarations: [ItemSearchResultGridElementComponent, TruncatePipe],
       providers: [
         { provide: TruncatableService, useValue: truncatableServiceStub },
-        { provide: ActivatedRoute, useValue: activatedRouteStub },
-        { provide: Router, useClass: RouterStub },
-        { provide: 'objectElementProvider', useValue: (createdGridElementComponent) }
+        { provide: 'objectElementProvider', useValue: (mockItemWithoutAuthorAndDate) }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(ItemSearchResultGridElementComponent, {
@@ -84,7 +70,7 @@ describe('ItemSearchResultGridElementComponent', () => {
     itemSearchResultGridElementComponent = fixture.componentInstance;
   }));
 
-  fdescribe('When the item has an author', () => {
+  describe('When the item has an author', () => {
     beforeEach(() => {
       itemSearchResultGridElementComponent.dso = mockItemWithAuthorAndDate.dspaceObject;
       fixture.detectChanges();
@@ -99,6 +85,7 @@ describe('ItemSearchResultGridElementComponent', () => {
   describe('When the item has no author', () => {
     beforeEach(() => {
       itemSearchResultGridElementComponent.dso = mockItemWithoutAuthorAndDate.dspaceObject;
+      fixture.detectChanges();
     });
 
     it('should not show the author paragraph', () => {
@@ -110,6 +97,7 @@ describe('ItemSearchResultGridElementComponent', () => {
   describe('When the item has an issuedate', () => {
     beforeEach(() => {
       itemSearchResultGridElementComponent.dso = mockItemWithAuthorAndDate.dspaceObject;
+      fixture.detectChanges();
     });
 
     it('should show the issuedate span', () => {
@@ -121,6 +109,7 @@ describe('ItemSearchResultGridElementComponent', () => {
   describe('When the item has no issuedate', () => {
     beforeEach(() => {
       itemSearchResultGridElementComponent.dso = mockItemWithoutAuthorAndDate.dspaceObject;
+      fixture.detectChanges();
     });
 
     it('should not show the issuedate span', () => {
diff --git a/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts
index c04c1d54f4..e6217eb0bb 100644
--- a/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts
@@ -17,10 +17,9 @@ import { Observable } from 'rxjs/Observable';
 export class SearchResultGridElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends AbstractListableElementComponent<T> {
   dso: K;
 
-  public constructor(@Inject('objectElementProvider') public gridable: ListableObject, private truncatableService: TruncatableService) {
-    super(gridable);
+  public constructor(@Inject('objectElementProvider') public listableObject: ListableObject, private truncatableService: TruncatableService) {
+    super(listableObject);
     this.dso = this.object.dspaceObject;
-    console.log(JSON.stringify(this.object.hitHighlights));
   }
 
   getValues(keys: string[]): string[] {
@@ -44,7 +43,6 @@ export class SearchResultGridElementComponent<T extends SearchResult<K>, K exten
 
   getFirstValue(key: string): string {
     let result: string;
-    console.log(JSON.stringify(this.object.hitHighlights));
     this.object.hitHighlights.some(
       (md: Metadatum) => {
         if (key === md.key) {
diff --git a/src/app/shared/object-list/collection-list-element/collection-list-element.component.html b/src/app/shared/object-list/collection-list-element/collection-list-element.component.html
index 8fb498d474..dec2794dca 100644
--- a/src/app/shared/object-list/collection-list-element/collection-list-element.component.html
+++ b/src/app/shared/object-list/collection-list-element/collection-list-element.component.html
@@ -1,6 +1,6 @@
 <a [routerLink]="['/collections/' + object.id]" class="lead">
     {{object.name}}
 </a>
-<div *ngIf="object.shortDescription" class="text-muted">
+<div *ngIf="object.shortDescription" class="text-muted abstract-text">
     {{object.shortDescription}}
 </div>
diff --git a/src/app/shared/object-list/collection-list-element/collection-list-element.component.spec.ts b/src/app/shared/object-list/collection-list-element/collection-list-element.component.spec.ts
index fe54b8195e..a31af1e50c 100644
--- a/src/app/shared/object-list/collection-list-element/collection-list-element.component.spec.ts
+++ b/src/app/shared/object-list/collection-list-element/collection-list-element.component.spec.ts
@@ -1,21 +1,13 @@
 import { CollectionListElementComponent } from './collection-list-element.component';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { Observable } from 'rxjs/Observable';
-import { ActivatedRoute, Router } from '@angular/router';
-import { RouterStub } from '../../testing/router-stub';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { Collection } from '../../../core/shared/collection.model';
+
+let collectionListElementComponent: CollectionListElementComponent;
 let fixture: ComponentFixture<CollectionListElementComponent>;
-const queryParam = 'test query';
-const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
-const activatedRouteStub = {
-  queryParams: Observable.of({
-    query: queryParam,
-    scope: scopeParam
-  })
-};
-const mockCollection: Collection = Object.assign(new Collection(), {
+
+const mockCollectionWithAbstract: Collection = Object.assign(new Collection(), {
   metadata: [
     {
       key: 'dc.description.abstract',
@@ -23,37 +15,56 @@ const mockCollection: Collection = Object.assign(new Collection(), {
       value: 'Short description'
     }]
 });
-const createdListElementComponent:CollectionListElementComponent= new CollectionListElementComponent(mockCollection);
+
+const mockCollectionWithoutAbstract: Collection = Object.assign(new Collection(), {
+  metadata: [
+    {
+      key: 'dc.title',
+      language: 'en_US',
+      value: 'Test title'
+    }]
+});
 
 describe('CollectionListElementComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ CollectionListElementComponent ],
       providers: [
-        { provide: ActivatedRoute, useValue: activatedRouteStub },
-        { provide: Router, useClass: RouterStub },
-        { provide: 'objectElementProvider', useValue: (createdListElementComponent)}
+        { provide: 'objectElementProvider', useValue: (mockCollectionWithAbstract)}
       ],
 
       schemas: [ NO_ERRORS_SCHEMA ]
-    }).compileComponents();  // compile template and css
+    }).overrideComponent(CollectionListElementComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    }).compileComponents();
   }));
 
   beforeEach(async(() => {
     fixture = TestBed.createComponent(CollectionListElementComponent);
+    collectionListElementComponent = fixture.componentInstance;
   }));
 
-  it('should show the collection cards in the list element',() => {
-    expect(fixture.debugElement.query(By.css('ds-collection-list-element'))).toBeDefined();
+  describe('When the collection has an abstract', () => {
+    beforeEach(() => {
+      collectionListElementComponent.object = mockCollectionWithAbstract;
+      fixture.detectChanges();
+    });
+
+    it('should show the description paragraph', () => {
+      const collectionAbstractField = fixture.debugElement.query(By.css('div.abstract-text'));
+      expect(collectionAbstractField).not.toBeNull();
+    });
   });
 
-  it('should only show the description if "short description" metadata is present',() => {
-    const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
+  describe('When the collection has no abstract', () => {
+    beforeEach(() => {
+      collectionListElementComponent.object = mockCollectionWithoutAbstract;
+      fixture.detectChanges();
+    });
 
-    if (mockCollection.shortDescription.length > 0) {
-      expect(descriptionText).toBeDefined();
-    }else {
-      expect(descriptionText).not.toBeDefined();
-    }
+    it('should not show the description paragraph', () => {
+      const collectionAbstractField = fixture.debugElement.query(By.css('div.abstract-text'));
+      expect(collectionAbstractField).toBeNull();
+    });
   });
 });
diff --git a/src/app/shared/object-list/community-list-element/community-list-element.component.html b/src/app/shared/object-list/community-list-element/community-list-element.component.html
index d39995de40..7582680fb2 100644
--- a/src/app/shared/object-list/community-list-element/community-list-element.component.html
+++ b/src/app/shared/object-list/community-list-element/community-list-element.component.html
@@ -1,6 +1,6 @@
 <a [routerLink]="['/communities/' + object.id]" class="lead">
     {{object.name}}
 </a>
-<div *ngIf="object.shortDescription" class="text-muted">
+<div *ngIf="object.shortDescription" class="text-muted abstract-text">
     {{object.shortDescription}}
 </div>
diff --git a/src/app/shared/object-list/community-list-element/community-list-element.component.spec.ts b/src/app/shared/object-list/community-list-element/community-list-element.component.spec.ts
index ff5a7fa441..08147d8573 100644
--- a/src/app/shared/object-list/community-list-element/community-list-element.component.spec.ts
+++ b/src/app/shared/object-list/community-list-element/community-list-element.component.spec.ts
@@ -1,24 +1,13 @@
 import { CommunityListElementComponent } from './community-list-element.component';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { RouterStub } from '../../testing/router-stub';
-import { Observable } from 'rxjs/Observable';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { Community } from '../../../core/shared/community.model';
 
 let communityListElementComponent: CommunityListElementComponent;
 let fixture: ComponentFixture<CommunityListElementComponent>;
-const queryParam = 'test query';
-const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
-const activatedRouteStub = {
-  queryParams: Observable.of({
-    query: queryParam,
-    scope: scopeParam
-  })
-};
 
-const mockCommunity: Community = Object.assign(new Community(), {
+const mockCommunityWithAbstract: Community = Object.assign(new Community(), {
   metadata: [
     {
       key: 'dc.description.abstract',
@@ -27,39 +16,55 @@ const mockCommunity: Community = Object.assign(new Community(), {
     }]
 });
 
-const createdListElementComponent:CommunityListElementComponent= new CommunityListElementComponent(mockCommunity);
+const mockCommunityWithoutAbstract: Community = Object.assign(new Community(), {
+  metadata: [
+    {
+      key: 'dc.title',
+      language: 'en_US',
+      value: 'Test title'
+    }]
+});
 
 describe('CommunityListElementComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ CommunityListElementComponent ],
       providers: [
-        { provide: ActivatedRoute, useValue: activatedRouteStub },
-        { provide: Router, useClass: RouterStub },
-        { provide: 'objectElementProvider', useValue: (createdListElementComponent)}
+        { provide: 'objectElementProvider', useValue: (mockCommunityWithAbstract)}
       ],
 
-    schemas: [ NO_ERRORS_SCHEMA ]
-    }).compileComponents();  // compile template and css
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).overrideComponent(CommunityListElementComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    }).compileComponents();
   }));
 
   beforeEach(async(() => {
     fixture = TestBed.createComponent(CommunityListElementComponent);
     communityListElementComponent = fixture.componentInstance;
-
   }));
 
-  it('should show the community cards in the list element',() => {
-    expect(fixture.debugElement.query(By.css('ds-community-list-element'))).toBeDefined();
-  })
+  describe('When the community has an abstract', () => {
+    beforeEach(() => {
+      communityListElementComponent.object = mockCommunityWithAbstract;
+      fixture.detectChanges();
+    });
 
-  it('should only show the description if "short description" metadata is present',() => {
-    const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
+    it('should show the description paragraph', () => {
+      const communityAbstractField = fixture.debugElement.query(By.css('div.abstract-text'));
+      expect(communityAbstractField).not.toBeNull();
+    });
+  });
 
-    if (mockCommunity.shortDescription.length > 0) {
-      expect(descriptionText).toBeDefined();
-    }else {
-      expect(descriptionText).not.toBeDefined();
-    }
+  describe('When the community has no abstract', () => {
+    beforeEach(() => {
+      communityListElementComponent.object = mockCommunityWithoutAbstract;
+      fixture.detectChanges();
+    });
+
+    it('should not show the description paragraph', () => {
+      const communityAbstractField = fixture.debugElement.query(By.css('div.abstract-text'));
+      expect(communityAbstractField).toBeNull();
+    });
   });
 });
diff --git a/src/app/shared/object-list/item-list-element/item-list-element.component.html b/src/app/shared/object-list/item-list-element/item-list-element.component.html
index e9bde67295..b4259c25c2 100644
--- a/src/app/shared/object-list/item-list-element/item-list-element.component.html
+++ b/src/app/shared/object-list/item-list-element/item-list-element.component.html
@@ -3,7 +3,7 @@
 </a>
 <div>
   <span class="text-muted">
-    <span *ngIf="object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);"
+    <span *ngIf="object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length > 0"
           class="item-list-authors">
         <span *ngFor="let authorMd of object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let last=last;">{{authorMd.value}}
             <span *ngIf="!last">; </span>
diff --git a/src/app/shared/object-list/item-list-element/item-list-element.component.spec.ts b/src/app/shared/object-list/item-list-element/item-list-element.component.spec.ts
index 3383ed8454..fc40527693 100644
--- a/src/app/shared/object-list/item-list-element/item-list-element.component.spec.ts
+++ b/src/app/shared/object-list/item-list-element/item-list-element.component.spec.ts
@@ -1,47 +1,55 @@
 import { ItemListElementComponent } from './item-list-element.component';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { Observable } from 'rxjs/Observable';
-import { ActivatedRoute, Router } from '@angular/router';
-import { RouterStub } from '../../testing/router-stub';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { TruncatePipe } from '../../utils/truncate.pipe';
 import { Item } from '../../../core/shared/item.model';
+import { Observable } from 'rxjs/Observable';
 
 let itemListElementComponent: ItemListElementComponent;
 let fixture: ComponentFixture<ItemListElementComponent>;
-const queryParam = 'test query';
-const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
-const activatedRouteStub = {
-  queryParams: Observable.of({
-    query: queryParam,
-    scope: scopeParam
-  })
-};
-/* tslint:disable:no-shadowed-variable */
-const mockItem: Item = Object.assign(new Item(), {
+
+const mockItemWithAuthorAndDate: Item = Object.assign(new Item(), {
+  bitstreams: Observable.of({}),
   metadata: [
     {
       key: 'dc.contributor.author',
       language: 'en_US',
       value: 'Smith, Donald'
+    },
+    {
+      key: 'dc.date.issued',
+      language: null,
+      value: '2015-06-26'
+    }]
+});
+const mockItemWithoutAuthorAndDate: Item = Object.assign(new Item(), {
+  bitstreams: Observable.of({}),
+  metadata: [
+    {
+      key: 'dc.title',
+      language: 'en_US',
+      value: 'This is just another title'
+    },
+    {
+      key: 'dc.type',
+      language: null,
+      value: 'Article'
     }]
 });
-
-const createdListElementComponent:ItemListElementComponent= new ItemListElementComponent(mockItem);
 
 describe('ItemListElementComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ ItemListElementComponent , TruncatePipe],
       providers: [
-        { provide: ActivatedRoute, useValue: activatedRouteStub },
-        { provide: Router, useClass: RouterStub },
-        { provide: 'objectElementProvider', useValue: {createdListElementComponent}}
+        { provide: 'objectElementProvider', useValue: {mockItemWithAuthorAndDate}}
       ],
 
       schemas: [ NO_ERRORS_SCHEMA ]
-    }).compileComponents();  // compile template and css
+    }).overrideComponent(ItemListElementComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    }).compileComponents();
   }));
 
   beforeEach(async(() => {
@@ -50,18 +58,51 @@ describe('ItemListElementComponent', () => {
 
   }));
 
-  it('should show the item cards in the list element',() => {
-    expect(fixture.debugElement.query(By.css('ds-item-list-element'))).toBeDefined()
+  describe('When the item has an author', () => {
+    beforeEach(() => {
+      itemListElementComponent.object = mockItemWithAuthorAndDate;
+      fixture.detectChanges();
+    });
+
+    it('should show the author paragraph', () => {
+      const itemAuthorField = fixture.debugElement.query(By.css('span.item-list-authors'));
+      expect(itemAuthorField).not.toBeNull();
+    });
   });
 
-  it('should only show the author span if the author metadata is present',() => {
-    const itemAuthorField = expect(fixture.debugElement.query(By.css('p.item-authors')));
+  describe('When the item has no author', () => {
+    beforeEach(() => {
+      itemListElementComponent.object = mockItemWithoutAuthorAndDate;
+      fixture.detectChanges();
+    });
 
-    if (mockItem.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length > 0) {
-      expect(itemAuthorField).toBeDefined();
-    }else {
-      expect(itemAuthorField).toBeDefined();
-    }
+    it('should not show the author paragraph', () => {
+      const itemAuthorField = fixture.debugElement.query(By.css('span.item-list-authors'));
+      expect(itemAuthorField).toBeNull();
+    });
   });
 
-})
+  describe('When the item has an issuedate', () => {
+    beforeEach(() => {
+      itemListElementComponent.object = mockItemWithAuthorAndDate;
+      fixture.detectChanges();
+    });
+
+    it('should show the issuedate span', () => {
+      const itemAuthorField = fixture.debugElement.query(By.css('span.item-list-date'));
+      expect(itemAuthorField).not.toBeNull();
+    });
+  });
+
+  describe('When the item has no issuedate', () => {
+    beforeEach(() => {
+      itemListElementComponent.object = mockItemWithoutAuthorAndDate;
+      fixture.detectChanges();
+    });
+
+    it('should not show the issuedate span', () => {
+      const dateField = fixture.debugElement.query(By.css('span.item-list-date'));
+      expect(dateField).toBeNull();
+    });
+  });
+});
diff --git a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html
index 914fb49487..be549b2b76 100644
--- a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html
+++ b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html
@@ -1,2 +1,2 @@
 <a [routerLink]="['/collections/' + dso.id]" class="lead" [innerHTML]="getFirstValue('dc.title')"></a>
-<div *ngIf="dso.shortDescription" class="text-muted" [innerHTML]="getFirstValue('dc.description.abstract')"></div>
+<div *ngIf="dso.shortDescription" class="text-muted abstract-text" [innerHTML]="getFirstValue('dc.description.abstract')"></div>
diff --git a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.spec.ts b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.spec.ts
index 37756b5916..0395904070 100644
--- a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.spec.ts
+++ b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.spec.ts
@@ -1,68 +1,83 @@
 import { CollectionSearchResultListElementComponent } from './collection-search-result-list-element.component';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Observable } from 'rxjs/Observable';
-import { ActivatedRoute, Router } from '@angular/router';
-import { RouterStub } from '../../../testing/router-stub';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { TruncatePipe } from '../../../utils/truncate.pipe';
 import { Collection } from '../../../../core/shared/collection.model';
 import { TruncatableService } from '../../../truncatable/truncatable.service';
+import { CollectionSearchResult } from '../../../object-collection/shared/collection-search-result.model';
 
+let collectionSearchResultListElementComponent: CollectionSearchResultListElementComponent;
 let fixture: ComponentFixture<CollectionSearchResultListElementComponent>;
-const queryParam = 'test query';
-const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
-const activatedRouteStub = {
-  queryParams: Observable.of({
-    query: queryParam,
-    scope: scopeParam
-  })
-};
+
 const truncatableServiceStub: any = {
   isCollapsed: (id: number) => Observable.of(true),
 };
 
-const mockCollection: Collection = Object.assign(new Collection(), {
+const mockCollectionWithAbstract: CollectionSearchResult = new CollectionSearchResult();
+mockCollectionWithAbstract.hitHighlights = [];
+mockCollectionWithAbstract.dspaceObject = Object.assign(new Collection(), {
   metadata: [
     {
       key: 'dc.description.abstract',
       language: 'en_US',
       value: 'Short description'
-    }]
-
+    } ]
+});
+
+const mockCollectionWithoutAbstract: CollectionSearchResult = new CollectionSearchResult();
+mockCollectionWithoutAbstract.hitHighlights = [];
+mockCollectionWithoutAbstract.dspaceObject = Object.assign(new Collection(), {
+  metadata: [
+    {
+      key: 'dc.title',
+      language: 'en_US',
+      value: 'Test title'
+    } ]
 });
-const createdListElementComponent: CollectionSearchResultListElementComponent = new CollectionSearchResultListElementComponent(mockCollection, truncatableServiceStub as TruncatableService);
 
 describe('CollectionSearchResultListElementComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [CollectionSearchResultListElementComponent, TruncatePipe],
+      declarations: [ CollectionSearchResultListElementComponent, TruncatePipe ],
       providers: [
         { provide: TruncatableService, useValue: truncatableServiceStub },
-        { provide: ActivatedRoute, useValue: activatedRouteStub },
-        { provide: Router, useClass: RouterStub },
-        { provide: 'objectElementProvider', useValue: (createdListElementComponent) }
+        { provide: 'objectElementProvider', useValue: (mockCollectionWithAbstract) }
       ],
 
-      schemas: [NO_ERRORS_SCHEMA]
-    }).compileComponents();  // compile template and css
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).overrideComponent(CollectionSearchResultListElementComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    }).compileComponents();
   }));
 
   beforeEach(async(() => {
     fixture = TestBed.createComponent(CollectionSearchResultListElementComponent);
+    collectionSearchResultListElementComponent = fixture.componentInstance;
   }));
 
-  it('should show the item result cards in the list element', () => {
-    expect(fixture.debugElement.query(By.css('ds-collection-search-result-list-element'))).toBeDefined();
+  describe('When the collection has an abstract', () => {
+    beforeEach(() => {
+      collectionSearchResultListElementComponent.dso = mockCollectionWithAbstract.dspaceObject;
+      fixture.detectChanges();
+    });
+
+    it('should show the description paragraph', () => {
+      const collectionAbstractField = fixture.debugElement.query(By.css('div.abstract-text'));
+      expect(collectionAbstractField).not.toBeNull();
+    });
   });
 
-  it('should only show the description if "short description" metadata is present', () => {
-    const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
+  describe('When the collection has no abstract', () => {
+    beforeEach(() => {
+      collectionSearchResultListElementComponent.dso = mockCollectionWithoutAbstract.dspaceObject;
+      fixture.detectChanges();
+    });
 
-    if (mockCollection.shortDescription.length > 0) {
-      expect(descriptionText).toBeDefined();
-    } else {
-      expect(descriptionText).not.toBeDefined();
-    }
+    it('should not show the description paragraph', () => {
+      const collectionAbstractField = fixture.debugElement.query(By.css('div.abstract-text'));
+      expect(collectionAbstractField).toBeNull();
+    });
   });
 });
diff --git a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html
index d09ef7d668..150ca503cc 100644
--- a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html
+++ b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html
@@ -1,2 +1,2 @@
 <a [routerLink]="['/communities/' + dso.id]" class="lead" [innerHTML]="getFirstValue('dc.title')"></a>
-<div *ngIf="dso.shortDescription" class="text-muted" [innerHTML]="getFirstValue('dc.description.abstract')"></div>
+<div *ngIf="dso.shortDescription" class="text-muted abstract-text" [innerHTML]="getFirstValue('dc.description.abstract')"></div>
diff --git a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.spec.ts b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.spec.ts
index 3e82e824ec..54dde5dee6 100644
--- a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.spec.ts
+++ b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.spec.ts
@@ -1,38 +1,41 @@
 import { CommunitySearchResultListElementComponent } from './community-search-result-list-element.component';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Observable } from 'rxjs/Observable';
-import { ActivatedRoute, Router } from '@angular/router';
-import { RouterStub } from '../../../testing/router-stub';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { TruncatePipe } from '../../../utils/truncate.pipe';
 import { Community } from '../../../../core/shared/community.model';
 import { TruncatableService } from '../../../truncatable/truncatable.service';
+import { CommunitySearchResult } from '../../../object-collection/shared/community-search-result.model';
 
+let communitySearchResultListElementComponent: CommunitySearchResultListElementComponent;
 let fixture: ComponentFixture<CommunitySearchResultListElementComponent>;
-const queryParam = 'test query';
-const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
-const activatedRouteStub = {
-  queryParams: Observable.of({
-    query: queryParam,
-    scope: scopeParam
-  })
-};
+
 const truncatableServiceStub: any = {
   isCollapsed: (id: number) => Observable.of(true),
 };
 
-const mockCommunity: Community = Object.assign(new Community(), {
+const mockCommunityWithAbstract: CommunitySearchResult = new CommunitySearchResult();
+mockCommunityWithAbstract.hitHighlights = [];
+mockCommunityWithAbstract.dspaceObject = Object.assign(new Community(), {
   metadata: [
     {
       key: 'dc.description.abstract',
       language: 'en_US',
       value: 'Short description'
     } ]
-
 });
 
-const createdListElementComponent: CommunitySearchResultListElementComponent = new CommunitySearchResultListElementComponent(mockCommunity, truncatableServiceStub as TruncatableService);
+const mockCommunityWithoutAbstract: CommunitySearchResult = new CommunitySearchResult();
+mockCommunityWithoutAbstract.hitHighlights = [];
+mockCommunityWithoutAbstract.dspaceObject = Object.assign(new Community(), {
+  metadata: [
+    {
+      key: 'dc.title',
+      language: 'en_US',
+      value: 'Test title'
+    } ]
+});
 
 describe('CommunitySearchResultListElementComponent', () => {
   beforeEach(async(() => {
@@ -40,30 +43,41 @@ describe('CommunitySearchResultListElementComponent', () => {
       declarations: [ CommunitySearchResultListElementComponent, TruncatePipe ],
       providers: [
         { provide: TruncatableService, useValue: truncatableServiceStub },
-        { provide: ActivatedRoute, useValue: activatedRouteStub },
-        { provide: Router, useClass: RouterStub },
-        { provide: 'objectElementProvider', useValue: (createdListElementComponent) }
+        { provide: 'objectElementProvider', useValue: (mockCommunityWithAbstract) }
       ],
 
       schemas: [ NO_ERRORS_SCHEMA ]
-    }).compileComponents();  // compile template and css
+    }).overrideComponent(CommunitySearchResultListElementComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    }).compileComponents();
   }));
 
   beforeEach(async(() => {
     fixture = TestBed.createComponent(CommunitySearchResultListElementComponent);
+    communitySearchResultListElementComponent = fixture.componentInstance;
   }));
 
-  it('should show the item result cards in the list element', () => {
-    expect(fixture.debugElement.query(By.css('ds-community-search-result-list-element'))).toBeDefined();
+  describe('When the community has an abstract', () => {
+    beforeEach(() => {
+      communitySearchResultListElementComponent.dso = mockCommunityWithAbstract.dspaceObject;
+      fixture.detectChanges();
+    });
+
+    it('should show the description paragraph', () => {
+      const communityAbstractField = fixture.debugElement.query(By.css('div.abstract-text'));
+      expect(communityAbstractField).not.toBeNull();
+    });
   });
 
-  it('should only show the description if "short description" metadata is present',() => {
-    const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
+  describe('When the community has no abstract', () => {
+    beforeEach(() => {
+      communitySearchResultListElementComponent.dso = mockCommunityWithoutAbstract.dspaceObject;
+      fixture.detectChanges();
+    });
 
-    if (mockCommunity.shortDescription.length > 0) {
-      expect(descriptionText).toBeDefined();
-    }else {
-      expect(descriptionText).not.toBeDefined();
-    }
+    it('should not show the description paragraph', () => {
+      const communityAbstractField = fixture.debugElement.query(By.css('div.abstract-text'));
+      expect(communityAbstractField).toBeNull();
+    });
   });
 });
diff --git a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
index d7ef1c673c..b8f3197a7c 100644
--- a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
+++ b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
@@ -8,7 +8,7 @@
                    [innerHTML]="getFirstValue('dc.publisher')">, </span><span
             *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date"
             [innerHTML]="getFirstValue('dc.date.issued')"></span>)
-            <span *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);"
+            <span *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length > 0"
                   class="item-list-authors">
                     <span *ngFor="let author of getValues(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let last=last;">
                         <span [innerHTML]="author"><span [innerHTML]="author"></span></span>
diff --git a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.spec.ts b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.spec.ts
index c7bf09ea1e..f492c58483 100644
--- a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.spec.ts
+++ b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.spec.ts
@@ -1,30 +1,25 @@
 import { ItemSearchResultListElementComponent } from './item-search-result-list-element.component';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Observable } from 'rxjs/Observable';
-import { ActivatedRoute, Router } from '@angular/router';
-import { RouterStub } from '../../../testing/router-stub';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA, ChangeDetectionStrategy } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { TruncatePipe } from '../../../utils/truncate.pipe';
 import { Item } from '../../../../core/shared/item.model';
 import { TruncatableService } from '../../../truncatable/truncatable.service';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
 
 let itemSearchResultListElementComponent: ItemSearchResultListElementComponent;
 let fixture: ComponentFixture<ItemSearchResultListElementComponent>;
-const queryParam = 'test query';
-const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
-const activatedRouteStub = {
-  queryParams: Observable.of({
-    query: queryParam,
-    scope: scopeParam
-  })
-};
 
 const truncatableServiceStub: any = {
   isCollapsed: (id: number) => Observable.of(true),
 };
 
-const mockItem: Item = Object.assign(new Item(), {
+const mockItemWithAuthorAndDate: ItemSearchResult = new ItemSearchResult();
+mockItemWithAuthorAndDate.hitHighlights = [];
+mockItemWithAuthorAndDate.dspaceObject = Object.assign(new Item(), {
+  bitstreams: Observable.of({}),
   metadata: [
     {
       key: 'dc.contributor.author',
@@ -34,24 +29,40 @@ const mockItem: Item = Object.assign(new Item(), {
     {
       key: 'dc.date.issued',
       language: null,
-      value: '1650-06-26'
+      value: '2015-06-26'
+    }]
+});
+
+const mockItemWithoutAuthorAndDate: ItemSearchResult = new ItemSearchResult();
+mockItemWithoutAuthorAndDate.hitHighlights = [];
+mockItemWithoutAuthorAndDate.dspaceObject = Object.assign(new Item(), {
+  bitstreams: Observable.of({}),
+  metadata: [
+    {
+      key: 'dc.title',
+      language: 'en_US',
+      value: 'This is just another title'
+    },
+    {
+      key: 'dc.type',
+      language: null,
+      value: 'Article'
     }]
 });
-const createdListElementComponent: ItemSearchResultListElementComponent = new ItemSearchResultListElementComponent(mockItem, truncatableServiceStub as TruncatableService);
 
 describe('ItemSearchResultListElementComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule],
       declarations: [ItemSearchResultListElementComponent, TruncatePipe],
       providers: [
         { provide: TruncatableService, useValue: truncatableServiceStub },
-        { provide: ActivatedRoute, useValue: activatedRouteStub },
-        { provide: Router, useClass: RouterStub },
-        { provide: 'objectElementProvider', useValue: (createdListElementComponent) }
+        { provide: 'objectElementProvider', useValue: (mockItemWithoutAuthorAndDate) }
       ],
-
       schemas: [NO_ERRORS_SCHEMA]
-    }).compileComponents();  // compile template and css
+    }).overrideComponent(ItemSearchResultListElementComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    }).compileComponents();
   }));
 
   beforeEach(async(() => {
@@ -59,28 +70,51 @@ describe('ItemSearchResultListElementComponent', () => {
     itemSearchResultListElementComponent = fixture.componentInstance;
   }));
 
-  it('should show the item result cards in the list element', () => {
-    expect(fixture.debugElement.query(By.css('ds-item-search-result-list-element'))).toBeDefined();
+  describe('When the item has an author', () => {
+    beforeEach(() => {
+      itemSearchResultListElementComponent.dso = mockItemWithAuthorAndDate.dspaceObject;
+      fixture.detectChanges();
+    });
+
+    it('should show the author paragraph', () => {
+      const itemAuthorField = fixture.debugElement.query(By.css('span.item-list-authors'));
+      expect(itemAuthorField).not.toBeNull();
+    });
   });
 
-  it('should only show the author span if the author metadata is present', () => {
-    const itemAuthorField = expect(fixture.debugElement.query(By.css('p.item-authors')));
+  describe('When the item has no author', () => {
+    beforeEach(() => {
+      itemSearchResultListElementComponent.dso = mockItemWithoutAuthorAndDate.dspaceObject;
+      fixture.detectChanges();
+    });
 
-    if (mockItem.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length > 0) {
-      expect(itemAuthorField).toBeDefined();
-    } else {
-      expect(itemAuthorField).not.toBeDefined();
-    }
+    it('should not show the author paragraph', () => {
+      const itemAuthorField = fixture.debugElement.query(By.css('span.item-list-authors'));
+      expect(itemAuthorField).toBeNull();
+    });
   });
 
-  it('should only show the date span if the issuedate is present', () => {
-    const dateField = expect(fixture.debugElement.query(By.css('span.item-list-date')));
+  describe('When the item has an issuedate', () => {
+    beforeEach(() => {
+      itemSearchResultListElementComponent.dso = mockItemWithAuthorAndDate.dspaceObject;
+      fixture.detectChanges();
+    });
 
-    if (mockItem.findMetadata('dc.date.issued').length > 0) {
-      expect(dateField).toBeDefined();
-    } else {
-      expect(dateField).not.toBeDefined();
-    }
+    it('should show the issuedate span', () => {
+      const itemAuthorField = fixture.debugElement.query(By.css('span.item-list-date'));
+      expect(itemAuthorField).not.toBeNull();
+    });
   });
 
+  describe('When the item has no issuedate', () => {
+    beforeEach(() => {
+      itemSearchResultListElementComponent.dso = mockItemWithoutAuthorAndDate.dspaceObject;
+      fixture.detectChanges();
+    });
+
+    it('should not show the issuedate span', () => {
+      const dateField = fixture.debugElement.query(By.css('span.item-list-date'));
+      expect(dateField).toBeNull();
+    });
+  });
 });

From c9071bc0672a15ab331ccfe088ae8c61cadbbf07 Mon Sep 17 00:00:00 2001
From: Lotte Hofstede <lotte_hofstede@hotmail.com>
Date: Tue, 13 Feb 2018 15:47:06 +0100
Subject: [PATCH 15/23] ts lint fixes

---
 src/app/core/shared/community.model.ts                          | 1 -
 .../community-search-result-grid-element.component.ts           | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/core/shared/community.model.ts b/src/app/core/shared/community.model.ts
index ea80a02269..c34666b0f0 100644
--- a/src/app/core/shared/community.model.ts
+++ b/src/app/core/shared/community.model.ts
@@ -24,7 +24,6 @@ export class Community extends DSpaceObject {
    * Corresponds to the metadata field dc.description.abstract
    */
   get shortDescription(): string {
-    debugger;
     return this.findMetadata('dc.description.abstract');
   }
 
diff --git a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
index d490560919..d08286ff2e 100644
--- a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
@@ -15,4 +15,4 @@ import { CommunitySearchResult } from '../../../object-collection/shared/communi
 @renderElementsFor(CommunitySearchResult, ViewMode.Grid)
 export class CommunitySearchResultGridElementComponent extends SearchResultGridElementComponent<CommunitySearchResult, Community> {
 
-}
\ No newline at end of file
+}

From 24d7980b9f1d6a92b0535673dc9e8b078869c2bb Mon Sep 17 00:00:00 2001
From: Lotte Hofstede <lotte_hofstede@hotmail.com>
Date: Thu, 15 Feb 2018 15:05:55 +0100
Subject: [PATCH 16/23] bootstrap upgrade to 4.0.0

---
 package.json                         |  6 +++---
 src/app/header/header.component.html |  2 +-
 src/styles/_bootstrap_variables.scss |  5 +++++
 yarn.lock                            | 14 +++++++-------
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index b211892de9..22d7485684 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
     "@angular/platform-server": "5.2.1",
     "@angular/router": "5.2.1",
     "@angularclass/bootloader": "1.0.1",
-    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.9",
+    "@ng-bootstrap/ng-bootstrap": "^1.0.0",
     "@ngrx/effects": "4.1.1",
     "@ngrx/router-store": "4.1.1",
     "@ngrx/store": "4.1.1",
@@ -88,7 +88,7 @@
     "@ngx-translate/http-loader": "2.0.1",
     "angular-idle-preload": "2.0.4",
     "body-parser": "1.18.2",
-    "bootstrap": "4.0.0-beta",
+    "bootstrap": "^4.0.0",
     "cerialize": "0.1.18",
     "compression": "1.7.1",
     "cookie-parser": "1.4.3",
@@ -162,7 +162,7 @@
     "karma-webdriver-launcher": "1.0.5",
     "karma-webpack": "2.0.9",
     "ngrx-store-freeze": "0.2.0",
-    "node-sass": "4.7.2",
+    "node-sass": "^4.7.2",
     "nodemon": "1.14.11",
     "npm-run-all": "4.1.2",
     "postcss": "6.0.16",
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 0cdb443b8a..953d1ba922 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,5 +1,5 @@
 <header>
-  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
+  <nav class="navbar navbar-dark bg-primary navbar-expand-md">
     <div [ngClass]="{'clearfix': !(isNavBarCollapsed | async)}">
       <a class="navbar-brand" routerLink="/home">{{ 'title' | translate }}</a>
     </div>
diff --git a/src/styles/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss
index f3d13120cc..a57d2deddf 100644
--- a/src/styles/_bootstrap_variables.scss
+++ b/src/styles/_bootstrap_variables.scss
@@ -29,3 +29,8 @@ $theme-colors: (
 /* Fonts */
 $link-color: map-get($theme-colors, info) !default;
 
+$navbar-dark-color:                rgba(white, .5) !default;
+$navbar-light-color:                rgba(black, .5) !default;
+$navbar-dark-toggler-icon-bg: url("data%3Aimage%2Fsvg+xml%3Bcharset%3Dutf8%2C%3Csvg+viewBox%3D%270+0+30+30%27+xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath+stroke%3D%27#{$navbar-dark-color}%27+stroke-width%3D%272%27+stroke-linecap%3D%27round%27+stroke-miterlimit%3D%2710%27+d%3D%27M4+7h22M4+15h22M4+23h22%27%2F%3E%3C%2Fsvg%3E");
+$navbar-light-toggler-icon-bg: url("data%3Aimage%2Fsvg+xml%3Bcharset%3Dutf8%2C%3Csvg+viewBox%3D%270+0+30+30%27+xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath+stroke%3D%27#{$navbar-light-color}%27+stroke-width%3D%272%27+stroke-linecap%3D%27round%27+stroke-miterlimit%3D%2710%27+d%3D%27M4+7h22M4+15h22M4+23h22%27%2F%3E%3C%2Fsvg%3E");
+
diff --git a/yarn.lock b/yarn.lock
index 39ba0f596f..c256338af1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -77,9 +77,9 @@
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@angularclass/bootloader/-/bootloader-1.0.1.tgz#75de7cf3901b445900a419c2aeca44181d465060"
 
-"@ng-bootstrap/ng-bootstrap@1.0.0-beta.9":
-  version "1.0.0-beta.9"
-  resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-1.0.0-beta.9.tgz#08d4119a3d72689b2bef8f1d30aaf6c8aabffd72"
+"@ng-bootstrap/ng-bootstrap@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-1.0.0.tgz#8f2ae70db2fe1dcbf5e0acb49dc2b1bbba2be8d2"
 
 "@ngrx/effects@4.1.1":
   version "4.1.1"
@@ -987,9 +987,9 @@ boom@5.x.x:
   dependencies:
     hoek "4.x.x"
 
-bootstrap@4.0.0-beta:
-  version "4.0.0-beta"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0-beta.tgz#dc5928175d2e71310bc668cf9e05a907211b72a6"
+bootstrap@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0.tgz#ceb03842c145fcc1b9b4e15da2a05656ba68469a"
 
 boxen@^1.2.1:
   version "1.3.0"
@@ -5554,7 +5554,7 @@ node-pre-gyp@^0.6.36:
     tar "^2.2.1"
     tar-pack "^3.4.0"
 
-node-sass@4.7.2:
+node-sass@^4.7.2:
   version "4.7.2"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.7.2.tgz#9366778ba1469eb01438a9e8592f4262bcb6794e"
   dependencies:

From 9bce42323b07e1c59d6a3e117666f00c9903b246 Mon Sep 17 00:00:00 2001
From: Lotte Hofstede <lotte_hofstede@hotmail.com>
Date: Fri, 16 Feb 2018 11:17:10 +0100
Subject: [PATCH 17/23] upgraded dependencies and bootstrap upgrade styling fix

---
 package.json                                  |  91 +--
 .../search-form/search-form.component.html    |   2 +-
 yarn.lock                                     | 725 +++++++++++-------
 3 files changed, 486 insertions(+), 332 deletions(-)

diff --git a/package.json b/package.json
index 22d7485684..fdfebef65a 100644
--- a/package.json
+++ b/package.json
@@ -66,23 +66,24 @@
     "webdriver:update": "node node_modules/protractor/bin/webdriver-manager update --standalone",
     "lint": "tslint \"src/**/*.ts\" && tslint \"e2e/**/*.ts\"",
     "docs": "typedoc --options typedoc.json ./src/",
-    "coverage": "http-server -c-1 -o -p 9875 ./coverage"
+    "coverage": "http-server -c-1 -o -p 9875 ./coverage",
+    "script": "tsc -v"
   },
   "dependencies": {
-    "@angular/animations": "5.2.1",
-    "@angular/common": "5.2.1",
-    "@angular/core": "5.2.1",
-    "@angular/forms": "5.2.1",
-    "@angular/http": "5.2.1",
-    "@angular/platform-browser": "5.2.1",
-    "@angular/platform-browser-dynamic": "5.2.1",
-    "@angular/platform-server": "5.2.1",
-    "@angular/router": "5.2.1",
+    "@angular/animations": "^5.2.5",
+    "@angular/common": "^5.2.5",
+    "@angular/core": "^5.2.5",
+    "@angular/forms": "^5.2.5",
+    "@angular/http": "^5.2.5",
+    "@angular/platform-browser": "^5.2.5",
+    "@angular/platform-browser-dynamic": "^5.2.5",
+    "@angular/platform-server": "^5.2.5",
+    "@angular/router": "^5.2.5",
     "@angularclass/bootloader": "1.0.1",
     "@ng-bootstrap/ng-bootstrap": "^1.0.0",
-    "@ngrx/effects": "4.1.1",
-    "@ngrx/router-store": "4.1.1",
-    "@ngrx/store": "4.1.1",
+    "@ngrx/effects": "^5.1.0",
+    "@ngrx/router-store": "^5.0.1",
+    "@ngrx/store": "^5.1.0",
     "@nguniversal/express-engine": "5.0.0-beta.5",
     "@ngx-translate/core": "9.1.1",
     "@ngx-translate/http-loader": "2.0.1",
@@ -106,45 +107,45 @@
     "pem": "1.12.3",
     "reflect-metadata": "0.1.12",
     "rxjs": "5.5.6",
-    "ts-md5": "1.2.3",
+    "ts-md5": "^1.2.4",
     "uuid": "^3.2.1",
     "webfontloader": "1.6.28",
     "zone.js": "0.8.20"
   },
   "devDependencies": {
-    "@angular/compiler": "^5.2.1",
-    "@angular/compiler-cli": "^5.2.1",
-    "@ngrx/store-devtools": "4.1.1",
-    "@ngtools/webpack": "1.9.5",
+    "@angular/compiler": "^5.2.5",
+    "@angular/compiler-cli": "^5.2.5",
+    "@ngrx/store-devtools": "^5.1.0",
+    "@ngtools/webpack": "^1.10.0",
     "@types/cookie-parser": "1.4.1",
     "@types/deep-freeze": "0.1.1",
-    "@types/express": "4.11.0",
+    "@types/express": "^4.11.1",
     "@types/express-serve-static-core": "4.11.1",
     "@types/hammerjs": "2.0.35",
-    "@types/jasmine": "2.8.4",
+    "@types/jasmine": "^2.8.6",
     "@types/memory-cache": "0.2.0",
     "@types/mime": "2.0.0",
-    "@types/node": "^9.3.0",
+    "@types/node": "^9.4.6",
     "@types/serve-static": "1.13.1",
     "@types/uuid": "^3.4.3",
     "@types/webfontloader": "1.6.29",
-    "ajv": "6.0.1",
-    "ajv-keywords": "3.0.0",
+    "ajv": "^6.1.1",
+    "ajv-keywords": "^3.1.0",
     "angular2-template-loader": "0.6.2",
-    "autoprefixer": "7.2.5",
+    "autoprefixer": "^8.0.0",
     "awesome-typescript-loader": "3.4.1",
-    "caniuse-lite": "1.0.30000792",
+    "caniuse-lite": "^1.0.30000808",
     "codelyzer": "^4.1.0",
-    "compression-webpack-plugin": "1.1.3",
-    "copy-webpack-plugin": "4.3.1",
+    "compression-webpack-plugin": "^1.1.6",
+    "copy-webpack-plugin": "^4.4.1",
     "coveralls": "3.0.0",
     "css-loader": "0.28.9",
     "deep-freeze": "0.0.1",
-    "exports-loader": "0.6.4",
+    "exports-loader": "^0.7.0",
     "html-webpack-plugin": "2.30.1",
     "imports-loader": "0.7.1",
     "istanbul-instrumenter-loader": "3.0.0",
-    "jasmine-core": "2.9.1",
+    "jasmine-core": "^2.99.1",
     "jasmine-marbles": "0.2.0",
     "jasmine-spec-reporter": "4.2.1",
     "json-loader": "0.5.7",
@@ -156,46 +157,46 @@
     "karma-jasmine": "1.1.1",
     "karma-mocha-reporter": "2.2.5",
     "karma-phantomjs-launcher": "1.0.4",
-    "karma-remap-coverage": "0.1.4",
+    "karma-remap-coverage": "^0.1.5",
     "karma-remap-istanbul": "0.6.0",
     "karma-sourcemap-loader": "0.3.7",
     "karma-webdriver-launcher": "1.0.5",
     "karma-webpack": "2.0.9",
-    "ngrx-store-freeze": "0.2.0",
+    "ngrx-store-freeze": "^0.2.1",
     "node-sass": "^4.7.2",
-    "nodemon": "1.14.11",
+    "nodemon": "^1.15.0",
     "npm-run-all": "4.1.2",
-    "postcss": "6.0.16",
+    "postcss": "^6.0.18",
     "postcss-apply": "0.8.0",
-    "postcss-cli": "4.1.1",
+    "postcss-cli": "^5.0.0",
     "postcss-cssnext": "3.1.0",
-    "postcss-loader": "2.0.10",
+    "postcss-loader": "^2.1.0",
     "postcss-responsive-type": "1.0.0",
     "postcss-smart-import": "0.7.6",
-    "protractor": "5.2.2",
+    "protractor": "^5.3.0",
     "protractor-istanbul-plugin": "2.0.0",
     "raw-loader": "0.5.1",
     "resolve-url-loader": "2.2.1",
     "rimraf": "2.6.2",
-    "rollup": "0.54.1",
-    "rollup-plugin-commonjs": "8.2.6",
+    "rollup": "^0.56.0",
+    "rollup-plugin-commonjs": "^8.3.0",
     "rollup-plugin-node-globals": "1.1.0",
-    "rollup-plugin-node-resolve": "3.0.2",
+    "rollup-plugin-node-resolve": "^3.0.3",
     "rollup-plugin-uglify": "3.0.0",
     "sass-loader": "6.0.6",
     "script-ext-html-webpack-plugin": "1.8.8",
-    "source-map": "0.6.1",
+    "source-map": "^0.7.1",
     "source-map-loader": "0.2.3",
     "string-replace-loader": "1.3.0",
     "to-string-loader": "1.1.5",
     "ts-helpers": "1.1.2",
     "ts-node": "4.1.0",
     "tslint": "5.9.1",
-    "typedoc": "0.9.0",
-    "typescript": "2.6.2",
-    "webpack": "^3.10.0",
-    "webpack-bundle-analyzer": "2.9.2",
-    "webpack-dev-middleware": "2.0.4",
+    "typedoc": "^0.10.0",
+    "typescript": "^2.7.2",
+    "webpack": "^3.11.0",
+    "webpack-bundle-analyzer": "^2.10.0",
+    "webpack-dev-middleware": "^2.0.5",
     "webpack-dev-server": "2.11.1",
     "webpack-merge": "4.1.1",
     "webpack-node-externals": "1.6.0"
diff --git a/src/app/shared/search-form/search-form.component.html b/src/app/shared/search-form/search-form.component.html
index 18469f686a..0474f8aaf5 100644
--- a/src/app/shared/search-form/search-form.component.html
+++ b/src/app/shared/search-form/search-form.component.html
@@ -8,7 +8,7 @@
     <div [ngClass]="{'col-sm-9': isNotEmpty(scopes)}" class="col-12">
     <div class="form-group input-group">
         <input type="text" [(ngModel)]="query" name="query" class="form-control" aria-label="Search input">
-        <span class="input-group-btn">
+        <span class="input-group-append">
             <button type="submit" class="search-button btn btn-secondary">{{ ('search.form.search' | translate) }}</button>
         </span>
     </div>
diff --git a/yarn.lock b/yarn.lock
index c256338af1..cc540b3e9a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,74 +2,74 @@
 # yarn lockfile v1
 
 
-"@angular/animations@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-5.2.1.tgz#cc325c23db98c13539cbedf9405bc068bd3041cd"
+"@angular/animations@^5.2.5":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-5.2.5.tgz#3e72184321c4979305619c74902b8be92d76db70"
   dependencies:
     tslib "^1.7.1"
 
-"@angular/common@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@angular/common/-/common-5.2.1.tgz#a6f2d349f6102e6be7cc488899578a0dc327b755"
+"@angular/common@^5.2.5":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@angular/common/-/common-5.2.5.tgz#08dd636fa46077d047066b13a1aae494066f6c55"
   dependencies:
     tslib "^1.7.1"
 
-"@angular/compiler-cli@^5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-5.2.1.tgz#9ee3431d937767a4f4ae401f172b507b5db6456e"
+"@angular/compiler-cli@^5.2.5":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-5.2.5.tgz#b1988bb2c0a956e7fc163acf8c7d794a07a88d08"
   dependencies:
     chokidar "^1.4.2"
     minimist "^1.2.0"
     reflect-metadata "^0.1.2"
     tsickle "^0.26.0"
 
-"@angular/compiler@^5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-5.2.1.tgz#758ed236c361cff018699e041fabbc4bcb7cdc72"
+"@angular/compiler@^5.2.5":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-5.2.5.tgz#5e3b511906048a579fcd007aba72911472e5aa28"
   dependencies:
     tslib "^1.7.1"
 
-"@angular/core@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@angular/core/-/core-5.2.1.tgz#47347e4098b0e997220d77652f4d9ca44dda8923"
+"@angular/core@^5.2.5":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@angular/core/-/core-5.2.5.tgz#24f9cd75c5b2728f2ddd1869777590ea7177bca9"
   dependencies:
     tslib "^1.7.1"
 
-"@angular/forms@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-5.2.1.tgz#530f1249bc71d9560297be642d55a5a6c439d920"
+"@angular/forms@^5.2.5":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-5.2.5.tgz#2ad7a420c6ef6cd87a34071c5319ec83f7ed56aa"
   dependencies:
     tslib "^1.7.1"
 
-"@angular/http@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@angular/http/-/http-5.2.1.tgz#dd847fb8aa0972b1906df5376307354b818ef4be"
+"@angular/http@^5.2.5":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@angular/http/-/http-5.2.5.tgz#1208256e36f0e486d96d10a733fdc8424ffa16bf"
   dependencies:
     tslib "^1.7.1"
 
-"@angular/platform-browser-dynamic@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.2.1.tgz#df073c48f5b90e8c5d5b0774aa2bef49f288989c"
+"@angular/platform-browser-dynamic@^5.2.5":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.2.5.tgz#b89df410bd953e2a6843325f9ac3c09a10eadaf0"
   dependencies:
     tslib "^1.7.1"
 
-"@angular/platform-browser@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-5.2.1.tgz#0d05a4ba107e7ad8241a862683c83193c26b3c5e"
+"@angular/platform-browser@^5.2.5":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-5.2.5.tgz#eae4af2b742fb901d84d6367cd99f9e88102151f"
   dependencies:
     tslib "^1.7.1"
 
-"@angular/platform-server@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@angular/platform-server/-/platform-server-5.2.1.tgz#5230f0845d937eafa084015c28de90a594896de6"
+"@angular/platform-server@^5.2.5":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@angular/platform-server/-/platform-server-5.2.5.tgz#2111bfd836a16c787a10f2099a0c26b6a3a02b05"
   dependencies:
     domino "^1.0.29"
     tslib "^1.7.1"
     xhr2 "^0.1.4"
 
-"@angular/router@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@angular/router/-/router-5.2.1.tgz#fbb3a2d644e854bca25d075e506d25f3c670f8d2"
+"@angular/router@^5.2.5":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@angular/router/-/router-5.2.5.tgz#f8f220d5fb85fc10d60fe606b0f2a64732265142"
   dependencies:
     tslib "^1.7.1"
 
@@ -81,25 +81,25 @@
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-1.0.0.tgz#8f2ae70db2fe1dcbf5e0acb49dc2b1bbba2be8d2"
 
-"@ngrx/effects@4.1.1":
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/@ngrx/effects/-/effects-4.1.1.tgz#cb758b8527964b258ea41951f59aa144e3ef9fae"
+"@ngrx/effects@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@ngrx/effects/-/effects-5.1.0.tgz#cef84576b2d0333f19188aedfe156fd301bff70a"
 
-"@ngrx/router-store@4.1.1":
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/@ngrx/router-store/-/router-store-4.1.1.tgz#17fac7c0f5ffddef8b75e9a74ed2cb09074f3bca"
+"@ngrx/router-store@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@ngrx/router-store/-/router-store-5.0.1.tgz#db872327bb958a2ebf296734c97de68672ec628a"
 
-"@ngrx/store-devtools@4.1.1":
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/@ngrx/store-devtools/-/store-devtools-4.1.1.tgz#20745c39c7560fdc05fa4f22638442a7ec7dd676"
+"@ngrx/store-devtools@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@ngrx/store-devtools/-/store-devtools-5.1.0.tgz#7df8a6da652cc792000ad058ca4072a32e3629b1"
 
-"@ngrx/store@4.1.1":
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/@ngrx/store/-/store-4.1.1.tgz#680e34df2775e8852754ed777ffac95bd81b7de0"
+"@ngrx/store@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@ngrx/store/-/store-5.1.0.tgz#d957131e62041deede043524fd300db9fa835d68"
 
-"@ngtools/webpack@1.9.5":
-  version "1.9.5"
-  resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-1.9.5.tgz#10292e9237d1218fe16dee24423155500b2d2324"
+"@ngtools/webpack@^1.10.0":
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-1.10.0.tgz#1e4f60bdba8cdb8aeb93ebb976e63bf175acd279"
   dependencies:
     chalk "~2.2.0"
     enhanced-resolve "^3.1.0"
@@ -163,39 +163,47 @@
     "@types/express-serve-static-core" "*"
     "@types/serve-static" "*"
 
-"@types/express@4.11.0":
-  version "4.11.0"
-  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.11.0.tgz#234d65280af917cb290634b7a8d6bcac24aecbad"
+"@types/express@^4.11.1":
+  version "4.11.1"
+  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.11.1.tgz#f99663b3ab32d04cb11db612ef5dd7933f75465b"
   dependencies:
     "@types/body-parser" "*"
     "@types/express-serve-static-core" "*"
     "@types/serve-static" "*"
 
-"@types/fs-extra@4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-4.0.0.tgz#1dd742ad5c9bce308f7a52d02ebc01421bc9102f"
+"@types/fs-extra@5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-5.0.0.tgz#d3e225b35eb5c6d3a5a782c28219df365c781413"
   dependencies:
     "@types/node" "*"
 
+"@types/glob@*":
+  version "5.0.35"
+  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-5.0.35.tgz#1ae151c802cece940443b5ac246925c85189f32a"
+  dependencies:
+    "@types/events" "*"
+    "@types/minimatch" "*"
+    "@types/node" "*"
+
 "@types/hammerjs@2.0.35":
   version "2.0.35"
   resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.35.tgz#7b7c950c7d54593e23bffc8d2b4feba9866a7277"
 
-"@types/handlebars@4.0.31":
-  version "4.0.31"
-  resolved "https://registry.yarnpkg.com/@types/handlebars/-/handlebars-4.0.31.tgz#a7fba66fafe42713aee88eeca8db91192efe6e72"
+"@types/handlebars@4.0.36":
+  version "4.0.36"
+  resolved "https://registry.yarnpkg.com/@types/handlebars/-/handlebars-4.0.36.tgz#ff57c77fa1ab6713bb446534ddc4d979707a3a79"
 
-"@types/highlight.js@9.1.8":
-  version "9.1.8"
-  resolved "https://registry.yarnpkg.com/@types/highlight.js/-/highlight.js-9.1.8.tgz#d227f18bcb8f3f187e16965f2444859a04689758"
+"@types/highlight.js@9.12.2":
+  version "9.12.2"
+  resolved "https://registry.yarnpkg.com/@types/highlight.js/-/highlight.js-9.12.2.tgz#6ee7cd395effe5ec80b515d3ff1699068cd0cd1d"
 
-"@types/jasmine@2.8.4":
-  version "2.8.4"
-  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.8.4.tgz#5528fb5e53f1b27594f81f18debb7eab8dc532cb"
+"@types/jasmine@^2.8.6":
+  version "2.8.6"
+  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.8.6.tgz#14445b6a1613cf4e05dd61c3c3256d0e95c0421e"
 
-"@types/lodash@4.14.74":
-  version "4.14.74"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.74.tgz#ac3bd8db988e7f7038e5d22bd76a7ba13f876168"
+"@types/lodash@4.14.99":
+  version "4.14.99"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.99.tgz#e6e10c0a4cc16c7409b3181f1e66880d2fb7d4dc"
 
 "@types/marked@0.3.0":
   version "0.3.0"
@@ -209,9 +217,9 @@
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-2.0.0.tgz#5a7306e367c539b9f6543499de8dd519fac37a8b"
 
-"@types/minimatch@2.0.29":
-  version "2.0.29"
-  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-2.0.29.tgz#5002e14f75e2d71e564281df0431c8c1b4a2a36a"
+"@types/minimatch@*", "@types/minimatch@3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
 
 "@types/node@*":
   version "8.0.34"
@@ -221,9 +229,9 @@
   version "6.0.88"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.88.tgz#f618f11a944f6a18d92b5c472028728a3e3d4b66"
 
-"@types/node@^9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-9.3.0.tgz#3a129cda7c4e5df2409702626892cb4b96546dd5"
+"@types/node@^9.4.6":
+  version "9.4.6"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-9.4.6.tgz#d8176d864ee48753d053783e4e463aec86b8d82e"
 
 "@types/q@^0.0.32":
   version "0.0.32"
@@ -247,10 +255,11 @@
     "@types/express-serve-static-core" "*"
     "@types/mime" "*"
 
-"@types/shelljs@0.7.0":
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/@types/shelljs/-/shelljs-0.7.0.tgz#229c157c6bc1e67d6b990e6c5e18dbd2ff58cff0"
+"@types/shelljs@0.7.7":
+  version "0.7.7"
+  resolved "https://registry.yarnpkg.com/@types/shelljs/-/shelljs-0.7.7.tgz#1f7bfa28947661afea06365db9b1135bbc903ec4"
   dependencies:
+    "@types/glob" "*"
     "@types/node" "*"
 
 "@types/strip-bom@^3.0.0":
@@ -306,7 +315,7 @@ acorn@^4.0.1, acorn@^4.0.3:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
 
-acorn@^5.0.0, acorn@^5.1.1:
+acorn@^5.0.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.2.tgz#911cb53e036807cf0fa778dc5d370fbd864246d7"
 
@@ -314,6 +323,10 @@ acorn@^5.2.1:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.3.0.tgz#7446d39459c54fb49a80e6ee6478149b940ec822"
 
+acorn@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.4.1.tgz#fdc58d9d17f4a4e98d102ded826a9b9759125102"
+
 addressparser@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/addressparser/-/addressparser-1.0.1.tgz#47afbe1a2a9262191db6838e4fd1d39b40821746"
@@ -349,21 +362,9 @@ agent-base@2:
     extend "~3.0.0"
     semver "~5.0.1"
 
-ajv-keywords@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.0.0.tgz#d1c2d845e2664dd3b95551d0cedc7675d6d1cec3"
-
-ajv-keywords@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"
-
-ajv@6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.0.1.tgz#2898580a9f3def5f9c85dfead7a2223ef13cf3da"
-  dependencies:
-    fast-deep-equal "^1.0.0"
-    fast-json-stable-stringify "^2.0.0"
-    json-schema-traverse "^0.3.0"
+ajv-keywords@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.1.0.tgz#ac2b27939c543e95d2c06e7f7f5c27be4aa543be"
 
 ajv@^4.9.1:
   version "4.11.8"
@@ -372,7 +373,7 @@ ajv@^4.9.1:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
-ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5:
+ajv@^5.0.0, ajv@^5.1.0:
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.3.tgz#c06f598778c44c6b161abafe3466b81ad1814ed2"
   dependencies:
@@ -381,6 +382,14 @@ ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5:
     json-schema-traverse "^0.3.0"
     json-stable-stringify "^1.0.1"
 
+ajv@^6.1.0, ajv@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.1.1.tgz#978d597fbc2b7d0e5a5c3ddeb149a682f2abfa0e"
+  dependencies:
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+
 align-text@^0.1.1, align-text@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
@@ -423,10 +432,22 @@ ansi-align@^2.0.0:
   dependencies:
     string-width "^2.0.0"
 
+ansi-cyan@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-cyan/-/ansi-cyan-0.1.1.tgz#538ae528af8982f28ae30d86f2f17456d2609873"
+  dependencies:
+    ansi-wrap "0.1.0"
+
 ansi-html@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
 
+ansi-red@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-red/-/ansi-red-0.1.1.tgz#8c638f9d1080800a353c9c28c8a81ca4705d946c"
+  dependencies:
+    ansi-wrap "0.1.0"
+
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -445,6 +466,10 @@ ansi-styles@^3.1.0, ansi-styles@^3.2.0:
   dependencies:
     color-convert "^1.9.0"
 
+ansi-wrap@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
+
 any-promise@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-0.1.0.tgz#830b680aa7e56f33451d4b049f3bd8044498ee27"
@@ -509,6 +534,13 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+arr-diff@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-1.1.0.tgz#687c32758163588fef7de7b36fabe495eb1a399a"
+  dependencies:
+    arr-flatten "^1.0.1"
+    array-slice "^0.2.3"
+
 arr-diff@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
@@ -523,6 +555,10 @@ arr-flatten@^1.0.1, arr-flatten@^1.0.3, arr-flatten@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
 
+arr-union@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-2.1.0.tgz#20f9eab5ec70f5c7d215b1077b1c39161d292c7d"
+
 arr-union@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
@@ -688,17 +724,6 @@ atob@~1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/atob/-/atob-1.1.3.tgz#95f13629b12c3a51a5d215abdce2aa9f32f80773"
 
-autoprefixer@7.2.5:
-  version "7.2.5"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.2.5.tgz#04ccbd0c6a61131b6d13f53d371926092952d192"
-  dependencies:
-    browserslist "^2.11.1"
-    caniuse-lite "^1.0.30000791"
-    normalize-range "^0.1.2"
-    num2fraction "^1.2.2"
-    postcss "^6.0.16"
-    postcss-value-parser "^3.2.3"
-
 autoprefixer@^6.3.1:
   version "6.7.7"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014"
@@ -721,6 +746,17 @@ autoprefixer@^7.1.1:
     postcss "^6.0.13"
     postcss-value-parser "^3.2.3"
 
+autoprefixer@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-8.0.0.tgz#c19e480f061013127c373df0b01cf46919943f74"
+  dependencies:
+    browserslist "^3.0.0"
+    caniuse-lite "^1.0.30000808"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^6.0.17"
+    postcss-value-parser "^3.2.3"
+
 awesome-typescript-loader@3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/awesome-typescript-loader/-/awesome-typescript-loader-3.4.1.tgz#22fa49800f0619ec18ab15383aef93b95378dea9"
@@ -889,6 +925,14 @@ better-assert@~1.0.0:
   dependencies:
     callsite "1.0.0"
 
+bfj-node4@^5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/bfj-node4/-/bfj-node4-5.2.1.tgz#3a6aa2730cf6911ba2afb836c2f88f015d718f3f"
+  dependencies:
+    bluebird "^3.5.1"
+    check-types "^7.3.0"
+    tryer "^1.0.0"
+
 big.js@^3.1.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
@@ -931,7 +975,7 @@ blocking-proxy@^1.0.0:
   dependencies:
     minimist "^1.2.0"
 
-bluebird@^3.3.0, bluebird@^3.4.6, bluebird@^3.4.7, bluebird@^3.5.0:
+bluebird@^3.3.0, bluebird@^3.4.6, bluebird@^3.4.7, bluebird@^3.5.0, bluebird@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
 
@@ -1201,12 +1245,12 @@ browserslist@^2.0.0, browserslist@^2.5.0:
     caniuse-lite "^1.0.30000744"
     electron-to-chromium "^1.3.24"
 
-browserslist@^2.11.1:
-  version "2.11.3"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.11.3.tgz#fe36167aed1bbcde4827ebfe71347a2cc70b99b2"
+browserslist@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.1.0.tgz#6a1ccc302ddf48e70480e2ee1a9acc293eceb306"
   dependencies:
-    caniuse-lite "^1.0.30000792"
-    electron-to-chromium "^1.3.30"
+    caniuse-lite "^1.0.30000808"
+    electron-to-chromium "^1.3.33"
 
 buffer-crc32@^0.2.1:
   version "0.2.13"
@@ -1359,14 +1403,14 @@ caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
   version "1.0.30000740"
   resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000740.tgz#03fcaaa176e3ed075895f72d46c1a12149bbeac9"
 
-caniuse-lite@1.0.30000792, caniuse-lite@^1.0.30000791, caniuse-lite@^1.0.30000792:
-  version "1.0.30000792"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000792.tgz#d0cea981f8118f3961471afbb43c9a1e5bbf0332"
-
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000744:
   version "1.0.30000745"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000745.tgz#20d6fede1157a4935133502946fc7e0e6b880da5"
 
+caniuse-lite@^1.0.30000808:
+  version "1.0.30000808"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000808.tgz#7d759b5518529ea08b6705a19e70dbf401628ffc"
+
 capture-stack-trace@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d"
@@ -1418,6 +1462,14 @@ chalk@^2.3.0:
     escape-string-regexp "^1.0.5"
     supports-color "^4.0.0"
 
+chalk@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.1.tgz#523fe2678aec7b04e8041909292fe8b17059b796"
+  dependencies:
+    ansi-styles "^3.2.0"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.2.0"
+
 chalk@~2.2.0:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.2.2.tgz#4403f5cf18f35c05f51fbdf152bf588f956cf7cb"
@@ -1430,7 +1482,11 @@ charenc@~0.0.1:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
 
-chokidar@^1.4.1, chokidar@^1.4.2, chokidar@^1.6.1, chokidar@^1.7.0:
+check-types@^7.3.0:
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/check-types/-/check-types-7.3.0.tgz#468f571a4435c24248f5fd0cb0e8d87c3c341e7d"
+
+chokidar@^1.4.1, chokidar@^1.4.2, chokidar@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
   dependencies:
@@ -1462,6 +1518,24 @@ chokidar@^2.0.0:
   optionalDependencies:
     fsevents "^1.0.0"
 
+chokidar@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.0.2.tgz#4dc65139eeb2714977735b6a35d06e97b494dfd7"
+  dependencies:
+    anymatch "^2.0.0"
+    async-each "^1.0.0"
+    braces "^2.3.0"
+    glob-parent "^3.1.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^4.0.0"
+    normalize-path "^2.1.1"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+    upath "^1.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
 chownr@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.0.1.tgz#e2a75042a9551908bebd25b8523d5f9769d79181"
@@ -1503,16 +1577,6 @@ cli-boxes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
 
-cli-cursor@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
-  dependencies:
-    restore-cursor "^2.0.0"
-
-cli-spinners@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-1.0.1.tgz#2675321c100f195b02877ac499e9911fa34b9783"
-
 cliui@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
@@ -1529,6 +1593,14 @@ cliui@^3.2.0:
     strip-ansi "^3.0.1"
     wrap-ansi "^2.0.0"
 
+cliui@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.0.0.tgz#743d4650e05f36d1ed2575b59638d87322bfbbcc"
+  dependencies:
+    string-width "^2.1.1"
+    strip-ansi "^4.0.0"
+    wrap-ansi "^2.0.0"
+
 clone-deep@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-0.3.0.tgz#348c61ae9cdbe0edfe053d91ff4cc521d790ede8"
@@ -1674,6 +1746,10 @@ commander@^2.12.1, commander@~2.13.0:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
 
+commander@^2.13.0:
+  version "2.14.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.14.1.tgz#2235123e37af8ca3c65df45b026dbd357b01b9aa"
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -1705,9 +1781,9 @@ compressible@~2.0.11:
   dependencies:
     mime-db ">= 1.29.0 < 2"
 
-compression-webpack-plugin@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/compression-webpack-plugin/-/compression-webpack-plugin-1.1.3.tgz#4b936c627eda09304e3153499ece7830289ab95a"
+compression-webpack-plugin@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/compression-webpack-plugin/-/compression-webpack-plugin-1.1.6.tgz#450808fe143b4c5216a14f0c315c47bec3d83cec"
   dependencies:
     async "^2.4.1"
     cacache "^10.0.1"
@@ -1835,19 +1911,17 @@ copy-descriptor@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
 
-copy-webpack-plugin@4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.3.1.tgz#19ba6370bf6f8e263cbd66185a2b79f2321a9302"
+copy-webpack-plugin@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.4.1.tgz#1e8c366211db6dc2ddee40e5a3e4fc661dd149e8"
   dependencies:
     cacache "^10.0.1"
     find-cache-dir "^1.0.0"
     globby "^7.1.1"
     is-glob "^4.0.0"
     loader-utils "^0.2.15"
-    lodash "^4.3.0"
     minimatch "^3.0.4"
     p-limit "^1.0.0"
-    pify "^3.0.0"
     serialize-javascript "^1.4.0"
 
 core-js@2.5.3:
@@ -2279,9 +2353,9 @@ depd@1.1.1, depd@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
 
-dependency-graph@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/dependency-graph/-/dependency-graph-0.5.0.tgz#71edf7945dbba86c1b19ac982b6afb6476b56dd5"
+dependency-graph@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/dependency-graph/-/dependency-graph-0.7.0.tgz#8fc7991ad236e47f0d5742701b5e307b83d7c0d0"
 
 deps-sort@^2.0.0:
   version "2.0.0"
@@ -2475,7 +2549,7 @@ ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
-ejs@^2.5.6:
+ejs@^2.5.7:
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.7.tgz#cc872c168880ae3c7189762fd5ffc00896c9518a"
 
@@ -2483,9 +2557,9 @@ electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.24:
   version "1.3.24"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.24.tgz#9b7b88bb05ceb9fa016a177833cc2dde388f21b6"
 
-electron-to-chromium@^1.3.30:
-  version "1.3.31"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.31.tgz#00d832cba9fe2358652b0c48a8816c8e3a037e9f"
+electron-to-chromium@^1.3.33:
+  version "1.3.33"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.33.tgz#bf00703d62a7c65238136578c352d6c5c042a545"
 
 elliptic@^6.0.0:
   version "6.4.0"
@@ -2855,12 +2929,12 @@ expand-range@^1.8.1:
   dependencies:
     fill-range "^2.1.0"
 
-exports-loader@0.6.4:
-  version "0.6.4"
-  resolved "https://registry.yarnpkg.com/exports-loader/-/exports-loader-0.6.4.tgz#d70fc6121975b35fc12830cf52754be2740fc886"
+exports-loader@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/exports-loader/-/exports-loader-0.7.0.tgz#84881c784dea6036b8e1cd1dac3da9b6409e21a5"
   dependencies:
-    loader-utils "^1.0.2"
-    source-map "0.5.x"
+    loader-utils "^1.1.0"
+    source-map "0.5.0"
 
 express-session@1.15.6:
   version "1.15.6"
@@ -2876,7 +2950,7 @@ express-session@1.15.6:
     uid-safe "~2.1.5"
     utils-merge "1.0.1"
 
-express@4.16.2, express@^4.15.2, express@^4.16.2:
+express@4.16.2, express@^4.16.2:
   version "4.16.2"
   resolved "https://registry.yarnpkg.com/express/-/express-4.16.2.tgz#e35c6dfe2d64b7dca0a5cd4f21781be3299e076c"
   dependencies:
@@ -2911,6 +2985,12 @@ express@4.16.2, express@^4.15.2, express@^4.16.2:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
+extend-shallow@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-1.1.4.tgz#19d6bf94dfc09d76ba711f39b872d21ff4dd9071"
+  dependencies:
+    kind-of "^1.1.0"
+
 extend-shallow@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
@@ -3009,9 +3089,9 @@ filename-regex@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
 
-filesize@^3.5.9:
-  version "3.5.10"
-  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.5.10.tgz#fc8fa23ddb4ef9e5e0ab6e1e64f679a24a56761f"
+filesize@^3.5.11:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.0.tgz#22d079615624bb6fd3c04026120628a41b3f4efa"
 
 fill-range@^2.1.0:
   version "2.2.3"
@@ -3189,9 +3269,9 @@ fs-extra@^0.22.1:
     jsonfile "^2.1.0"
     rimraf "^2.2.8"
 
-fs-extra@^4.0.0, fs-extra@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.2.tgz#f91704c53d1b461f893452b0c307d9997647ab6b"
+fs-extra@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-5.0.0.tgz#414d0110cdd06705734d055652c5411260c31abd"
   dependencies:
     graceful-fs "^4.1.2"
     jsonfile "^4.0.0"
@@ -3481,11 +3561,12 @@ gulplog@^1.0.0:
   dependencies:
     glogg "^1.0.0"
 
-gzip-size@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520"
+gzip-size@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-4.1.0.tgz#8ae096257eabe7d69c45be2b67c448124ffb517c"
   dependencies:
     duplexer "^0.1.1"
+    pify "^3.0.0"
 
 handle-thing@^1.2.5:
   version "1.2.5"
@@ -3556,6 +3637,10 @@ has-flag@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
 
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+
 has-gulplog@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/has-gulplog/-/has-gulplog-0.1.0.tgz#6414c82913697da51590397dafb12f22967811ce"
@@ -4340,9 +4425,9 @@ istanbul@0.4.5, istanbul@^0.4.0, istanbul@^0.4.3:
     which "^1.1.1"
     wordwrap "^1.0.0"
 
-jasmine-core@2.9.1:
-  version "2.9.1"
-  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.9.1.tgz#b6bbc1d8e65250d56f5888461705ebeeeb88f22f"
+jasmine-core@^2.99.1:
+  version "2.99.1"
+  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.99.1.tgz#e6400df1e6b56e130b61c4bcd093daa7f6e8ca15"
 
 jasmine-core@~2.8.0:
   version "2.8.0"
@@ -4360,7 +4445,7 @@ jasmine-spec-reporter@4.2.1:
   dependencies:
     colors "1.1.2"
 
-jasmine@^2.5.3:
+jasmine@2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-2.8.0.tgz#6b089c0a11576b1f16df11b80146d91d4e8b8a3e"
   dependencies:
@@ -4545,11 +4630,11 @@ karma-phantomjs-launcher@1.0.4:
     lodash "^4.0.1"
     phantomjs-prebuilt "^2.1.7"
 
-karma-remap-coverage@0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/karma-remap-coverage/-/karma-remap-coverage-0.1.4.tgz#29feff25aa159655cc347586bcf4a200591b3b28"
+karma-remap-coverage@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/karma-remap-coverage/-/karma-remap-coverage-0.1.5.tgz#d2e3bb2dd00adcd256603a702b08c371370fbc12"
   dependencies:
-    remap-istanbul "0.8.4"
+    remap-istanbul "^0.10"
 
 karma-remap-istanbul@0.6.0:
   version "0.6.0"
@@ -4621,6 +4706,10 @@ killable@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.0.tgz#da8b84bd47de5395878f95d64d02f2449fe05e6b"
 
+kind-of@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-1.1.0.tgz#140a3d2d41a36d2efcfa9377b62c24f8495a5c44"
+
 kind-of@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-2.0.1.tgz#018ec7a4ce7e3a86cb9141be519d24c8faa981b5"
@@ -4874,6 +4963,10 @@ lodash.defaults@^4.0.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
 
+lodash.endswith@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/lodash.endswith/-/lodash.endswith-4.2.1.tgz#fed59ac1738ed3e236edd7064ec456448b37bc09"
+
 lodash.escape@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-3.2.0.tgz#995ee0dc18c1b48cc92effae71a10aab5b487698"
@@ -4888,6 +4981,14 @@ lodash.isarray@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
 
+lodash.isfunction@^3.0.8:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz#06de25df4db327ac931981d1bdb067e5af68d051"
+
+lodash.isstring@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
+
 lodash.keys@^3.0.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
@@ -4912,6 +5013,10 @@ lodash.restparam@^3.0.0:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
 
+lodash.startswith@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/lodash.startswith/-/lodash.startswith-4.2.1.tgz#c598c4adce188a27e53145731cdc6c0e7177600c"
+
 lodash.tail@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
@@ -4962,7 +5067,7 @@ lodash@^3.8.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
-lodash@^4, lodash@^4.0.0, lodash@^4.0.1, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.8.0, lodash@~4.17.4:
+lodash@^4, lodash@^4.0.0, lodash@^4.0.1, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.5.0, lodash@^4.8.0, lodash@~4.17.4:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -4970,12 +5075,6 @@ log-driver@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.5.tgz#7ae4ec257302fd790d557cb10c97100d857b0056"
 
-log-symbols@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
-  dependencies:
-    chalk "^1.0.0"
-
 log-symbols@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.1.0.tgz#f35fa60e278832b538dc4dddcbb478a45d3e3be6"
@@ -5128,9 +5227,9 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-marked@^0.3.5:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7"
+marked@^0.3.12:
+  version "0.3.12"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.12.tgz#7cf25ff2252632f3fe2406bde258e94eee927519"
 
 math-expression-evaluator@^1.2.14:
   version "1.2.17"
@@ -5473,9 +5572,9 @@ netmask@~1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/netmask/-/netmask-1.0.6.tgz#20297e89d86f6f6400f250d9f4f6b4c1945fcd35"
 
-ngrx-store-freeze@0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/ngrx-store-freeze/-/ngrx-store-freeze-0.2.0.tgz#74c231947bbe1938af722f6a72624dc69788d39f"
+ngrx-store-freeze@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/ngrx-store-freeze/-/ngrx-store-freeze-0.2.1.tgz#04fb29db33cafda0f2d6ea32adeaac4891b1b27b"
   dependencies:
     deep-freeze-strict "^1.1.1"
 
@@ -5631,11 +5730,11 @@ nodemailer@^2.5.0:
     nodemailer-smtp-transport "2.7.2"
     socks "1.1.9"
 
-nodemon@1.14.11:
-  version "1.14.11"
-  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-1.14.11.tgz#cc0009dd8d82f126f3aba50ace7e753827a8cebc"
+nodemon@^1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-1.15.0.tgz#ddec01eeb9c33d53dfbf7eddb2fa32f723474c1e"
   dependencies:
-    chokidar "^2.0.0"
+    chokidar "^2.0.2"
     debug "^3.1.0"
     ignore-by-default "^1.0.1"
     minimatch "^3.0.4"
@@ -5814,12 +5913,6 @@ onecolor@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/onecolor/-/onecolor-3.0.4.tgz#75a46f80da6c7aaa5b4daae17a47198bd9652494"
 
-onetime@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
-  dependencies:
-    mimic-fn "^1.0.0"
-
 opener@^1.4.3, opener@~1.4.0:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.4.3.tgz#5c6da2c5d7e5831e8ffa3964950f8d6674ac90b8"
@@ -5852,15 +5945,6 @@ options@>=0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f"
 
-ora@^1.1.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/ora/-/ora-1.3.0.tgz#80078dd2b92a934af66a3ad72a5b910694ede51a"
-  dependencies:
-    chalk "^1.1.1"
-    cli-cursor "^2.1.0"
-    cli-spinners "^1.0.0"
-    log-symbols "^1.0.2"
-
 original@>=0.0.5:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/original/-/original-1.0.0.tgz#9147f93fa1696d04be61e01bd50baeaca656bd3b"
@@ -6207,6 +6291,16 @@ pleeease-filters@^4.0.0:
     onecolor "^3.0.4"
     postcss "^6.0.1"
 
+plugin-error@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-0.1.2.tgz#3b9bb3335ccf00f425e07437e19276967da47ace"
+  dependencies:
+    ansi-cyan "^0.1.1"
+    ansi-red "^0.1.1"
+    arr-diff "^1.0.1"
+    arr-union "^2.0.1"
+    extend-shallow "^1.1.2"
+
 portfinder@^1.0.13, portfinder@^1.0.9:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
@@ -6251,23 +6345,22 @@ postcss-calc@^6.0.0:
     postcss-selector-parser "^2.2.2"
     reduce-css-calc "^2.0.0"
 
-postcss-cli@4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-cli/-/postcss-cli-4.1.1.tgz#b94bd8fffbb7ac1f62f2607e78fc9397f7f63a5d"
+postcss-cli@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-cli/-/postcss-cli-5.0.0.tgz#3d6aee7652b8dc6566f0189dd90d11bb0a535a20"
   dependencies:
     chalk "^2.1.0"
-    chokidar "^1.6.1"
-    dependency-graph "^0.5.0"
-    fs-extra "^4.0.1"
+    chokidar "^2.0.0"
+    dependency-graph "^0.7.0"
+    fs-extra "^5.0.0"
     get-stdin "^5.0.1"
-    globby "^6.1.0"
-    ora "^1.1.0"
+    globby "^7.1.1"
     postcss "^6.0.1"
     postcss-load-config "^1.1.0"
     postcss-reporter "^5.0.0"
     pretty-hrtime "^1.0.3"
     read-cache "^1.0.0"
-    yargs "^8.0.1"
+    yargs "^11.0.0"
 
 postcss-color-function@^4.0.0:
   version "4.0.0"
@@ -6492,14 +6585,14 @@ postcss-load-plugins@^2.3.0:
     cosmiconfig "^2.1.1"
     object-assign "^4.1.0"
 
-postcss-loader@2.0.10:
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-2.0.10.tgz#090db0540140bd56a7a7f717c41bc29aeef4c674"
+postcss-loader@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-2.1.0.tgz#038c2d6d59753fef4667827fd3ae03f5dc5e6a7a"
   dependencies:
     loader-utils "^1.1.0"
     postcss "^6.0.0"
     postcss-load-config "^1.2.0"
-    schema-utils "^0.3.0"
+    schema-utils "^0.4.0"
 
 postcss-media-minmax@^3.0.0:
   version "3.0.0"
@@ -6762,14 +6855,6 @@ postcss-zindex@^2.0.1:
     postcss "^5.0.4"
     uniqs "^2.0.0"
 
-postcss@6.0.16, postcss@^6.0, postcss@^6.0.14, postcss@^6.0.16:
-  version "6.0.16"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.16.tgz#112e2fe2a6d2109be0957687243170ea5589e146"
-  dependencies:
-    chalk "^2.3.0"
-    source-map "^0.6.1"
-    supports-color "^5.1.0"
-
 postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.16:
   version "5.2.17"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.17.tgz#cf4f597b864d65c8a492b2eabe9d706c879c388b"
@@ -6779,6 +6864,14 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
+postcss@^6.0, postcss@^6.0.14:
+  version "6.0.16"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.16.tgz#112e2fe2a6d2109be0957687243170ea5589e146"
+  dependencies:
+    chalk "^2.3.0"
+    source-map "^0.6.1"
+    supports-color "^5.1.0"
+
 postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.11, postcss@^6.0.13, postcss@^6.0.3, postcss@^6.0.5, postcss@^6.0.6, postcss@^6.0.8:
   version "6.0.13"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.13.tgz#b9ecab4ee00c89db3ec931145bd9590bbf3f125f"
@@ -6787,6 +6880,14 @@ postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.11, postcss@^6.0.13, postcss@^6.0.3
     source-map "^0.6.1"
     supports-color "^4.4.0"
 
+postcss@^6.0.17, postcss@^6.0.18:
+  version "6.0.18"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.18.tgz#370f5f44d47f3a205f0eb2f6262bbf202df2a80e"
+  dependencies:
+    chalk "^2.3.1"
+    source-map "^0.6.1"
+    supports-color "^5.2.0"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -6849,9 +6950,9 @@ protractor-istanbul-plugin@2.0.0:
     q "^1.4.1"
     uuid "^2.0.1"
 
-protractor@5.2.2:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/protractor/-/protractor-5.2.2.tgz#80eff170761455eff6e2f111088a03c438844a41"
+protractor@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/protractor/-/protractor-5.3.0.tgz#5df98201cbdaeb50826af6d05630ef1945bf9c32"
   dependencies:
     "@types/node" "^6.0.46"
     "@types/q" "^0.0.32"
@@ -6859,7 +6960,7 @@ protractor@5.2.2:
     blocking-proxy "^1.0.0"
     chalk "^1.1.3"
     glob "^7.0.3"
-    jasmine "^2.5.3"
+    jasmine "2.8.0"
     jasminewd2 "^2.1.0"
     optimist "~0.6.0"
     q "1.4.1"
@@ -7273,14 +7374,15 @@ relateurl@0.2.x:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
 
-remap-istanbul@0.8.4:
-  version "0.8.4"
-  resolved "https://registry.yarnpkg.com/remap-istanbul/-/remap-istanbul-0.8.4.tgz#b4bfdfdbc90efa635e9a28b1f4a116e22c8c2697"
+remap-istanbul@^0.10:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/remap-istanbul/-/remap-istanbul-0.10.1.tgz#3aa58dd5021d499f336d3ba5bf3bbb91c1b88e37"
   dependencies:
     amdefine "^1.0.0"
-    gulp-util "3.0.7"
     istanbul "0.4.5"
-    source-map ">=0.5.6"
+    minimatch "^3.0.3"
+    plugin-error "^0.1.2"
+    source-map "^0.6.1"
     through2 "2.0.1"
 
 remap-istanbul@^0.9.0:
@@ -7510,13 +7612,6 @@ resolve@^1.1.6, resolve@^1.3.2, resolve@^1.4.0:
   dependencies:
     path-parse "^1.0.5"
 
-restore-cursor@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
-  dependencies:
-    onetime "^2.0.0"
-    signal-exit "^3.0.2"
-
 rework-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/rework-visit/-/rework-visit-1.0.0.tgz#9945b2803f219e2f7aca00adb8bc9f640f842c9a"
@@ -7555,9 +7650,9 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^2.0.0"
     inherits "^2.0.1"
 
-rollup-plugin-commonjs@8.2.6:
-  version "8.2.6"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-8.2.6.tgz#27e5b9069ff94005bb01e01bb46a1e4873784677"
+rollup-plugin-commonjs@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-8.3.0.tgz#91b4ba18f340951e39ed7b1901f377a80ab3f9c3"
   dependencies:
     acorn "^5.2.1"
     estree-walker "^0.5.0"
@@ -7576,9 +7671,9 @@ rollup-plugin-node-globals@1.1.0:
     process-es6 "^0.11.3"
     rollup-pluginutils "^1.5.2"
 
-rollup-plugin-node-resolve@3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.0.2.tgz#38babc12fd404cc2ba1ff68648fe43fa3ffee6b0"
+rollup-plugin-node-resolve@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.0.3.tgz#8f57b253edd00e5b0ad0aed7b7e9cf5982e98fa4"
   dependencies:
     builtin-modules "^1.1.0"
     is-module "^1.0.0"
@@ -7604,9 +7699,9 @@ rollup-pluginutils@^2.0.1:
     estree-walker "^0.3.0"
     micromatch "^2.3.11"
 
-rollup@0.54.1:
-  version "0.54.1"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.54.1.tgz#415a5d999421502646cf54b873fc4ce1a7393970"
+rollup@^0.56.0:
+  version "0.56.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.56.0.tgz#4aefe9cef84a01ac3245e3fbba155e38dc2cc2e8"
 
 run-queue@^1.0.0, run-queue@^1.0.3:
   version "1.0.3"
@@ -7663,6 +7758,13 @@ schema-utils@^0.3.0:
   dependencies:
     ajv "^5.0.0"
 
+schema-utils@^0.4.0:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.5.tgz#21836f0608aac17b78f9e3e24daff14a5ca13a3e"
+  dependencies:
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+
 script-ext-html-webpack-plugin@1.8.8:
   version "1.8.8"
   resolved "https://registry.yarnpkg.com/script-ext-html-webpack-plugin/-/script-ext-html-webpack-plugin-1.8.8.tgz#faa888a286ce746fcd06a5e0a9e39ed7b9d24f66"
@@ -7869,9 +7971,9 @@ shell-quote@^1.6.1:
     array-reduce "~0.0.0"
     jsonify "~0.0.0"
 
-shelljs@^0.7.0:
-  version "0.7.8"
-  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.8.tgz#decbcf874b0d1e5fb72e14b164a9683048e9acb3"
+shelljs@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.1.tgz#729e038c413a2254c4078b95ed46e0397154a9f1"
   dependencies:
     glob "^7.0.0"
     interpret "^1.0.0"
@@ -8084,11 +8186,15 @@ source-map-url@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.3.0.tgz#7ecaf13b57bcd09da8a40c5d269db33799d4aaf9"
 
+source-map@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.0.tgz#0fe96503ac86a5adb5de63f4e412ae4872cdbe86"
+
 source-map@0.5.x, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, source-map@~0.5.3, source-map@~0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
-source-map@0.6.1, source-map@>=0.5.6, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+source-map@>=0.5.6, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
 
@@ -8104,6 +8210,10 @@ source-map@^0.4.2, source-map@^0.4.4:
   dependencies:
     amdefine ">=0.0.4"
 
+source-map@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.1.tgz#493620ba1692945d680b93862435bf0ed95a2aa4"
+
 source-map@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.2.0.tgz#dab73fbcfc2ba819b4de03bd6f6eaa48164b3f9d"
@@ -8401,6 +8511,12 @@ supports-color@^5.1.0:
   dependencies:
     has-flag "^2.0.0"
 
+supports-color@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.2.0.tgz#b0d5333b1184dd3666cbe5aa0b45c5ac7ac17a4a"
+  dependencies:
+    has-flag "^3.0.0"
+
 svgo@^0.7.0:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
@@ -8609,13 +8725,17 @@ trim-right@^1.0.1:
   dependencies:
     glob "^6.0.4"
 
+tryer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.0.tgz#027b69fa823225e551cace3ef03b11f6ab37c1d7"
+
 ts-helpers@1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/ts-helpers/-/ts-helpers-1.1.2.tgz#fc69be9f1f3baed01fb1a0ef8d4cfe748814d835"
 
-ts-md5@1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/ts-md5/-/ts-md5-1.2.3.tgz#52cbee6a231213b0eab8ae8cbe743b333e8c6d01"
+ts-md5@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/ts-md5/-/ts-md5-1.2.4.tgz#7030d7ba9134449deedf6f609d4b4509b94a5712"
 
 ts-node@4.1.0:
   version "4.1.0"
@@ -8724,40 +8844,40 @@ typedoc-default-themes@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/typedoc-default-themes/-/typedoc-default-themes-0.5.0.tgz#6dc2433e78ed8bea8e887a3acde2f31785bd6227"
 
-typedoc@0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/typedoc/-/typedoc-0.9.0.tgz#159bff7c7784ce5b91d86f3e4cc8928e62040957"
+typedoc@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/typedoc/-/typedoc-0.10.0.tgz#898b447248dabf68ecbde9d5ccf5141fda8aa166"
   dependencies:
-    "@types/fs-extra" "4.0.0"
-    "@types/handlebars" "4.0.31"
-    "@types/highlight.js" "9.1.8"
-    "@types/lodash" "4.14.74"
+    "@types/fs-extra" "5.0.0"
+    "@types/handlebars" "4.0.36"
+    "@types/highlight.js" "9.12.2"
+    "@types/lodash" "4.14.99"
     "@types/marked" "0.3.0"
-    "@types/minimatch" "2.0.29"
-    "@types/shelljs" "0.7.0"
-    fs-extra "^4.0.0"
+    "@types/minimatch" "3.0.3"
+    "@types/shelljs" "0.7.7"
+    fs-extra "^5.0.0"
     handlebars "^4.0.6"
     highlight.js "^9.0.0"
     lodash "^4.13.1"
-    marked "^0.3.5"
+    marked "^0.3.12"
     minimatch "^3.0.0"
     progress "^2.0.0"
-    shelljs "^0.7.0"
+    shelljs "^0.8.1"
     typedoc-default-themes "^0.5.0"
-    typescript "2.4.1"
+    typescript "2.7.1"
 
-typescript@2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.4.1.tgz#c3ccb16ddaa0b2314de031e7e6fee89e5ba346bc"
-
-typescript@2.6.2:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.6.2.tgz#3c5b6fd7f6de0914269027f03c0946758f7673a4"
+typescript@2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.7.1.tgz#bb3682c2c791ac90e7c6210b26478a8da085c359"
 
 typescript@^2.5.0:
   version "2.5.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.5.3.tgz#df3dcdc38f3beb800d4bc322646b04a3f6ca7f0d"
 
+typescript@^2.7.2:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.7.2.tgz#2d615a1ef4aee4f574425cdff7026edf81919836"
+
 uglify-es@^3.3.7:
   version "3.3.8"
   resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.8.tgz#f2c68e6cff0d0f9dc9577e4da207151c2e753b7e"
@@ -8905,6 +9025,15 @@ unzip-response@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
 
+upath@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.0.2.tgz#80aaae5395abc5fd402933ae2f58694f0860204c"
+  dependencies:
+    lodash.endswith "^4.2.1"
+    lodash.isfunction "^3.0.8"
+    lodash.isstring "^4.0.1"
+    lodash.startswith "^4.2.1"
+
 update-notifier@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.3.0.tgz#4e8827a6bb915140ab093559d7014e3ebb837451"
@@ -9128,17 +9257,18 @@ webfontloader@1.6.28:
   version "1.6.28"
   resolved "https://registry.yarnpkg.com/webfontloader/-/webfontloader-1.6.28.tgz#db786129253cb6e8eae54c2fb05f870af6675bae"
 
-webpack-bundle-analyzer@2.9.2:
-  version "2.9.2"
-  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.9.2.tgz#63ed86eb71cc4cda86f68e685a84530ba0126449"
+webpack-bundle-analyzer@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.10.0.tgz#d0646cda342939f6f05eb632a090abbd90317446"
   dependencies:
-    acorn "^5.1.1"
-    chalk "^1.1.3"
-    commander "^2.9.0"
-    ejs "^2.5.6"
-    express "^4.15.2"
-    filesize "^3.5.9"
-    gzip-size "^3.0.0"
+    acorn "^5.3.0"
+    bfj-node4 "^5.2.0"
+    chalk "^2.3.0"
+    commander "^2.13.0"
+    ejs "^2.5.7"
+    express "^4.16.2"
+    filesize "^3.5.11"
+    gzip-size "^4.1.0"
     lodash "^4.17.4"
     mkdirp "^0.5.1"
     opener "^1.4.3"
@@ -9154,9 +9284,9 @@ webpack-dev-middleware@1.12.2, webpack-dev-middleware@^1.12.0:
     range-parser "^1.0.3"
     time-stamp "^2.0.0"
 
-webpack-dev-middleware@2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-2.0.4.tgz#7d8943a609121021bb72772a41636e229346cb41"
+webpack-dev-middleware@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-2.0.5.tgz#2a1d07afb599e1993033d72c2181ec2344c15e31"
   dependencies:
     loud-rejection "^1.6.0"
     memory-fs "~0.4.1"
@@ -9231,14 +9361,14 @@ webpack-sources@^1.1.0:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@^3.10.0:
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.10.0.tgz#5291b875078cf2abf42bdd23afe3f8f96c17d725"
+webpack@^3.11.0:
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.11.0.tgz#77da451b1d7b4b117adaf41a1a93b5742f24d894"
   dependencies:
     acorn "^5.0.0"
     acorn-dynamic-import "^2.0.0"
-    ajv "^5.1.5"
-    ajv-keywords "^2.0.0"
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
     async "^2.1.2"
     enhanced-resolve "^3.4.0"
     escope "^3.6.0"
@@ -9435,6 +9565,12 @@ yargs-parser@^7.0.0:
   dependencies:
     camelcase "^4.1.0"
 
+yargs-parser@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-9.0.2.tgz#9ccf6a43460fe4ed40a9bb68f48d43b8a68cc077"
+  dependencies:
+    camelcase "^4.1.0"
+
 yargs@6.6.0:
   version "6.6.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
@@ -9453,6 +9589,23 @@ yargs@6.6.0:
     y18n "^3.2.1"
     yargs-parser "^4.2.0"
 
+yargs@^11.0.0:
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-11.0.0.tgz#c052931006c5eee74610e5fc0354bedfd08a201b"
+  dependencies:
+    cliui "^4.0.0"
+    decamelize "^1.1.1"
+    find-up "^2.1.0"
+    get-caller-file "^1.0.1"
+    os-locale "^2.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^9.0.2"
+
 yargs@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"
@@ -9471,7 +9624,7 @@ yargs@^7.0.0:
     y18n "^3.2.1"
     yargs-parser "^5.0.0"
 
-yargs@^8.0.1, yargs@^8.0.2:
+yargs@^8.0.2:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"
   dependencies:

From bfb6889d7dd536fd16e82d7cddb715a9a78cd482 Mon Sep 17 00:00:00 2001
From: Lotte Hofstede <lotte_hofstede@hotmail.com>
Date: Fri, 16 Feb 2018 11:43:43 +0100
Subject: [PATCH 18/23] reversed source-map upgrade to be able to run without
 node 8

---
 package.json | 2 +-
 yarn.lock    | 6 +-----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index fdfebef65a..e89dbca460 100644
--- a/package.json
+++ b/package.json
@@ -185,7 +185,7 @@
     "rollup-plugin-uglify": "3.0.0",
     "sass-loader": "6.0.6",
     "script-ext-html-webpack-plugin": "1.8.8",
-    "source-map": "^0.7.1",
+    "source-map": "0.6.1",
     "source-map-loader": "0.2.3",
     "string-replace-loader": "1.3.0",
     "to-string-loader": "1.1.5",
diff --git a/yarn.lock b/yarn.lock
index cc540b3e9a..e9b33a8920 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8194,7 +8194,7 @@ source-map@0.5.x, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, sourc
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
-source-map@>=0.5.6, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+source-map@0.6.1, source-map@>=0.5.6, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
 
@@ -8210,10 +8210,6 @@ source-map@^0.4.2, source-map@^0.4.4:
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@^0.7.1:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.1.tgz#493620ba1692945d680b93862435bf0ed95a2aa4"
-
 source-map@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.2.0.tgz#dab73fbcfc2ba819b4de03bd6f6eaa48164b3f9d"

From 76227960a3ed2e492241dcdfde53f2704a8ef2b4 Mon Sep 17 00:00:00 2001
From: Lotte Hofstede <lotte_hofstede@hotmail.com>
Date: Fri, 16 Feb 2018 13:36:13 +0100
Subject: [PATCH 19/23] made search form work without js

---
 src/app/shared/search-form/search-form.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/search-form/search-form.component.html b/src/app/shared/search-form/search-form.component.html
index 18469f686a..44f18a1a9c 100644
--- a/src/app/shared/search-form/search-form.component.html
+++ b/src/app/shared/search-form/search-form.component.html
@@ -1,4 +1,4 @@
-<form #form="ngForm" (ngSubmit)="onSubmit(form.value)" class="row">
+<form #form="ngForm" (ngSubmit)="onSubmit(form.value)" class="row" action="/search">
 <div *ngIf="isNotEmpty(scopes)" class="col-12 col-sm-3">
   <select [(ngModel)]="selectedId" name="scope" class="form-control" aria-label="Search scope" [compareWith]="byId">
     <option value>{{'search.form.search_dspace' | translate}}</option>

From 437ded7f4095423a0d4c16eaaef9919732a293d6 Mon Sep 17 00:00:00 2001
From: Lotte Hofstede <lotte_hofstede@hotmail.com>
Date: Fri, 16 Feb 2018 14:10:43 +0100
Subject: [PATCH 20/23] dependency fix

---
 package.json |   9 ++---
 yarn.lock    | 103 +++++++++++++++++++++++++--------------------------
 2 files changed, 55 insertions(+), 57 deletions(-)

diff --git a/package.json b/package.json
index e89dbca460..710f62a257 100644
--- a/package.json
+++ b/package.json
@@ -66,8 +66,7 @@
     "webdriver:update": "node node_modules/protractor/bin/webdriver-manager update --standalone",
     "lint": "tslint \"src/**/*.ts\" && tslint \"e2e/**/*.ts\"",
     "docs": "typedoc --options typedoc.json ./src/",
-    "coverage": "http-server -c-1 -o -p 9875 ./coverage",
-    "script": "tsc -v"
+    "coverage": "http-server -c-1 -o -p 9875 ./coverage"
   },
   "dependencies": {
     "@angular/animations": "^5.2.5",
@@ -134,7 +133,7 @@
     "angular2-template-loader": "0.6.2",
     "autoprefixer": "^8.0.0",
     "awesome-typescript-loader": "3.4.1",
-    "caniuse-lite": "^1.0.30000808",
+    "caniuse-lite": "^1.0.30000697",
     "codelyzer": "^4.1.0",
     "compression-webpack-plugin": "^1.1.6",
     "copy-webpack-plugin": "^4.4.1",
@@ -192,8 +191,8 @@
     "ts-helpers": "1.1.2",
     "ts-node": "4.1.0",
     "tslint": "5.9.1",
-    "typedoc": "^0.10.0",
-    "typescript": "^2.7.2",
+    "typedoc": "^0.9.0",
+    "typescript": "2.6.2",
     "webpack": "^3.11.0",
     "webpack-bundle-analyzer": "^2.10.0",
     "webpack-dev-middleware": "^2.0.5",
diff --git a/yarn.lock b/yarn.lock
index e9b33a8920..b6e461e9b6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -171,39 +171,31 @@
     "@types/express-serve-static-core" "*"
     "@types/serve-static" "*"
 
-"@types/fs-extra@5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-5.0.0.tgz#d3e225b35eb5c6d3a5a782c28219df365c781413"
+"@types/fs-extra@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-4.0.0.tgz#1dd742ad5c9bce308f7a52d02ebc01421bc9102f"
   dependencies:
     "@types/node" "*"
 
-"@types/glob@*":
-  version "5.0.35"
-  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-5.0.35.tgz#1ae151c802cece940443b5ac246925c85189f32a"
-  dependencies:
-    "@types/events" "*"
-    "@types/minimatch" "*"
-    "@types/node" "*"
-
 "@types/hammerjs@2.0.35":
   version "2.0.35"
   resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.35.tgz#7b7c950c7d54593e23bffc8d2b4feba9866a7277"
 
-"@types/handlebars@4.0.36":
-  version "4.0.36"
-  resolved "https://registry.yarnpkg.com/@types/handlebars/-/handlebars-4.0.36.tgz#ff57c77fa1ab6713bb446534ddc4d979707a3a79"
+"@types/handlebars@4.0.31":
+  version "4.0.31"
+  resolved "https://registry.yarnpkg.com/@types/handlebars/-/handlebars-4.0.31.tgz#a7fba66fafe42713aee88eeca8db91192efe6e72"
 
-"@types/highlight.js@9.12.2":
-  version "9.12.2"
-  resolved "https://registry.yarnpkg.com/@types/highlight.js/-/highlight.js-9.12.2.tgz#6ee7cd395effe5ec80b515d3ff1699068cd0cd1d"
+"@types/highlight.js@9.1.8":
+  version "9.1.8"
+  resolved "https://registry.yarnpkg.com/@types/highlight.js/-/highlight.js-9.1.8.tgz#d227f18bcb8f3f187e16965f2444859a04689758"
 
 "@types/jasmine@^2.8.6":
   version "2.8.6"
   resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.8.6.tgz#14445b6a1613cf4e05dd61c3c3256d0e95c0421e"
 
-"@types/lodash@4.14.99":
-  version "4.14.99"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.99.tgz#e6e10c0a4cc16c7409b3181f1e66880d2fb7d4dc"
+"@types/lodash@4.14.74":
+  version "4.14.74"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.74.tgz#ac3bd8db988e7f7038e5d22bd76a7ba13f876168"
 
 "@types/marked@0.3.0":
   version "0.3.0"
@@ -217,9 +209,9 @@
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-2.0.0.tgz#5a7306e367c539b9f6543499de8dd519fac37a8b"
 
-"@types/minimatch@*", "@types/minimatch@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
+"@types/minimatch@2.0.29":
+  version "2.0.29"
+  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-2.0.29.tgz#5002e14f75e2d71e564281df0431c8c1b4a2a36a"
 
 "@types/node@*":
   version "8.0.34"
@@ -255,11 +247,10 @@
     "@types/express-serve-static-core" "*"
     "@types/mime" "*"
 
-"@types/shelljs@0.7.7":
-  version "0.7.7"
-  resolved "https://registry.yarnpkg.com/@types/shelljs/-/shelljs-0.7.7.tgz#1f7bfa28947661afea06365db9b1135bbc903ec4"
+"@types/shelljs@0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@types/shelljs/-/shelljs-0.7.0.tgz#229c157c6bc1e67d6b990e6c5e18dbd2ff58cff0"
   dependencies:
-    "@types/glob" "*"
     "@types/node" "*"
 
 "@types/strip-bom@^3.0.0":
@@ -1407,7 +1398,7 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000744:
   version "1.0.30000745"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000745.tgz#20d6fede1157a4935133502946fc7e0e6b880da5"
 
-caniuse-lite@^1.0.30000808:
+caniuse-lite@^1.0.30000697, caniuse-lite@^1.0.30000808:
   version "1.0.30000808"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000808.tgz#7d759b5518529ea08b6705a19e70dbf401628ffc"
 
@@ -3269,6 +3260,14 @@ fs-extra@^0.22.1:
     jsonfile "^2.1.0"
     rimraf "^2.2.8"
 
+fs-extra@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
 fs-extra@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-5.0.0.tgz#414d0110cdd06705734d055652c5411260c31abd"
@@ -5227,7 +5226,7 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-marked@^0.3.12:
+marked@^0.3.5:
   version "0.3.12"
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.12.tgz#7cf25ff2252632f3fe2406bde258e94eee927519"
 
@@ -7971,9 +7970,9 @@ shell-quote@^1.6.1:
     array-reduce "~0.0.0"
     jsonify "~0.0.0"
 
-shelljs@^0.8.1:
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.1.tgz#729e038c413a2254c4078b95ed46e0397154a9f1"
+shelljs@^0.7.0:
+  version "0.7.8"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.8.tgz#decbcf874b0d1e5fb72e14b164a9683048e9acb3"
   dependencies:
     glob "^7.0.0"
     interpret "^1.0.0"
@@ -8840,40 +8839,40 @@ typedoc-default-themes@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/typedoc-default-themes/-/typedoc-default-themes-0.5.0.tgz#6dc2433e78ed8bea8e887a3acde2f31785bd6227"
 
-typedoc@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/typedoc/-/typedoc-0.10.0.tgz#898b447248dabf68ecbde9d5ccf5141fda8aa166"
+typedoc@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/typedoc/-/typedoc-0.9.0.tgz#159bff7c7784ce5b91d86f3e4cc8928e62040957"
   dependencies:
-    "@types/fs-extra" "5.0.0"
-    "@types/handlebars" "4.0.36"
-    "@types/highlight.js" "9.12.2"
-    "@types/lodash" "4.14.99"
+    "@types/fs-extra" "4.0.0"
+    "@types/handlebars" "4.0.31"
+    "@types/highlight.js" "9.1.8"
+    "@types/lodash" "4.14.74"
     "@types/marked" "0.3.0"
-    "@types/minimatch" "3.0.3"
-    "@types/shelljs" "0.7.7"
-    fs-extra "^5.0.0"
+    "@types/minimatch" "2.0.29"
+    "@types/shelljs" "0.7.0"
+    fs-extra "^4.0.0"
     handlebars "^4.0.6"
     highlight.js "^9.0.0"
     lodash "^4.13.1"
-    marked "^0.3.12"
+    marked "^0.3.5"
     minimatch "^3.0.0"
     progress "^2.0.0"
-    shelljs "^0.8.1"
+    shelljs "^0.7.0"
     typedoc-default-themes "^0.5.0"
-    typescript "2.7.1"
+    typescript "2.4.1"
 
-typescript@2.7.1:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.7.1.tgz#bb3682c2c791ac90e7c6210b26478a8da085c359"
+typescript@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.4.1.tgz#c3ccb16ddaa0b2314de031e7e6fee89e5ba346bc"
+
+typescript@2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.6.2.tgz#3c5b6fd7f6de0914269027f03c0946758f7673a4"
 
 typescript@^2.5.0:
   version "2.5.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.5.3.tgz#df3dcdc38f3beb800d4bc322646b04a3f6ca7f0d"
 
-typescript@^2.7.2:
-  version "2.7.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.7.2.tgz#2d615a1ef4aee4f574425cdff7026edf81919836"
-
 uglify-es@^3.3.7:
   version "3.3.8"
   resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.8.tgz#f2c68e6cff0d0f9dc9577e4da207151c2e753b7e"

From 4c45f29be52f04843a4c0606d20f68538efa738e Mon Sep 17 00:00:00 2001
From: Art Lowel <art.lowel+gitkraken@gmail.com>
Date: Mon, 5 Mar 2018 09:57:26 +0100
Subject: [PATCH 21/23] fixes an issue where protractor can't find the right
 chrome version when running in travis, see
 https://github.com/angular/angular-cli/wiki/stories-continuous-integration#using-travis-ci

---
 .travis.yml | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index 0a9ae4754f..ce1213f483 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,7 +1,11 @@
 sudo: required
 dist: trusty
 addons:
-  - chrome: stable
+  apt:
+    sources:
+      - google-chrome
+    packages:
+      - google-chrome-stable
 
 language: node_js
 
@@ -21,6 +25,8 @@ install:
   - travis_retry yarn install
 
 script:
+  # Use Chromium instead of Chrome.
+  - export CHROME_BIN=chromium-browser
   - yarn run build
   - yarn run ci
   - cat coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js

From 7b3f3fa2d98e78e345a5a83820a6e878b0c424e3 Mon Sep 17 00:00:00 2001
From: Tim Donohue <tdonohue@duraspace.org>
Date: Fri, 2 Mar 2018 11:07:31 -0600
Subject: [PATCH 22/23] Update README with PR testing process & yarn dependency
 mgmt notes

---
 README.md | 44 +++++++++++++++++++++++++++++++++-----------
 1 file changed, 33 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 22efa882f0..3041a57c01 100644
--- a/README.md
+++ b/README.md
@@ -137,17 +137,32 @@ yarn run clean:dist
 Testing
 -------
 
-### Unit Test
+### Test a Pull Request
 
-Unit tests use Karma. You can find the configuration file at the same level of this README file:`./karma.conf.js` If you are going to use a remote test enviroment you need to edit the './karma.conf.js'. Follow the instructions you will find inside it. To executing tests whenever any file changes you can modify the 'autoWatch' option to 'true' and 'singleRun' option to 'false'. A coverage report is also available at: http://localhost:9876/ after you run:`yarn run coverage`.
+If you would like to contribute by testing a Pull Request (PR), here's how to do so. Keep in mind, you **do not need to have a DSpace backend / REST API installed locally to test a PR**. By default, the dspace-angular project points at our demo REST API
 
-To correctly run the tests you need to run the build once with:`yarn run build`.
+1. Pull down the branch that the Pull Request was built from.  Easy instructions for doing so can be found on the Pull Request itself.
+	* Next to the "Merge" button, you'll see a link that says "command line instructions".
+	* Click it, and follow "Step 1" of those instructions to checkout the pull down the PR branch.
+2. `yarn run clean`  (This resets your local dependencies to ensure you are up-to-date with this PR)
+3. `yarn install` (Updates your local dependencies to those in the PR)
+4. `yarn start` (Rebuilds the project, and deploys to localhost:3000, by default)
+5. At this point, the code from the PR will be deployed to http://localhost:3000.  Test it out, and ensure that it does what is described in the PR (or fixes the bug described in the ticket linked to the PR).
+
+Once you have tested the Pull Request, please add a comment and/or approval to the PR to let us know whether you found it to be successful (or not). Thanks!
+
+
+### Unit Tests
+
+Unit tests use Karma. You can find the configuration file at the same level of this README file:`./karma.conf.js` If you are going to use a remote test enviroment you need to edit the `./karma.conf.js`. Follow the instructions you will find inside it. To executing tests whenever any file changes you can modify the 'autoWatch' option to 'true' and 'singleRun' option to 'false'. A coverage report is also available at: http://localhost:9876/ after you run: `yarn run coverage`.
+
+To correctly run the tests you need to run the build once with: `yarn run build`.
 
 The default browser is Google Chrome.
 
 Place your tests in the same location of the application source code files that they test.
 
-and run:`yarn run test`
+and run: `yarn run test`
 
 ### E2E test
 
@@ -161,15 +176,18 @@ Protractor needs a functional instance of the DSpace interface to run the E2E te
 
 or any command that bring up the DSpace interface.
 
-Place your tests at the following path:`./e2e`
+Place your tests at the following path: `./e2e`
 
-and run:`yarn run e2e`
+and run: `yarn run e2e`
 
 ### Continuous Integration (CI) Test
 
 To run all the tests (e.g.: to run tests with Continuous Integration software) you can execute:`yarn run ci` Keep in mind that this command prerequisites are the sum of unit test and E2E tests.
 
-##Documentation To build the code documentation we use [TYPEDOC](http://typedoc.org). TYPEDOC is a documentation generator for TypeScript projects. It extracts informations from properly formatted comments that can be written within the code files. Follow the instructions [here](http://typedoc.org/guides/doccomments/) to know how to make those comments.
+Documentation
+--------------
+
+To build the code documentation we use [TYPEDOC](http://typedoc.org). TYPEDOC is a documentation generator for TypeScript projects. It extracts informations from properly formatted comments that can be written within the code files. Follow the instructions [here](http://typedoc.org/guides/doccomments/) to know how to make those comments.
 
 Run:`yarn run docs` to produce the documentation that will be available in the 'doc' folder.
 
@@ -349,14 +367,18 @@ If you're importing a module that uses CommonJS you need to import as
 import * as _ from 'lodash';
 ```
 
-yarn lockfile
+Managing Dependencies (via yarn)
 -------------
 
-This project makes use of yarn to ensure that the exact same dependency versions are used every time you install it.
+This project makes use of [`yarn`](https://yarnpkg.com/en/) to ensure that the exact same dependency versions are used every time you install it.
 
-yarn creates the file [`yarn.lock`](https://yarnpkg.com/en/docs/yarn-lock) to track those versions. That file is updated automatically every time you install a new dependency from the commandline (by using `yarn add some-lib --save` or `yarn add some-lib --save-dev`).
+* `yarn` creates a [`yarn.lock`](https://yarnpkg.com/en/docs/yarn-lock) to track those versions. That file is updated automatically by whenever dependencies are added/updated/removed via yarn.
+* **Adding new dependencies**: To install/add a new dependency (third party library), use [`yarn add`](https://yarnpkg.com/en/docs/cli/add). For example: `yarn add some-lib --save`.
+    * If it's a development-only dependency (not for production), use `yarn add some-lib --save-dev`
+* **Upgrading existing dependencies**: To upgrade existing dependencies, you can use [`yarn upgrade`](https://yarnpkg.com/en/docs/cli/upgrade).  For example: `yarn upgrade some-lib` or `yarn upgrade some-lib@version`
+* **Removing dependencies**: If a dependency is no longer needed, or replaced, use [`yarn remove`](https://yarnpkg.com/en/docs/cli/remove) to remove it.
 
-If you manually add a package or change a version in `package.json` you'll have to update yarn's lock file as well. You can do so by running `yarn upgrade`
+As you can see above, using `yarn` commandline tools means that you should never need to modify the `package.json` manually. *We recommend always using `yarn` to keep dependencies updated / in sync.*
 
 Frequently asked questions
 --------------------------

From b03342e90fe2018f4ddd780c6bd7b6a1ec31c3c7 Mon Sep 17 00:00:00 2001
From: Tim Donohue <tdonohue@duraspace.org>
Date: Mon, 5 Mar 2018 16:10:08 -0600
Subject: [PATCH 23/23] Update `yarn add` notes per comments and official docs

---
 README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 3041a57c01..a241f72910 100644
--- a/README.md
+++ b/README.md
@@ -340,8 +340,8 @@ Install your library via `yarn add lib-name --save` and import it in your code.
 If the library does not include typings, you can install them using yarn:
 
 ```bash
-yarn add d3 --save
-yarn add @types/d3 --save-dev
+yarn add d3
+yarn add @types/d3 --dev
 ```
 
 If the library doesn't have typings available at `@types/`, you can still use it by manually adding typings for it:
@@ -373,8 +373,8 @@ Managing Dependencies (via yarn)
 This project makes use of [`yarn`](https://yarnpkg.com/en/) to ensure that the exact same dependency versions are used every time you install it.
 
 * `yarn` creates a [`yarn.lock`](https://yarnpkg.com/en/docs/yarn-lock) to track those versions. That file is updated automatically by whenever dependencies are added/updated/removed via yarn.
-* **Adding new dependencies**: To install/add a new dependency (third party library), use [`yarn add`](https://yarnpkg.com/en/docs/cli/add). For example: `yarn add some-lib --save`.
-    * If it's a development-only dependency (not for production), use `yarn add some-lib --save-dev`
+* **Adding new dependencies**: To install/add a new dependency (third party library), use [`yarn add`](https://yarnpkg.com/en/docs/cli/add). For example: `yarn add some-lib`.
+    * If you are adding a new build tool dependency (to `devDependencies`), use `yarn add some-lib --dev`
 * **Upgrading existing dependencies**: To upgrade existing dependencies, you can use [`yarn upgrade`](https://yarnpkg.com/en/docs/cli/upgrade).  For example: `yarn upgrade some-lib` or `yarn upgrade some-lib@version`
 * **Removing dependencies**: If a dependency is no longer needed, or replaced, use [`yarn remove`](https://yarnpkg.com/en/docs/cli/remove) to remove it.