From d2135ab019458dfe906f80515c51b5d3d2f80043 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Thu, 26 Oct 2017 09:38:27 +0200
Subject: [PATCH 01/47] #150 Initial grid/list view implementation

---
 package.json                                  |   1 +
 .../collection-page.component.html            |   4 +-
 ...ty-page-sub-collection-list.component.html |   8 +-
 .../top-level-community-list.component.html   |  26 ++--
 src/app/+search-page/search-page.component.ts |  15 +++
 src/app/+search-page/search-page.module.ts    |  15 ++-
 src/app/+search-page/search-result.model.ts   |   2 +-
 .../search-results.component.html             |   4 +-
 .../search-service/search.service.ts          |   2 +-
 src/app/core/shared/dspace-object.model.ts    |   2 +-
 .../object-collection.component.html          |  13 ++
 .../object-collection.component.scss          |   1 +
 .../object-collection.component.ts            | 113 ++++++++++++++++++
 .../shared/item-search-result.model.ts        |   5 +
 .../shared}/listable-object.model.ts          |   0
 .../collection-grid-element.component.html    |  12 ++
 .../collection-grid-element.component.scss    |   2 +
 .../collection-grid-element.component.ts      |  14 +++
 .../community-grid-element.component.html     |  12 ++
 .../community-grid-element.component.scss     |   2 +
 .../community-grid-element.component.ts       |  14 +++
 src/app/object-grid/grid-card-styling.scss    |  36 ++++++
 src/app/object-grid/grid-element-decorator.ts |  16 +++
 .../item-grid-element.component.html          |  20 ++++
 .../item-grid-element.component.scss          |   2 +
 .../item-grid-element.component.ts            |  14 +++
 .../object-grid-element.component.html        |   0
 .../object-grid-element.component.scss        |   6 +
 .../object-grid-element.component.ts          |  14 +++
 .../object-grid/object-grid.component.html    |  23 ++++
 .../object-grid/object-grid.component.scss    |   1 +
 src/app/object-grid/object-grid.component.ts  |  86 +++++++++++++
 ...-search-result-grid-element.component.html |   2 +
 ...-search-result-grid-element.component.scss |   2 +
 ...on-search-result-grid-element.component.ts |  15 +++
 .../collection-search-result.model.ts         |   5 +
 ...-search-result-grid-element.component.html |   2 +
 ...-search-result-grid-element.component.scss |   2 +
 ...ty-search-result-grid-element.component.ts |  17 +++
 .../community-search-result.model.ts          |   5 +
 ...-search-result-grid-element.component.html |  27 +++++
 ...-search-result-grid-element.component.scss |   2 +
 ...em-search-result-grid-element.component.ts |  15 +++
 .../search-result-grid-element.component.scss |   8 ++
 .../search-result-grid-element.component.ts   |  57 +++++++++
 .../wrapper-grid-element.component.html       |   1 +
 .../wrapper-grid-element.component.scss       |   2 +
 .../wrapper-grid-element.component.ts         |  27 +++++
 src/app/object-list/list-element-decorator.ts |   2 +-
 .../object-list-element.component.ts          |   2 +-
 src/app/object-list/object-list.component.ts  |   4 +-
 ...em-search-result-list-element.component.ts |   2 +-
 .../item-search-result.model.ts               |   5 -
 .../search-result-list-element.component.ts   |   2 +-
 .../wrapper-list-element.component.ts         |   2 +-
 src/app/shared/shared.module.ts               |  35 ++++--
 src/styles/_mixins.scss                       |   1 +
 yarn.lock                                     |   4 +
 58 files changed, 684 insertions(+), 49 deletions(-)
 create mode 100644 src/app/object-collection/object-collection.component.html
 create mode 100644 src/app/object-collection/object-collection.component.scss
 create mode 100644 src/app/object-collection/object-collection.component.ts
 create mode 100644 src/app/object-collection/shared/item-search-result.model.ts
 rename src/app/{object-list/listable-object => object-collection/shared}/listable-object.model.ts (100%)
 create mode 100644 src/app/object-grid/collection-grid-element/collection-grid-element.component.html
 create mode 100644 src/app/object-grid/collection-grid-element/collection-grid-element.component.scss
 create mode 100644 src/app/object-grid/collection-grid-element/collection-grid-element.component.ts
 create mode 100644 src/app/object-grid/community-grid-element/community-grid-element.component.html
 create mode 100644 src/app/object-grid/community-grid-element/community-grid-element.component.scss
 create mode 100644 src/app/object-grid/community-grid-element/community-grid-element.component.ts
 create mode 100644 src/app/object-grid/grid-card-styling.scss
 create mode 100644 src/app/object-grid/grid-element-decorator.ts
 create mode 100644 src/app/object-grid/item-grid-element/item-grid-element.component.html
 create mode 100644 src/app/object-grid/item-grid-element/item-grid-element.component.scss
 create mode 100644 src/app/object-grid/item-grid-element/item-grid-element.component.ts
 create mode 100644 src/app/object-grid/object-grid-element/object-grid-element.component.html
 create mode 100644 src/app/object-grid/object-grid-element/object-grid-element.component.scss
 create mode 100644 src/app/object-grid/object-grid-element/object-grid-element.component.ts
 create mode 100644 src/app/object-grid/object-grid.component.html
 create mode 100644 src/app/object-grid/object-grid.component.scss
 create mode 100644 src/app/object-grid/object-grid.component.ts
 create mode 100644 src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
 create mode 100644 src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
 create mode 100644 src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts
 create mode 100644 src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts
 create mode 100644 src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
 create mode 100644 src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
 create mode 100644 src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
 create mode 100644 src/app/object-grid/search-result-grid-element/community-search-result/community-search-result.model.ts
 create mode 100644 src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
 create mode 100644 src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
 create mode 100644 src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
 create mode 100644 src/app/object-grid/search-result-grid-element/search-result-grid-element.component.scss
 create mode 100644 src/app/object-grid/search-result-grid-element/search-result-grid-element.component.ts
 create mode 100644 src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.html
 create mode 100644 src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
 create mode 100644 src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
 delete mode 100644 src/app/object-list/search-result-list-element/item-search-result/item-search-result.model.ts

diff --git a/package.json b/package.json
index e32a9af765..1d6a6ef36e 100644
--- a/package.json
+++ b/package.json
@@ -103,6 +103,7 @@
     "methods": "1.1.2",
     "morgan": "1.9.0",
     "ngx-pagination": "3.0.1",
+    "object-fit-images": "^3.2.3",
     "pem": "1.12.3",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.4.3",
diff --git a/src/app/+collection-page/collection-page.component.html b/src/app/+collection-page/collection-page.component.html
index fe5b2a1f16..05b4d6f11e 100644
--- a/src/app/+collection-page/collection-page.component.html
+++ b/src/app/+collection-page/collection-page.component.html
@@ -41,13 +41,13 @@
     <ng-container *ngVar="(itemRDObs | async) as itemRD">
       <div *ngIf="itemRD?.hasSucceeded" @fadeIn>
         <h2>{{'collection.page.browse.recent.head' | translate}}</h2>
-        <ds-object-list
+        <ds-viewable-collection
           [config]="paginationConfig"
           [sortConfig]="sortConfig"
           [objects]="itemRD"
           [hideGear]="false"
           (paginationChange)="onPaginationChange($event)">
-        </ds-object-list>
+        </ds-viewable-collection>
       </div>
       <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.recent-submissions' | translate}}"></ds-error>
       <ds-loading *ngIf="!itemRD || itemRD.isLoading" message="{{'loading.recent-submissions' | translate}}"></ds-loading>
diff --git a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html
index b04e93ff71..f78b212bee 100644
--- a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html
+++ b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html
@@ -2,12 +2,8 @@
   <div *ngIf="subCollectionsRD?.hasSucceeded" @fadeIn>
     <h2>{{'community.sub-collection-list.head' | translate}}</h2>
     <ul>
-      <li *ngFor="let collection of subCollectionsRD?.payload">
-        <p>
-          <span class="lead"><a [routerLink]="['/collections', collection.id]">{{collection.name}}</a></span><br>
-          <span class="text-muted">{{collection.shortDescription}}</span>
-        </p>
-      </li>
+      <ds-viewable-collection [objects]="subCollectionsRD?.payload">
+      </ds-viewable-collection>
     </ul>
   </div>
   <ds-error *ngIf="subCollectionsRD?.hasFailed" message="{{'error.sub-collections' | translate}}"></ds-error>
diff --git a/src/app/+home-page/top-level-community-list/top-level-community-list.component.html b/src/app/+home-page/top-level-community-list/top-level-community-list.component.html
index a34951afe0..4eebb53e1e 100644
--- a/src/app/+home-page/top-level-community-list/top-level-community-list.component.html
+++ b/src/app/+home-page/top-level-community-list/top-level-community-list.component.html
@@ -1,15 +1,13 @@
 <ng-container *ngVar="(communitiesRDObs | async) as communitiesRD">
-  <div *ngIf="communitiesRD?.hasSucceeded" @fadeInOut>
-    <h2>{{'home.top-level-communities.head' | translate}}</h2>
-    <p class="lead">{{'home.top-level-communities.help' | translate}}</p>
-    <ds-object-list
-      [config]="config"
-      [sortConfig]="sortConfig"
-      [objects]="communitiesRD"
-      [hideGear]="true"
-      (paginationChange)="updatePage($event)">
-    </ds-object-list>
-  </div>
-  <ds-error *ngIf="communitiesRD?.hasFailed" message="{{'error.top-level-communites' | translate}}"></ds-error>
-  <ds-loading *ngIf="communitiesRD?.isLoading" message="{{'loading.top-level-communities' | translate}}"></ds-loading>
-</ng-container>
+  <div *ngIf="communitiesRD?.hasSucceeded " @fadeInOut>
+  <h2>{{'home.top-level-communities.head' | translate}}</h2>
+  <p class="lead">{{'home.top-level-communities.help' | translate}}</p>
+  <ds-viewable-collection
+    [config]="config"
+    [objects]="communitiesRD"
+
+    (paginationChange)="updatePage($event)">
+  </ds-viewable-collection>
+</div>
+<ds-error *ngIf="communitiesRD?.hasFailed " message="{{'error.top-level-communites' | translate}}"></ds-error>
+<ds-loading *ngIf="communitiesRD?.isLoading " message="{{'loading.top-level-communities' | translate}}"></ds-loading></ng-container>
diff --git a/src/app/+search-page/search-page.component.ts b/src/app/+search-page/search-page.component.ts
index 153402d11f..d50f5e9442 100644
--- a/src/app/+search-page/search-page.component.ts
+++ b/src/app/+search-page/search-page.component.ts
@@ -51,7 +51,22 @@ export class SearchPageComponent implements OnInit, OnDestroy {
     );
     this.scopeListRDObs = communityService.findAll();
     // Initial pagination config
+    const pagination: PaginationComponentOptions = new PaginationComponentOptions();
+    pagination.id = 'search-results-pagination';
+    pagination.currentPage = 1;
+    pagination.pageSize = 10;
+
+    // TODO Update to accommodate view switcher
+    this.route.queryParams.map((params) => {
+      if (isNotEmpty(params.view) && params.view == 'grid') {
+        pagination.pageSize = 12;
+      }
+    });
+
+
+    const sort: SortOptions = new SortOptions();
     this.searchOptions = this.service.searchOptions;
+
   }
 
   ngOnInit(): void {
diff --git a/src/app/+search-page/search-page.module.ts b/src/app/+search-page/search-page.module.ts
index 6519d1e92a..be99a0eae4 100644
--- a/src/app/+search-page/search-page.module.ts
+++ b/src/app/+search-page/search-page.module.ts
@@ -7,6 +7,9 @@ import { SearchResultsComponent } from './search-results/search-results.componen
 import { ItemSearchResultListElementComponent } from '../object-list/search-result-list-element/item-search-result/item-search-result-list-element.component';
 import { CollectionSearchResultListElementComponent } from '../object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component';
 import { CommunitySearchResultListElementComponent } from '../object-list/search-result-list-element/community-search-result/community-search-result-list-element.component';
+import { ItemSearchResultGridElementComponent } from '../object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component';
+import { CommunitySearchResultGridElementComponent } from '../object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component'
+import { CollectionSearchResultGridElementComponent } from '../object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component';
 import { SearchService } from './search-service/search.service';
 import { SearchSidebarComponent } from './search-sidebar/search-sidebar.component';
 import { SearchSidebarService } from './search-sidebar/search-sidebar.service';
@@ -37,6 +40,10 @@ const effects = [
     ItemSearchResultListElementComponent,
     CollectionSearchResultListElementComponent,
     CommunitySearchResultListElementComponent,
+    ItemSearchResultGridElementComponent,
+    CollectionSearchResultGridElementComponent,
+    CommunitySearchResultGridElementComponent,
+    CommunitySearchResultListElementComponent,
     SearchFiltersComponent,
     SearchFilterComponent,
     SearchFacetFilterComponent
@@ -49,7 +56,11 @@ const effects = [
   entryComponents: [
     ItemSearchResultListElementComponent,
     CollectionSearchResultListElementComponent,
-    CommunitySearchResultListElementComponent
+    CommunitySearchResultListElementComponent,
+    ItemSearchResultGridElementComponent,
+    CollectionSearchResultGridElementComponent,
+    CommunitySearchResultGridElementComponent,
   ]
 })
-export class SearchPageModule { }
+export class SearchPageModule {
+}
diff --git a/src/app/+search-page/search-result.model.ts b/src/app/+search-page/search-result.model.ts
index 2dd9130ee8..602d8ac9c2 100644
--- a/src/app/+search-page/search-result.model.ts
+++ b/src/app/+search-page/search-result.model.ts
@@ -1,6 +1,6 @@
 import { DSpaceObject } from '../core/shared/dspace-object.model';
 import { Metadatum } from '../core/shared/metadatum.model';
-import { ListableObject } from '../object-list/listable-object/listable-object.model';
+import { ListableObject } from '../object-collection/shared/listable-object.model';
 
 export class SearchResult<T extends DSpaceObject> implements ListableObject {
 
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..1b9bd7d52a 100644
--- a/src/app/+search-page/search-results/search-results.component.html
+++ b/src/app/+search-page/search-results/search-results.component.html
@@ -1,10 +1,10 @@
 <div *ngIf="searchResults?.hasSucceeded" @fadeIn>
   <h2 *ngIf="searchResults?.payload ?.length > 0">{{ 'search.results.head' | translate }}</h2>
-<ds-object-list
+<ds-viewable-collection
   [config]="searchConfig.pagination"
   [sortConfig]="searchConfig.sort"
   [objects]="searchResults"
   [hideGear]="true">
-</ds-object-list></div>
+</ds-viewable-collection></div>
 <ds-loading *ngIf="searchResults?.isLoading" message="{{'loading.search-results' | translate}}"></ds-loading>
 <ds-error *ngIf="searchResults?.hasFailed" message="{{'error.search-results' | translate}}"></ds-error>
diff --git a/src/app/+search-page/search-service/search.service.ts b/src/app/+search-page/search-service/search.service.ts
index 4b5ba7b702..5258756bfb 100644
--- a/src/app/+search-page/search-service/search.service.ts
+++ b/src/app/+search-page/search-service/search.service.ts
@@ -9,10 +9,10 @@ import { SearchOptions } from '../search-options.model';
 import { hasValue, isNotEmpty } from '../../shared/empty.util';
 import { Metadatum } from '../../core/shared/metadatum.model';
 import { Item } from '../../core/shared/item.model';
-import { ItemSearchResult } from '../../object-list/search-result-list-element/item-search-result/item-search-result.model';
 import { SearchFilterConfig } from './search-filter-config.model';
 import { FilterType } from './filter-type.model';
 import { FacetValue } from './facet-value.model';
+import { ItemSearchResult } from '../../object-collection/shared/item-search-result.model';
 import { ViewMode } from '../../+search-page/search-options.model';
 import { Router, NavigationExtras, ActivatedRoute } from '@angular/router';
 import { RouteService } from '../../shared/route.service';
diff --git a/src/app/core/shared/dspace-object.model.ts b/src/app/core/shared/dspace-object.model.ts
index 572efecada..a17a6b31ce 100644
--- a/src/app/core/shared/dspace-object.model.ts
+++ b/src/app/core/shared/dspace-object.model.ts
@@ -3,7 +3,7 @@ import { isEmpty, isNotEmpty } from '../../shared/empty.util';
 import { CacheableObject } from '../cache/object-cache.reducer';
 import { RemoteData } from '../data/remote-data';
 import { ResourceType } from './resource-type';
-import { ListableObject } from '../../object-list/listable-object/listable-object.model';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
 import { Observable } from 'rxjs/Observable';
 
 /**
diff --git a/src/app/object-collection/object-collection.component.html b/src/app/object-collection/object-collection.component.html
new file mode 100644
index 0000000000..e651c18290
--- /dev/null
+++ b/src/app/object-collection/object-collection.component.html
@@ -0,0 +1,13 @@
+<ds-object-list [config]="config"
+                [sortConfig]="sortConfig"
+                [objects]="objects"
+                *ngIf="getViewMode()=='list'">
+</ds-object-list>
+
+<ds-object-grid [config]="config"
+                [sortConfig]="sortConfig"
+                [objects]="objects"
+                *ngIf="getViewMode()=='grid'">
+</ds-object-grid>
+
+
diff --git a/src/app/object-collection/object-collection.component.scss b/src/app/object-collection/object-collection.component.scss
new file mode 100644
index 0000000000..da97dd7a62
--- /dev/null
+++ b/src/app/object-collection/object-collection.component.scss
@@ -0,0 +1 @@
+@import '../../styles/variables.scss';
diff --git a/src/app/object-collection/object-collection.component.ts b/src/app/object-collection/object-collection.component.ts
new file mode 100644
index 0000000000..25761073e4
--- /dev/null
+++ b/src/app/object-collection/object-collection.component.ts
@@ -0,0 +1,113 @@
+import { Component, EventEmitter,
+  Input,
+  OnInit,
+  Output, SimpleChanges, OnChanges, ChangeDetectorRef } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
+
+import { RemoteData } from '../core/data/remote-data';
+import { PageInfo } from '../core/shared/page-info.model';
+
+import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
+
+import {  SortDirection } from '../core/cache/models/sort-options.model';
+
+import { ListableObject } from './shared/listable-object.model';
+import { hasValue, isNotEmpty } from '../shared/empty.util';
+@Component({
+  selector: 'ds-viewable-collection',
+  styleUrls: ['./object-collection.component.scss'],
+  templateUrl: './object-collection.component.html',
+})
+export class ObjectCollectionComponent implements OnChanges, OnInit {
+
+  @Input() objects: RemoteData<ListableObject[]>;
+  @Input() config?: PaginationComponentOptions;
+  pageInfo: Observable<PageInfo>;
+
+  /**
+   * An event fired when the page is changed.
+   * Event's payload equals to the newly selected page.
+   */
+  @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
+
+  /**
+   * An event fired when the page wsize is changed.
+   * Event's payload equals to the newly selected page size.
+   */
+  @Output() pageSizeChange: EventEmitter<number> = new EventEmitter<number>();
+
+  /**
+   * An event fired when the sort direction is changed.
+   * Event's payload equals to the newly selected sort direction.
+   */
+  @Output() sortDirectionChange: EventEmitter<SortDirection> = new EventEmitter<SortDirection>();
+
+  @Output() paginationChange: EventEmitter<SortDirection> = new EventEmitter<any>();
+
+  /**
+   * An event fired when the sort field is changed.
+   * Event's payload equals to the newly selected sort field.
+   */
+  @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
+  data: any = {};
+  defaultViewMode: string ='list';
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.objects && !changes.objects.isFirstChange()) {
+      this.pageInfo = this.objects.pageInfo;
+    }
+  }
+
+  ngOnInit(): void {
+    this.pageInfo = this.objects.pageInfo;
+  }
+
+  /**
+   * @param route
+   *    Route is a singleton service provided by Angular.
+   * @param router
+   *    Router is a singleton service provided by Angular.
+   */
+  constructor(private cdRef: ChangeDetectorRef, private route: ActivatedRoute,
+              private router: Router) {
+  }
+
+  getViewMode(): string {
+    // TODO Update to accommodate view switcher
+
+    this.route.queryParams.map((params) => {
+      if (isNotEmpty(params.view) && hasValue(params.view)) {
+        return params.view;
+      } else {
+        return this.defaultViewMode;
+      }
+    });
+    return this.defaultViewMode;
+  }
+
+  setViewMode(viewMode: string) {
+    this.defaultViewMode = viewMode;
+  }
+  onPageChange(event) {
+    this.pageChange.emit(event);
+  }
+
+  onPageSizeChange(event) {
+    this.pageSizeChange.emit(event);
+  }
+
+  onSortDirectionChange(event) {
+    this.sortDirectionChange.emit(event);
+  }
+
+  onSortFieldChange(event) {
+    this.sortFieldChange.emit(event);
+  }
+
+  onPaginationChange(event) {
+    this.paginationChange.emit(event);
+  }
+
+}
diff --git a/src/app/object-collection/shared/item-search-result.model.ts b/src/app/object-collection/shared/item-search-result.model.ts
new file mode 100644
index 0000000000..75d56a2488
--- /dev/null
+++ b/src/app/object-collection/shared/item-search-result.model.ts
@@ -0,0 +1,5 @@
+import { SearchResult } from '../../+search-page/search-result.model';
+import { Item } from '../../core/shared/item.model';
+
+export class ItemSearchResult extends SearchResult<Item> {
+}
diff --git a/src/app/object-list/listable-object/listable-object.model.ts b/src/app/object-collection/shared/listable-object.model.ts
similarity index 100%
rename from src/app/object-list/listable-object/listable-object.model.ts
rename to src/app/object-collection/shared/listable-object.model.ts
diff --git a/src/app/object-grid/collection-grid-element/collection-grid-element.component.html b/src/app/object-grid/collection-grid-element/collection-grid-element.component.html
new file mode 100644
index 0000000000..5dc717cf54
--- /dev/null
+++ b/src/app/object-grid/collection-grid-element/collection-grid-element.component.html
@@ -0,0 +1,12 @@
+<div class="card">
+  <a [routerLink]="['/collections/' + object.id]"class="card-img-top">
+    <ds-comcol-page-logo [logo]="object.logo">
+    </ds-comcol-page-logo>
+  </a>
+  <div class="card-block">
+    <h4 class="card-title">{{object.name}}</h4>
+    <p *ngIf="object.shortDescription" class="card-text">{{object.shortDescription}}</p>
+    <a [routerLink]="['/collections/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+
+  </div>
+</div>
diff --git a/src/app/object-grid/collection-grid-element/collection-grid-element.component.scss b/src/app/object-grid/collection-grid-element/collection-grid-element.component.scss
new file mode 100644
index 0000000000..48e2b121d4
--- /dev/null
+++ b/src/app/object-grid/collection-grid-element/collection-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../styles/variables.scss';
+@import '../grid-card-styling.scss';
diff --git a/src/app/object-grid/collection-grid-element/collection-grid-element.component.ts b/src/app/object-grid/collection-grid-element/collection-grid-element.component.ts
new file mode 100644
index 0000000000..80be3d75b3
--- /dev/null
+++ b/src/app/object-grid/collection-grid-element/collection-grid-element.component.ts
@@ -0,0 +1,14 @@
+import { Component, Inject } from '@angular/core';
+
+import { Collection } from '../../core/shared/collection.model';
+import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+import { gridElementFor } from '../grid-element-decorator';
+
+@Component({
+  selector: 'ds-collection-grid-element',
+  styleUrls: ['./collection-grid-element.component.scss'],
+  templateUrl: './collection-grid-element.component.html'
+})
+
+@gridElementFor(Collection)
+export class CollectionGridElementComponent extends ObjectGridElementComponent<Collection> {}
diff --git a/src/app/object-grid/community-grid-element/community-grid-element.component.html b/src/app/object-grid/community-grid-element/community-grid-element.component.html
new file mode 100644
index 0000000000..e4ea3dcb13
--- /dev/null
+++ b/src/app/object-grid/community-grid-element/community-grid-element.component.html
@@ -0,0 +1,12 @@
+<div class="card">
+
+  <a [routerLink]="['/communities/' + object.id]"class="card-img-top">
+    <ds-comcol-page-logo [logo]="object.logo">
+    </ds-comcol-page-logo>
+  </a>
+  <div class="card-block">
+    <h4 class="card-title">{{object.name}}</h4>
+    <p *ngIf="object.shortDescription" class="card-text">{{object.shortDescription}}</p>
+    <a [routerLink]="['/communities/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+  </div>
+</div>
diff --git a/src/app/object-grid/community-grid-element/community-grid-element.component.scss b/src/app/object-grid/community-grid-element/community-grid-element.component.scss
new file mode 100644
index 0000000000..48e2b121d4
--- /dev/null
+++ b/src/app/object-grid/community-grid-element/community-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../styles/variables.scss';
+@import '../grid-card-styling.scss';
diff --git a/src/app/object-grid/community-grid-element/community-grid-element.component.ts b/src/app/object-grid/community-grid-element/community-grid-element.component.ts
new file mode 100644
index 0000000000..e29e037c5d
--- /dev/null
+++ b/src/app/object-grid/community-grid-element/community-grid-element.component.ts
@@ -0,0 +1,14 @@
+import { Component, Input, Inject } from '@angular/core';
+
+import { Community } from '../../core/shared/community.model';
+import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+import { gridElementFor} from '../grid-element-decorator';
+
+@Component({
+  selector: 'ds-community-grid-element',
+  styleUrls: ['./community-grid-element.component.scss'],
+  templateUrl: './community-grid-element.component.html'
+})
+
+@gridElementFor(Community)
+export class CommunityGridElementComponent extends ObjectGridElementComponent<Community> {}
diff --git a/src/app/object-grid/grid-card-styling.scss b/src/app/object-grid/grid-card-styling.scss
new file mode 100644
index 0000000000..52b78524b0
--- /dev/null
+++ b/src/app/object-grid/grid-card-styling.scss
@@ -0,0 +1,36 @@
+.card-title{
+  line-height: 1em;
+  height:3em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1em;
+  margin-bottom:10px;
+}
+.card-text.item-authors {
+  height: 1em;
+}
+.card-text.item-abstract {
+  height: 5em;
+
+}
+.viewButton{
+  display:block;
+}
+
+.card{
+  padding:10px;
+  margin-bottom: 15px;
+}
+
+.card-img-top ::ng-deep  img
+{
+  height: 120px;
+  width: 100%;
+  object-fit: cover;
+  margin-bottom: 10px;
+}
diff --git a/src/app/object-grid/grid-element-decorator.ts b/src/app/object-grid/grid-element-decorator.ts
new file mode 100644
index 0000000000..cd5ebbcaeb
--- /dev/null
+++ b/src/app/object-grid/grid-element-decorator.ts
@@ -0,0 +1,16 @@
+import { GenericConstructor } from '../core/shared/generic-constructor';
+import { ListableObject } from '../object-collection/shared/listable-object.model';
+
+const gridElementMap = new Map();
+export function gridElementFor(gridable: GenericConstructor<ListableObject>) {
+  return function decorator(objectElement: any) {
+    if (!objectElement) {
+      return;
+    }
+    gridElementMap.set(gridable, objectElement);
+  };
+}
+
+export function getGridElementFor(gridable: GenericConstructor<ListableObject>) {
+  return gridElementMap.get(gridable);
+}
diff --git a/src/app/object-grid/item-grid-element/item-grid-element.component.html b/src/app/object-grid/item-grid-element/item-grid-element.component.html
new file mode 100644
index 0000000000..ea7b894896
--- /dev/null
+++ b/src/app/object-grid/item-grid-element/item-grid-element.component.html
@@ -0,0 +1,20 @@
+<div class="card">
+
+  <a [routerLink]="['/items/' + object.id]" class="card-img-top">
+    <ds-thumbnail [thumbnail]="object.getThumbnail()">
+    </ds-thumbnail>
+  </a>
+  <div class="card-block">
+    <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">
+        <span *ngFor="let authorMd of object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let last=last;">{{authorMd.value}}
+            <span *ngIf="!last">; </span>
+        </span>
+    </p>
+    (<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>)
+
+    <p *ngIf="object.findMetadata('dc.description.abstract')" class="item-abstract card-text">{{object.findMetadata("dc.description.abstract") | dsTruncate:[200] }}</p>
+
+    <a [routerLink]="['/items/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+  </div>
+</div>
diff --git a/src/app/object-grid/item-grid-element/item-grid-element.component.scss b/src/app/object-grid/item-grid-element/item-grid-element.component.scss
new file mode 100644
index 0000000000..48e2b121d4
--- /dev/null
+++ b/src/app/object-grid/item-grid-element/item-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../styles/variables.scss';
+@import '../grid-card-styling.scss';
diff --git a/src/app/object-grid/item-grid-element/item-grid-element.component.ts b/src/app/object-grid/item-grid-element/item-grid-element.component.ts
new file mode 100644
index 0000000000..c651ccfc9c
--- /dev/null
+++ b/src/app/object-grid/item-grid-element/item-grid-element.component.ts
@@ -0,0 +1,14 @@
+import { Component, Input, Inject } from '@angular/core';
+
+import { Item } from '../../core/shared/item.model';
+import { gridElementFor } from '../grid-element-decorator';
+import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+
+@Component({
+  selector: 'ds-item-grid-element',
+  styleUrls: ['./item-grid-element.component.scss'],
+  templateUrl: './item-grid-element.component.html'
+})
+
+@gridElementFor(Item)
+export class ItemGridElementComponent extends ObjectGridElementComponent<Item> {}
diff --git a/src/app/object-grid/object-grid-element/object-grid-element.component.html b/src/app/object-grid/object-grid-element/object-grid-element.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/object-grid/object-grid-element/object-grid-element.component.scss b/src/app/object-grid/object-grid-element/object-grid-element.component.scss
new file mode 100644
index 0000000000..0351acf15f
--- /dev/null
+++ b/src/app/object-grid/object-grid-element/object-grid-element.component.scss
@@ -0,0 +1,6 @@
+@import '../../../styles/variables.scss';
+@import '../grid-card-styling.scss';
+:host {
+  display: block;
+  margin-bottom: $spacer;
+}
diff --git a/src/app/object-grid/object-grid-element/object-grid-element.component.ts b/src/app/object-grid/object-grid-element/object-grid-element.component.ts
new file mode 100644
index 0000000000..c3ab5e39e3
--- /dev/null
+++ b/src/app/object-grid/object-grid-element/object-grid-element.component.ts
@@ -0,0 +1,14 @@
+import { Component, Inject } from '@angular/core';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
+
+@Component({
+  selector: 'ds-object-grid-element',
+  styleUrls: ['./object-grid-element.component.scss'],
+  templateUrl: './object-grid-element.component.html'
+})
+export class ObjectGridElementComponent <T extends ListableObject> {
+  object: T;
+  public constructor(@Inject('objectElementProvider') public gridable: ListableObject) {
+    this.object = gridable as T;
+  }
+}
diff --git a/src/app/object-grid/object-grid.component.html b/src/app/object-grid/object-grid.component.html
new file mode 100644
index 0000000000..2ad9c11a8f
--- /dev/null
+++ b/src/app/object-grid/object-grid.component.html
@@ -0,0 +1,23 @@
+<ds-pagination
+  [paginationOptions]="config"
+  [pageInfoState]="pageInfo"
+  [collectionSize]="(pageInfo | async)?.totalElements"
+  [sortOptions]="sortConfig"
+  [hideGear]="hideGear"
+  [hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
+  (pageChange)="onPageChange($event)"
+  (pageSizeChange)="onPageSizeChange($event)"
+  (sortDirectionChange)="onSortDirectionChange($event)"
+  (sortFieldChange)="onSortDirectionChange($event)"
+  (paginationChange)="onPaginationChange($event)">
+  <ul *ngIf="objects.hasSucceeded | async" @fadeIn>
+    <div class="row">
+        <div class="col-lg-3 col-xs-12 col-sm-6"
+          *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
+          <ds-wrapper-grid-element [object]="object"></ds-wrapper-grid-element>
+      </div>
+    </div>
+  </ul>
+  <ds-error *ngIf="objects.hasFailed | async" message="{{'error.objects' | translate}}"></ds-error>
+  <ds-loading *ngIf="objects.isLoading | async" message="{{'loading.objects' | translate}}"></ds-loading>
+</ds-pagination>
diff --git a/src/app/object-grid/object-grid.component.scss b/src/app/object-grid/object-grid.component.scss
new file mode 100644
index 0000000000..da97dd7a62
--- /dev/null
+++ b/src/app/object-grid/object-grid.component.scss
@@ -0,0 +1 @@
+@import '../../styles/variables.scss';
diff --git a/src/app/object-grid/object-grid.component.ts b/src/app/object-grid/object-grid.component.ts
new file mode 100644
index 0000000000..b316fe37c2
--- /dev/null
+++ b/src/app/object-grid/object-grid.component.ts
@@ -0,0 +1,86 @@
+import {
+  Component, EventEmitter,
+  Input,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  OnInit,
+  Output, SimpleChanges, OnChanges, ChangeDetectorRef, DoCheck
+} from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import { RemoteData } from '../core/data/remote-data';
+import { PageInfo } from '../core/shared/page-info.model';
+
+import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
+
+import { SortOptions, SortDirection } from '../core/cache/models/sort-options.model';
+import { fadeIn } from '../shared/animations/fade';
+import { ListableObject } from '../object-collection/shared/listable-object.model';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.Default,
+  encapsulation: ViewEncapsulation.Emulated,
+  selector: 'ds-object-grid',
+  styleUrls: [ './object-grid.component.scss' ],
+  templateUrl: './object-grid.component.html',
+  animations: [fadeIn]
+})
+
+export class ObjectGridComponent implements OnChanges, OnInit  {
+
+  @Input() objects: RemoteData<ListableObject[]>;
+  @Input() config: PaginationComponentOptions;
+  @Input() sortConfig: SortOptions;
+  @Input() hideGear = false;
+  @Input() hidePagerWhenSinglePage = true;
+  pageInfo: Observable<PageInfo>;
+
+  /**
+   * An event fired when the page is changed.
+   * Event's payload equals to the newly selected page.
+   */
+  @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
+
+  /**
+   * An event fired when the page wsize is changed.
+   * Event's payload equals to the newly selected page size.
+   */
+  @Output() pageSizeChange: EventEmitter<number> = new EventEmitter<number>();
+
+  /**
+   * An event fired when the sort direction is changed.
+   * Event's payload equals to the newly selected sort direction.
+   */
+  @Output() sortDirectionChange: EventEmitter<SortDirection> = new EventEmitter<SortDirection>();
+
+  @Output() paginationChange: EventEmitter<SortDirection> = new EventEmitter<any>();
+
+  /**
+   * An event fired when the sort field is changed.
+   * Event's payload equals to the newly selected sort field.
+   */
+  @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
+  data: any = {};
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.objects && !changes.objects.isFirstChange()) {
+      this.pageInfo = this.objects.pageInfo;
+    }
+  }
+
+  ngOnInit(): void {
+    this.pageInfo = this.objects.pageInfo;
+    this.config.pageSize = 4;
+  }
+
+  /**
+   * @param route
+   *    Route is a singleton service provided by Angular.
+   * @param router
+   *    Router is a singleton service provided by Angular.
+   */
+  constructor(private cdRef: ChangeDetectorRef) {
+  }
+
+
+}
diff --git a/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
new file mode 100644
index 0000000000..914fb49487
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
@@ -0,0 +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>
diff --git a/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
new file mode 100644
index 0000000000..790f794381
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../styles/variables.scss';
+@import '../../grid-card-styling.scss';
diff --git a/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts
new file mode 100644
index 0000000000..aa1d495dba
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+import { gridElementFor } from '../../grid-element-decorator';
+import { CollectionSearchResult } from './collection-search-result.model';
+import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
+import { Collection } from '../../../core/shared/collection.model';
+
+@Component({
+  selector: 'ds-collection-search-result-grid-element',
+  styleUrls: ['../search-result-grid-element.component.scss', 'collection-search-result-grid-element.component.scss'],
+  templateUrl: 'collection-search-result-grid-element.component.html'
+})
+
+@gridElementFor(CollectionSearchResult)
+export class CollectionSearchResultGridElementComponent extends SearchResultGridElementComponent<CollectionSearchResult, Collection> {}
diff --git a/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts
new file mode 100644
index 0000000000..fa7945dedd
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts
@@ -0,0 +1,5 @@
+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/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html b/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
new file mode 100644
index 0000000000..d09ef7d668
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
@@ -0,0 +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>
diff --git a/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss b/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
new file mode 100644
index 0000000000..790f794381
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../styles/variables.scss';
+@import '../../grid-card-styling.scss';
diff --git a/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts b/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
new file mode 100644
index 0000000000..1ce9e1d09a
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+import { CommunitySearchResult } from './community-search-result.model';
+import { Community } from '../../../core/shared/community.model';
+import { gridElementFor } from '../../grid-element-decorator';
+import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
+
+@Component({
+  selector: 'ds-community-search-result-grid-element',
+  styleUrls: ['../search-result-grid-element.component.scss', 'community-search-result-grid-element.component.scss'],
+  templateUrl: 'community-search-result-grid-element.component.html'
+})
+
+@gridElementFor(CommunitySearchResult)
+export class CommunitySearchResultGridElementComponent extends SearchResultGridElementComponent<CommunitySearchResult, Community> {
+
+}
diff --git a/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result.model.ts b/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result.model.ts
new file mode 100644
index 0000000000..79ea34b6cd
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/community-search-result/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/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
new file mode 100644
index 0000000000..c6e1bc6b14
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
@@ -0,0 +1,27 @@
+<div class="card">
+  <a [routerLink]="['/items/' + dso.id]" class="card-img-top">
+    <ds-thumbnail [thumbnail]="dso.getThumbnail()">
+    </ds-thumbnail>
+  </a>
+  <div class="card-block">
+    <h4 class="card-title">{{dso.findMetadata('dc.title')}}</h4>
+
+    <p *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);"
+       class="item-authors card-text">
+        <span
+          *ngFor="let authorMd of dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let last=last;">{{authorMd.value}}
+            <span *ngIf="!last">; </span>
+        </span>
+    </p>
+    (<span *ngIf="dso.findMetadata('dc.publisher')"
+           class="item-list-publisher">{{dso.findMetadata("dc.publisher")}}, </span><span
+    *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date">{{dso.findMetadata("dc.date.issued")}}</span>)
+
+    <p *ngIf="dso.findMetadata('dc.description.abstract')" class="item-abstract card-text">
+      {{dso.findMetadata("dc.description.abstract") | dsTruncate:[200] }}</p>
+
+  </div>
+  <a [routerLink]="['/items/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+
+</div>
+
diff --git a/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
new file mode 100644
index 0000000000..790f794381
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../styles/variables.scss';
+@import '../../grid-card-styling.scss';
diff --git a/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
new file mode 100644
index 0000000000..7a82803c9b
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+import { gridElementFor } from '../../grid-element-decorator';
+import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
+import { Item } from '../../../core/shared/item.model';
+import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
+
+@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'
+})
+
+@gridElementFor(ItemSearchResult)
+export class ItemSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> {}
diff --git a/src/app/object-grid/search-result-grid-element/search-result-grid-element.component.scss b/src/app/object-grid/search-result-grid-element/search-result-grid-element.component.scss
new file mode 100644
index 0000000000..0f2684f1f1
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/search-result-grid-element.component.scss
@@ -0,0 +1,8 @@
+ @import '../../../styles/variables.scss';
+ @import '../grid-card-styling.scss';
+:host {
+    /deep/ em {
+        font-weight: bold;
+        font-style: normal;
+    }
+}
diff --git a/src/app/object-grid/search-result-grid-element/search-result-grid-element.component.ts b/src/app/object-grid/search-result-grid-element/search-result-grid-element.component.ts
new file mode 100644
index 0000000000..ba98a58d4b
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/search-result-grid-element.component.ts
@@ -0,0 +1,57 @@
+import { Component, Inject } from '@angular/core';
+
+import { SearchResult } from '../../+search-page/search-result.model';
+import { DSpaceObject } from '../../core/shared/dspace-object.model';
+import { Metadatum } from '../../core/shared/metadatum.model';
+import { isEmpty, hasNoValue } from '../../shared/empty.util';
+import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
+
+@Component({
+  selector: 'ds-search-result-grid-element',
+  template: ``
+})
+
+export class SearchResultGridElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends ObjectGridElementComponent<T> {
+  dso: K;
+
+  public constructor(@Inject('objectElementProvider') public gridable: ListableObject) {
+    super(gridable);
+    this.dso = this.object.dspaceObject;
+  }
+
+  getValues(keys: string[]): string[] {
+    const results: string[] = new Array<string>();
+    this.object.hitHighlights.forEach(
+      (md: Metadatum) => {
+        if (keys.indexOf(md.key) > -1) {
+          results.push(md.value);
+        }
+      }
+    );
+    if (isEmpty(results)) {
+      this.dso.filterMetadata(keys).forEach(
+        (md: Metadatum) => {
+          results.push(md.value);
+        }
+      );
+    }
+    return results;
+  }
+
+  getFirstValue(key: string): string {
+    let result: string;
+    this.object.hitHighlights.some(
+      (md: Metadatum) => {
+        if (key === md.key) {
+          result =  md.value;
+          return true;
+        }
+      }
+    );
+    if (hasNoValue(result)) {
+      result = this.dso.findMetadata(key);
+    }
+    return result;
+  }
+}
diff --git a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.html b/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.html
new file mode 100644
index 0000000000..b613b16055
--- /dev/null
+++ b/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.html
@@ -0,0 +1 @@
+<ng-container *ngComponentOutlet="getGridElement(); injector: objectInjector;"></ng-container>
diff --git a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss b/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
new file mode 100644
index 0000000000..48e2b121d4
--- /dev/null
+++ b/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../styles/variables.scss';
+@import '../grid-card-styling.scss';
diff --git a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts b/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
new file mode 100644
index 0000000000..bd15a0d443
--- /dev/null
+++ b/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
@@ -0,0 +1,27 @@
+import { Component, Input, Injector, ReflectiveInjector, OnInit } from '@angular/core';
+import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { getGridElementFor } from '../grid-element-decorator';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
+
+@Component({
+  selector: 'ds-wrapper-grid-element',
+  styleUrls: ['./wrapper-grid-element.component.scss'],
+  templateUrl: './wrapper-grid-element.component.html'
+})
+export class WrapperGridElementComponent implements OnInit {
+  @Input() object: ListableObject;
+  objectInjector: Injector;
+
+  constructor(private injector: Injector) {}
+
+  ngOnInit(): void {
+    this.objectInjector = ReflectiveInjector.resolveAndCreate(
+      [{provide: 'objectElementProvider', useFactory: () => (this.object) }], this.injector);
+
+  }
+
+  getGridElement(): string {
+    const f: GenericConstructor<ListableObject> = this.object.constructor as GenericConstructor<ListableObject>;
+    return getGridElementFor(f);
+  }
+}
diff --git a/src/app/object-list/list-element-decorator.ts b/src/app/object-list/list-element-decorator.ts
index 64a747d4a5..aa044755ea 100644
--- a/src/app/object-list/list-element-decorator.ts
+++ b/src/app/object-list/list-element-decorator.ts
@@ -1,5 +1,5 @@
-import { ListableObject } from './listable-object/listable-object.model';
 import { GenericConstructor } from '../core/shared/generic-constructor';
+import { ListableObject } from '../object-collection/shared/listable-object.model';
 
 const listElementMap = new Map();
 export function listElementFor(listable: GenericConstructor<ListableObject>) {
diff --git a/src/app/object-list/object-list-element/object-list-element.component.ts b/src/app/object-list/object-list-element/object-list-element.component.ts
index df39a7d18d..24f0ec1d93 100644
--- a/src/app/object-list/object-list-element/object-list-element.component.ts
+++ b/src/app/object-list/object-list-element/object-list-element.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { ListableObject } from '../listable-object/listable-object.model';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
 
 @Component({
   selector: 'ds-object-list-element',
diff --git a/src/app/object-list/object-list.component.ts b/src/app/object-list/object-list.component.ts
index 0f7decadd7..352d7bc393 100644
--- a/src/app/object-list/object-list.component.ts
+++ b/src/app/object-list/object-list.component.ts
@@ -11,9 +11,8 @@ import { SortDirection, SortOptions } from '../core/cache/models/sort-options.mo
 
 import { RemoteData } from '../core/data/remote-data';
 import { PageInfo } from '../core/shared/page-info.model';
-import { ListableObject } from '../object-list/listable-object/listable-object.model';
-
 import { fadeIn } from '../shared/animations/fade';
+import { ListableObject } from '../object-collection/shared/listable-object.model';
 import { hasValue } from '../shared/empty.util';
 
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
@@ -83,6 +82,7 @@ export class ObjectListComponent {
   @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
   data: any = {};
 
+
   onPageChange(event) {
     this.pageChange.emit(event);
   }
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..2974a87883 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,9 @@
 import { Component } 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 { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
 
 @Component({
   selector: 'ds-item-search-result-list-element',
diff --git a/src/app/object-list/search-result-list-element/item-search-result/item-search-result.model.ts b/src/app/object-list/search-result-list-element/item-search-result/item-search-result.model.ts
deleted file mode 100644
index d9af3539a0..0000000000
--- a/src/app/object-list/search-result-list-element/item-search-result/item-search-result.model.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { SearchResult } from '../../../+search-page/search-result.model';
-import { Item } from '../../../core/shared/item.model';
-
-export class ItemSearchResult extends SearchResult<Item> {
-}
diff --git a/src/app/object-list/search-result-list-element/search-result-list-element.component.ts b/src/app/object-list/search-result-list-element/search-result-list-element.component.ts
index 4119bc3c2e..ec0afde65d 100644
--- a/src/app/object-list/search-result-list-element/search-result-list-element.component.ts
+++ b/src/app/object-list/search-result-list-element/search-result-list-element.component.ts
@@ -1,11 +1,11 @@
 import { Component, Inject } from '@angular/core';
 
 import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
-import { ListableObject } from '../listable-object/listable-object.model';
 import { SearchResult } from '../../+search-page/search-result.model';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { Metadatum } from '../../core/shared/metadatum.model';
 import { isEmpty, hasNoValue } from '../../shared/empty.util';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
 
 @Component({
   selector: 'ds-search-result-list-element',
diff --git a/src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts b/src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts
index 443b9681d1..2e1184b023 100644
--- a/src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts
+++ b/src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, Injector, ReflectiveInjector, OnInit } from '@angular/core';
-import { ListableObject } from '../listable-object/listable-object.model';
 import { getListElementFor } from '../list-element-decorator'
 import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
 
 @Component({
   selector: 'ds-wrapper-list-element',
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 245d45ea4e..1ebf251e2c 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -15,20 +15,30 @@ 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 { CommunityListElementComponent } from '../object-list/community-list-element/community-list-element.component';
+import { ItemListElementComponent } from '../object-list/item-list-element/item-list-element.component';
+import { ObjectListElementComponent } from '../object-list/object-list-element/object-list-element.component';
+import { SearchResultListElementComponent } from '../object-list/search-result-list-element/search-result-list-element.component';
+import { WrapperListElementComponent } from '../object-list/wrapper-list-element/wrapper-list-element.component';
+import { ObjectListComponent } from '../object-list/object-list.component';
+
+import { CollectionGridElementComponent} from '../object-grid/collection-grid-element/collection-grid-element.component'
+import { CommunityGridElementComponent} from '../object-grid/community-grid-element/community-grid-element.component'
+import { ItemGridElementComponent} from '../object-grid/item-grid-element/item-grid-element.component'
+import { ObjectGridElementComponent} from '../object-grid/object-grid-element/object-grid-element.component'
+import { WrapperGridElementComponent} from '../object-grid/wrapper-grid-element/wrapper-grid-element.component'
+import { ObjectGridComponent } from '../object-grid/object-grid.component';
+import { ObjectCollectionComponent } from '../object-collection/object-collection.component';
 import { ComcolPageContentComponent } from './comcol-page-content/comcol-page-content.component';
 import { ComcolPageHeaderComponent } from './comcol-page-header/comcol-page-header.component';
 import { ComcolPageLogoComponent } from './comcol-page-logo/comcol-page-logo.component';
-import { CommunityListElementComponent } from '../object-list/community-list-element/community-list-element.component';
 import { ErrorComponent } from './error/error.component';
 import { LoadingComponent } from './loading/loading.component';
-import { ItemListElementComponent } from '../object-list/item-list-element/item-list-element.component';
-import { ObjectListComponent } from '../object-list/object-list.component';
-import { ObjectListElementComponent } from '../object-list/object-list-element/object-list-element.component';
+
 import { PaginationComponent } from './pagination/pagination.component';
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component';
-import { SearchResultListElementComponent } from '../object-list/search-result-list-element/search-result-list-element.component';
 import { SearchFormComponent } from './search-form/search-form.component';
-import { WrapperListElementComponent } from '../object-list/wrapper-list-element/wrapper-list-element.component';
+import { SearchResultGridElementComponent } from '../object-grid/search-result-grid-element/search-result-grid-element.component';
 import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component';
 import { VarDirective } from './utils/var.directive';
 
@@ -60,6 +70,11 @@ const COMPONENTS = [
   LoadingComponent,
   ObjectListComponent,
   ObjectListElementComponent,
+  WrapperListElementComponent,
+  ObjectGridComponent,
+  ObjectGridElementComponent,
+  WrapperGridElementComponent,
+  ObjectCollectionComponent,
   PaginationComponent,
   SearchFormComponent,
   ThumbnailComponent,
@@ -69,10 +84,14 @@ const COMPONENTS = [
 
 const ENTRY_COMPONENTS = [
   // put shared entry components (components that are created dynamically) here
+  ItemListElementComponent,
   CollectionListElementComponent,
   CommunityListElementComponent,
-  ItemListElementComponent,
-  SearchResultListElementComponent
+  SearchResultListElementComponent,
+  ItemGridElementComponent,
+  CollectionGridElementComponent,
+  CommunityGridElementComponent,
+  SearchResultGridElementComponent
 ];
 
 const DIRECTIVES = [
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 73aa27eccc..7d05343152 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -2,3 +2,4 @@
 @import '../../node_modules/bootstrap/scss/mixins.scss';
 
 /* Custom mixins go here */
+
diff --git a/yarn.lock b/yarn.lock
index 91b2a787e2..4211b7228a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4804,6 +4804,10 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
+object-fit-images@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/object-fit-images/-/object-fit-images-3.2.3.tgz#4089f6d0070a3b5563d3c1ab6f1b28d61331f0ac"
+
 object-keys@^1.0.8:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"

From a65dd805511596aaa71b59a8533170784e37118a Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Tue, 31 Oct 2017 13:28:48 +0100
Subject: [PATCH 02/47] #150 SortOptions config fixing

---
 ...ty-page-sub-collection-list.component.html | 15 ++++++-------
 .../top-level-community-list.component.html   |  2 +-
 .../+search-page/search-page.component.html   |  2 +-
 src/app/+search-page/search-page.component.ts |  7 +++---
 .../search-results.component.ts               |  2 ++
 .../object-collection.component.html          |  4 ++--
 .../object-collection.component.ts            | 22 +++++++++----------
 src/app/object-grid/object-grid.component.ts  | 19 ++++++++++++++++
 ...-search-result-grid-element.component.html |  2 +-
 src/app/object-list/object-list.component.ts  | 19 ++++++++++++++++
 10 files changed, 66 insertions(+), 28 deletions(-)

diff --git a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html
index f78b212bee..9494cdb755 100644
--- a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html
+++ b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html
@@ -1,11 +1,10 @@
 <ng-container *ngVar="(subCollectionsRDObs | async) as subCollectionsRD">
-  <div *ngIf="subCollectionsRD?.hasSucceeded" @fadeIn>
-    <h2>{{'community.sub-collection-list.head' | translate}}</h2>
-    <ul>
-      <ds-viewable-collection [objects]="subCollectionsRD?.payload">
-      </ds-viewable-collection>
-    </ul>
-  </div>
-  <ds-error *ngIf="subCollectionsRD?.hasFailed" message="{{'error.sub-collections' | translate}}"></ds-error>
+  <div *ngIf="subCollectionsRD?.hasSucceeded " @fadeIn>
+  <h2>{{'community.sub-collection-list.head' | translate}}</h2>
+  <ul>
+    <ds-viewable-collection [objects]="subCollectionsRD?.payload"
+    [sortConfig]="sortConfig"></ds-viewable-collection>
+  </ul>
+</div><ds-error *ngIf="subCollectionsRD?.hasFailed" message="{{'error.sub-collections' | translate}}"></ds-error>
   <ds-loading *ngIf="subCollectionsRD?.isLoading" message="{{'loading.sub-collections' | translate}}"></ds-loading>
 </ng-container>
diff --git a/src/app/+home-page/top-level-community-list/top-level-community-list.component.html b/src/app/+home-page/top-level-community-list/top-level-community-list.component.html
index 4eebb53e1e..934bb3933c 100644
--- a/src/app/+home-page/top-level-community-list/top-level-community-list.component.html
+++ b/src/app/+home-page/top-level-community-list/top-level-community-list.component.html
@@ -4,8 +4,8 @@
   <p class="lead">{{'home.top-level-communities.help' | translate}}</p>
   <ds-viewable-collection
     [config]="config"
+    [sortConfig]="sortConfig"
     [objects]="communitiesRD"
-
     (paginationChange)="updatePage($event)">
   </ds-viewable-collection>
 </div>
diff --git a/src/app/+search-page/search-page.component.html b/src/app/+search-page/search-page.component.html
index c4d679f72b..68a7bf6a9e 100644
--- a/src/app/+search-page/search-page.component.html
+++ b/src/app/+search-page/search-page.component.html
@@ -30,7 +30,7 @@
               </button>
             </div>
             <ds-search-results [searchResults]="resultsRDObs | async"
-                               [searchConfig]="searchOptions"></ds-search-results>
+                               [searchConfig]="searchOptions" [sortConfig]="sortConfig"></ds-search-results>
           </div>
         </div>
       </div>
diff --git a/src/app/+search-page/search-page.component.ts b/src/app/+search-page/search-page.component.ts
index d50f5e9442..d5f220d2b1 100644
--- a/src/app/+search-page/search-page.component.ts
+++ b/src/app/+search-page/search-page.component.ts
@@ -6,7 +6,7 @@ import { RemoteData } from '../core/data/remote-data';
 import { Community } from '../core/shared/community.model';
 import { DSpaceObject } from '../core/shared/dspace-object.model';
 import { isNotEmpty } from '../shared/empty.util';
-import { SearchOptions } from './search-options.model';
+import { SearchOptions,ViewMode } from './search-options.model';
 import { SearchResult } from './search-result.model';
 import { SearchService } from './search-service/search.service';
 import { pushInOut } from '../shared/animations/push';
@@ -36,6 +36,7 @@ export class SearchPageComponent implements OnInit, OnDestroy {
   resultsRDObs: Observable<RemoteData<Array<SearchResult<DSpaceObject>>>>;
   currentParams = {};
   searchOptions: SearchOptions;
+  sortConfig: SortOptions;
   scopeListRDObs: Observable<RemoteData<Community[]>>;
   isMobileView: Observable<boolean>;
 
@@ -58,15 +59,15 @@ export class SearchPageComponent implements OnInit, OnDestroy {
 
     // TODO Update to accommodate view switcher
     this.route.queryParams.map((params) => {
-      if (isNotEmpty(params.view) && params.view == 'grid') {
+      if (isNotEmpty(params.view) && params.view == ViewMode.Grid) {
         pagination.pageSize = 12;
       }
     });
 
 
     const sort: SortOptions = new SortOptions();
+    this.sortConfig=sort;
     this.searchOptions = this.service.searchOptions;
-
   }
 
   ngOnInit(): void {
diff --git a/src/app/+search-page/search-results/search-results.component.ts b/src/app/+search-page/search-results/search-results.component.ts
index 4733699f95..f8b3721630 100644
--- a/src/app/+search-page/search-results/search-results.component.ts
+++ b/src/app/+search-page/search-results/search-results.component.ts
@@ -3,6 +3,7 @@ import { RemoteData } from '../../core/data/remote-data';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { fadeIn, fadeInOut } from '../../shared/animations/fade';
 import { SearchOptions } from '../search-options.model';
+import { SortOptions } from '../../core/cache/models/sort-options.model';
 import { SearchResult } from '../search-result.model';
 
 /**
@@ -21,4 +22,5 @@ import { SearchResult } from '../search-result.model';
 export class SearchResultsComponent {
   @Input() searchResults: RemoteData<Array<SearchResult<DSpaceObject>>>;
   @Input() searchConfig: SearchOptions;
+  @Input() sortConfig: SortOptions;
 }
diff --git a/src/app/object-collection/object-collection.component.html b/src/app/object-collection/object-collection.component.html
index e651c18290..6c2a2fb1de 100644
--- a/src/app/object-collection/object-collection.component.html
+++ b/src/app/object-collection/object-collection.component.html
@@ -1,13 +1,13 @@
 <ds-object-list [config]="config"
                 [sortConfig]="sortConfig"
                 [objects]="objects"
-                *ngIf="getViewMode()=='list'">
+                *ngIf="getViewMode()===viewModeEnum.List">
 </ds-object-list>
 
 <ds-object-grid [config]="config"
                 [sortConfig]="sortConfig"
                 [objects]="objects"
-                *ngIf="getViewMode()=='grid'">
+                *ngIf="getViewMode()===viewModeEnum.Grid">
 </ds-object-grid>
 
 
diff --git a/src/app/object-collection/object-collection.component.ts b/src/app/object-collection/object-collection.component.ts
index 25761073e4..5a6d06509b 100644
--- a/src/app/object-collection/object-collection.component.ts
+++ b/src/app/object-collection/object-collection.component.ts
@@ -11,10 +11,12 @@ import { PageInfo } from '../core/shared/page-info.model';
 
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
 
-import {  SortDirection } from '../core/cache/models/sort-options.model';
+import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
 
 import { ListableObject } from './shared/listable-object.model';
+import { ViewMode } from '../+search-page/search-options.model';
 import { hasValue, isNotEmpty } from '../shared/empty.util';
+
 @Component({
   selector: 'ds-viewable-collection',
   styleUrls: ['./object-collection.component.scss'],
@@ -24,6 +26,7 @@ export class ObjectCollectionComponent implements OnChanges, OnInit {
 
   @Input() objects: RemoteData<ListableObject[]>;
   @Input() config?: PaginationComponentOptions;
+  @Input() sortConfig: SortOptions;
   pageInfo: Observable<PageInfo>;
 
   /**
@@ -52,7 +55,8 @@ export class ObjectCollectionComponent implements OnChanges, OnInit {
    */
   @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
   data: any = {};
-  defaultViewMode: string ='list';
+  currentMode: ViewMode = ViewMode.List;
+  viewModeEnum = ViewMode;
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.objects && !changes.objects.isFirstChange()) {
@@ -60,6 +64,7 @@ export class ObjectCollectionComponent implements OnChanges, OnInit {
     }
   }
 
+
   ngOnInit(): void {
     this.pageInfo = this.objects.pageInfo;
   }
@@ -74,22 +79,15 @@ export class ObjectCollectionComponent implements OnChanges, OnInit {
               private router: Router) {
   }
 
-  getViewMode(): string {
-    // TODO Update to accommodate view switcher
-
+  getViewMode(): ViewMode {
     this.route.queryParams.map((params) => {
       if (isNotEmpty(params.view) && hasValue(params.view)) {
-        return params.view;
-      } else {
-        return this.defaultViewMode;
+        this.currentMode= params.view;
       }
     });
-    return this.defaultViewMode;
+    return this.currentMode;
   }
 
-  setViewMode(viewMode: string) {
-    this.defaultViewMode = viewMode;
-  }
   onPageChange(event) {
     this.pageChange.emit(event);
   }
diff --git a/src/app/object-grid/object-grid.component.ts b/src/app/object-grid/object-grid.component.ts
index b316fe37c2..02931165c8 100644
--- a/src/app/object-grid/object-grid.component.ts
+++ b/src/app/object-grid/object-grid.component.ts
@@ -82,5 +82,24 @@ export class ObjectGridComponent implements OnChanges, OnInit  {
   constructor(private cdRef: ChangeDetectorRef) {
   }
 
+  onPageChange(event) {
+    this.pageChange.emit(event);
+  }
+
+  onPageSizeChange(event) {
+    this.pageSizeChange.emit(event);
+  }
+
+  onSortDirectionChange(event) {
+    this.sortDirectionChange.emit(event);
+  }
+
+  onSortFieldChange(event) {
+    this.sortFieldChange.emit(event);
+  }
+
+  onPaginationChange(event) {
+    this.paginationChange.emit(event);
+  }
 
 }
diff --git a/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
index c6e1bc6b14..895e8b59c3 100644
--- a/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
+++ b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
@@ -20,8 +20,8 @@
     <p *ngIf="dso.findMetadata('dc.description.abstract')" class="item-abstract card-text">
       {{dso.findMetadata("dc.description.abstract") | dsTruncate:[200] }}</p>
 
+    <a [routerLink]="['/items/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
   </div>
-  <a [routerLink]="['/items/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
 
 </div>
 
diff --git a/src/app/object-list/object-list.component.ts b/src/app/object-list/object-list.component.ts
index 352d7bc393..9422d1d843 100644
--- a/src/app/object-list/object-list.component.ts
+++ b/src/app/object-list/object-list.component.ts
@@ -103,4 +103,23 @@ export class ObjectListComponent {
     this.paginationChange.emit(event);
   }
 
+  onPageChange(event) {
+    this.pageChange.emit(event);
+  }
+
+  onPageSizeChange(event) {
+    this.pageSizeChange.emit(event);
+  }
+
+  onSortDirectionChange(event) {
+    this.sortDirectionChange.emit(event);
+  }
+
+  onSortFieldChange(event) {
+    this.sortFieldChange.emit(event);
+  }
+
+  onPaginationChange(event) {
+    this.paginationChange.emit(event);
+  }
 }

From 1acd8a952b2f87669c7eb0b7b7067ac7fc1f485d Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Tue, 31 Oct 2017 13:51:08 +0100
Subject: [PATCH 03/47] #150 Pre grid/list decorator generalisation commit

---
 src/app/object-grid/object-grid.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/object-grid/object-grid.component.html b/src/app/object-grid/object-grid.component.html
index 2ad9c11a8f..7abfaf28d3 100644
--- a/src/app/object-grid/object-grid.component.html
+++ b/src/app/object-grid/object-grid.component.html
@@ -12,7 +12,7 @@
   (paginationChange)="onPaginationChange($event)">
   <ul *ngIf="objects.hasSucceeded | async" @fadeIn>
     <div class="row">
-        <div class="col-lg-3 col-xs-12 col-sm-6"
+        <div class="col-lg-4 col-sm-4 col-xs-12 "
           *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
           <ds-wrapper-grid-element [object]="object"></ds-wrapper-grid-element>
       </div>

From 6a4500b8e7f9bc3e75880fbb97c2735153de5809 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Tue, 31 Oct 2017 14:47:52 +0100
Subject: [PATCH 04/47] #150 Intermediate commit

---
 src/app/+search-page/search-page.component.ts          | 10 ++--------
 .../object-collection/object-collection.component.ts   | 10 +++++++++-
 src/app/object-grid/object-grid.component.ts           |  1 -
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/app/+search-page/search-page.component.ts b/src/app/+search-page/search-page.component.ts
index d5f220d2b1..0d9064dc87 100644
--- a/src/app/+search-page/search-page.component.ts
+++ b/src/app/+search-page/search-page.component.ts
@@ -57,14 +57,6 @@ export class SearchPageComponent implements OnInit, OnDestroy {
     pagination.currentPage = 1;
     pagination.pageSize = 10;
 
-    // TODO Update to accommodate view switcher
-    this.route.queryParams.map((params) => {
-      if (isNotEmpty(params.view) && params.view == ViewMode.Grid) {
-        pagination.pageSize = 12;
-      }
-    });
-
-
     const sort: SortOptions = new SortOptions();
     this.sortConfig=sort;
     this.searchOptions = this.service.searchOptions;
@@ -80,6 +72,8 @@ export class SearchPageComponent implements OnInit, OnDestroy {
           this.scope = params.scope;
           const page = +params.page || this.searchOptions.pagination.currentPage;
           const pageSize = +params.pageSize || this.searchOptions.pagination.pageSize;
+
+
           const sortDirection = +params.sortDirection || this.searchOptions.sort.direction;
           const pagination = Object.assign({},
             this.searchOptions.pagination,
diff --git a/src/app/object-collection/object-collection.component.ts b/src/app/object-collection/object-collection.component.ts
index 5a6d06509b..a79653d970 100644
--- a/src/app/object-collection/object-collection.component.ts
+++ b/src/app/object-collection/object-collection.component.ts
@@ -28,7 +28,7 @@ export class ObjectCollectionComponent implements OnChanges, OnInit {
   @Input() config?: PaginationComponentOptions;
   @Input() sortConfig: SortOptions;
   pageInfo: Observable<PageInfo>;
-
+  private sub;
   /**
    * An event fired when the page is changed.
    * Event's payload equals to the newly selected page.
@@ -67,6 +67,14 @@ export class ObjectCollectionComponent implements OnChanges, OnInit {
 
   ngOnInit(): void {
     this.pageInfo = this.objects.pageInfo;
+
+    this.sub = this.route
+      .queryParams
+      .subscribe((params) => {
+        if(isNotEmpty(params.view)){
+          this.currentMode = params.view;
+        }
+      });
   }
 
   /**
diff --git a/src/app/object-grid/object-grid.component.ts b/src/app/object-grid/object-grid.component.ts
index 02931165c8..a6b62d735f 100644
--- a/src/app/object-grid/object-grid.component.ts
+++ b/src/app/object-grid/object-grid.component.ts
@@ -70,7 +70,6 @@ export class ObjectGridComponent implements OnChanges, OnInit  {
 
   ngOnInit(): void {
     this.pageInfo = this.objects.pageInfo;
-    this.config.pageSize = 4;
   }
 
   /**

From 0032a73ec29d720a93080680e648f0bca1bf2b9a Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Thu, 2 Nov 2017 10:53:18 +0100
Subject: [PATCH 05/47] #150 Intermediate commit

---
 src/app/+search-page/search-page.component.ts | 14 ++++++-
 src/app/object-grid/grid-card-styling.scss    | 33 +++++++++------
 .../grid-thumbnail.component.html             |  4 ++
 .../grid-thumbnail.component.scss             |  1 +
 .../grid-thumbnail.component.spec.ts          | 42 +++++++++++++++++++
 .../grid-thumbnail.component.ts               | 30 +++++++++++++
 .../item-grid-element.component.html          |  9 ++--
 .../object-grid/object-grid.component.html    |  4 +-
 ...-search-result-grid-element.component.html | 31 ++++++++------
 src/app/shared/shared.module.ts               |  2 +
 src/styles/_custom_variables.scss             |  2 +-
 11 files changed, 137 insertions(+), 35 deletions(-)
 create mode 100644 src/app/object-grid/grid-thumbnail/grid-thumbnail.component.html
 create mode 100644 src/app/object-grid/grid-thumbnail/grid-thumbnail.component.scss
 create mode 100644 src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
 create mode 100644 src/app/object-grid/grid-thumbnail/grid-thumbnail.component.ts

diff --git a/src/app/+search-page/search-page.component.ts b/src/app/+search-page/search-page.component.ts
index 0d9064dc87..697e379f3d 100644
--- a/src/app/+search-page/search-page.component.ts
+++ b/src/app/+search-page/search-page.component.ts
@@ -71,18 +71,27 @@ export class SearchPageComponent implements OnInit, OnDestroy {
           this.query = params.query || '';
           this.scope = params.scope;
           const page = +params.page || this.searchOptions.pagination.currentPage;
-          const pageSize = +params.pageSize || this.searchOptions.pagination.pageSize;
+          let pageSize = +params.pageSize || this.searchOptions.pagination.pageSize;
+          let pageSizeOptions: number[] = [5, 10, 20, 40, 60, 80, 100];
+
+          if (isNotEmpty(params.view) && params.view === ViewMode.Grid) {
+            pageSize = 12;
+            pageSizeOptions = [12, 24, 36, 48 , 50, 62, 74, 84];
+            // pageSize = 9;
+            // pageSizeOptions = [9, 18, 27, 36 , 45, 54, 63, 72];
+          }
 
 
           const sortDirection = +params.sortDirection || this.searchOptions.sort.direction;
           const pagination = Object.assign({},
             this.searchOptions.pagination,
-            { currentPage: page, pageSize: pageSize }
+            { currentPage: page, pageSize: pageSize, pageSizeOptions: pageSizeOptions}
           );
           const sort = Object.assign({},
             this.searchOptions.sort,
             { direction: sortDirection, field: params.sortField }
           );
+
           this.updateSearchResults({
             pagination: pagination,
             sort: sort
@@ -98,6 +107,7 @@ export class SearchPageComponent implements OnInit, OnDestroy {
 
   private updateSearchResults(searchOptions) {
     this.resultsRDObs = this.service.search(this.query, this.scope, searchOptions);
+    this.searchOptions = searchOptions;
   }
 
   ngOnDestroy() {
diff --git a/src/app/object-grid/grid-card-styling.scss b/src/app/object-grid/grid-card-styling.scss
index 52b78524b0..44f4183bfd 100644
--- a/src/app/object-grid/grid-card-styling.scss
+++ b/src/app/object-grid/grid-card-styling.scss
@@ -1,6 +1,9 @@
+@import '../../styles/custom_variables';
+
 .card-title{
-  line-height: 1em;
-  height:3em;
+  line-height: $line-height-base;
+  height:$headings-line-height;
+  font-size:$headings-font-size;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -8,29 +11,35 @@
 .card-text {
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: 1em;
-  margin-bottom:10px;
+  line-height: $line-height-base;
+  margin-bottom:$card-block-margin-base*2;
 }
 .card-text.item-authors {
-  height: 1em;
+  height: $line-height-base;
 }
 .card-text.item-abstract {
-  height: 5em;
-
+  height: $content-line-height;
 }
+
 .viewButton{
-  display:block;
+  display:table;
+  margin:auto;
+  width: $card-button-width;
 }
 
 .card{
-  padding:10px;
-  margin-bottom: 15px;
+  margin-bottom: $card-block-margin-base *3;
+  height: 98%;
 }
 
 .card-img-top ::ng-deep  img
 {
-  height: 120px;
+  height: $card-thumbnail-height;
   width: 100%;
   object-fit: cover;
-  margin-bottom: 10px;
 }
+
+.card-block{
+  margin: $card-block-margin-base;
+}
+
diff --git a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.html b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.html
new file mode 100644
index 0000000000..6221cbaba1
--- /dev/null
+++ b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.html
@@ -0,0 +1,4 @@
+<div class="thumbnail">
+  <img *ngIf="thumbnail" [src]="thumbnail.content" (error)="errorHandler($event)"/>
+  <img *ngIf="!thumbnail" [src]="holderSource | dsSafeUrl"/>
+</div>
diff --git a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.scss b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.scss
new file mode 100644
index 0000000000..50be6f5ad0
--- /dev/null
+++ b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.scss
@@ -0,0 +1 @@
+@import '../../../styles/variables.scss';
diff --git a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
new file mode 100644
index 0000000000..f4ca434221
--- /dev/null
+++ b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
@@ -0,0 +1,42 @@
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ThumbnailComponent } from './thumbnail.component';
+import { Bitstream } from '../../core/shared/bitstream.model';
+import { SafeUrlPipe } from '../../shared/utils/safe-url-pipe';
+
+describe('ThumbnailComponent', () => {
+  let comp: ThumbnailComponent;
+  let fixture: ComponentFixture<ThumbnailComponent>;
+  let de: DebugElement;
+  let el: HTMLElement;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ThumbnailComponent, SafeUrlPipe]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ThumbnailComponent);
+    comp = fixture.componentInstance; // BannerComponent test instance
+    de = fixture.debugElement.query(By.css('div.thumbnail'));
+    el = de.nativeElement;
+  });
+
+  it('should display image', () => {
+    comp.thumbnail = new Bitstream();
+    comp.thumbnail.content = 'test.url';
+    fixture.detectChanges();
+    const image: HTMLElement = de.query(By.css('img')).nativeElement;
+    expect(image.getAttribute('src')).toBe(comp.thumbnail.content);
+  });
+
+  it('should display placeholder', () => {
+    fixture.detectChanges();
+    const image: HTMLElement = de.query(By.css('img')).nativeElement;
+    expect(image.getAttribute('src')).toBe(comp.holderSource);
+  });
+
+});
diff --git a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.ts b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.ts
new file mode 100644
index 0000000000..7baa47b39e
--- /dev/null
+++ b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.ts
@@ -0,0 +1,30 @@
+import { Component, Input } from '@angular/core';
+import { Bitstream } from '../../core/shared/bitstream.model';
+
+/**
+ * This component renders a given Bitstream as a thumbnail.
+ * One input parameter of type Bitstream is expected.
+ * If no Bitstream is provided, a holderjs image will be rendered instead.
+ */
+
+@Component({
+  selector: 'ds-grid-thumbnail',
+  styleUrls: ['./grid-thumbnail.component.scss'],
+  templateUrl: './grid-thumbnail.component.html'
+})
+export class GridThumbnailComponent {
+
+  @Input() thumbnail: Bitstream;
+
+  data: any = {};
+
+  /**
+   * The default 'holder.js' image
+   */
+  holderSource = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI2MCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwL3RleHQ6Tm8gVGh1bWJuYWlsCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTVmNzJmMmFlMGIgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxM3B0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWY3MmYyYWUwYiI+PHJlY3Qgd2lkdGg9IjI2MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI3Mi4yNDIxODc1IiB5PSI5NiI+Tm8gVGh1bWJuYWlsPC90ZXh0PjwvZz48L2c+PC9zdmc+';
+
+  errorHandler(event) {
+    event.currentTarget.src = this.holderSource;
+  }
+
+}
diff --git a/src/app/object-grid/item-grid-element/item-grid-element.component.html b/src/app/object-grid/item-grid-element/item-grid-element.component.html
index ea7b894896..3fae55088e 100644
--- a/src/app/object-grid/item-grid-element/item-grid-element.component.html
+++ b/src/app/object-grid/item-grid-element/item-grid-element.component.html
@@ -1,17 +1,18 @@
 <div class="card">
 
   <a [routerLink]="['/items/' + object.id]" class="card-img-top">
-    <ds-thumbnail [thumbnail]="object.getThumbnail()">
-    </ds-thumbnail>
+    <ds-grid-thumbnail [thumbnail]="object.getThumbnail()">
+    </ds-grid-thumbnail>
   </a>
   <div class="card-block">
     <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">
+
+    <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>
         </span>
+      <span *ngIf="object.findMetadata('dc.date.issued')">{{object.findMetadata("dc.date.issued")}}</span>
     </p>
-    (<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>)
 
     <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/object-grid/object-grid.component.html b/src/app/object-grid/object-grid.component.html
index 7abfaf28d3..ebcf240d28 100644
--- a/src/app/object-grid/object-grid.component.html
+++ b/src/app/object-grid/object-grid.component.html
@@ -10,14 +10,12 @@
   (sortDirectionChange)="onSortDirectionChange($event)"
   (sortFieldChange)="onSortDirectionChange($event)"
   (paginationChange)="onPaginationChange($event)">
-  <ul *ngIf="objects.hasSucceeded | async" @fadeIn>
-    <div class="row">
+    <div class="row" *ngIf="objects.hasSucceeded | async" @fadeIn>
         <div class="col-lg-4 col-sm-4 col-xs-12 "
           *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
           <ds-wrapper-grid-element [object]="object"></ds-wrapper-grid-element>
       </div>
     </div>
-  </ul>
   <ds-error *ngIf="objects.hasFailed | async" message="{{'error.objects' | translate}}"></ds-error>
   <ds-loading *ngIf="objects.isLoading | async" message="{{'loading.objects' | translate}}"></ds-loading>
 </ds-pagination>
diff --git a/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
index 895e8b59c3..be84039416 100644
--- a/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
+++ b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
@@ -1,24 +1,29 @@
 <div class="card">
   <a [routerLink]="['/items/' + dso.id]" class="card-img-top">
-    <ds-thumbnail [thumbnail]="dso.getThumbnail()">
-    </ds-thumbnail>
+    <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()">
+    </ds-grid-thumbnail>
   </a>
   <div class="card-block">
-    <h4 class="card-title">{{dso.findMetadata('dc.title')}}</h4>
+    <p class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></p>
 
-    <p *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);"
-       class="item-authors card-text">
+    <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 last=last;">{{authorMd.value}}
-            <span *ngIf="!last">; </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>
-    </p>
-    (<span *ngIf="dso.findMetadata('dc.publisher')"
-           class="item-list-publisher">{{dso.findMetadata("dc.publisher")}}, </span><span
-    *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date">{{dso.findMetadata("dc.date.issued")}}</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 *ngIf="dso.findMetadata('dc.description.abstract')" class="item-abstract card-text">
-      {{dso.findMetadata("dc.description.abstract") | dsTruncate:[200] }}</p>
+
+    </p>
+    <p class="item-abstract card-text" [innerHTML]="getFirstValue('dc.description.abstract') | dsTruncate:[200]">
+    </p>
 
     <a [routerLink]="['/items/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
   </div>
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 1ebf251e2c..8ef05b2f89 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -40,6 +40,7 @@ import { ThumbnailComponent } from '../thumbnail/thumbnail.component';
 import { SearchFormComponent } from './search-form/search-form.component';
 import { SearchResultGridElementComponent } from '../object-grid/search-result-grid-element/search-result-grid-element.component';
 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';
 
 const MODULES = [
@@ -78,6 +79,7 @@ const COMPONENTS = [
   PaginationComponent,
   SearchFormComponent,
   ThumbnailComponent,
+  GridThumbnailComponent,
   WrapperListElementComponent,
   ViewModeSwitchComponent
 ];
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);

From 7d982ad954f780dcc69a4fb41407bf315e85bd8b Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Thu, 2 Nov 2017 13:43:02 +0100
Subject: [PATCH 06/47] #150 Intermediate commit

---
 .../search-results/search-results.component.ts  |  3 ++-
 .../shared/dso-element-decorator.ts             | 17 +++++++++++++++++
 .../collection-grid-element.component.ts        |  6 ++++--
 .../community-grid-element.component.ts         |  5 +++--
 src/app/object-grid/grid-card-styling.scss      |  2 +-
 src/app/object-grid/grid-element-decorator.ts   | 16 ----------------
 .../item-grid-element.component.ts              |  5 +++--
 ...tion-search-result-grid-element.component.ts |  6 ++++--
 ...nity-search-result-grid-element.component.ts |  5 +++--
 ...item-search-result-grid-element.component.ts |  5 +++--
 .../wrapper-grid-element.component.ts           |  5 +++--
 .../collection-list-element.component.ts        |  5 +++--
 .../community-list-element.component.ts         |  5 +++--
 .../item-list-element.component.ts              |  5 +++--
 src/app/object-list/list-element-decorator.ts   | 16 ----------------
 src/app/object-list/object-list.component.html  |  2 +-
 ...tion-search-result-list-element.component.ts |  5 +++--
 ...nity-search-result-list-element.component.ts |  5 +++--
 ...item-search-result-list-element.component.ts |  5 +++--
 .../wrapper-list-element.component.ts           |  6 +++---
 src/styles/_custom_variables.scss               |  1 +
 21 files changed, 66 insertions(+), 64 deletions(-)
 create mode 100644 src/app/object-collection/shared/dso-element-decorator.ts
 delete mode 100644 src/app/object-grid/grid-element-decorator.ts

diff --git a/src/app/+search-page/search-results/search-results.component.ts b/src/app/+search-page/search-results/search-results.component.ts
index f8b3721630..4b3fec4565 100644
--- a/src/app/+search-page/search-results/search-results.component.ts
+++ b/src/app/+search-page/search-results/search-results.component.ts
@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 import { RemoteData } from '../../core/data/remote-data';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { fadeIn, fadeInOut } from '../../shared/animations/fade';
-import { SearchOptions } from '../search-options.model';
+import { SearchOptions, ViewMode } from '../search-options.model';
 import { SortOptions } from '../../core/cache/models/sort-options.model';
 import { SearchResult } from '../search-result.model';
 
@@ -23,4 +23,5 @@ export class SearchResultsComponent {
   @Input() searchResults: RemoteData<Array<SearchResult<DSpaceObject>>>;
   @Input() searchConfig: SearchOptions;
   @Input() sortConfig: SortOptions;
+  @Input() viewMode: ViewMode;
 }
diff --git a/src/app/object-collection/shared/dso-element-decorator.ts b/src/app/object-collection/shared/dso-element-decorator.ts
new file mode 100644
index 0000000000..310a65f056
--- /dev/null
+++ b/src/app/object-collection/shared/dso-element-decorator.ts
@@ -0,0 +1,17 @@
+import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { ListableObject } from './listable-object.model';
+import { ViewMode } from '../../+search-page/search-options.model';
+
+const dsoElementMap = new Map();
+export function renderElementsFor(listable: GenericConstructor<ListableObject>, viewMode : ViewMode) {
+  return function decorator(objectElement: any) {
+    if (!objectElement) {
+      return;
+    }
+    dsoElementMap.set(listable+viewMode, objectElement);
+  };
+}
+
+export function rendersDSOType(listable: GenericConstructor<ListableObject>, viewMode : ViewMode) {
+  return dsoElementMap.get(listable+viewMode);
+}
diff --git a/src/app/object-grid/collection-grid-element/collection-grid-element.component.ts b/src/app/object-grid/collection-grid-element/collection-grid-element.component.ts
index 80be3d75b3..7e2ae5f468 100644
--- a/src/app/object-grid/collection-grid-element/collection-grid-element.component.ts
+++ b/src/app/object-grid/collection-grid-element/collection-grid-element.component.ts
@@ -2,7 +2,9 @@ import { Component, Inject } from '@angular/core';
 
 import { Collection } from '../../core/shared/collection.model';
 import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
-import { gridElementFor } from '../grid-element-decorator';
+import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
+import { ViewMode } from '../../+search-page/search-options.model';
+
 
 @Component({
   selector: 'ds-collection-grid-element',
@@ -10,5 +12,5 @@ import { gridElementFor } from '../grid-element-decorator';
   templateUrl: './collection-grid-element.component.html'
 })
 
-@gridElementFor(Collection)
+@renderElementsFor(Collection, ViewMode.Grid)
 export class CollectionGridElementComponent extends ObjectGridElementComponent<Collection> {}
diff --git a/src/app/object-grid/community-grid-element/community-grid-element.component.ts b/src/app/object-grid/community-grid-element/community-grid-element.component.ts
index e29e037c5d..76ee6736be 100644
--- a/src/app/object-grid/community-grid-element/community-grid-element.component.ts
+++ b/src/app/object-grid/community-grid-element/community-grid-element.component.ts
@@ -2,7 +2,8 @@ import { Component, Input, Inject } from '@angular/core';
 
 import { Community } from '../../core/shared/community.model';
 import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
-import { gridElementFor} from '../grid-element-decorator';
+import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
+import { ViewMode } from '../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-community-grid-element',
@@ -10,5 +11,5 @@ import { gridElementFor} from '../grid-element-decorator';
   templateUrl: './community-grid-element.component.html'
 })
 
-@gridElementFor(Community)
+@renderElementsFor(Community, ViewMode.Grid)
 export class CommunityGridElementComponent extends ObjectGridElementComponent<Community> {}
diff --git a/src/app/object-grid/grid-card-styling.scss b/src/app/object-grid/grid-card-styling.scss
index 44f4183bfd..b25c603b55 100644
--- a/src/app/object-grid/grid-card-styling.scss
+++ b/src/app/object-grid/grid-card-styling.scss
@@ -29,7 +29,7 @@
 
 .card{
   margin-bottom: $card-block-margin-base *3;
-  height: 98%;
+  height: $card-height-percentage;
 }
 
 .card-img-top ::ng-deep  img
diff --git a/src/app/object-grid/grid-element-decorator.ts b/src/app/object-grid/grid-element-decorator.ts
deleted file mode 100644
index cd5ebbcaeb..0000000000
--- a/src/app/object-grid/grid-element-decorator.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { GenericConstructor } from '../core/shared/generic-constructor';
-import { ListableObject } from '../object-collection/shared/listable-object.model';
-
-const gridElementMap = new Map();
-export function gridElementFor(gridable: GenericConstructor<ListableObject>) {
-  return function decorator(objectElement: any) {
-    if (!objectElement) {
-      return;
-    }
-    gridElementMap.set(gridable, objectElement);
-  };
-}
-
-export function getGridElementFor(gridable: GenericConstructor<ListableObject>) {
-  return gridElementMap.get(gridable);
-}
diff --git a/src/app/object-grid/item-grid-element/item-grid-element.component.ts b/src/app/object-grid/item-grid-element/item-grid-element.component.ts
index c651ccfc9c..e11c51312a 100644
--- a/src/app/object-grid/item-grid-element/item-grid-element.component.ts
+++ b/src/app/object-grid/item-grid-element/item-grid-element.component.ts
@@ -1,8 +1,9 @@
 import { Component, Input, Inject } from '@angular/core';
 
 import { Item } from '../../core/shared/item.model';
-import { gridElementFor } from '../grid-element-decorator';
+import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
 import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+import { ViewMode } from '../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-item-grid-element',
@@ -10,5 +11,5 @@ import { ObjectGridElementComponent } from '../object-grid-element/object-grid-e
   templateUrl: './item-grid-element.component.html'
 })
 
-@gridElementFor(Item)
+@renderElementsFor(Item, ViewMode.Grid)
 export class ItemGridElementComponent extends ObjectGridElementComponent<Item> {}
diff --git a/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts
index aa1d495dba..6c5e526d15 100644
--- a/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts
+++ b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts
@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
 
-import { gridElementFor } from '../../grid-element-decorator';
+import { renderElementsFor} from '../../../object-collection/shared/dso-element-decorator';
+
 import { CollectionSearchResult } from './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';
 
 @Component({
   selector: 'ds-collection-search-result-grid-element',
@@ -11,5 +13,5 @@ import { Collection } from '../../../core/shared/collection.model';
   templateUrl: 'collection-search-result-grid-element.component.html'
 })
 
-@gridElementFor(CollectionSearchResult)
+@renderElementsFor(CollectionSearchResult, ViewMode.Grid)
 export class CollectionSearchResultGridElementComponent extends SearchResultGridElementComponent<CollectionSearchResult, Collection> {}
diff --git a/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts b/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
index 1ce9e1d09a..b6aa4bdb6d 100644
--- a/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
+++ b/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
@@ -2,8 +2,9 @@ import { Component } from '@angular/core';
 
 import { CommunitySearchResult } from './community-search-result.model';
 import { Community } from '../../../core/shared/community.model';
-import { gridElementFor } from '../../grid-element-decorator';
+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';
 
 @Component({
   selector: 'ds-community-search-result-grid-element',
@@ -11,7 +12,7 @@ import { SearchResultGridElementComponent } from '../search-result-grid-element.
   templateUrl: 'community-search-result-grid-element.component.html'
 })
 
-@gridElementFor(CommunitySearchResult)
+@renderElementsFor(CommunitySearchResult, ViewMode.Grid)
 export class CommunitySearchResultGridElementComponent extends SearchResultGridElementComponent<CommunitySearchResult, Community> {
 
 }
diff --git a/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
index 7a82803c9b..d4989d2efd 100644
--- a/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
+++ b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 
-import { gridElementFor } from '../../grid-element-decorator';
+import { renderElementsFor } from '../../../object-collection/shared/dso-element-decorator';
 import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
 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';
 
 @Component({
   selector: 'ds-item-search-result-grid-element',
@@ -11,5 +12,5 @@ import { ItemSearchResult } from '../../../object-collection/shared/item-search-
   templateUrl: 'item-search-result-grid-element.component.html'
 })
 
-@gridElementFor(ItemSearchResult)
+@renderElementsFor(ItemSearchResult, ViewMode.Grid)
 export class ItemSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> {}
diff --git a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts b/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
index bd15a0d443..000c826188 100644
--- a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
+++ b/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
@@ -1,7 +1,8 @@
 import { Component, Input, Injector, ReflectiveInjector, OnInit } from '@angular/core';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
-import { getGridElementFor } from '../grid-element-decorator';
+import { rendersDSOType } from '../../object-collection/shared/dso-element-decorator';
 import { ListableObject } from '../../object-collection/shared/listable-object.model';
+import { ViewMode } from '../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-wrapper-grid-element',
@@ -22,6 +23,6 @@ export class WrapperGridElementComponent implements OnInit {
 
   getGridElement(): string {
     const f: GenericConstructor<ListableObject> = this.object.constructor as GenericConstructor<ListableObject>;
-    return getGridElementFor(f);
+    return rendersDSOType(f, ViewMode.Grid);
   }
 }
diff --git a/src/app/object-list/collection-list-element/collection-list-element.component.ts b/src/app/object-list/collection-list-element/collection-list-element.component.ts
index a99e64a27f..c065a64b72 100644
--- a/src/app/object-list/collection-list-element/collection-list-element.component.ts
+++ b/src/app/object-list/collection-list-element/collection-list-element.component.ts
@@ -2,7 +2,8 @@ import { Component, Inject } from '@angular/core';
 
 import { Collection } from '../../core/shared/collection.model';
 import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
-import { listElementFor } from '../list-element-decorator';
+import { renderElementsFor } from '../../object-collection/shared/dso-element-decorator';
+import { ViewMode } from '../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-collection-list-element',
@@ -10,5 +11,5 @@ import { listElementFor } from '../list-element-decorator';
   templateUrl: './collection-list-element.component.html'
 })
 
-@listElementFor(Collection)
+@renderElementsFor(Collection, ViewMode.List)
 export class CollectionListElementComponent extends ObjectListElementComponent<Collection> {}
diff --git a/src/app/object-list/community-list-element/community-list-element.component.ts b/src/app/object-list/community-list-element/community-list-element.component.ts
index c05915e8d7..11ff392942 100644
--- a/src/app/object-list/community-list-element/community-list-element.component.ts
+++ b/src/app/object-list/community-list-element/community-list-element.component.ts
@@ -2,7 +2,8 @@ import { Component, Input, Inject } from '@angular/core';
 
 import { Community } from '../../core/shared/community.model';
 import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
-import { listElementFor } from '../list-element-decorator';
+import { renderElementsFor } from '../../object-collection/shared/dso-element-decorator';
+import { ViewMode } from '../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-community-list-element',
@@ -10,5 +11,5 @@ import { listElementFor } from '../list-element-decorator';
   templateUrl: './community-list-element.component.html'
 })
 
-@listElementFor(Community)
+@renderElementsFor(Community, ViewMode.List)
 export class CommunityListElementComponent extends ObjectListElementComponent<Community> {}
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..bdc5733dcd 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
@@ -2,7 +2,8 @@ import { Component, Input, Inject } from '@angular/core';
 
 import { Item } from '../../core/shared/item.model';
 import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
-import { listElementFor } from '../list-element-decorator';
+import { renderElementsFor } from '../../object-collection/shared/dso-element-decorator';
+import { ViewMode } from '../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-item-list-element',
@@ -10,5 +11,5 @@ import { listElementFor } from '../list-element-decorator';
   templateUrl: './item-list-element.component.html'
 })
 
-@listElementFor(Item)
+@renderElementsFor(Item, ViewMode.List)
 export class ItemListElementComponent extends ObjectListElementComponent<Item> {}
diff --git a/src/app/object-list/list-element-decorator.ts b/src/app/object-list/list-element-decorator.ts
index aa044755ea..e69de29bb2 100644
--- a/src/app/object-list/list-element-decorator.ts
+++ b/src/app/object-list/list-element-decorator.ts
@@ -1,16 +0,0 @@
-import { GenericConstructor } from '../core/shared/generic-constructor';
-import { ListableObject } from '../object-collection/shared/listable-object.model';
-
-const listElementMap = new Map();
-export function listElementFor(listable: GenericConstructor<ListableObject>) {
-  return function decorator(objectElement: any) {
-    if (!objectElement) {
-      return;
-    }
-    listElementMap.set(listable, objectElement);
-  };
-}
-
-export function getListElementFor(listable: GenericConstructor<ListableObject>) {
-  return listElementMap.get(listable);
-}
diff --git a/src/app/object-list/object-list.component.html b/src/app/object-list/object-list.component.html
index b97524d58c..0178533bda 100644
--- a/src/app/object-list/object-list.component.html
+++ b/src/app/object-list/object-list.component.html
@@ -12,7 +12,7 @@
   (paginationChange)="onPaginationChange($event)">
   <ul *ngIf="objects?.hasSucceeded"> <!--class="list-unstyled"-->
       <li *ngFor="let object of objects?.payload">
-          <ds-wrapper-list-element [object]="object"></ds-wrapper-list-element>
+        <ds-wrapper-list-element [object]="object"></ds-wrapper-list-element>
       </li>
   </ul>
 </ds-pagination>
diff --git a/src/app/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.ts b/src/app/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.ts
index 9bea14e9a1..1b5d7ef0ba 100644
--- a/src/app/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.ts
+++ b/src/app/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.ts
@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 
-import { listElementFor } from '../../list-element-decorator';
+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';
 
 @Component({
   selector: 'ds-collection-search-result-list-element',
@@ -11,5 +12,5 @@ import { Collection } from '../../../core/shared/collection.model';
   templateUrl: 'collection-search-result-list-element.component.html'
 })
 
-@listElementFor(CollectionSearchResult)
+@renderElementsFor(CollectionSearchResult, ViewMode.List)
 export class CollectionSearchResultListElementComponent extends SearchResultListElementComponent<CollectionSearchResult, Collection> {}
diff --git a/src/app/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.ts b/src/app/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.ts
index 741b4b4f65..d9ab001f58 100644
--- a/src/app/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.ts
+++ b/src/app/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.ts
@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 
-import { listElementFor } from '../../list-element-decorator';
+import { renderElementsFor } from '../../../object-collection/shared/dso-element-decorator';
 import { CommunitySearchResult } from './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';
 
 @Component({
   selector: 'ds-community-search-result-list-element',
@@ -11,7 +12,7 @@ import { Community } from '../../../core/shared/community.model';
   templateUrl: 'community-search-result-list-element.component.html'
 })
 
-@listElementFor(CommunitySearchResult)
+@renderElementsFor(CommunitySearchResult, ViewMode.List)
 export class CommunitySearchResultListElementComponent extends SearchResultListElementComponent<CommunitySearchResult, Community> {
 
 }
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 2974a87883..929233f1a3 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 { listElementFor } from '../../list-element-decorator';
+import { renderElementsFor } from '../../../object-collection/shared/dso-element-decorator';
 import { SearchResultListElementComponent } from '../search-result-list-element.component';
 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';
 
 @Component({
   selector: 'ds-item-search-result-list-element',
@@ -11,5 +12,5 @@ import { ItemSearchResult } from '../../../object-collection/shared/item-search-
   templateUrl: 'item-search-result-list-element.component.html'
 })
 
-@listElementFor(ItemSearchResult)
+@renderElementsFor(ItemSearchResult, ViewMode.List)
 export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> {}
diff --git a/src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts b/src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts
index 2e1184b023..ff5591442d 100644
--- a/src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts
+++ b/src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts
@@ -1,7 +1,8 @@
 import { Component, Input, Injector, ReflectiveInjector, OnInit } from '@angular/core';
-import { getListElementFor } from '../list-element-decorator'
+import { rendersDSOType } from '../../object-collection/shared/dso-element-decorator'
 import { GenericConstructor } from '../../core/shared/generic-constructor';
 import { ListableObject } from '../../object-collection/shared/listable-object.model';
+import { ViewMode } from '../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-wrapper-list-element',
@@ -17,11 +18,10 @@ export class WrapperListElementComponent implements OnInit {
   ngOnInit(): void {
     this.objectInjector = ReflectiveInjector.resolveAndCreate(
       [{provide: 'objectElementProvider', useFactory: () => (this.object) }], this.injector);
-
   }
 
   getListElement(): string {
     const f: GenericConstructor<ListableObject> = this.object.constructor as GenericConstructor<ListableObject>;
-    return getListElementFor(f);
+    return rendersDSOType(f, ViewMode.List);
   }
 }
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index f52a99f014..8c0dcae928 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -1,3 +1,4 @@
 $content-spacing: $spacer * 1.5;
 
 $button-height: $input-btn-padding-y * 2 + $input-btn-line-height + calculateRem($input-btn-border-width*2);
+$card-height-percentage:98%;

From 727353988fd0870f269509e1908437c9d8ad54fa Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Fri, 3 Nov 2017 14:46:33 +0100
Subject: [PATCH 07/47] #150 Safety-commit before moving to "shared" package

---
 dspace-angular.iml                            |  8 +++
 .../object-collection.component.spec.ts       | 52 +++++++++++++++++++
 .../shared/dso-element-decorator.spec.ts      | 16 ++++++
 .../collection-grid-element.component.spec.ts |  0
 .../grid-thumbnail.component.spec.ts          | 10 ++--
 .../item-grid-element.component.spec.ts       |  6 +++
 .../object-grid/object-grid.component.spec.ts |  0
 .../wrapper-grid-element.component.spec.ts    |  0
 8 files changed, 87 insertions(+), 5 deletions(-)
 create mode 100644 dspace-angular.iml
 create mode 100644 src/app/object-collection/object-collection.component.spec.ts
 create mode 100644 src/app/object-collection/shared/dso-element-decorator.spec.ts
 create mode 100644 src/app/object-grid/collection-grid-element/collection-grid-element.component.spec.ts
 create mode 100644 src/app/object-grid/item-grid-element/item-grid-element.component.spec.ts
 create mode 100644 src/app/object-grid/object-grid.component.spec.ts
 create mode 100644 src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts

diff --git a/dspace-angular.iml b/dspace-angular.iml
new file mode 100644
index 0000000000..5806390693
--- /dev/null
+++ b/dspace-angular.iml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="node_modules" level="project" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/src/app/object-collection/object-collection.component.spec.ts b/src/app/object-collection/object-collection.component.spec.ts
new file mode 100644
index 0000000000..abbf66e4f1
--- /dev/null
+++ b/src/app/object-collection/object-collection.component.spec.ts
@@ -0,0 +1,52 @@
+import { ObjectCollectionComponent } from './object-collection.component';
+import { ViewMode } from '../+search-page/search-options.model';
+import { element } from 'protractor';
+import { By } from '@angular/platform-browser';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Config } from '../../config/config.interface';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import { RouterStub } from '../shared/testing/router-stub';
+
+describe('ObjectCollectionComponent', () => {
+  let fixture: ComponentFixture<ObjectCollectionComponent>;
+  let objectCollectionComponent: ObjectCollectionComponent;
+  const queryParam = 'test query';
+  const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+  const activatedRouteStub = {
+    queryParams: Observable.of({
+      query: queryParam,
+      scope: scopeParam
+    })
+  };
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ObjectCollectionComponent ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub }
+      ],
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(ObjectCollectionComponent);
+    objectCollectionComponent = fixture.componentInstance;
+  }));
+  it('should only show the grid component when the viewmode is set to grid', () => {
+    objectCollectionComponent.currentMode = ViewMode.Grid;
+
+    // expect(By.css('ds-object-grid')).toEqual(1);
+    // expect(By.css('ds-object-list')).toEqual(0);
+  });
+
+  it('should only show the list component when the viewmode is set to list', () => {
+    objectCollectionComponent.currentMode = ViewMode.List;
+
+    // expect(By.css('ds-object-list').length).toEqual(1);
+    // expect(By.css('ds-object-grid').length).toEqual(0);
+  })
+
+});
diff --git a/src/app/object-collection/shared/dso-element-decorator.spec.ts b/src/app/object-collection/shared/dso-element-decorator.spec.ts
new file mode 100644
index 0000000000..952afb9ac3
--- /dev/null
+++ b/src/app/object-collection/shared/dso-element-decorator.spec.ts
@@ -0,0 +1,16 @@
+import { ViewMode } from '../../+search-page/search-options.model';
+import { renderElementsFor } from './dso-element-decorator';
+import { Item } from '../../core/shared/item.model';
+
+describe('ElementDecorator', () => {
+  let gridDecorator = renderElementsFor(Item, ViewMode.Grid);
+  let listDecorator = renderElementsFor(Item, ViewMode.List);
+  it('should have a decorator for both list and grid', () => {
+    expect(listDecorator.length).not.toBeNull();
+    expect(gridDecorator.length).not.toBeNull();
+  });
+  it('should have 2 separate decorators for grid and list', () => {
+    expect(listDecorator).not.toEqual(gridDecorator);
+  });
+
+});
diff --git a/src/app/object-grid/collection-grid-element/collection-grid-element.component.spec.ts b/src/app/object-grid/collection-grid-element/collection-grid-element.component.spec.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
index f4ca434221..209ac52997 100644
--- a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
+++ b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
@@ -2,24 +2,24 @@ import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
 
-import { ThumbnailComponent } from './thumbnail.component';
+import { GridThumbnailComponent } from './grid-thumbnail.component';
 import { Bitstream } from '../../core/shared/bitstream.model';
 import { SafeUrlPipe } from '../../shared/utils/safe-url-pipe';
 
 describe('ThumbnailComponent', () => {
-  let comp: ThumbnailComponent;
-  let fixture: ComponentFixture<ThumbnailComponent>;
+  let comp: GridThumbnailComponent;
+  let fixture: ComponentFixture<GridThumbnailComponent>;
   let de: DebugElement;
   let el: HTMLElement;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ThumbnailComponent, SafeUrlPipe]
+      declarations: [GridThumbnailComponent, SafeUrlPipe]
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ThumbnailComponent);
+    fixture = TestBed.createComponent(GridThumbnailComponent);
     comp = fixture.componentInstance; // BannerComponent test instance
     de = fixture.debugElement.query(By.css('div.thumbnail'));
     el = de.nativeElement;
diff --git a/src/app/object-grid/item-grid-element/item-grid-element.component.spec.ts b/src/app/object-grid/item-grid-element/item-grid-element.component.spec.ts
new file mode 100644
index 0000000000..0da99aa697
--- /dev/null
+++ b/src/app/object-grid/item-grid-element/item-grid-element.component.spec.ts
@@ -0,0 +1,6 @@
+import { ItemGridElementComponent } from './item-grid-element.component';
+
+describe('ItemGridElementComponent',()=>{
+  let itemGridElementComponent: ItemGridElementComponent;
+
+})
diff --git a/src/app/object-grid/object-grid.component.spec.ts b/src/app/object-grid/object-grid.component.spec.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts b/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts
new file mode 100644
index 0000000000..e69de29bb2

From 7adfa5b5fb6d0ba4f7c83016b718cc8cf1d7cbf7 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Fri, 3 Nov 2017 15:02:01 +0100
Subject: [PATCH 08/47] #150 Moved list,grid and object-collection to shared
 package

---
 src/app/+search-page/search-page.module.ts    | 12 +++----
 src/app/+search-page/search-result.model.ts   |  2 +-
 .../search-service/search.service.ts          |  1 +
 src/app/core/shared/dspace-object.model.ts    |  2 +-
 .../object-collection.component.scss          |  1 -
 .../shared/item-search-result.model.ts        |  5 ---
 .../collection-grid-element.component.scss    |  2 --
 .../community-grid-element.component.scss     |  2 --
 .../grid-thumbnail.component.scss             |  1 -
 .../item-grid-element.component.scss          |  2 --
 .../object-grid-element.component.scss        |  6 ----
 .../object-grid/object-grid.component.scss    |  1 -
 ...-search-result-grid-element.component.scss |  2 --
 .../collection-search-result.model.ts         |  5 ---
 ...-search-result-grid-element.component.scss |  2 --
 .../community-search-result.model.ts          |  5 ---
 ...-search-result-grid-element.component.scss |  2 --
 .../wrapper-grid-element.component.scss       |  2 --
 .../collection-list-element.component.scss    |  1 -
 .../community-list-element.component.scss     |  1 -
 .../item-list-element.component.scss          |  1 -
 .../object-list/object-list.component.scss    |  1 -
 ...-search-result-list-element.component.scss |  1 -
 .../collection-search-result.model.ts         |  5 ---
 ...-search-result-list-element.component.scss |  1 -
 .../community-search-result.model.ts          |  5 ---
 ...-search-result-list-element.component.scss |  1 -
 .../wrapper-list-element.component.scss       |  2 --
 .../object-collection.component.html          |  0
 .../object-collection.component.scss          |  1 +
 .../object-collection.component.spec.ts       |  6 ++--
 .../object-collection.component.ts            | 12 +++----
 .../shared/dso-element-decorator.spec.ts      |  4 +--
 .../shared/dso-element-decorator.ts           |  4 +--
 .../shared/item-search-result.model.ts        |  5 +++
 .../shared/listable-object.model.ts           |  0
 .../collection-grid-element.component.html    |  0
 .../collection-grid-element.component.scss    |  2 ++
 .../collection-grid-element.component.spec.ts |  0
 .../collection-grid-element.component.ts      |  4 +--
 .../community-grid-element.component.html     |  0
 .../community-grid-element.component.scss     |  2 ++
 .../community-grid-element.component.ts       |  4 +--
 .../object-grid/grid-card-styling.scss        |  2 +-
 .../grid-thumbnail.component.html             |  0
 .../grid-thumbnail.component.scss             |  1 +
 .../grid-thumbnail.component.spec.ts          |  4 +--
 .../grid-thumbnail.component.ts               |  2 +-
 .../item-grid-element.component.html          |  0
 .../item-grid-element.component.scss          |  2 ++
 .../item-grid-element.component.spec.ts       |  0
 .../item-grid-element.component.ts            |  4 +--
 .../object-grid-element.component.html        |  0
 .../object-grid-element.component.scss        |  6 ++++
 .../object-grid-element.component.ts          |  0
 .../object-grid/object-grid.component.html    |  0
 .../object-grid/object-grid.component.scss    |  1 +
 .../object-grid/object-grid.component.spec.ts |  0
 .../object-grid/object-grid.component.ts      | 10 +++---
 ...-search-result-grid-element.component.html |  0
 ...-search-result-grid-element.component.scss |  2 ++
 ...on-search-result-grid-element.component.ts |  4 +--
 .../collection-search-result.model.ts         |  5 +++
 ...-search-result-grid-element.component.html |  0
 ...-search-result-grid-element.component.scss |  2 ++
 ...ty-search-result-grid-element.component.ts |  4 +--
 .../community-search-result.model.ts          |  5 +++
 ...-search-result-grid-element.component.html |  0
 ...-search-result-grid-element.component.scss |  2 ++
 ...em-search-result-grid-element.component.ts |  4 +--
 .../search-result-grid-element.component.scss |  4 +--
 .../search-result-grid-element.component.ts   |  8 ++---
 .../wrapper-grid-element.component.html       |  0
 .../wrapper-grid-element.component.scss       |  2 ++
 .../wrapper-grid-element.component.spec.ts    |  0
 .../wrapper-grid-element.component.ts         |  4 +--
 .../collection-list-element.component.html    |  0
 .../collection-list-element.component.scss    |  1 +
 .../collection-list-element.component.ts      |  4 +--
 .../community-list-element.component.html     |  0
 .../community-list-element.component.scss     |  1 +
 .../community-list-element.component.ts       |  4 +--
 .../item-list-element.component.html          |  0
 .../item-list-element.component.scss          |  1 +
 .../item-list-element.component.ts            |  4 +--
 .../object-list-element.component.html        |  0
 .../object-list-element.component.scss        |  2 +-
 .../object-list-element.component.ts          |  0
 .../object-list/object-list.component.html    |  0
 .../object-list/object-list.component.scss    |  1 +
 .../object-list/object-list.component.ts      | 11 +++++--
 ...-search-result-list-element.component.html |  0
 ...-search-result-list-element.component.scss |  1 +
 ...on-search-result-list-element.component.ts |  4 +--
 .../collection-search-result.model.ts         |  5 +++
 ...-search-result-list-element.component.html |  0
 ...-search-result-list-element.component.scss |  1 +
 ...ty-search-result-list-element.component.ts |  4 +--
 .../community-search-result.model.ts          |  5 +++
 ...-search-result-list-element.component.html |  0
 ...-search-result-list-element.component.scss |  1 +
 ...em-search-result-list-element.component.ts |  4 +--
 .../search-result-list-element.component.scss |  4 +--
 .../search-result-list-element.component.ts   |  8 ++---
 .../wrapper-list-element.component.html       |  0
 .../wrapper-list-element.component.scss       |  2 ++
 .../wrapper-list-element.component.ts         |  4 +--
 src/app/shared/shared.module.ts               | 32 +++++++++----------
 108 files changed, 153 insertions(+), 147 deletions(-)
 delete mode 100644 src/app/object-collection/object-collection.component.scss
 delete mode 100644 src/app/object-collection/shared/item-search-result.model.ts
 delete mode 100644 src/app/object-grid/collection-grid-element/collection-grid-element.component.scss
 delete mode 100644 src/app/object-grid/community-grid-element/community-grid-element.component.scss
 delete mode 100644 src/app/object-grid/grid-thumbnail/grid-thumbnail.component.scss
 delete mode 100644 src/app/object-grid/item-grid-element/item-grid-element.component.scss
 delete mode 100644 src/app/object-grid/object-grid-element/object-grid-element.component.scss
 delete mode 100644 src/app/object-grid/object-grid.component.scss
 delete mode 100644 src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
 delete mode 100644 src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts
 delete mode 100644 src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
 delete mode 100644 src/app/object-grid/search-result-grid-element/community-search-result/community-search-result.model.ts
 delete mode 100644 src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
 delete mode 100644 src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
 delete mode 100644 src/app/object-list/collection-list-element/collection-list-element.component.scss
 delete mode 100644 src/app/object-list/community-list-element/community-list-element.component.scss
 delete mode 100644 src/app/object-list/item-list-element/item-list-element.component.scss
 delete mode 100644 src/app/object-list/object-list.component.scss
 delete mode 100644 src/app/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss
 delete mode 100644 src/app/object-list/search-result-list-element/collection-search-result/collection-search-result.model.ts
 delete mode 100644 src/app/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss
 delete mode 100644 src/app/object-list/search-result-list-element/community-search-result/community-search-result.model.ts
 delete mode 100644 src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss
 delete mode 100644 src/app/object-list/wrapper-list-element/wrapper-list-element.component.scss
 rename src/app/{ => shared}/object-collection/object-collection.component.html (100%)
 create mode 100644 src/app/shared/object-collection/object-collection.component.scss
 rename src/app/{ => shared}/object-collection/object-collection.component.spec.ts (90%)
 rename src/app/{ => shared}/object-collection/object-collection.component.ts (87%)
 rename src/app/{ => shared}/object-collection/shared/dso-element-decorator.spec.ts (80%)
 rename src/app/{ => shared}/object-collection/shared/dso-element-decorator.ts (77%)
 create mode 100644 src/app/shared/object-collection/shared/item-search-result.model.ts
 rename src/app/{ => shared}/object-collection/shared/listable-object.model.ts (100%)
 rename src/app/{ => shared}/object-grid/collection-grid-element/collection-grid-element.component.html (100%)
 create mode 100644 src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss
 rename src/app/{ => shared}/object-grid/collection-grid-element/collection-grid-element.component.spec.ts (100%)
 rename src/app/{ => shared}/object-grid/collection-grid-element/collection-grid-element.component.ts (80%)
 rename src/app/{ => shared}/object-grid/community-grid-element/community-grid-element.component.html (100%)
 create mode 100644 src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss
 rename src/app/{ => shared}/object-grid/community-grid-element/community-grid-element.component.ts (80%)
 rename src/app/{ => shared}/object-grid/grid-card-styling.scss (94%)
 rename src/app/{ => shared}/object-grid/grid-thumbnail/grid-thumbnail.component.html (100%)
 create mode 100644 src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss
 rename src/app/{ => shared}/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts (91%)
 rename src/app/{ => shared}/object-grid/grid-thumbnail/grid-thumbnail.component.ts (95%)
 rename src/app/{ => shared}/object-grid/item-grid-element/item-grid-element.component.html (100%)
 create mode 100644 src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss
 rename src/app/{ => shared}/object-grid/item-grid-element/item-grid-element.component.spec.ts (100%)
 rename src/app/{ => shared}/object-grid/item-grid-element/item-grid-element.component.ts (80%)
 rename src/app/{ => shared}/object-grid/object-grid-element/object-grid-element.component.html (100%)
 create mode 100644 src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss
 rename src/app/{ => shared}/object-grid/object-grid-element/object-grid-element.component.ts (100%)
 rename src/app/{ => shared}/object-grid/object-grid.component.html (100%)
 create mode 100644 src/app/shared/object-grid/object-grid.component.scss
 rename src/app/{ => shared}/object-grid/object-grid.component.spec.ts (100%)
 rename src/app/{ => shared}/object-grid/object-grid.component.ts (88%)
 rename src/app/{ => shared}/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html (100%)
 create mode 100644 src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
 rename src/app/{ => shared}/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts (84%)
 create mode 100644 src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts
 rename src/app/{ => shared}/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html (100%)
 create mode 100644 src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
 rename src/app/{ => shared}/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts (84%)
 create mode 100644 src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result.model.ts
 rename src/app/{ => shared}/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html (100%)
 create mode 100644 src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
 rename src/app/{ => shared}/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts (84%)
 rename src/app/{ => shared}/object-grid/search-result-grid-element/search-result-grid-element.component.scss (51%)
 rename src/app/{ => shared}/object-grid/search-result-grid-element/search-result-grid-element.component.ts (83%)
 rename src/app/{ => shared}/object-grid/wrapper-grid-element/wrapper-grid-element.component.html (100%)
 create mode 100644 src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
 rename src/app/{ => shared}/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts (100%)
 rename src/app/{ => shared}/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts (86%)
 rename src/app/{ => shared}/object-list/collection-list-element/collection-list-element.component.html (100%)
 create mode 100644 src/app/shared/object-list/collection-list-element/collection-list-element.component.scss
 rename src/app/{ => shared}/object-list/collection-list-element/collection-list-element.component.ts (80%)
 rename src/app/{ => shared}/object-list/community-list-element/community-list-element.component.html (100%)
 create mode 100644 src/app/shared/object-list/community-list-element/community-list-element.component.scss
 rename src/app/{ => shared}/object-list/community-list-element/community-list-element.component.ts (80%)
 rename src/app/{ => shared}/object-list/item-list-element/item-list-element.component.html (100%)
 create mode 100644 src/app/shared/object-list/item-list-element/item-list-element.component.scss
 rename src/app/{ => shared}/object-list/item-list-element/item-list-element.component.ts (80%)
 rename src/app/{ => shared}/object-list/object-list-element/object-list-element.component.html (100%)
 rename src/app/{ => shared}/object-list/object-list-element/object-list-element.component.scss (56%)
 rename src/app/{ => shared}/object-list/object-list-element/object-list-element.component.ts (100%)
 rename src/app/{ => shared}/object-list/object-list.component.html (100%)
 create mode 100644 src/app/shared/object-list/object-list.component.scss
 rename src/app/{ => shared}/object-list/object-list.component.ts (90%)
 rename src/app/{ => shared}/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html (100%)
 create mode 100644 src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss
 rename src/app/{ => shared}/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.ts (84%)
 create mode 100644 src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result.model.ts
 rename src/app/{ => shared}/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html (100%)
 create mode 100644 src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss
 rename src/app/{ => shared}/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.ts (84%)
 create mode 100644 src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result.model.ts
 rename src/app/{ => shared}/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html (100%)
 create mode 100644 src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss
 rename src/app/{ => shared}/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts (84%)
 rename src/app/{ => shared}/object-list/search-result-list-element/search-result-list-element.component.scss (67%)
 rename src/app/{ => shared}/object-list/search-result-list-element/search-result-list-element.component.ts (83%)
 rename src/app/{ => shared}/object-list/wrapper-list-element/wrapper-list-element.component.html (100%)
 create mode 100644 src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.scss
 rename src/app/{ => shared}/object-list/wrapper-list-element/wrapper-list-element.component.ts (86%)

diff --git a/src/app/+search-page/search-page.module.ts b/src/app/+search-page/search-page.module.ts
index be99a0eae4..7c2001c909 100644
--- a/src/app/+search-page/search-page.module.ts
+++ b/src/app/+search-page/search-page.module.ts
@@ -4,12 +4,12 @@ import { SharedModule } from '../shared/shared.module';
 import { SearchPageRoutingModule } from './search-page-routing.module';
 import { SearchPageComponent } from './search-page.component';
 import { SearchResultsComponent } from './search-results/search-results.component';
-import { ItemSearchResultListElementComponent } from '../object-list/search-result-list-element/item-search-result/item-search-result-list-element.component';
-import { CollectionSearchResultListElementComponent } from '../object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component';
-import { CommunitySearchResultListElementComponent } from '../object-list/search-result-list-element/community-search-result/community-search-result-list-element.component';
-import { ItemSearchResultGridElementComponent } from '../object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component';
-import { CommunitySearchResultGridElementComponent } from '../object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component'
-import { CollectionSearchResultGridElementComponent } from '../object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component';
+import { ItemSearchResultListElementComponent } from '../shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component';
+import { CollectionSearchResultListElementComponent } from '../shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component';
+import { CommunitySearchResultListElementComponent } from '../shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component';
+import { ItemSearchResultGridElementComponent } from '../shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component';
+import { CommunitySearchResultGridElementComponent } from '../shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component'
+import { CollectionSearchResultGridElementComponent } from '../shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component';
 import { SearchService } from './search-service/search.service';
 import { SearchSidebarComponent } from './search-sidebar/search-sidebar.component';
 import { SearchSidebarService } from './search-sidebar/search-sidebar.service';
diff --git a/src/app/+search-page/search-result.model.ts b/src/app/+search-page/search-result.model.ts
index 602d8ac9c2..cc2bd8cd58 100644
--- a/src/app/+search-page/search-result.model.ts
+++ b/src/app/+search-page/search-result.model.ts
@@ -1,6 +1,6 @@
 import { DSpaceObject } from '../core/shared/dspace-object.model';
 import { Metadatum } from '../core/shared/metadatum.model';
-import { ListableObject } from '../object-collection/shared/listable-object.model';
+import { ListableObject } from '../shared/object-collection/shared/listable-object.model';
 
 export class SearchResult<T extends DSpaceObject> implements ListableObject {
 
diff --git a/src/app/+search-page/search-service/search.service.ts b/src/app/+search-page/search-service/search.service.ts
index 5258756bfb..63b1b04dce 100644
--- a/src/app/+search-page/search-service/search.service.ts
+++ b/src/app/+search-page/search-service/search.service.ts
@@ -15,6 +15,7 @@ import { FacetValue } from './facet-value.model';
 import { ItemSearchResult } from '../../object-collection/shared/item-search-result.model';
 import { ViewMode } from '../../+search-page/search-options.model';
 import { Router, NavigationExtras, ActivatedRoute } from '@angular/router';
+import { ItemSearchResult } from '../../shared/object-collection/shared/item-search-result.model';
 import { RouteService } from '../../shared/route.service';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { SortOptions } from '../../core/cache/models/sort-options.model';
diff --git a/src/app/core/shared/dspace-object.model.ts b/src/app/core/shared/dspace-object.model.ts
index a17a6b31ce..8f96f2485a 100644
--- a/src/app/core/shared/dspace-object.model.ts
+++ b/src/app/core/shared/dspace-object.model.ts
@@ -3,7 +3,7 @@ import { isEmpty, isNotEmpty } from '../../shared/empty.util';
 import { CacheableObject } from '../cache/object-cache.reducer';
 import { RemoteData } from '../data/remote-data';
 import { ResourceType } from './resource-type';
-import { ListableObject } from '../../object-collection/shared/listable-object.model';
+import { ListableObject } from '../../shared/object-collection/shared/listable-object.model';
 import { Observable } from 'rxjs/Observable';
 
 /**
diff --git a/src/app/object-collection/object-collection.component.scss b/src/app/object-collection/object-collection.component.scss
deleted file mode 100644
index da97dd7a62..0000000000
--- a/src/app/object-collection/object-collection.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../styles/variables.scss';
diff --git a/src/app/object-collection/shared/item-search-result.model.ts b/src/app/object-collection/shared/item-search-result.model.ts
deleted file mode 100644
index 75d56a2488..0000000000
--- a/src/app/object-collection/shared/item-search-result.model.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { SearchResult } from '../../+search-page/search-result.model';
-import { Item } from '../../core/shared/item.model';
-
-export class ItemSearchResult extends SearchResult<Item> {
-}
diff --git a/src/app/object-grid/collection-grid-element/collection-grid-element.component.scss b/src/app/object-grid/collection-grid-element/collection-grid-element.component.scss
deleted file mode 100644
index 48e2b121d4..0000000000
--- a/src/app/object-grid/collection-grid-element/collection-grid-element.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../styles/variables.scss';
-@import '../grid-card-styling.scss';
diff --git a/src/app/object-grid/community-grid-element/community-grid-element.component.scss b/src/app/object-grid/community-grid-element/community-grid-element.component.scss
deleted file mode 100644
index 48e2b121d4..0000000000
--- a/src/app/object-grid/community-grid-element/community-grid-element.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../styles/variables.scss';
-@import '../grid-card-styling.scss';
diff --git a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.scss b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.scss
deleted file mode 100644
index 50be6f5ad0..0000000000
--- a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';
diff --git a/src/app/object-grid/item-grid-element/item-grid-element.component.scss b/src/app/object-grid/item-grid-element/item-grid-element.component.scss
deleted file mode 100644
index 48e2b121d4..0000000000
--- a/src/app/object-grid/item-grid-element/item-grid-element.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../styles/variables.scss';
-@import '../grid-card-styling.scss';
diff --git a/src/app/object-grid/object-grid-element/object-grid-element.component.scss b/src/app/object-grid/object-grid-element/object-grid-element.component.scss
deleted file mode 100644
index 0351acf15f..0000000000
--- a/src/app/object-grid/object-grid-element/object-grid-element.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import '../../../styles/variables.scss';
-@import '../grid-card-styling.scss';
-:host {
-  display: block;
-  margin-bottom: $spacer;
-}
diff --git a/src/app/object-grid/object-grid.component.scss b/src/app/object-grid/object-grid.component.scss
deleted file mode 100644
index da97dd7a62..0000000000
--- a/src/app/object-grid/object-grid.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../styles/variables.scss';
diff --git a/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
deleted file mode 100644
index 790f794381..0000000000
--- a/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../styles/variables.scss';
-@import '../../grid-card-styling.scss';
diff --git a/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts
deleted file mode 100644
index fa7945dedd..0000000000
--- a/src/app/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/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss b/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
deleted file mode 100644
index 790f794381..0000000000
--- a/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../styles/variables.scss';
-@import '../../grid-card-styling.scss';
diff --git a/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result.model.ts b/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result.model.ts
deleted file mode 100644
index 79ea34b6cd..0000000000
--- a/src/app/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/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
deleted file mode 100644
index 790f794381..0000000000
--- a/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../styles/variables.scss';
-@import '../../grid-card-styling.scss';
diff --git a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss b/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
deleted file mode 100644
index 48e2b121d4..0000000000
--- a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../styles/variables.scss';
-@import '../grid-card-styling.scss';
diff --git a/src/app/object-list/collection-list-element/collection-list-element.component.scss b/src/app/object-list/collection-list-element/collection-list-element.component.scss
deleted file mode 100644
index ad84b72f8c..0000000000
--- a/src/app/object-list/collection-list-element/collection-list-element.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/object-list/community-list-element/community-list-element.component.scss b/src/app/object-list/community-list-element/community-list-element.component.scss
deleted file mode 100644
index ad84b72f8c..0000000000
--- a/src/app/object-list/community-list-element/community-list-element.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/object-list/item-list-element/item-list-element.component.scss b/src/app/object-list/item-list-element/item-list-element.component.scss
deleted file mode 100644
index ad84b72f8c..0000000000
--- a/src/app/object-list/item-list-element/item-list-element.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/object-list/object-list.component.scss b/src/app/object-list/object-list.component.scss
deleted file mode 100644
index b14c7376e3..0000000000
--- a/src/app/object-list/object-list.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss b/src/app/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss
deleted file mode 100644
index 88eb98509a..0000000000
--- a/src/app/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/object-list/search-result-list-element/collection-search-result/collection-search-result.model.ts b/src/app/object-list/search-result-list-element/collection-search-result/collection-search-result.model.ts
deleted file mode 100644
index fa7945dedd..0000000000
--- a/src/app/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/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss b/src/app/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss
deleted file mode 100644
index 88eb98509a..0000000000
--- a/src/app/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/object-list/search-result-list-element/community-search-result/community-search-result.model.ts b/src/app/object-list/search-result-list-element/community-search-result/community-search-result.model.ts
deleted file mode 100644
index 79ea34b6cd..0000000000
--- a/src/app/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/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
deleted file mode 100644
index 88eb98509a..0000000000
--- a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/object-list/wrapper-list-element/wrapper-list-element.component.scss b/src/app/object-list/wrapper-list-element/wrapper-list-element.component.scss
deleted file mode 100644
index 6f997644cc..0000000000
--- a/src/app/object-list/wrapper-list-element/wrapper-list-element.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../styles/variables.scss';
-
diff --git a/src/app/object-collection/object-collection.component.html b/src/app/shared/object-collection/object-collection.component.html
similarity index 100%
rename from src/app/object-collection/object-collection.component.html
rename to src/app/shared/object-collection/object-collection.component.html
diff --git a/src/app/shared/object-collection/object-collection.component.scss b/src/app/shared/object-collection/object-collection.component.scss
new file mode 100644
index 0000000000..48e6526dff
--- /dev/null
+++ b/src/app/shared/object-collection/object-collection.component.scss
@@ -0,0 +1 @@
+@import '../../../styles/variables';
diff --git a/src/app/object-collection/object-collection.component.spec.ts b/src/app/shared/object-collection/object-collection.component.spec.ts
similarity index 90%
rename from src/app/object-collection/object-collection.component.spec.ts
rename to src/app/shared/object-collection/object-collection.component.spec.ts
index abbf66e4f1..a56a3e56dc 100644
--- a/src/app/object-collection/object-collection.component.spec.ts
+++ b/src/app/shared/object-collection/object-collection.component.spec.ts
@@ -1,13 +1,13 @@
 import { ObjectCollectionComponent } from './object-collection.component';
-import { ViewMode } from '../+search-page/search-options.model';
+import { ViewMode } from '../../+search-page/search-options.model';
 import { element } from 'protractor';
 import { By } from '@angular/platform-browser';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { Config } from '../../config/config.interface';
+import { Config } from '../../../config/config.interface';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
-import { RouterStub } from '../shared/testing/router-stub';
+import { RouterStub } from '../testing/router-stub';
 
 describe('ObjectCollectionComponent', () => {
   let fixture: ComponentFixture<ObjectCollectionComponent>;
diff --git a/src/app/object-collection/object-collection.component.ts b/src/app/shared/object-collection/object-collection.component.ts
similarity index 87%
rename from src/app/object-collection/object-collection.component.ts
rename to src/app/shared/object-collection/object-collection.component.ts
index a79653d970..8d5a9ce3c7 100644
--- a/src/app/object-collection/object-collection.component.ts
+++ b/src/app/shared/object-collection/object-collection.component.ts
@@ -6,16 +6,16 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 import { Observable } from 'rxjs/Observable';
 
-import { RemoteData } from '../core/data/remote-data';
-import { PageInfo } from '../core/shared/page-info.model';
+import { RemoteData } from '../../core/data/remote-data';
+import { PageInfo } from '../../core/shared/page-info.model';
 
-import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
+import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
 
-import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
+import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
 
 import { ListableObject } from './shared/listable-object.model';
-import { ViewMode } from '../+search-page/search-options.model';
-import { hasValue, isNotEmpty } from '../shared/empty.util';
+import { ViewMode } from '../../+search-page/search-options.model';
+import { hasValue, isNotEmpty } from '../empty.util';
 
 @Component({
   selector: 'ds-viewable-collection',
diff --git a/src/app/object-collection/shared/dso-element-decorator.spec.ts b/src/app/shared/object-collection/shared/dso-element-decorator.spec.ts
similarity index 80%
rename from src/app/object-collection/shared/dso-element-decorator.spec.ts
rename to src/app/shared/object-collection/shared/dso-element-decorator.spec.ts
index 952afb9ac3..b4b27bb52a 100644
--- a/src/app/object-collection/shared/dso-element-decorator.spec.ts
+++ b/src/app/shared/object-collection/shared/dso-element-decorator.spec.ts
@@ -1,6 +1,6 @@
-import { ViewMode } from '../../+search-page/search-options.model';
+import { ViewMode } from '../../../+search-page/search-options.model';
 import { renderElementsFor } from './dso-element-decorator';
-import { Item } from '../../core/shared/item.model';
+import { Item } from '../../../core/shared/item.model';
 
 describe('ElementDecorator', () => {
   let gridDecorator = renderElementsFor(Item, ViewMode.Grid);
diff --git a/src/app/object-collection/shared/dso-element-decorator.ts b/src/app/shared/object-collection/shared/dso-element-decorator.ts
similarity index 77%
rename from src/app/object-collection/shared/dso-element-decorator.ts
rename to src/app/shared/object-collection/shared/dso-element-decorator.ts
index 310a65f056..5dc085d3a7 100644
--- a/src/app/object-collection/shared/dso-element-decorator.ts
+++ b/src/app/shared/object-collection/shared/dso-element-decorator.ts
@@ -1,6 +1,6 @@
-import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { GenericConstructor } from '../../../core/shared/generic-constructor';
 import { ListableObject } from './listable-object.model';
-import { ViewMode } from '../../+search-page/search-options.model';
+import { ViewMode } from '../../../+search-page/search-options.model';
 
 const dsoElementMap = new Map();
 export function renderElementsFor(listable: GenericConstructor<ListableObject>, viewMode : ViewMode) {
diff --git a/src/app/shared/object-collection/shared/item-search-result.model.ts b/src/app/shared/object-collection/shared/item-search-result.model.ts
new file mode 100644
index 0000000000..d9af3539a0
--- /dev/null
+++ b/src/app/shared/object-collection/shared/item-search-result.model.ts
@@ -0,0 +1,5 @@
+import { SearchResult } from '../../../+search-page/search-result.model';
+import { Item } from '../../../core/shared/item.model';
+
+export class ItemSearchResult extends SearchResult<Item> {
+}
diff --git a/src/app/object-collection/shared/listable-object.model.ts b/src/app/shared/object-collection/shared/listable-object.model.ts
similarity index 100%
rename from src/app/object-collection/shared/listable-object.model.ts
rename to src/app/shared/object-collection/shared/listable-object.model.ts
diff --git a/src/app/object-grid/collection-grid-element/collection-grid-element.component.html b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html
similarity index 100%
rename from src/app/object-grid/collection-grid-element/collection-grid-element.component.html
rename to src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html
diff --git a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss
new file mode 100644
index 0000000000..946c8a6a31
--- /dev/null
+++ b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../styles/variables';
+@import '../grid-card-styling';
diff --git a/src/app/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
similarity index 100%
rename from src/app/object-grid/collection-grid-element/collection-grid-element.component.spec.ts
rename to src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.spec.ts
diff --git a/src/app/object-grid/collection-grid-element/collection-grid-element.component.ts b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.ts
similarity index 80%
rename from src/app/object-grid/collection-grid-element/collection-grid-element.component.ts
rename to src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.ts
index 7e2ae5f468..09aadab15e 100644
--- a/src/app/object-grid/collection-grid-element/collection-grid-element.component.ts
+++ b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.ts
@@ -1,9 +1,9 @@
 import { Component, Inject } from '@angular/core';
 
-import { Collection } from '../../core/shared/collection.model';
+import { Collection } from '../../../core/shared/collection.model';
 import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
 import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
-import { ViewMode } from '../../+search-page/search-options.model';
+import { ViewMode } from '../../../+search-page/search-options.model';
 
 
 @Component({
diff --git a/src/app/object-grid/community-grid-element/community-grid-element.component.html b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.html
similarity index 100%
rename from src/app/object-grid/community-grid-element/community-grid-element.component.html
rename to src/app/shared/object-grid/community-grid-element/community-grid-element.component.html
diff --git a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss
new file mode 100644
index 0000000000..946c8a6a31
--- /dev/null
+++ b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../styles/variables';
+@import '../grid-card-styling';
diff --git a/src/app/object-grid/community-grid-element/community-grid-element.component.ts b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.ts
similarity index 80%
rename from src/app/object-grid/community-grid-element/community-grid-element.component.ts
rename to src/app/shared/object-grid/community-grid-element/community-grid-element.component.ts
index 76ee6736be..d40bd717a4 100644
--- a/src/app/object-grid/community-grid-element/community-grid-element.component.ts
+++ b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.ts
@@ -1,9 +1,9 @@
 import { Component, Input, Inject } from '@angular/core';
 
-import { Community } from '../../core/shared/community.model';
+import { Community } from '../../../core/shared/community.model';
 import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
 import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
-import { ViewMode } from '../../+search-page/search-options.model';
+import { ViewMode } from '../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-community-grid-element',
diff --git a/src/app/object-grid/grid-card-styling.scss b/src/app/shared/object-grid/grid-card-styling.scss
similarity index 94%
rename from src/app/object-grid/grid-card-styling.scss
rename to src/app/shared/object-grid/grid-card-styling.scss
index b25c603b55..2fe199d1ce 100644
--- a/src/app/object-grid/grid-card-styling.scss
+++ b/src/app/shared/object-grid/grid-card-styling.scss
@@ -1,4 +1,4 @@
-@import '../../styles/custom_variables';
+@import '../../../styles/custom_variables';
 
 .card-title{
   line-height: $line-height-base;
diff --git a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.html b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html
similarity index 100%
rename from src/app/object-grid/grid-thumbnail/grid-thumbnail.component.html
rename to src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html
diff --git a/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss
new file mode 100644
index 0000000000..45a533cd01
--- /dev/null
+++ b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss
@@ -0,0 +1 @@
+@import '../../../../styles/variables';
diff --git a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
similarity index 91%
rename from src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
rename to src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
index 209ac52997..2d2bd6305a 100644
--- a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
+++ b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
@@ -3,8 +3,8 @@ import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
 
 import { GridThumbnailComponent } from './grid-thumbnail.component';
-import { Bitstream } from '../../core/shared/bitstream.model';
-import { SafeUrlPipe } from '../../shared/utils/safe-url-pipe';
+import { Bitstream } from '../../../core/shared/bitstream.model';
+import { SafeUrlPipe } from '../../utils/safe-url-pipe';
 
 describe('ThumbnailComponent', () => {
   let comp: GridThumbnailComponent;
diff --git a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.ts b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.ts
similarity index 95%
rename from src/app/object-grid/grid-thumbnail/grid-thumbnail.component.ts
rename to src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.ts
index 7baa47b39e..8ca93470da 100644
--- a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.ts
+++ b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { Bitstream } from '../../core/shared/bitstream.model';
+import { Bitstream } from '../../../core/shared/bitstream.model';
 
 /**
  * This component renders a given Bitstream as a thumbnail.
diff --git a/src/app/object-grid/item-grid-element/item-grid-element.component.html b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.html
similarity index 100%
rename from src/app/object-grid/item-grid-element/item-grid-element.component.html
rename to src/app/shared/object-grid/item-grid-element/item-grid-element.component.html
diff --git a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss
new file mode 100644
index 0000000000..946c8a6a31
--- /dev/null
+++ b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../styles/variables';
+@import '../grid-card-styling';
diff --git a/src/app/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
similarity index 100%
rename from src/app/object-grid/item-grid-element/item-grid-element.component.spec.ts
rename to src/app/shared/object-grid/item-grid-element/item-grid-element.component.spec.ts
diff --git a/src/app/object-grid/item-grid-element/item-grid-element.component.ts b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.ts
similarity index 80%
rename from src/app/object-grid/item-grid-element/item-grid-element.component.ts
rename to src/app/shared/object-grid/item-grid-element/item-grid-element.component.ts
index e11c51312a..c41a6c9352 100644
--- a/src/app/object-grid/item-grid-element/item-grid-element.component.ts
+++ b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.ts
@@ -1,9 +1,9 @@
 import { Component, Input, Inject } from '@angular/core';
 
-import { Item } from '../../core/shared/item.model';
+import { Item } from '../../../core/shared/item.model';
 import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
 import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
-import { ViewMode } from '../../+search-page/search-options.model';
+import { ViewMode } from '../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-item-grid-element',
diff --git a/src/app/object-grid/object-grid-element/object-grid-element.component.html b/src/app/shared/object-grid/object-grid-element/object-grid-element.component.html
similarity index 100%
rename from src/app/object-grid/object-grid-element/object-grid-element.component.html
rename to src/app/shared/object-grid/object-grid-element/object-grid-element.component.html
diff --git a/src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss b/src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss
new file mode 100644
index 0000000000..d299edd0ab
--- /dev/null
+++ b/src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss
@@ -0,0 +1,6 @@
+@import '../../../../styles/variables';
+@import '../grid-card-styling';
+:host {
+  display: block;
+  margin-bottom: $spacer;
+}
diff --git a/src/app/object-grid/object-grid-element/object-grid-element.component.ts b/src/app/shared/object-grid/object-grid-element/object-grid-element.component.ts
similarity index 100%
rename from src/app/object-grid/object-grid-element/object-grid-element.component.ts
rename to src/app/shared/object-grid/object-grid-element/object-grid-element.component.ts
diff --git a/src/app/object-grid/object-grid.component.html b/src/app/shared/object-grid/object-grid.component.html
similarity index 100%
rename from src/app/object-grid/object-grid.component.html
rename to src/app/shared/object-grid/object-grid.component.html
diff --git a/src/app/shared/object-grid/object-grid.component.scss b/src/app/shared/object-grid/object-grid.component.scss
new file mode 100644
index 0000000000..48e6526dff
--- /dev/null
+++ b/src/app/shared/object-grid/object-grid.component.scss
@@ -0,0 +1 @@
+@import '../../../styles/variables';
diff --git a/src/app/object-grid/object-grid.component.spec.ts b/src/app/shared/object-grid/object-grid.component.spec.ts
similarity index 100%
rename from src/app/object-grid/object-grid.component.spec.ts
rename to src/app/shared/object-grid/object-grid.component.spec.ts
diff --git a/src/app/object-grid/object-grid.component.ts b/src/app/shared/object-grid/object-grid.component.ts
similarity index 88%
rename from src/app/object-grid/object-grid.component.ts
rename to src/app/shared/object-grid/object-grid.component.ts
index a6b62d735f..c811d90d62 100644
--- a/src/app/object-grid/object-grid.component.ts
+++ b/src/app/shared/object-grid/object-grid.component.ts
@@ -8,13 +8,13 @@ import {
 } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 
-import { RemoteData } from '../core/data/remote-data';
-import { PageInfo } from '../core/shared/page-info.model';
+import { RemoteData } from '../../core/data/remote-data';
+import { PageInfo } from '../../core/shared/page-info.model';
 
-import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
+import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
 
-import { SortOptions, SortDirection } from '../core/cache/models/sort-options.model';
-import { fadeIn } from '../shared/animations/fade';
+import { SortOptions, SortDirection } from '../../core/cache/models/sort-options.model';
+import { fadeIn } from '../animations/fade';
 import { ListableObject } from '../object-collection/shared/listable-object.model';
 
 @Component({
diff --git a/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
similarity index 100%
rename from src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
rename to src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
diff --git a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
new file mode 100644
index 0000000000..2867dd78ac
--- /dev/null
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../../styles/variables';
+@import '../../grid-card-styling';
diff --git a/src/app/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
similarity index 84%
rename from src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts
rename to src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts
index 6c5e526d15..0228107a57 100644
--- a/src/app/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
@@ -4,8 +4,8 @@ import { renderElementsFor} from '../../../object-collection/shared/dso-element-
 
 import { CollectionSearchResult } from './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';
+import { Collection } from '../../../../core/shared/collection.model';
+import { ViewMode } from '../../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-collection-search-result-grid-element',
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
new file mode 100644
index 0000000000..ad48247e70
--- /dev/null
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts
@@ -0,0 +1,5 @@
+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/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
similarity index 100%
rename from src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
rename to src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
diff --git a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
new file mode 100644
index 0000000000..2867dd78ac
--- /dev/null
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../../styles/variables';
+@import '../../grid-card-styling';
diff --git a/src/app/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
similarity index 84%
rename from src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
rename to src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
index b6aa4bdb6d..4876a784fc 100644
--- a/src/app/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 { 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 { ViewMode } from '../../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-community-search-result-grid-element',
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
new file mode 100644
index 0000000000..efeb328e11
--- /dev/null
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/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/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
similarity index 100%
rename from src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
rename to src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
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
new file mode 100644
index 0000000000..2867dd78ac
--- /dev/null
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../../styles/variables';
+@import '../../grid-card-styling';
diff --git a/src/app/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
similarity index 84%
rename from src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
rename to src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
index d4989d2efd..f9fe13cb88 100644
--- a/src/app/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
@@ -2,9 +2,9 @@ import { Component } from '@angular/core';
 
 import { renderElementsFor } from '../../../object-collection/shared/dso-element-decorator';
 import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
-import { Item } from '../../../core/shared/item.model';
+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 { ViewMode } from '../../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-item-search-result-grid-element',
diff --git a/src/app/object-grid/search-result-grid-element/search-result-grid-element.component.scss b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss
similarity index 51%
rename from src/app/object-grid/search-result-grid-element/search-result-grid-element.component.scss
rename to src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss
index 0f2684f1f1..ebec5817e6 100644
--- a/src/app/object-grid/search-result-grid-element/search-result-grid-element.component.scss
+++ b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss
@@ -1,5 +1,5 @@
- @import '../../../styles/variables.scss';
- @import '../grid-card-styling.scss';
+ @import '../../../../styles/variables';
+ @import '../grid-card-styling';
 :host {
     /deep/ em {
         font-weight: bold;
diff --git a/src/app/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
similarity index 83%
rename from src/app/object-grid/search-result-grid-element/search-result-grid-element.component.ts
rename to src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts
index ba98a58d4b..052a9377b5 100644
--- a/src/app/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
@@ -1,9 +1,9 @@
 import { Component, Inject } from '@angular/core';
 
-import { SearchResult } from '../../+search-page/search-result.model';
-import { DSpaceObject } from '../../core/shared/dspace-object.model';
-import { Metadatum } from '../../core/shared/metadatum.model';
-import { isEmpty, hasNoValue } from '../../shared/empty.util';
+import { SearchResult } from '../../../+search-page/search-result.model';
+import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+import { Metadatum } from '../../../core/shared/metadatum.model';
+import { isEmpty, hasNoValue } from '../../empty.util';
 import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
 import { ListableObject } from '../../object-collection/shared/listable-object.model';
 
diff --git a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.html b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.html
similarity index 100%
rename from src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.html
rename to src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.html
diff --git a/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
new file mode 100644
index 0000000000..946c8a6a31
--- /dev/null
+++ b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../styles/variables';
+@import '../grid-card-styling';
diff --git a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts
similarity index 100%
rename from src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts
rename to src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts
diff --git a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
similarity index 86%
rename from src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
rename to src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
index 000c826188..912df16786 100644
--- a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
+++ b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
@@ -1,8 +1,8 @@
 import { Component, Input, Injector, ReflectiveInjector, OnInit } from '@angular/core';
-import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { GenericConstructor } from '../../../core/shared/generic-constructor';
 import { rendersDSOType } from '../../object-collection/shared/dso-element-decorator';
 import { ListableObject } from '../../object-collection/shared/listable-object.model';
-import { ViewMode } from '../../+search-page/search-options.model';
+import { ViewMode } from '../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-wrapper-grid-element',
diff --git a/src/app/object-list/collection-list-element/collection-list-element.component.html b/src/app/shared/object-list/collection-list-element/collection-list-element.component.html
similarity index 100%
rename from src/app/object-list/collection-list-element/collection-list-element.component.html
rename to src/app/shared/object-list/collection-list-element/collection-list-element.component.html
diff --git a/src/app/shared/object-list/collection-list-element/collection-list-element.component.scss b/src/app/shared/object-list/collection-list-element/collection-list-element.component.scss
new file mode 100644
index 0000000000..45a533cd01
--- /dev/null
+++ b/src/app/shared/object-list/collection-list-element/collection-list-element.component.scss
@@ -0,0 +1 @@
+@import '../../../../styles/variables';
diff --git a/src/app/object-list/collection-list-element/collection-list-element.component.ts b/src/app/shared/object-list/collection-list-element/collection-list-element.component.ts
similarity index 80%
rename from src/app/object-list/collection-list-element/collection-list-element.component.ts
rename to src/app/shared/object-list/collection-list-element/collection-list-element.component.ts
index c065a64b72..5e08e8ef3a 100644
--- a/src/app/object-list/collection-list-element/collection-list-element.component.ts
+++ b/src/app/shared/object-list/collection-list-element/collection-list-element.component.ts
@@ -1,9 +1,9 @@
 import { Component, Inject } from '@angular/core';
 
-import { Collection } from '../../core/shared/collection.model';
+import { Collection } from '../../../core/shared/collection.model';
 import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
 import { renderElementsFor } from '../../object-collection/shared/dso-element-decorator';
-import { ViewMode } from '../../+search-page/search-options.model';
+import { ViewMode } from '../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-collection-list-element',
diff --git a/src/app/object-list/community-list-element/community-list-element.component.html b/src/app/shared/object-list/community-list-element/community-list-element.component.html
similarity index 100%
rename from src/app/object-list/community-list-element/community-list-element.component.html
rename to src/app/shared/object-list/community-list-element/community-list-element.component.html
diff --git a/src/app/shared/object-list/community-list-element/community-list-element.component.scss b/src/app/shared/object-list/community-list-element/community-list-element.component.scss
new file mode 100644
index 0000000000..45a533cd01
--- /dev/null
+++ b/src/app/shared/object-list/community-list-element/community-list-element.component.scss
@@ -0,0 +1 @@
+@import '../../../../styles/variables';
diff --git a/src/app/object-list/community-list-element/community-list-element.component.ts b/src/app/shared/object-list/community-list-element/community-list-element.component.ts
similarity index 80%
rename from src/app/object-list/community-list-element/community-list-element.component.ts
rename to src/app/shared/object-list/community-list-element/community-list-element.component.ts
index 11ff392942..cd6e6f7574 100644
--- a/src/app/object-list/community-list-element/community-list-element.component.ts
+++ b/src/app/shared/object-list/community-list-element/community-list-element.component.ts
@@ -1,9 +1,9 @@
 import { Component, Input, Inject } from '@angular/core';
 
-import { Community } from '../../core/shared/community.model';
+import { Community } from '../../../core/shared/community.model';
 import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
 import { renderElementsFor } from '../../object-collection/shared/dso-element-decorator';
-import { ViewMode } from '../../+search-page/search-options.model';
+import { ViewMode } from '../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-community-list-element',
diff --git a/src/app/object-list/item-list-element/item-list-element.component.html b/src/app/shared/object-list/item-list-element/item-list-element.component.html
similarity index 100%
rename from src/app/object-list/item-list-element/item-list-element.component.html
rename to src/app/shared/object-list/item-list-element/item-list-element.component.html
diff --git a/src/app/shared/object-list/item-list-element/item-list-element.component.scss b/src/app/shared/object-list/item-list-element/item-list-element.component.scss
new file mode 100644
index 0000000000..45a533cd01
--- /dev/null
+++ b/src/app/shared/object-list/item-list-element/item-list-element.component.scss
@@ -0,0 +1 @@
+@import '../../../../styles/variables';
diff --git a/src/app/object-list/item-list-element/item-list-element.component.ts b/src/app/shared/object-list/item-list-element/item-list-element.component.ts
similarity index 80%
rename from src/app/object-list/item-list-element/item-list-element.component.ts
rename to src/app/shared/object-list/item-list-element/item-list-element.component.ts
index bdc5733dcd..43c59f0980 100644
--- a/src/app/object-list/item-list-element/item-list-element.component.ts
+++ b/src/app/shared/object-list/item-list-element/item-list-element.component.ts
@@ -1,9 +1,9 @@
 import { Component, Input, Inject } from '@angular/core';
 
-import { Item } from '../../core/shared/item.model';
+import { Item } from '../../../core/shared/item.model';
 import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
 import { renderElementsFor } from '../../object-collection/shared/dso-element-decorator';
-import { ViewMode } from '../../+search-page/search-options.model';
+import { ViewMode } from '../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-item-list-element',
diff --git a/src/app/object-list/object-list-element/object-list-element.component.html b/src/app/shared/object-list/object-list-element/object-list-element.component.html
similarity index 100%
rename from src/app/object-list/object-list-element/object-list-element.component.html
rename to src/app/shared/object-list/object-list-element/object-list-element.component.html
diff --git a/src/app/object-list/object-list-element/object-list-element.component.scss b/src/app/shared/object-list/object-list-element/object-list-element.component.scss
similarity index 56%
rename from src/app/object-list/object-list-element/object-list-element.component.scss
rename to src/app/shared/object-list/object-list-element/object-list-element.component.scss
index 1a22768fe8..f96f4ae744 100644
--- a/src/app/object-list/object-list-element/object-list-element.component.scss
+++ b/src/app/shared/object-list/object-list-element/object-list-element.component.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import '../../../../styles/variables';
 
 :host {
   display: block;
diff --git a/src/app/object-list/object-list-element/object-list-element.component.ts b/src/app/shared/object-list/object-list-element/object-list-element.component.ts
similarity index 100%
rename from src/app/object-list/object-list-element/object-list-element.component.ts
rename to src/app/shared/object-list/object-list-element/object-list-element.component.ts
diff --git a/src/app/object-list/object-list.component.html b/src/app/shared/object-list/object-list.component.html
similarity index 100%
rename from src/app/object-list/object-list.component.html
rename to src/app/shared/object-list/object-list.component.html
diff --git a/src/app/shared/object-list/object-list.component.scss b/src/app/shared/object-list/object-list.component.scss
new file mode 100644
index 0000000000..48e6526dff
--- /dev/null
+++ b/src/app/shared/object-list/object-list.component.scss
@@ -0,0 +1 @@
+@import '../../../styles/variables';
diff --git a/src/app/object-list/object-list.component.ts b/src/app/shared/object-list/object-list.component.ts
similarity index 90%
rename from src/app/object-list/object-list.component.ts
rename to src/app/shared/object-list/object-list.component.ts
index 9422d1d843..c1e3d21760 100644
--- a/src/app/object-list/object-list.component.ts
+++ b/src/app/shared/object-list/object-list.component.ts
@@ -9,9 +9,14 @@ import {
 
 import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
 
-import { RemoteData } from '../core/data/remote-data';
-import { PageInfo } from '../core/shared/page-info.model';
-import { fadeIn } from '../shared/animations/fade';
+import { RemoteData } from '../../core/data/remote-data';
+import { PageInfo } from '../../core/shared/page-info.model';
+
+import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
+
+import { SortOptions, SortDirection } from '../../core/cache/models/sort-options.model';
+
+import { fadeIn } from '../animations/fade';
 import { ListableObject } from '../object-collection/shared/listable-object.model';
 import { hasValue } from '../shared/empty.util';
 
diff --git a/src/app/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
similarity index 100%
rename from src/app/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html
rename to src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html
diff --git a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss
new file mode 100644
index 0000000000..1d0786105c
--- /dev/null
+++ b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss
@@ -0,0 +1 @@
+@import '../../../../../styles/variables';
diff --git a/src/app/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
similarity index 84%
rename from src/app/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.ts
rename to src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.ts
index 1b5d7ef0ba..5545ea17ec 100644
--- a/src/app/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
@@ -3,8 +3,8 @@ 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 { Collection } from '../../../../core/shared/collection.model';
+import { ViewMode } from '../../../../+search-page/search-options.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
new file mode 100644
index 0000000000..ad48247e70
--- /dev/null
+++ b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result.model.ts
@@ -0,0 +1,5 @@
+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/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
similarity index 100%
rename from src/app/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html
rename to src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html
diff --git a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss
new file mode 100644
index 0000000000..1d0786105c
--- /dev/null
+++ b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss
@@ -0,0 +1 @@
+@import '../../../../../styles/variables';
diff --git a/src/app/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
similarity index 84%
rename from src/app/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.ts
rename to src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.ts
index d9ab001f58..2d96f61833 100644
--- a/src/app/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
@@ -3,8 +3,8 @@ import { Component } from '@angular/core';
 import { renderElementsFor } from '../../../object-collection/shared/dso-element-decorator';
 import { CommunitySearchResult } from './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';
+import { Community } from '../../../../core/shared/community.model';
+import { ViewMode } from '../../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-community-search-result-list-element',
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
new file mode 100644
index 0000000000..efeb328e11
--- /dev/null
+++ b/src/app/shared/object-list/search-result-list-element/community-search-result/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/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
similarity index 100%
rename from src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
rename to src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
diff --git a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss
new file mode 100644
index 0000000000..1d0786105c
--- /dev/null
+++ b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss
@@ -0,0 +1 @@
+@import '../../../../../styles/variables';
diff --git a/src/app/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
similarity index 84%
rename from src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts
rename to src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts
index 929233f1a3..d1011c8c45 100644
--- a/src/app/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
@@ -2,9 +2,9 @@ import { Component } from '@angular/core';
 
 import { renderElementsFor } from '../../../object-collection/shared/dso-element-decorator';
 import { SearchResultListElementComponent } from '../search-result-list-element.component';
-import { Item } from '../../../core/shared/item.model';
+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 { ViewMode } from '../../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-item-search-result-list-element',
diff --git a/src/app/object-list/search-result-list-element/search-result-list-element.component.scss b/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.scss
similarity index 67%
rename from src/app/object-list/search-result-list-element/search-result-list-element.component.scss
rename to src/app/shared/object-list/search-result-list-element/search-result-list-element.component.scss
index 5ec8b5d81b..7134c43dad 100644
--- a/src/app/object-list/search-result-list-element/search-result-list-element.component.scss
+++ b/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.scss
@@ -1,7 +1,7 @@
-@import '../../../styles/variables.scss';
+@import '../../../../styles/variables';
 :host {
     ::ng-deep em {
         font-weight: bold;
         font-style: normal;
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/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
similarity index 83%
rename from src/app/object-list/search-result-list-element/search-result-list-element.component.ts
rename to src/app/shared/object-list/search-result-list-element/search-result-list-element.component.ts
index ec0afde65d..b89bb56da6 100644
--- a/src/app/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
@@ -1,10 +1,10 @@
 import { Component, Inject } from '@angular/core';
 
 import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
-import { SearchResult } from '../../+search-page/search-result.model';
-import { DSpaceObject } from '../../core/shared/dspace-object.model';
-import { Metadatum } from '../../core/shared/metadatum.model';
-import { isEmpty, hasNoValue } from '../../shared/empty.util';
+import { SearchResult } from '../../../+search-page/search-result.model';
+import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+import { Metadatum } from '../../../core/shared/metadatum.model';
+import { isEmpty, hasNoValue } from '../../empty.util';
 import { ListableObject } from '../../object-collection/shared/listable-object.model';
 
 @Component({
diff --git a/src/app/object-list/wrapper-list-element/wrapper-list-element.component.html b/src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.html
similarity index 100%
rename from src/app/object-list/wrapper-list-element/wrapper-list-element.component.html
rename to src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.html
diff --git a/src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.scss b/src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.scss
new file mode 100644
index 0000000000..51a7fc6a55
--- /dev/null
+++ b/src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../styles/variables';
+
diff --git a/src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts b/src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.ts
similarity index 86%
rename from src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts
rename to src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.ts
index ff5591442d..6450babae8 100644
--- a/src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts
+++ b/src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.ts
@@ -1,8 +1,8 @@
 import { Component, Input, Injector, ReflectiveInjector, OnInit } from '@angular/core';
 import { rendersDSOType } from '../../object-collection/shared/dso-element-decorator'
-import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { GenericConstructor } from '../../../core/shared/generic-constructor';
 import { ListableObject } from '../../object-collection/shared/listable-object.model';
-import { ViewMode } from '../../+search-page/search-options.model';
+import { ViewMode } from '../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-wrapper-list-element',
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 8ef05b2f89..7ee5ba56df 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -14,21 +14,21 @@ 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 { CommunityListElementComponent } from '../object-list/community-list-element/community-list-element.component';
-import { ItemListElementComponent } from '../object-list/item-list-element/item-list-element.component';
-import { ObjectListElementComponent } from '../object-list/object-list-element/object-list-element.component';
-import { SearchResultListElementComponent } from '../object-list/search-result-list-element/search-result-list-element.component';
-import { WrapperListElementComponent } from '../object-list/wrapper-list-element/wrapper-list-element.component';
-import { ObjectListComponent } from '../object-list/object-list.component';
+import { CollectionListElementComponent } from './object-list/collection-list-element/collection-list-element.component';
+import { CommunityListElementComponent } from './object-list/community-list-element/community-list-element.component';
+import { ItemListElementComponent } from './object-list/item-list-element/item-list-element.component';
+import { ObjectListElementComponent } from './object-list/object-list-element/object-list-element.component';
+import { SearchResultListElementComponent } from './object-list/search-result-list-element/search-result-list-element.component';
+import { WrapperListElementComponent } from './object-list/wrapper-list-element/wrapper-list-element.component';
+import { ObjectListComponent } from './object-list/object-list.component';
 
-import { CollectionGridElementComponent} from '../object-grid/collection-grid-element/collection-grid-element.component'
-import { CommunityGridElementComponent} from '../object-grid/community-grid-element/community-grid-element.component'
-import { ItemGridElementComponent} from '../object-grid/item-grid-element/item-grid-element.component'
-import { ObjectGridElementComponent} from '../object-grid/object-grid-element/object-grid-element.component'
-import { WrapperGridElementComponent} from '../object-grid/wrapper-grid-element/wrapper-grid-element.component'
-import { ObjectGridComponent } from '../object-grid/object-grid.component';
-import { ObjectCollectionComponent } from '../object-collection/object-collection.component';
+import { CollectionGridElementComponent} from './object-grid/collection-grid-element/collection-grid-element.component'
+import { CommunityGridElementComponent} from './object-grid/community-grid-element/community-grid-element.component'
+import { ItemGridElementComponent} from './object-grid/item-grid-element/item-grid-element.component'
+import { ObjectGridElementComponent} from './object-grid/object-grid-element/object-grid-element.component'
+import { WrapperGridElementComponent} from './object-grid/wrapper-grid-element/wrapper-grid-element.component'
+import { ObjectGridComponent } from './object-grid/object-grid.component';
+import { ObjectCollectionComponent } from './object-collection/object-collection.component';
 import { ComcolPageContentComponent } from './comcol-page-content/comcol-page-content.component';
 import { ComcolPageHeaderComponent } from './comcol-page-header/comcol-page-header.component';
 import { ComcolPageLogoComponent } from './comcol-page-logo/comcol-page-logo.component';
@@ -38,9 +38,9 @@ import { LoadingComponent } from './loading/loading.component';
 import { PaginationComponent } from './pagination/pagination.component';
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component';
 import { SearchFormComponent } from './search-form/search-form.component';
-import { SearchResultGridElementComponent } from '../object-grid/search-result-grid-element/search-result-grid-element.component';
+import { SearchResultGridElementComponent } from './object-grid/search-result-grid-element/search-result-grid-element.component';
 import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component';
-import { GridThumbnailComponent } from '../object-grid/grid-thumbnail/grid-thumbnail.component';
+import { GridThumbnailComponent } from './object-grid/grid-thumbnail/grid-thumbnail.component';
 import { VarDirective } from './utils/var.directive';
 
 const MODULES = [

From 2aa8bdf3c16630cd364c58fd9503b97878445aca Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Mon, 6 Nov 2017 10:08:28 +0100
Subject: [PATCH 09/47] 150 Backup commit

---
 .../object-collection.component.spec.ts       | 13 +++---
 .../collection-grid-element.component.spec.ts | 43 ++++++++++++++++++
 .../community-grid-element.component.spec.ts  | 44 +++++++++++++++++++
 .../item-grid-element.component.spec.ts       | 42 +++++++++++++++++-
 ...-search-result-grid-element.component.html | 14 +++++-
 ...-search-result-grid-element.component.html | 14 +++++-
 .../wrapper-grid-element.component.spec.ts    | 43 ++++++++++++++++++
 7 files changed, 202 insertions(+), 11 deletions(-)
 create mode 100644 src/app/shared/object-grid/community-grid-element/community-grid-element.component.spec.ts

diff --git a/src/app/shared/object-collection/object-collection.component.spec.ts b/src/app/shared/object-collection/object-collection.component.spec.ts
index a56a3e56dc..6793042f35 100644
--- a/src/app/shared/object-collection/object-collection.component.spec.ts
+++ b/src/app/shared/object-collection/object-collection.component.spec.ts
@@ -4,7 +4,7 @@ import { element } from 'protractor';
 import { By } from '@angular/platform-browser';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Config } from '../../../config/config.interface';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
 import { RouterStub } from '../testing/router-stub';
@@ -12,6 +12,7 @@ import { RouterStub } from '../testing/router-stub';
 describe('ObjectCollectionComponent', () => {
   let fixture: ComponentFixture<ObjectCollectionComponent>;
   let objectCollectionComponent: ObjectCollectionComponent;
+
   const queryParam = 'test query';
   const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
   const activatedRouteStub = {
@@ -34,19 +35,21 @@ describe('ObjectCollectionComponent', () => {
   beforeEach(async(() => {
     fixture = TestBed.createComponent(ObjectCollectionComponent);
     objectCollectionComponent = fixture.componentInstance;
+
   }));
   it('should only show the grid component when the viewmode is set to grid', () => {
     objectCollectionComponent.currentMode = ViewMode.Grid;
 
-    // expect(By.css('ds-object-grid')).toEqual(1);
-    // expect(By.css('ds-object-list')).toEqual(0);
+
+    expect(fixture.debugElement.query(By.css('ds-object-grid'))).toBeDefined();
+    expect(fixture.debugElement.query(By.css('ds-object-list'))).toBeNull();
   });
 
   it('should only show the list component when the viewmode is set to list', () => {
     objectCollectionComponent.currentMode = ViewMode.List;
 
-    // expect(By.css('ds-object-list').length).toEqual(1);
-    // expect(By.css('ds-object-grid').length).toEqual(0);
+    expect(fixture.debugElement.query(By.css('ds-object-list'))).toBeDefined();
+    expect(fixture.debugElement.query(By.css('ds-object-grid'))).toBeNull();
   })
 
 });
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 e69de29bb2..a1af8b5a3c 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
@@ -0,0 +1,43 @@
+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 { By } from '@angular/platform-browser';
+
+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
+  })
+};
+
+describe('CollectionGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CollectionGridElementComponent ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useFactory: (collectionGridElementComponent)}
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  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();
+  })
+})
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
new file mode 100644
index 0000000000..f6ab7bc6cd
--- /dev/null
+++ b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.spec.ts
@@ -0,0 +1,44 @@
+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 { By } from '@angular/platform-browser';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
+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
+  })
+};
+describe('CommunityGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommunityGridElementComponent ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useFactory: (communityGridElementComponent)}
+      ],
+
+    schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(CommunityGridElementComponent);
+    communityGridElementComponent = fixture.componentInstance;
+
+  }));
+
+  it('should show the community cards in the 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.spec.ts b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.spec.ts
index 0da99aa697..b4fb9c8029 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,6 +1,44 @@
 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 { By } from '@angular/platform-browser';
+import { TruncatePipe } from '../../utils/truncate.pipe';
 
-describe('ItemGridElementComponent',()=>{
-  let itemGridElementComponent: ItemGridElementComponent;
+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
+  })
+};
 
+describe('ItemGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ItemGridElementComponent , TruncatePipe],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useFactory: (itemGridElementComponent)}
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(ItemGridElementComponent);
+    itemGridElementComponent = fixture.componentInstance;
+
+  }));
+
+  it('should show the item cards in the grid element',()=>{
+    expect(fixture.debugElement.query(By.css('ds-item-grid-element'))).toBeDefined();
+  })
 })
diff --git a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
index 914fb49487..ae63924374 100644
--- a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
@@ -1,2 +1,12 @@
-<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 class="card">
+  <a [routerLink]="['/collections/' + dso.id]"class="card-img-top">
+    <ds-comcol-page-logo [logo]="dso.logo">
+    </ds-comcol-page-logo>
+  </a>
+  <div class="card-block">
+    <h4 class="card-title">{{dso.name}}</h4>
+    <p *ngIf="dso.shortDescription" class="card-text">{{dso.shortDescription}}</p>
+    <a [routerLink]="['/collections/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+
+  </div>
+</div>
diff --git a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
index d09ef7d668..2707934c56 100644
--- a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
@@ -1,2 +1,12 @@
-<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 class="card">
+
+  <a [routerLink]="['/communities/' + dso.id]"class="card-img-top">
+    <ds-comcol-page-logo [logo]="dso.logo">
+    </ds-comcol-page-logo>
+  </a>
+  <div class="card-block">
+    <h4 class="card-title">{{dso.name}}</h4>
+    <p *ngIf="dso.shortDescription" class="card-text">{{dso.shortDescription}}</p>
+    <a [routerLink]="['/communities/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+  </div>
+</div>
diff --git a/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts
index e69de29bb2..5b02fbe95a 100644
--- a/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts
@@ -0,0 +1,43 @@
+import { WrapperGridElementComponent } from './wrapper-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 { By } from '@angular/platform-browser';
+
+let wrapperGridElementComponent: WrapperGridElementComponent;
+let fixture: ComponentFixture<WrapperGridElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+
+describe('WrapperGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WrapperGridElementComponent ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useFactory: (wrapperGridElementComponent)}
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(WrapperGridElementComponent);
+    wrapperGridElementComponent = fixture.componentInstance;
+
+  }));
+
+  it('should show the wrapper element containing the cards',()=>{
+    expect(fixture.debugElement.query(By.css('ds-collection-grid-element'))).toBeDefined();
+  })
+})

From 1a2c74d6f197e4df87a4f873c22c0577284340d1 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Mon, 6 Nov 2017 13:40:00 +0100
Subject: [PATCH 10/47] #150 Grid element testing

---
 .../collection-grid-element.component.spec.ts | 26 +++++-
 .../community-grid-element.component.spec.ts  | 24 +++++-
 .../item-grid-element.component.spec.ts       | 30 ++++++-
 ...arch-result-grid-element.component.spec.ts | 67 +++++++++++++++
 ...arch-result-grid-element.component.spec.ts | 67 +++++++++++++++
 ...arch-result-grid-element.component.spec.ts | 84 +++++++++++++++++++
 6 files changed, 290 insertions(+), 8 deletions(-)
 create mode 100644 src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.spec.ts
 create mode 100644 src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.spec.ts
 create mode 100644 src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.spec.ts

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 a1af8b5a3c..fd935af992 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
@@ -5,6 +5,7 @@ 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 collectionGridElementComponent: CollectionGridElementComponent;
 let fixture: ComponentFixture<CollectionGridElementComponent>;
@@ -16,6 +17,15 @@ const activatedRouteStub = {
     scope: scopeParam
   })
 };
+let mockCollection: Collection = Object.assign(new Collection(), {
+  metadata: [
+    {
+      key: 'dc.description.abstract',
+      language: 'en_US',
+      value: 'Short description'
+    }]
+});
+let createdGridElementComponent:CollectionGridElementComponent= new CollectionGridElementComponent(mockCollection);
 
 describe('CollectionGridElementComponent', () => {
   beforeEach(async(() => {
@@ -24,7 +34,7 @@ describe('CollectionGridElementComponent', () => {
       providers: [
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: Router, useClass: RouterStub },
-        { provide: 'objectElementProvider', useFactory: (collectionGridElementComponent)}
+        { provide: 'objectElementProvider', useValue: (createdGridElementComponent)}
       ],
 
       schemas: [ NO_ERRORS_SCHEMA ]
@@ -33,11 +43,19 @@ describe('CollectionGridElementComponent', () => {
 
   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();
-  })
+  });
+
+  it('should only show the description if "short description" metadata is present',()=>{
+    let 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-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 f6ab7bc6cd..dc837e3c0c 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
@@ -18,6 +18,18 @@ const activatedRouteStub = {
     scope: scopeParam
   })
 };
+
+let mockCommunity: Community = Object.assign(new Community(), {
+  metadata: [
+    {
+      key: 'dc.description.abstract',
+      language: 'en_US',
+      value: 'Short description'
+    }]
+});
+
+let createdGridElementComponent:CommunityGridElementComponent= new CommunityGridElementComponent(mockCommunity);
+
 describe('CommunityGridElementComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -25,7 +37,7 @@ describe('CommunityGridElementComponent', () => {
       providers: [
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: Router, useClass: RouterStub },
-        { provide: 'objectElementProvider', useFactory: (communityGridElementComponent)}
+        { provide: 'objectElementProvider', useValue: (createdGridElementComponent)}
       ],
 
     schemas: [ NO_ERRORS_SCHEMA ]
@@ -41,4 +53,14 @@ describe('CommunityGridElementComponent', () => {
   it('should show the community cards in the grid element',()=>{
     expect(fixture.debugElement.query(By.css('ds-community-grid-element'))).toBeDefined();
   })
+
+  it('should only show the description if "short description" metadata is present',()=>{
+    let 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-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 b4fb9c8029..8913dca3ee 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
@@ -6,6 +6,7 @@ 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 itemGridElementComponent: ItemGridElementComponent;
 let fixture: ComponentFixture<ItemGridElementComponent>;
@@ -17,6 +18,17 @@ const activatedRouteStub = {
     scope: scopeParam
   })
 };
+/* tslint:disable:no-shadowed-variable */
+let mockItem: Item = Object.assign(new Item(), {
+  metadata: [
+    {
+      key: 'dc.contributor.author',
+      language: 'en_US',
+      value: 'Smith, Donald'
+    }]
+});
+
+let createdGridElementComponent:ItemGridElementComponent= new ItemGridElementComponent(mockItem);
 
 describe('ItemGridElementComponent', () => {
   beforeEach(async(() => {
@@ -25,7 +37,7 @@ describe('ItemGridElementComponent', () => {
       providers: [
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: Router, useClass: RouterStub },
-        { provide: 'objectElementProvider', useFactory: (itemGridElementComponent)}
+        { provide: 'objectElementProvider', useValue: {createdGridElementComponent}}
       ],
 
       schemas: [ NO_ERRORS_SCHEMA ]
@@ -39,6 +51,18 @@ describe('ItemGridElementComponent', () => {
   }));
 
   it('should show the item cards in the grid element',()=>{
-    expect(fixture.debugElement.query(By.css('ds-item-grid-element'))).toBeDefined();
-  })
+    expect(fixture.debugElement.query(By.css('ds-item-grid-element'))).toBeDefined()
+  });
+
+  it('should only show the author span if the author metadata is present',()=>{
+    let 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-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
new file mode 100644
index 0000000000..8d6fe6fb38
--- /dev/null
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.spec.ts
@@ -0,0 +1,67 @@
+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 { 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';
+
+
+let fixture: ComponentFixture<CollectionSearchResultGridElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+let mockCollection: Collection = Object.assign(new Collection(), {
+  metadata: [
+    {
+      key: 'dc.description.abstract',
+      language: 'en_US',
+      value: 'Short description'
+    } ]
+
+});
+
+let createdGridElementComponent: CollectionSearchResultGridElementComponent = new CollectionSearchResultGridElementComponent(mockCollection);
+
+
+describe('CollectionSearchResultGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CollectionSearchResultGridElementComponent, TruncatePipe ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: (createdGridElementComponent) }
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(CollectionSearchResultGridElementComponent);
+  }));
+
+  it('should show the item result cards in the grid element', () => {
+    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',()=>{
+    let 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-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
new file mode 100644
index 0000000000..0924700da7
--- /dev/null
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.spec.ts
@@ -0,0 +1,67 @@
+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 { By } from '@angular/platform-browser';
+import { TruncatePipe } from '../../../utils/truncate.pipe';
+import { Community } from '../../../../core/shared/community.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
+  })
+};
+let mockCommunity: Community = Object.assign(new Community(), {
+  metadata: [
+    {
+      key: 'dc.description.abstract',
+      language: 'en_US',
+      value: 'Short description'
+    } ]
+
+});
+
+let createdGridElementComponent: CommunitySearchResultGridElementComponent = new CommunitySearchResultGridElementComponent(mockCommunity);
+
+
+describe('CommunitySearchResultGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommunitySearchResultGridElementComponent, TruncatePipe ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: (createdGridElementComponent) }
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(CommunitySearchResultGridElementComponent);
+  }));
+
+  it('should show the item result cards in the grid element', () => {
+    expect(fixture.debugElement.query(By.css('ds-community-search-result-grid-element'))).toBeDefined();
+  });
+
+
+  it('should only show the description if "short description" metadata is present',()=>{
+    let 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-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
new file mode 100644
index 0000000000..318910304f
--- /dev/null
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.spec.ts
@@ -0,0 +1,84 @@
+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 } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { TruncatePipe } from '../../../utils/truncate.pipe';
+import { Item } from '../../../../core/shared/item.model';
+
+
+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
+  })
+};
+let 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'
+    }]
+});
+let createdGridElementComponent:ItemSearchResultGridElementComponent= new ItemSearchResultGridElementComponent(mockItem);
+
+describe('ItemSearchResultGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ItemSearchResultGridElementComponent, TruncatePipe ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: (createdGridElementComponent) }
+      ],
+
+      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',()=>{
+    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',()=>{
+    let 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',()=>{
+    let 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();
+    }
+  });
+
+
+
+
+});

From 78cbc48376de3489f7fe9b3c1f9459a3012171b1 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Mon, 13 Nov 2017 13:37:02 +0100
Subject: [PATCH 11/47] #150 Removal of inherited css + restyling using
 bootstrap classes

---
 package.json                                  |  1 -
 .../collection-grid-element.component.html    |  6 ++-
 .../collection-grid-element.component.scss    |  2 +-
 .../community-grid-element.component.html     |  6 ++-
 .../community-grid-element.component.scss     |  2 +-
 .../shared/object-grid/grid-card-styling.scss | 45 -------------------
 .../item-grid-element.component.html          |  6 ++-
 .../item-grid-element.component.scss          |  2 +-
 .../object-grid-element.component.scss        |  1 -
 .../object-grid/object-grid.component.html    |  4 +-
 .../object-grid/object-grid.component.scss    | 22 +++++++++
 ...-search-result-grid-element.component.html |  7 +--
 ...-search-result-grid-element.component.scss |  1 -
 ...-search-result-grid-element.component.html |  6 ++-
 ...-search-result-grid-element.component.scss |  2 +-
 ...-search-result-grid-element.component.html | 10 +++--
 ...-search-result-grid-element.component.scss |  2 +-
 .../search-result-grid-element.component.scss |  1 -
 .../wrapper-grid-element.component.scss       |  2 +-
 src/styles/_custom_variables.scss             |  2 +
 yarn.lock                                     |  4 --
 21 files changed, 58 insertions(+), 76 deletions(-)
 delete mode 100644 src/app/shared/object-grid/grid-card-styling.scss

diff --git a/package.json b/package.json
index 1d6a6ef36e..e32a9af765 100644
--- a/package.json
+++ b/package.json
@@ -103,7 +103,6 @@
     "methods": "1.1.2",
     "morgan": "1.9.0",
     "ngx-pagination": "3.0.1",
-    "object-fit-images": "^3.2.3",
     "pem": "1.12.3",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.4.3",
diff --git a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html
index 5dc717cf54..b1287212a3 100644
--- a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html
+++ b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html
@@ -3,10 +3,12 @@
     <ds-comcol-page-logo [logo]="object.logo">
     </ds-comcol-page-logo>
   </a>
-  <div class="card-block">
+  <div class="card-body">
     <h4 class="card-title">{{object.name}}</h4>
     <p *ngIf="object.shortDescription" class="card-text">{{object.shortDescription}}</p>
-    <a [routerLink]="['/collections/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+    <div class="text-center">
+      <a [routerLink]="['/collections/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+    </div>
 
   </div>
 </div>
diff --git a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss
index 946c8a6a31..51a7fc6a55 100644
--- a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss
+++ b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss
@@ -1,2 +1,2 @@
 @import '../../../../styles/variables';
-@import '../grid-card-styling';
+
diff --git a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.html b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.html
index e4ea3dcb13..b6f4c5c5d9 100644
--- a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.html
+++ b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.html
@@ -4,9 +4,11 @@
     <ds-comcol-page-logo [logo]="object.logo">
     </ds-comcol-page-logo>
   </a>
-  <div class="card-block">
+  <div class="card-body">
     <h4 class="card-title">{{object.name}}</h4>
     <p *ngIf="object.shortDescription" class="card-text">{{object.shortDescription}}</p>
-    <a [routerLink]="['/communities/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+    <div class="text-center">
+      <a [routerLink]="['/communities/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+    </div>
   </div>
 </div>
diff --git a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss
index 946c8a6a31..51a7fc6a55 100644
--- a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss
+++ b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss
@@ -1,2 +1,2 @@
 @import '../../../../styles/variables';
-@import '../grid-card-styling';
+
diff --git a/src/app/shared/object-grid/grid-card-styling.scss b/src/app/shared/object-grid/grid-card-styling.scss
deleted file mode 100644
index 2fe199d1ce..0000000000
--- a/src/app/shared/object-grid/grid-card-styling.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-@import '../../../styles/custom_variables';
-
-.card-title{
-  line-height: $line-height-base;
-  height:$headings-line-height;
-  font-size:$headings-font-size;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.card-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: $line-height-base;
-  margin-bottom:$card-block-margin-base*2;
-}
-.card-text.item-authors {
-  height: $line-height-base;
-}
-.card-text.item-abstract {
-  height: $content-line-height;
-}
-
-.viewButton{
-  display:table;
-  margin:auto;
-  width: $card-button-width;
-}
-
-.card{
-  margin-bottom: $card-block-margin-base *3;
-  height: $card-height-percentage;
-}
-
-.card-img-top ::ng-deep  img
-{
-  height: $card-thumbnail-height;
-  width: 100%;
-  object-fit: cover;
-}
-
-.card-block{
-  margin: $card-block-margin-base;
-}
-
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 3fae55088e..b8bacfaf2e 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
@@ -4,7 +4,7 @@
     <ds-grid-thumbnail [thumbnail]="object.getThumbnail()">
     </ds-grid-thumbnail>
   </a>
-  <div class="card-block">
+  <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">
@@ -16,6 +16,8 @@
 
     <p *ngIf="object.findMetadata('dc.description.abstract')" class="item-abstract card-text">{{object.findMetadata("dc.description.abstract") | dsTruncate:[200] }}</p>
 
-    <a [routerLink]="['/items/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+    <div class="text-center">
+      <a [routerLink]="['/items/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+    </div>
   </div>
 </div>
diff --git a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss
index 946c8a6a31..51a7fc6a55 100644
--- a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss
+++ b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss
@@ -1,2 +1,2 @@
 @import '../../../../styles/variables';
-@import '../grid-card-styling';
+
diff --git a/src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss b/src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss
index d299edd0ab..d4720c4a64 100644
--- a/src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss
+++ b/src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss
@@ -1,5 +1,4 @@
 @import '../../../../styles/variables';
-@import '../grid-card-styling';
 :host {
   display: block;
   margin-bottom: $spacer;
diff --git a/src/app/shared/object-grid/object-grid.component.html b/src/app/shared/object-grid/object-grid.component.html
index ebcf240d28..32c3e9ec4f 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)="onSortDirectionChange($event)"
   (paginationChange)="onPaginationChange($event)">
-    <div class="row" *ngIf="objects.hasSucceeded | async" @fadeIn>
-        <div class="col-lg-4 col-sm-4 col-xs-12 "
+    <div class="row " *ngIf="objects.hasSucceeded | async" @fadeIn>
+        <div class="col-lg-4 col-sm-6 col-xs-12 "
           *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
           <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 48e6526dff..c01dfbdc85 100644
--- a/src/app/shared/object-grid/object-grid.component.scss
+++ b/src/app/shared/object-grid/object-grid.component.scss
@@ -1 +1,23 @@
 @import '../../../styles/variables';
+
+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;
+  }
+  div.card {
+    margin-bottom: 20px;
+  }
+}
diff --git a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
index ae63924374..d6b1bfb5f4 100644
--- a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
@@ -3,10 +3,11 @@
     <ds-comcol-page-logo [logo]="dso.logo">
     </ds-comcol-page-logo>
   </a>
-  <div class="card-block">
+  <div class="card-body">
     <h4 class="card-title">{{dso.name}}</h4>
     <p *ngIf="dso.shortDescription" class="card-text">{{dso.shortDescription}}</p>
-    <a [routerLink]="['/collections/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
-
+    <div class="text-center">
+      <a [routerLink]="['/collections/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+    </div>
   </div>
 </div>
diff --git a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
index 2867dd78ac..1d0786105c 100644
--- a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
@@ -1,2 +1 @@
 @import '../../../../../styles/variables';
-@import '../../grid-card-styling';
diff --git a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
index 2707934c56..8ff6874bff 100644
--- a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
@@ -4,9 +4,11 @@
     <ds-comcol-page-logo [logo]="dso.logo">
     </ds-comcol-page-logo>
   </a>
-  <div class="card-block">
+  <div class="card-body">
     <h4 class="card-title">{{dso.name}}</h4>
     <p *ngIf="dso.shortDescription" class="card-text">{{dso.shortDescription}}</p>
-    <a [routerLink]="['/communities/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+    <div class="text-center">
+      <a [routerLink]="['/communities/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+    </div>
   </div>
 </div>
diff --git a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
index 2867dd78ac..bd63aa6a3a 100644
--- a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
@@ -1,2 +1,2 @@
 @import '../../../../../styles/variables';
-@import '../../grid-card-styling';
+
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 be84039416..ce9324477f 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,10 +1,10 @@
 <div class="card">
-  <a [routerLink]="['/items/' + dso.id]" class="card-img-top">
+  <a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
     <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()">
     </ds-grid-thumbnail>
   </a>
-  <div class="card-block">
-    <p class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></p>
+  <div class="card-body">
+    <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">
@@ -25,7 +25,9 @@
     <p class="item-abstract card-text" [innerHTML]="getFirstValue('dc.description.abstract') | dsTruncate:[200]">
     </p>
 
-    <a [routerLink]="['/items/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+    <div class="text-center">
+      <a [routerLink]="['/items/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+    </div>
   </div>
 
 </div>
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 2867dd78ac..bd63aa6a3a 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,2 @@
 @import '../../../../../styles/variables';
-@import '../../grid-card-styling';
+
diff --git a/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss
index ebec5817e6..e8d681fb32 100644
--- a/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss
+++ b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss
@@ -1,5 +1,4 @@
  @import '../../../../styles/variables';
- @import '../grid-card-styling';
 :host {
     /deep/ em {
         font-weight: bold;
diff --git a/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
index 946c8a6a31..51a7fc6a55 100644
--- a/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
+++ b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
@@ -1,2 +1,2 @@
 @import '../../../../styles/variables';
-@import '../grid-card-styling';
+
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 8c0dcae928..4dcc161cc4 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -2,3 +2,5 @@ $content-spacing: $spacer * 1.5;
 
 $button-height: $input-btn-padding-y * 2 + $input-btn-line-height + calculateRem($input-btn-border-width*2);
 $card-height-percentage:98%;
+$card-thumbnail-height:240px;
+
diff --git a/yarn.lock b/yarn.lock
index 4211b7228a..91b2a787e2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4804,10 +4804,6 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-fit-images@^3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/object-fit-images/-/object-fit-images-3.2.3.tgz#4089f6d0070a3b5563d3c1ab6f1b28d61331f0ac"
-
 object-keys@^1.0.8:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"

From aabc6836e37917477380aaba2d2e9f9cf8b0becc Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Tue, 14 Nov 2017 14:51:49 +0100
Subject: [PATCH 12/47] Additional IDE generated files ignored

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index f8395956f5..dd5f5fa391 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,6 +14,7 @@ npm-debug.log
 /coverage/
 
 .idea
+*.iml
 *.ngfactory.ts
 *.css.shim.ts
 *.scss.shim.ts

From 995771192e7360265d8fc4fe984422052b6f511e Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Wed, 15 Nov 2017 09:15:34 +0100
Subject: [PATCH 13/47] #150 Removal of iml file + small margin between
 pagination and grid

---
 dspace-angular.iml                                    | 8 --------
 src/app/shared/object-grid/object-grid.component.html | 2 +-
 2 files changed, 1 insertion(+), 9 deletions(-)
 delete mode 100644 dspace-angular.iml

diff --git a/dspace-angular.iml b/dspace-angular.iml
deleted file mode 100644
index 5806390693..0000000000
--- a/dspace-angular.iml
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="sourceFolder" forTests="false" />
-    <orderEntry type="library" name="node_modules" level="project" />
-  </component>
-</module>
\ No newline at end of file
diff --git a/src/app/shared/object-grid/object-grid.component.html b/src/app/shared/object-grid/object-grid.component.html
index 32c3e9ec4f..445d681268 100644
--- a/src/app/shared/object-grid/object-grid.component.html
+++ b/src/app/shared/object-grid/object-grid.component.html
@@ -10,7 +10,7 @@
   (sortDirectionChange)="onSortDirectionChange($event)"
   (sortFieldChange)="onSortDirectionChange($event)"
   (paginationChange)="onPaginationChange($event)">
-    <div class="row " *ngIf="objects.hasSucceeded | async" @fadeIn>
+    <div class="row mt-2" *ngIf="objects.hasSucceeded | async" @fadeIn>
         <div class="col-lg-4 col-sm-6 col-xs-12 "
           *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
           <ds-wrapper-grid-element [object]="object"></ds-wrapper-grid-element>

From cb15939a5372b5c468fb6ab7dd9eb1d172d4d9f9 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Wed, 15 Nov 2017 10:28:11 +0100
Subject: [PATCH 14/47] #150 Merge fixes

---
 .../search-service/search.service.ts          |  2 +-
 .../object-collection.component.html          |  2 ++
 .../object-collection.component.ts            |  5 ++--
 .../object-grid/object-grid.component.html    |  4 +--
 .../object-grid/object-grid.component.scss    |  4 +++
 .../object-grid/object-grid.component.ts      |  4 +--
 .../object-list/object-list.component.ts      | 27 +------------------
 7 files changed, 15 insertions(+), 33 deletions(-)

diff --git a/src/app/+search-page/search-service/search.service.ts b/src/app/+search-page/search-service/search.service.ts
index 63b1b04dce..8ca84f4a32 100644
--- a/src/app/+search-page/search-service/search.service.ts
+++ b/src/app/+search-page/search-service/search.service.ts
@@ -12,7 +12,7 @@ import { Item } from '../../core/shared/item.model';
 import { SearchFilterConfig } from './search-filter-config.model';
 import { FilterType } from './filter-type.model';
 import { FacetValue } from './facet-value.model';
-import { ItemSearchResult } from '../../object-collection/shared/item-search-result.model';
+import { ItemSearchResult } from '../../shared/object-collection/shared/item-search-result.model';
 import { ViewMode } from '../../+search-page/search-options.model';
 import { Router, NavigationExtras, ActivatedRoute } from '@angular/router';
 import { ItemSearchResult } from '../../shared/object-collection/shared/item-search-result.model';
diff --git a/src/app/shared/object-collection/object-collection.component.html b/src/app/shared/object-collection/object-collection.component.html
index 6c2a2fb1de..c9b1cb92f5 100644
--- a/src/app/shared/object-collection/object-collection.component.html
+++ b/src/app/shared/object-collection/object-collection.component.html
@@ -1,12 +1,14 @@
 <ds-object-list [config]="config"
                 [sortConfig]="sortConfig"
                 [objects]="objects"
+                [hideGear]="hideGear"
                 *ngIf="getViewMode()===viewModeEnum.List">
 </ds-object-list>
 
 <ds-object-grid [config]="config"
                 [sortConfig]="sortConfig"
                 [objects]="objects"
+                [hideGear]="true"
                 *ngIf="getViewMode()===viewModeEnum.Grid">
 </ds-object-grid>
 
diff --git a/src/app/shared/object-collection/object-collection.component.ts b/src/app/shared/object-collection/object-collection.component.ts
index 8d5a9ce3c7..5a356dcbdc 100644
--- a/src/app/shared/object-collection/object-collection.component.ts
+++ b/src/app/shared/object-collection/object-collection.component.ts
@@ -27,6 +27,7 @@ export class ObjectCollectionComponent implements OnChanges, OnInit {
   @Input() objects: RemoteData<ListableObject[]>;
   @Input() config?: PaginationComponentOptions;
   @Input() sortConfig: SortOptions;
+  @Input() hideGear = false;
   pageInfo: Observable<PageInfo>;
   private sub;
   /**
@@ -60,13 +61,13 @@ export class ObjectCollectionComponent implements OnChanges, OnInit {
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.objects && !changes.objects.isFirstChange()) {
-      this.pageInfo = this.objects.pageInfo;
+      // this.pageInfo = this.objects.pageInfo;
     }
   }
 
 
   ngOnInit(): void {
-    this.pageInfo = this.objects.pageInfo;
+    // this.pageInfo = this.objects.pageInfo;
 
     this.sub = this.route
       .queryParams
diff --git a/src/app/shared/object-grid/object-grid.component.html b/src/app/shared/object-grid/object-grid.component.html
index 445d681268..ad9bf20a32 100644
--- a/src/app/shared/object-grid/object-grid.component.html
+++ b/src/app/shared/object-grid/object-grid.component.html
@@ -10,9 +10,9 @@
   (sortDirectionChange)="onSortDirectionChange($event)"
   (sortFieldChange)="onSortDirectionChange($event)"
   (paginationChange)="onPaginationChange($event)">
-    <div class="row mt-2" *ngIf="objects.hasSucceeded | async" @fadeIn>
+    <div class="row mt-2" *ngIf="objects?.hasSucceeded" @fadeIn>
         <div class="col-lg-4 col-sm-6 col-xs-12 "
-          *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
+          *ngFor="let object of objects?.payload">
           <ds-wrapper-grid-element [object]="object"></ds-wrapper-grid-element>
       </div>
     </div>
diff --git a/src/app/shared/object-grid/object-grid.component.scss b/src/app/shared/object-grid/object-grid.component.scss
index c01dfbdc85..a85e38d26f 100644
--- a/src/app/shared/object-grid/object-grid.component.scss
+++ b/src/app/shared/object-grid/object-grid.component.scss
@@ -17,6 +17,10 @@ ds-wrapper-grid-element ::ng-deep {
     overflow: hidden;
     text-overflow: ellipsis;
   }
+  .item-authors{
+    line-height: $line-height-base;
+    height: ($line-height-base*1.5)+em;
+  }
   div.card {
     margin-bottom: 20px;
   }
diff --git a/src/app/shared/object-grid/object-grid.component.ts b/src/app/shared/object-grid/object-grid.component.ts
index c811d90d62..1c890c8959 100644
--- a/src/app/shared/object-grid/object-grid.component.ts
+++ b/src/app/shared/object-grid/object-grid.component.ts
@@ -64,12 +64,12 @@ export class ObjectGridComponent implements OnChanges, OnInit  {
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.objects && !changes.objects.isFirstChange()) {
-      this.pageInfo = this.objects.pageInfo;
+      // this.pageInfo = this.objects.pageInfo;
     }
   }
 
   ngOnInit(): void {
-    this.pageInfo = this.objects.pageInfo;
+    // this.pageInfo = this.objects.pageInfo;
   }
 
   /**
diff --git a/src/app/shared/object-list/object-list.component.ts b/src/app/shared/object-list/object-list.component.ts
index c1e3d21760..a300e06f59 100644
--- a/src/app/shared/object-list/object-list.component.ts
+++ b/src/app/shared/object-list/object-list.component.ts
@@ -7,8 +7,6 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 
-import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
-
 import { RemoteData } from '../../core/data/remote-data';
 import { PageInfo } from '../../core/shared/page-info.model';
 
@@ -18,9 +16,8 @@ import { SortOptions, SortDirection } from '../../core/cache/models/sort-options
 
 import { fadeIn } from '../animations/fade';
 import { ListableObject } from '../object-collection/shared/listable-object.model';
-import { hasValue } from '../shared/empty.util';
+import { hasValue } from '../empty.util';
 
-import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.Default,
@@ -86,28 +83,6 @@ export class ObjectListComponent {
    */
   @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
   data: any = {};
-
-
-  onPageChange(event) {
-    this.pageChange.emit(event);
-  }
-
-  onPageSizeChange(event) {
-    this.pageSizeChange.emit(event);
-  }
-
-  onSortDirectionChange(event) {
-    this.sortDirectionChange.emit(event);
-  }
-
-  onSortFieldChange(event) {
-    this.sortFieldChange.emit(event);
-  }
-
-  onPaginationChange(event) {
-    this.paginationChange.emit(event);
-  }
-
   onPageChange(event) {
     this.pageChange.emit(event);
   }

From 9a16812c2b5394f21c4e224ca25702c2a842fdc2 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Fri, 17 Nov 2017 16:26:33 +0100
Subject: [PATCH 15/47] #150 Generalised AbstractListableElementComponent
 instead of grid/list specific implementations

---
 .../abstract-listable-element.component.ts         | 13 +++++++++++++
 .../collection-grid-element.component.ts           |  4 ++--
 .../community-grid-element.component.ts            |  4 ++--
 .../item-grid-element.component.ts                 |  4 ++--
 .../object-grid-element.component.html             |  0
 .../object-grid-element.component.scss             |  5 -----
 .../object-grid-element.component.ts               | 14 --------------
 .../search-result-grid-element.component.ts        |  4 ++--
 .../collection-list-element.component.ts           |  4 ++--
 .../community-list-element.component.ts            |  4 ++--
 .../item-list-element.component.ts                 |  4 ++--
 .../object-list-element.component.html             |  0
 .../object-list-element.component.scss             |  6 ------
 .../object-list-element.component.ts               | 14 --------------
 .../search-result-list-element.component.ts        |  4 ++--
 src/app/shared/shared.module.ts                    |  6 ++----
 16 files changed, 31 insertions(+), 59 deletions(-)
 create mode 100644 src/app/shared/object-collection/shared/object-collection-element/abstract-listable-element.component.ts
 delete mode 100644 src/app/shared/object-grid/object-grid-element/object-grid-element.component.html
 delete mode 100644 src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss
 delete mode 100644 src/app/shared/object-grid/object-grid-element/object-grid-element.component.ts
 delete mode 100644 src/app/shared/object-list/object-list-element/object-list-element.component.html
 delete mode 100644 src/app/shared/object-list/object-list-element/object-list-element.component.scss
 delete mode 100644 src/app/shared/object-list/object-list-element/object-list-element.component.ts

diff --git a/src/app/shared/object-collection/shared/object-collection-element/abstract-listable-element.component.ts b/src/app/shared/object-collection/shared/object-collection-element/abstract-listable-element.component.ts
new file mode 100644
index 0000000000..d52036b5dc
--- /dev/null
+++ b/src/app/shared/object-collection/shared/object-collection-element/abstract-listable-element.component.ts
@@ -0,0 +1,13 @@
+import { Component, Inject } from '@angular/core';
+import { ListableObject } from '../listable-object.model';
+
+@Component({
+  selector: 'ds-abstract-object-element',
+  template: ``,
+})
+export class AbstractListableElementComponent <T extends ListableObject> {
+  object: T;
+  public constructor(@Inject('objectElementProvider') public listableObject: ListableObject) {
+    this.object = listableObject as T;
+  }
+}
diff --git a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.ts b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.ts
index 09aadab15e..a7f5ef3e49 100644
--- a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.ts
+++ b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.ts
@@ -1,9 +1,9 @@
 import { Component, Inject } from '@angular/core';
 
 import { Collection } from '../../../core/shared/collection.model';
-import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
 import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
 import { ViewMode } from '../../../+search-page/search-options.model';
+import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
 
 
 @Component({
@@ -13,4 +13,4 @@ import { ViewMode } from '../../../+search-page/search-options.model';
 })
 
 @renderElementsFor(Collection, ViewMode.Grid)
-export class CollectionGridElementComponent extends ObjectGridElementComponent<Collection> {}
+export class CollectionGridElementComponent extends AbstractListableElementComponent<Collection> {}
diff --git a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.ts b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.ts
index d40bd717a4..21d73ff0fa 100644
--- a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.ts
+++ b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, Inject } from '@angular/core';
 
 import { Community } from '../../../core/shared/community.model';
-import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
 import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
 import { ViewMode } from '../../../+search-page/search-options.model';
 
@@ -12,4 +12,4 @@ import { ViewMode } from '../../../+search-page/search-options.model';
 })
 
 @renderElementsFor(Community, ViewMode.Grid)
-export class CommunityGridElementComponent extends ObjectGridElementComponent<Community> {}
+export class CommunityGridElementComponent extends AbstractListableElementComponent<Community> {}
diff --git a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.ts b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.ts
index c41a6c9352..5a8d46f1f2 100644
--- a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.ts
+++ b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, Inject } from '@angular/core';
 
 import { Item } from '../../../core/shared/item.model';
 import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
-import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
 import { ViewMode } from '../../../+search-page/search-options.model';
 
 @Component({
@@ -12,4 +12,4 @@ import { ViewMode } from '../../../+search-page/search-options.model';
 })
 
 @renderElementsFor(Item, ViewMode.Grid)
-export class ItemGridElementComponent extends ObjectGridElementComponent<Item> {}
+export class ItemGridElementComponent extends AbstractListableElementComponent<Item> {}
diff --git a/src/app/shared/object-grid/object-grid-element/object-grid-element.component.html b/src/app/shared/object-grid/object-grid-element/object-grid-element.component.html
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss b/src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss
deleted file mode 100644
index d4720c4a64..0000000000
--- a/src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '../../../../styles/variables';
-:host {
-  display: block;
-  margin-bottom: $spacer;
-}
diff --git a/src/app/shared/object-grid/object-grid-element/object-grid-element.component.ts b/src/app/shared/object-grid/object-grid-element/object-grid-element.component.ts
deleted file mode 100644
index c3ab5e39e3..0000000000
--- a/src/app/shared/object-grid/object-grid-element/object-grid-element.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, Inject } from '@angular/core';
-import { ListableObject } from '../../object-collection/shared/listable-object.model';
-
-@Component({
-  selector: 'ds-object-grid-element',
-  styleUrls: ['./object-grid-element.component.scss'],
-  templateUrl: './object-grid-element.component.html'
-})
-export class ObjectGridElementComponent <T extends ListableObject> {
-  object: T;
-  public constructor(@Inject('objectElementProvider') public gridable: ListableObject) {
-    this.object = gridable as T;
-  }
-}
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 052a9377b5..8e1d7e0647 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
@@ -4,7 +4,7 @@ import { SearchResult } from '../../../+search-page/search-result.model';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 import { Metadatum } from '../../../core/shared/metadatum.model';
 import { isEmpty, hasNoValue } from '../../empty.util';
-import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
 import { ListableObject } from '../../object-collection/shared/listable-object.model';
 
 @Component({
@@ -12,7 +12,7 @@ import { ListableObject } from '../../object-collection/shared/listable-object.m
   template: ``
 })
 
-export class SearchResultGridElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends ObjectGridElementComponent<T> {
+export class SearchResultGridElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends AbstractListableElementComponent<T> {
   dso: K;
 
   public constructor(@Inject('objectElementProvider') public gridable: ListableObject) {
diff --git a/src/app/shared/object-list/collection-list-element/collection-list-element.component.ts b/src/app/shared/object-list/collection-list-element/collection-list-element.component.ts
index 5e08e8ef3a..f95c087d5c 100644
--- a/src/app/shared/object-list/collection-list-element/collection-list-element.component.ts
+++ b/src/app/shared/object-list/collection-list-element/collection-list-element.component.ts
@@ -1,9 +1,9 @@
 import { Component, Inject } from '@angular/core';
 
 import { Collection } from '../../../core/shared/collection.model';
-import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
 import { renderElementsFor } from '../../object-collection/shared/dso-element-decorator';
 import { ViewMode } from '../../../+search-page/search-options.model';
+import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
 
 @Component({
   selector: 'ds-collection-list-element',
@@ -12,4 +12,4 @@ import { ViewMode } from '../../../+search-page/search-options.model';
 })
 
 @renderElementsFor(Collection, ViewMode.List)
-export class CollectionListElementComponent extends ObjectListElementComponent<Collection> {}
+export class CollectionListElementComponent extends AbstractListableElementComponent<Collection> {}
diff --git a/src/app/shared/object-list/community-list-element/community-list-element.component.ts b/src/app/shared/object-list/community-list-element/community-list-element.component.ts
index cd6e6f7574..e92c080a31 100644
--- a/src/app/shared/object-list/community-list-element/community-list-element.component.ts
+++ b/src/app/shared/object-list/community-list-element/community-list-element.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, Inject } from '@angular/core';
 
 import { Community } from '../../../core/shared/community.model';
-import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
+import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
 import { renderElementsFor } from '../../object-collection/shared/dso-element-decorator';
 import { ViewMode } from '../../../+search-page/search-options.model';
 
@@ -12,4 +12,4 @@ import { ViewMode } from '../../../+search-page/search-options.model';
 })
 
 @renderElementsFor(Community, ViewMode.List)
-export class CommunityListElementComponent extends ObjectListElementComponent<Community> {}
+export class CommunityListElementComponent extends AbstractListableElementComponent<Community> {}
diff --git a/src/app/shared/object-list/item-list-element/item-list-element.component.ts b/src/app/shared/object-list/item-list-element/item-list-element.component.ts
index 43c59f0980..e4efbd6b08 100644
--- a/src/app/shared/object-list/item-list-element/item-list-element.component.ts
+++ b/src/app/shared/object-list/item-list-element/item-list-element.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, Inject } from '@angular/core';
 
 import { Item } from '../../../core/shared/item.model';
-import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
+import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
 import { renderElementsFor } from '../../object-collection/shared/dso-element-decorator';
 import { ViewMode } from '../../../+search-page/search-options.model';
 
@@ -12,4 +12,4 @@ import { ViewMode } from '../../../+search-page/search-options.model';
 })
 
 @renderElementsFor(Item, ViewMode.List)
-export class ItemListElementComponent extends ObjectListElementComponent<Item> {}
+export class ItemListElementComponent extends AbstractListableElementComponent<Item> {}
diff --git a/src/app/shared/object-list/object-list-element/object-list-element.component.html b/src/app/shared/object-list/object-list-element/object-list-element.component.html
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/app/shared/object-list/object-list-element/object-list-element.component.scss b/src/app/shared/object-list/object-list-element/object-list-element.component.scss
deleted file mode 100644
index f96f4ae744..0000000000
--- a/src/app/shared/object-list/object-list-element/object-list-element.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import '../../../../styles/variables';
-
-:host {
-  display: block;
-  margin-bottom: $spacer;
-}
diff --git a/src/app/shared/object-list/object-list-element/object-list-element.component.ts b/src/app/shared/object-list/object-list-element/object-list-element.component.ts
deleted file mode 100644
index 24f0ec1d93..0000000000
--- a/src/app/shared/object-list/object-list-element/object-list-element.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, Inject } from '@angular/core';
-import { ListableObject } from '../../object-collection/shared/listable-object.model';
-
-@Component({
-  selector: 'ds-object-list-element',
-  styleUrls: ['./object-list-element.component.scss'],
-  templateUrl: './object-list-element.component.html'
-})
-export class ObjectListElementComponent <T extends ListableObject> {
-  object: T;
-  public constructor(@Inject('objectElementProvider') public listable: ListableObject) {
-    this.object = listable as T;
-  }
-}
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 b89bb56da6..6c79eaad53 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
@@ -1,18 +1,18 @@
 import { Component, Inject } from '@angular/core';
 
-import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
 import { SearchResult } from '../../../+search-page/search-result.model';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 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';
 
 @Component({
   selector: 'ds-search-result-list-element',
   template: ``
 })
 
-export class SearchResultListElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends ObjectListElementComponent<T> {
+export class SearchResultListElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends AbstractListableElementComponent<T> {
   dso: K;
 
   public constructor(@Inject('objectElementProvider') public listable: ListableObject) {
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 7ee5ba56df..ca13067851 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -17,7 +17,6 @@ import { TruncatePipe } from './utils/truncate.pipe';
 import { CollectionListElementComponent } from './object-list/collection-list-element/collection-list-element.component';
 import { CommunityListElementComponent } from './object-list/community-list-element/community-list-element.component';
 import { ItemListElementComponent } from './object-list/item-list-element/item-list-element.component';
-import { ObjectListElementComponent } from './object-list/object-list-element/object-list-element.component';
 import { SearchResultListElementComponent } from './object-list/search-result-list-element/search-result-list-element.component';
 import { WrapperListElementComponent } from './object-list/wrapper-list-element/wrapper-list-element.component';
 import { ObjectListComponent } from './object-list/object-list.component';
@@ -25,7 +24,7 @@ import { ObjectListComponent } from './object-list/object-list.component';
 import { CollectionGridElementComponent} from './object-grid/collection-grid-element/collection-grid-element.component'
 import { CommunityGridElementComponent} from './object-grid/community-grid-element/community-grid-element.component'
 import { ItemGridElementComponent} from './object-grid/item-grid-element/item-grid-element.component'
-import { ObjectGridElementComponent} from './object-grid/object-grid-element/object-grid-element.component'
+import { AbstractListableElementComponent} from './object-collection/shared/object-collection-element/abstract-listable-element.component'
 import { WrapperGridElementComponent} from './object-grid/wrapper-grid-element/wrapper-grid-element.component'
 import { ObjectGridComponent } from './object-grid/object-grid.component';
 import { ObjectCollectionComponent } from './object-collection/object-collection.component';
@@ -70,10 +69,9 @@ const COMPONENTS = [
   ErrorComponent,
   LoadingComponent,
   ObjectListComponent,
-  ObjectListElementComponent,
+  AbstractListableElementComponent,
   WrapperListElementComponent,
   ObjectGridComponent,
-  ObjectGridElementComponent,
   WrapperGridElementComponent,
   ObjectCollectionComponent,
   PaginationComponent,

From 806b7bc5fc0cf82320049b970c08fb30f78ba305 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Tue, 21 Nov 2017 13:57:49 +0100
Subject: [PATCH 16/47] 150 Separate maps per viewMode

---
 .../object-collection/shared/dso-element-decorator.ts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/app/shared/object-collection/shared/dso-element-decorator.ts b/src/app/shared/object-collection/shared/dso-element-decorator.ts
index 5dc085d3a7..51aa57bc50 100644
--- a/src/app/shared/object-collection/shared/dso-element-decorator.ts
+++ b/src/app/shared/object-collection/shared/dso-element-decorator.ts
@@ -3,15 +3,18 @@ import { ListableObject } from './listable-object.model';
 import { ViewMode } from '../../../+search-page/search-options.model';
 
 const dsoElementMap = new Map();
-export function renderElementsFor(listable: GenericConstructor<ListableObject>, viewMode : ViewMode) {
+export function renderElementsFor(listable: GenericConstructor<ListableObject>, viewMode: ViewMode) {
   return function decorator(objectElement: any) {
     if (!objectElement) {
       return;
     }
-    dsoElementMap.set(listable+viewMode, objectElement);
+    if (!dsoElementMap.get(viewMode)) {
+      dsoElementMap.set(viewMode, new Map());
+    }
+    dsoElementMap.get(viewMode).set(listable, objectElement);
   };
 }
 
-export function rendersDSOType(listable: GenericConstructor<ListableObject>, viewMode : ViewMode) {
-  return dsoElementMap.get(listable+viewMode);
+export function rendersDSOType(listable: GenericConstructor<ListableObject>, viewMode: ViewMode) {
+  return dsoElementMap.get(viewMode).get(listable);
 }

From 1ac9bc0292181b772f846b439f3d59a449e9a181 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Tue, 21 Nov 2017 16:16:37 +0100
Subject: [PATCH 17/47] #150 Rollback to previous state (not part of this
 issue)

---
 ...ty-page-sub-collection-list.component.html | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html
index 9494cdb755..b04e93ff71 100644
--- a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html
+++ b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html
@@ -1,10 +1,15 @@
 <ng-container *ngVar="(subCollectionsRDObs | async) as subCollectionsRD">
-  <div *ngIf="subCollectionsRD?.hasSucceeded " @fadeIn>
-  <h2>{{'community.sub-collection-list.head' | translate}}</h2>
-  <ul>
-    <ds-viewable-collection [objects]="subCollectionsRD?.payload"
-    [sortConfig]="sortConfig"></ds-viewable-collection>
-  </ul>
-</div><ds-error *ngIf="subCollectionsRD?.hasFailed" message="{{'error.sub-collections' | translate}}"></ds-error>
+  <div *ngIf="subCollectionsRD?.hasSucceeded" @fadeIn>
+    <h2>{{'community.sub-collection-list.head' | translate}}</h2>
+    <ul>
+      <li *ngFor="let collection of subCollectionsRD?.payload">
+        <p>
+          <span class="lead"><a [routerLink]="['/collections', collection.id]">{{collection.name}}</a></span><br>
+          <span class="text-muted">{{collection.shortDescription}}</span>
+        </p>
+      </li>
+    </ul>
+  </div>
+  <ds-error *ngIf="subCollectionsRD?.hasFailed" message="{{'error.sub-collections' | translate}}"></ds-error>
   <ds-loading *ngIf="subCollectionsRD?.isLoading" message="{{'loading.sub-collections' | translate}}"></ds-loading>
 </ng-container>

From 17dec3d032aeea586630ce5e99755941e20098ba Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Wed, 22 Nov 2017 08:13:24 +0100
Subject: [PATCH 18/47] #150 Avoid first "null" download for initial content

---
 .../object-grid/grid-thumbnail/grid-thumbnail.component.html  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html
index 6221cbaba1..c0c3c1f65f 100644
--- a/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html
+++ b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html
@@ -1,4 +1,4 @@
 <div class="thumbnail">
-  <img *ngIf="thumbnail" [src]="thumbnail.content" (error)="errorHandler($event)"/>
-  <img *ngIf="!thumbnail" [src]="holderSource | dsSafeUrl"/>
+  <img *ngIf="thumbnail && thumbnail.content" [src]="thumbnail.content" (error)="errorHandler($event)"/>
+  <img *ngIf="!(thumbnail && thumbnail.content)" [src]="holderSource | dsSafeUrl"/>
 </div>

From 02e6c8928f78068b62d505362dbbcf9535726097 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Thu, 30 Nov 2017 15:06:52 +0100
Subject: [PATCH 19/47] #150 Fixing rebase errors

---
 src/app/+search-page/search-page.component.ts         | 5 +++--
 src/app/+search-page/search-service/search.service.ts | 1 -
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/+search-page/search-page.component.ts b/src/app/+search-page/search-page.component.ts
index 697e379f3d..6952a2da96 100644
--- a/src/app/+search-page/search-page.component.ts
+++ b/src/app/+search-page/search-page.component.ts
@@ -12,6 +12,8 @@ import { SearchService } from './search-service/search.service';
 import { pushInOut } from '../shared/animations/push';
 import { HostWindowService } from '../shared/host-window.service';
 import { SearchSidebarService } from './search-sidebar/search-sidebar.service';
+import { PaginationComponentOptions } from 'src/app/shared/pagination/pagination-component-options.model';
+import { SortOptions } from '../core/cache/models/sort-options.model';
 
 /**
  * This component renders a simple item page.
@@ -58,7 +60,7 @@ export class SearchPageComponent implements OnInit, OnDestroy {
     pagination.pageSize = 10;
 
     const sort: SortOptions = new SortOptions();
-    this.sortConfig=sort;
+    this.sortConfig = sort;
     this.searchOptions = this.service.searchOptions;
   }
 
@@ -81,7 +83,6 @@ export class SearchPageComponent implements OnInit, OnDestroy {
             // pageSizeOptions = [9, 18, 27, 36 , 45, 54, 63, 72];
           }
 
-
           const sortDirection = +params.sortDirection || this.searchOptions.sort.direction;
           const pagination = Object.assign({},
             this.searchOptions.pagination,
diff --git a/src/app/+search-page/search-service/search.service.ts b/src/app/+search-page/search-service/search.service.ts
index 8ca84f4a32..52d86927d6 100644
--- a/src/app/+search-page/search-service/search.service.ts
+++ b/src/app/+search-page/search-service/search.service.ts
@@ -15,7 +15,6 @@ import { FacetValue } from './facet-value.model';
 import { ItemSearchResult } from '../../shared/object-collection/shared/item-search-result.model';
 import { ViewMode } from '../../+search-page/search-options.model';
 import { Router, NavigationExtras, ActivatedRoute } from '@angular/router';
-import { ItemSearchResult } from '../../shared/object-collection/shared/item-search-result.model';
 import { RouteService } from '../../shared/route.service';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { SortOptions } from '../../core/cache/models/sort-options.model';

From a704157c1fea16977e7d17a83998878992459cf9 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Thu, 26 Oct 2017 09:38:27 +0200
Subject: [PATCH 20/47] #150 Initial grid/list view implementation

---
 package.json                                  |   1 +
 .../collection-page.component.html            |   4 +-
 ...ty-page-sub-collection-list.component.html |   8 +-
 .../top-level-community-list.component.html   |  26 ++--
 src/app/+search-page/search-page.component.ts |  15 +++
 src/app/+search-page/search-page.module.ts    |  15 ++-
 src/app/+search-page/search-result.model.ts   |   2 +-
 .../search-results.component.html             |   4 +-
 .../search-service/search.service.ts          |   2 +-
 src/app/core/shared/dspace-object.model.ts    |   2 +-
 .../object-collection.component.html          |  13 ++
 .../object-collection.component.scss          |   1 +
 .../object-collection.component.ts            | 113 ++++++++++++++++++
 .../shared/item-search-result.model.ts        |   5 +
 .../shared}/listable-object.model.ts          |   0
 .../collection-grid-element.component.html    |  12 ++
 .../collection-grid-element.component.scss    |   2 +
 .../collection-grid-element.component.ts      |  14 +++
 .../community-grid-element.component.html     |  12 ++
 .../community-grid-element.component.scss     |   2 +
 .../community-grid-element.component.ts       |  14 +++
 src/app/object-grid/grid-card-styling.scss    |  36 ++++++
 src/app/object-grid/grid-element-decorator.ts |  16 +++
 .../item-grid-element.component.html          |  20 ++++
 .../item-grid-element.component.scss          |   2 +
 .../item-grid-element.component.ts            |  14 +++
 .../object-grid-element.component.html        |   0
 .../object-grid-element.component.scss        |   6 +
 .../object-grid-element.component.ts          |  14 +++
 .../object-grid/object-grid.component.html    |  23 ++++
 .../object-grid/object-grid.component.scss    |   1 +
 src/app/object-grid/object-grid.component.ts  |  86 +++++++++++++
 ...-search-result-grid-element.component.html |   2 +
 ...-search-result-grid-element.component.scss |   2 +
 ...on-search-result-grid-element.component.ts |  15 +++
 .../collection-search-result.model.ts         |   5 +
 ...-search-result-grid-element.component.html |   2 +
 ...-search-result-grid-element.component.scss |   2 +
 ...ty-search-result-grid-element.component.ts |  17 +++
 .../community-search-result.model.ts          |   5 +
 ...-search-result-grid-element.component.html |  27 +++++
 ...-search-result-grid-element.component.scss |   2 +
 ...em-search-result-grid-element.component.ts |  15 +++
 .../search-result-grid-element.component.scss |   8 ++
 .../search-result-grid-element.component.ts   |  57 +++++++++
 .../wrapper-grid-element.component.html       |   1 +
 .../wrapper-grid-element.component.scss       |   2 +
 .../wrapper-grid-element.component.ts         |  27 +++++
 src/app/object-list/list-element-decorator.ts |   2 +-
 .../object-list-element.component.ts          |   2 +-
 src/app/object-list/object-list.component.ts  |   4 +-
 ...em-search-result-list-element.component.ts |   2 +-
 .../item-search-result.model.ts               |   5 -
 .../search-result-list-element.component.ts   |   2 +-
 .../wrapper-list-element.component.ts         |   2 +-
 src/app/shared/shared.module.ts               |  35 ++++--
 src/styles/_mixins.scss                       |   1 +
 yarn.lock                                     |   4 +
 58 files changed, 684 insertions(+), 49 deletions(-)
 create mode 100644 src/app/object-collection/object-collection.component.html
 create mode 100644 src/app/object-collection/object-collection.component.scss
 create mode 100644 src/app/object-collection/object-collection.component.ts
 create mode 100644 src/app/object-collection/shared/item-search-result.model.ts
 rename src/app/{object-list/listable-object => object-collection/shared}/listable-object.model.ts (100%)
 create mode 100644 src/app/object-grid/collection-grid-element/collection-grid-element.component.html
 create mode 100644 src/app/object-grid/collection-grid-element/collection-grid-element.component.scss
 create mode 100644 src/app/object-grid/collection-grid-element/collection-grid-element.component.ts
 create mode 100644 src/app/object-grid/community-grid-element/community-grid-element.component.html
 create mode 100644 src/app/object-grid/community-grid-element/community-grid-element.component.scss
 create mode 100644 src/app/object-grid/community-grid-element/community-grid-element.component.ts
 create mode 100644 src/app/object-grid/grid-card-styling.scss
 create mode 100644 src/app/object-grid/grid-element-decorator.ts
 create mode 100644 src/app/object-grid/item-grid-element/item-grid-element.component.html
 create mode 100644 src/app/object-grid/item-grid-element/item-grid-element.component.scss
 create mode 100644 src/app/object-grid/item-grid-element/item-grid-element.component.ts
 create mode 100644 src/app/object-grid/object-grid-element/object-grid-element.component.html
 create mode 100644 src/app/object-grid/object-grid-element/object-grid-element.component.scss
 create mode 100644 src/app/object-grid/object-grid-element/object-grid-element.component.ts
 create mode 100644 src/app/object-grid/object-grid.component.html
 create mode 100644 src/app/object-grid/object-grid.component.scss
 create mode 100644 src/app/object-grid/object-grid.component.ts
 create mode 100644 src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
 create mode 100644 src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
 create mode 100644 src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts
 create mode 100644 src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts
 create mode 100644 src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
 create mode 100644 src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
 create mode 100644 src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
 create mode 100644 src/app/object-grid/search-result-grid-element/community-search-result/community-search-result.model.ts
 create mode 100644 src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
 create mode 100644 src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
 create mode 100644 src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
 create mode 100644 src/app/object-grid/search-result-grid-element/search-result-grid-element.component.scss
 create mode 100644 src/app/object-grid/search-result-grid-element/search-result-grid-element.component.ts
 create mode 100644 src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.html
 create mode 100644 src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
 create mode 100644 src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
 delete mode 100644 src/app/object-list/search-result-list-element/item-search-result/item-search-result.model.ts

diff --git a/package.json b/package.json
index f2bb074ff4..662b4b627f 100644
--- a/package.json
+++ b/package.json
@@ -103,6 +103,7 @@
     "methods": "1.1.2",
     "morgan": "1.9.0",
     "ngx-pagination": "3.0.1",
+    "object-fit-images": "^3.2.3",
     "pem": "1.12.3",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.4.3",
diff --git a/src/app/+collection-page/collection-page.component.html b/src/app/+collection-page/collection-page.component.html
index fe5b2a1f16..05b4d6f11e 100644
--- a/src/app/+collection-page/collection-page.component.html
+++ b/src/app/+collection-page/collection-page.component.html
@@ -41,13 +41,13 @@
     <ng-container *ngVar="(itemRDObs | async) as itemRD">
       <div *ngIf="itemRD?.hasSucceeded" @fadeIn>
         <h2>{{'collection.page.browse.recent.head' | translate}}</h2>
-        <ds-object-list
+        <ds-viewable-collection
           [config]="paginationConfig"
           [sortConfig]="sortConfig"
           [objects]="itemRD"
           [hideGear]="false"
           (paginationChange)="onPaginationChange($event)">
-        </ds-object-list>
+        </ds-viewable-collection>
       </div>
       <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.recent-submissions' | translate}}"></ds-error>
       <ds-loading *ngIf="!itemRD || itemRD.isLoading" message="{{'loading.recent-submissions' | translate}}"></ds-loading>
diff --git a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html
index b04e93ff71..f78b212bee 100644
--- a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html
+++ b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html
@@ -2,12 +2,8 @@
   <div *ngIf="subCollectionsRD?.hasSucceeded" @fadeIn>
     <h2>{{'community.sub-collection-list.head' | translate}}</h2>
     <ul>
-      <li *ngFor="let collection of subCollectionsRD?.payload">
-        <p>
-          <span class="lead"><a [routerLink]="['/collections', collection.id]">{{collection.name}}</a></span><br>
-          <span class="text-muted">{{collection.shortDescription}}</span>
-        </p>
-      </li>
+      <ds-viewable-collection [objects]="subCollectionsRD?.payload">
+      </ds-viewable-collection>
     </ul>
   </div>
   <ds-error *ngIf="subCollectionsRD?.hasFailed" message="{{'error.sub-collections' | translate}}"></ds-error>
diff --git a/src/app/+home-page/top-level-community-list/top-level-community-list.component.html b/src/app/+home-page/top-level-community-list/top-level-community-list.component.html
index a34951afe0..4eebb53e1e 100644
--- a/src/app/+home-page/top-level-community-list/top-level-community-list.component.html
+++ b/src/app/+home-page/top-level-community-list/top-level-community-list.component.html
@@ -1,15 +1,13 @@
 <ng-container *ngVar="(communitiesRDObs | async) as communitiesRD">
-  <div *ngIf="communitiesRD?.hasSucceeded" @fadeInOut>
-    <h2>{{'home.top-level-communities.head' | translate}}</h2>
-    <p class="lead">{{'home.top-level-communities.help' | translate}}</p>
-    <ds-object-list
-      [config]="config"
-      [sortConfig]="sortConfig"
-      [objects]="communitiesRD"
-      [hideGear]="true"
-      (paginationChange)="updatePage($event)">
-    </ds-object-list>
-  </div>
-  <ds-error *ngIf="communitiesRD?.hasFailed" message="{{'error.top-level-communites' | translate}}"></ds-error>
-  <ds-loading *ngIf="communitiesRD?.isLoading" message="{{'loading.top-level-communities' | translate}}"></ds-loading>
-</ng-container>
+  <div *ngIf="communitiesRD?.hasSucceeded " @fadeInOut>
+  <h2>{{'home.top-level-communities.head' | translate}}</h2>
+  <p class="lead">{{'home.top-level-communities.help' | translate}}</p>
+  <ds-viewable-collection
+    [config]="config"
+    [objects]="communitiesRD"
+
+    (paginationChange)="updatePage($event)">
+  </ds-viewable-collection>
+</div>
+<ds-error *ngIf="communitiesRD?.hasFailed " message="{{'error.top-level-communites' | translate}}"></ds-error>
+<ds-loading *ngIf="communitiesRD?.isLoading " message="{{'loading.top-level-communities' | translate}}"></ds-loading></ng-container>
diff --git a/src/app/+search-page/search-page.component.ts b/src/app/+search-page/search-page.component.ts
index 153402d11f..d50f5e9442 100644
--- a/src/app/+search-page/search-page.component.ts
+++ b/src/app/+search-page/search-page.component.ts
@@ -51,7 +51,22 @@ export class SearchPageComponent implements OnInit, OnDestroy {
     );
     this.scopeListRDObs = communityService.findAll();
     // Initial pagination config
+    const pagination: PaginationComponentOptions = new PaginationComponentOptions();
+    pagination.id = 'search-results-pagination';
+    pagination.currentPage = 1;
+    pagination.pageSize = 10;
+
+    // TODO Update to accommodate view switcher
+    this.route.queryParams.map((params) => {
+      if (isNotEmpty(params.view) && params.view == 'grid') {
+        pagination.pageSize = 12;
+      }
+    });
+
+
+    const sort: SortOptions = new SortOptions();
     this.searchOptions = this.service.searchOptions;
+
   }
 
   ngOnInit(): void {
diff --git a/src/app/+search-page/search-page.module.ts b/src/app/+search-page/search-page.module.ts
index 6519d1e92a..be99a0eae4 100644
--- a/src/app/+search-page/search-page.module.ts
+++ b/src/app/+search-page/search-page.module.ts
@@ -7,6 +7,9 @@ import { SearchResultsComponent } from './search-results/search-results.componen
 import { ItemSearchResultListElementComponent } from '../object-list/search-result-list-element/item-search-result/item-search-result-list-element.component';
 import { CollectionSearchResultListElementComponent } from '../object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component';
 import { CommunitySearchResultListElementComponent } from '../object-list/search-result-list-element/community-search-result/community-search-result-list-element.component';
+import { ItemSearchResultGridElementComponent } from '../object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component';
+import { CommunitySearchResultGridElementComponent } from '../object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component'
+import { CollectionSearchResultGridElementComponent } from '../object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component';
 import { SearchService } from './search-service/search.service';
 import { SearchSidebarComponent } from './search-sidebar/search-sidebar.component';
 import { SearchSidebarService } from './search-sidebar/search-sidebar.service';
@@ -37,6 +40,10 @@ const effects = [
     ItemSearchResultListElementComponent,
     CollectionSearchResultListElementComponent,
     CommunitySearchResultListElementComponent,
+    ItemSearchResultGridElementComponent,
+    CollectionSearchResultGridElementComponent,
+    CommunitySearchResultGridElementComponent,
+    CommunitySearchResultListElementComponent,
     SearchFiltersComponent,
     SearchFilterComponent,
     SearchFacetFilterComponent
@@ -49,7 +56,11 @@ const effects = [
   entryComponents: [
     ItemSearchResultListElementComponent,
     CollectionSearchResultListElementComponent,
-    CommunitySearchResultListElementComponent
+    CommunitySearchResultListElementComponent,
+    ItemSearchResultGridElementComponent,
+    CollectionSearchResultGridElementComponent,
+    CommunitySearchResultGridElementComponent,
   ]
 })
-export class SearchPageModule { }
+export class SearchPageModule {
+}
diff --git a/src/app/+search-page/search-result.model.ts b/src/app/+search-page/search-result.model.ts
index 2dd9130ee8..602d8ac9c2 100644
--- a/src/app/+search-page/search-result.model.ts
+++ b/src/app/+search-page/search-result.model.ts
@@ -1,6 +1,6 @@
 import { DSpaceObject } from '../core/shared/dspace-object.model';
 import { Metadatum } from '../core/shared/metadatum.model';
-import { ListableObject } from '../object-list/listable-object/listable-object.model';
+import { ListableObject } from '../object-collection/shared/listable-object.model';
 
 export class SearchResult<T extends DSpaceObject> implements ListableObject {
 
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..1b9bd7d52a 100644
--- a/src/app/+search-page/search-results/search-results.component.html
+++ b/src/app/+search-page/search-results/search-results.component.html
@@ -1,10 +1,10 @@
 <div *ngIf="searchResults?.hasSucceeded" @fadeIn>
   <h2 *ngIf="searchResults?.payload ?.length > 0">{{ 'search.results.head' | translate }}</h2>
-<ds-object-list
+<ds-viewable-collection
   [config]="searchConfig.pagination"
   [sortConfig]="searchConfig.sort"
   [objects]="searchResults"
   [hideGear]="true">
-</ds-object-list></div>
+</ds-viewable-collection></div>
 <ds-loading *ngIf="searchResults?.isLoading" message="{{'loading.search-results' | translate}}"></ds-loading>
 <ds-error *ngIf="searchResults?.hasFailed" message="{{'error.search-results' | translate}}"></ds-error>
diff --git a/src/app/+search-page/search-service/search.service.ts b/src/app/+search-page/search-service/search.service.ts
index 4b5ba7b702..5258756bfb 100644
--- a/src/app/+search-page/search-service/search.service.ts
+++ b/src/app/+search-page/search-service/search.service.ts
@@ -9,10 +9,10 @@ import { SearchOptions } from '../search-options.model';
 import { hasValue, isNotEmpty } from '../../shared/empty.util';
 import { Metadatum } from '../../core/shared/metadatum.model';
 import { Item } from '../../core/shared/item.model';
-import { ItemSearchResult } from '../../object-list/search-result-list-element/item-search-result/item-search-result.model';
 import { SearchFilterConfig } from './search-filter-config.model';
 import { FilterType } from './filter-type.model';
 import { FacetValue } from './facet-value.model';
+import { ItemSearchResult } from '../../object-collection/shared/item-search-result.model';
 import { ViewMode } from '../../+search-page/search-options.model';
 import { Router, NavigationExtras, ActivatedRoute } from '@angular/router';
 import { RouteService } from '../../shared/route.service';
diff --git a/src/app/core/shared/dspace-object.model.ts b/src/app/core/shared/dspace-object.model.ts
index 572efecada..a17a6b31ce 100644
--- a/src/app/core/shared/dspace-object.model.ts
+++ b/src/app/core/shared/dspace-object.model.ts
@@ -3,7 +3,7 @@ import { isEmpty, isNotEmpty } from '../../shared/empty.util';
 import { CacheableObject } from '../cache/object-cache.reducer';
 import { RemoteData } from '../data/remote-data';
 import { ResourceType } from './resource-type';
-import { ListableObject } from '../../object-list/listable-object/listable-object.model';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
 import { Observable } from 'rxjs/Observable';
 
 /**
diff --git a/src/app/object-collection/object-collection.component.html b/src/app/object-collection/object-collection.component.html
new file mode 100644
index 0000000000..e651c18290
--- /dev/null
+++ b/src/app/object-collection/object-collection.component.html
@@ -0,0 +1,13 @@
+<ds-object-list [config]="config"
+                [sortConfig]="sortConfig"
+                [objects]="objects"
+                *ngIf="getViewMode()=='list'">
+</ds-object-list>
+
+<ds-object-grid [config]="config"
+                [sortConfig]="sortConfig"
+                [objects]="objects"
+                *ngIf="getViewMode()=='grid'">
+</ds-object-grid>
+
+
diff --git a/src/app/object-collection/object-collection.component.scss b/src/app/object-collection/object-collection.component.scss
new file mode 100644
index 0000000000..da97dd7a62
--- /dev/null
+++ b/src/app/object-collection/object-collection.component.scss
@@ -0,0 +1 @@
+@import '../../styles/variables.scss';
diff --git a/src/app/object-collection/object-collection.component.ts b/src/app/object-collection/object-collection.component.ts
new file mode 100644
index 0000000000..25761073e4
--- /dev/null
+++ b/src/app/object-collection/object-collection.component.ts
@@ -0,0 +1,113 @@
+import { Component, EventEmitter,
+  Input,
+  OnInit,
+  Output, SimpleChanges, OnChanges, ChangeDetectorRef } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
+
+import { RemoteData } from '../core/data/remote-data';
+import { PageInfo } from '../core/shared/page-info.model';
+
+import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
+
+import {  SortDirection } from '../core/cache/models/sort-options.model';
+
+import { ListableObject } from './shared/listable-object.model';
+import { hasValue, isNotEmpty } from '../shared/empty.util';
+@Component({
+  selector: 'ds-viewable-collection',
+  styleUrls: ['./object-collection.component.scss'],
+  templateUrl: './object-collection.component.html',
+})
+export class ObjectCollectionComponent implements OnChanges, OnInit {
+
+  @Input() objects: RemoteData<ListableObject[]>;
+  @Input() config?: PaginationComponentOptions;
+  pageInfo: Observable<PageInfo>;
+
+  /**
+   * An event fired when the page is changed.
+   * Event's payload equals to the newly selected page.
+   */
+  @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
+
+  /**
+   * An event fired when the page wsize is changed.
+   * Event's payload equals to the newly selected page size.
+   */
+  @Output() pageSizeChange: EventEmitter<number> = new EventEmitter<number>();
+
+  /**
+   * An event fired when the sort direction is changed.
+   * Event's payload equals to the newly selected sort direction.
+   */
+  @Output() sortDirectionChange: EventEmitter<SortDirection> = new EventEmitter<SortDirection>();
+
+  @Output() paginationChange: EventEmitter<SortDirection> = new EventEmitter<any>();
+
+  /**
+   * An event fired when the sort field is changed.
+   * Event's payload equals to the newly selected sort field.
+   */
+  @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
+  data: any = {};
+  defaultViewMode: string ='list';
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.objects && !changes.objects.isFirstChange()) {
+      this.pageInfo = this.objects.pageInfo;
+    }
+  }
+
+  ngOnInit(): void {
+    this.pageInfo = this.objects.pageInfo;
+  }
+
+  /**
+   * @param route
+   *    Route is a singleton service provided by Angular.
+   * @param router
+   *    Router is a singleton service provided by Angular.
+   */
+  constructor(private cdRef: ChangeDetectorRef, private route: ActivatedRoute,
+              private router: Router) {
+  }
+
+  getViewMode(): string {
+    // TODO Update to accommodate view switcher
+
+    this.route.queryParams.map((params) => {
+      if (isNotEmpty(params.view) && hasValue(params.view)) {
+        return params.view;
+      } else {
+        return this.defaultViewMode;
+      }
+    });
+    return this.defaultViewMode;
+  }
+
+  setViewMode(viewMode: string) {
+    this.defaultViewMode = viewMode;
+  }
+  onPageChange(event) {
+    this.pageChange.emit(event);
+  }
+
+  onPageSizeChange(event) {
+    this.pageSizeChange.emit(event);
+  }
+
+  onSortDirectionChange(event) {
+    this.sortDirectionChange.emit(event);
+  }
+
+  onSortFieldChange(event) {
+    this.sortFieldChange.emit(event);
+  }
+
+  onPaginationChange(event) {
+    this.paginationChange.emit(event);
+  }
+
+}
diff --git a/src/app/object-collection/shared/item-search-result.model.ts b/src/app/object-collection/shared/item-search-result.model.ts
new file mode 100644
index 0000000000..75d56a2488
--- /dev/null
+++ b/src/app/object-collection/shared/item-search-result.model.ts
@@ -0,0 +1,5 @@
+import { SearchResult } from '../../+search-page/search-result.model';
+import { Item } from '../../core/shared/item.model';
+
+export class ItemSearchResult extends SearchResult<Item> {
+}
diff --git a/src/app/object-list/listable-object/listable-object.model.ts b/src/app/object-collection/shared/listable-object.model.ts
similarity index 100%
rename from src/app/object-list/listable-object/listable-object.model.ts
rename to src/app/object-collection/shared/listable-object.model.ts
diff --git a/src/app/object-grid/collection-grid-element/collection-grid-element.component.html b/src/app/object-grid/collection-grid-element/collection-grid-element.component.html
new file mode 100644
index 0000000000..5dc717cf54
--- /dev/null
+++ b/src/app/object-grid/collection-grid-element/collection-grid-element.component.html
@@ -0,0 +1,12 @@
+<div class="card">
+  <a [routerLink]="['/collections/' + object.id]"class="card-img-top">
+    <ds-comcol-page-logo [logo]="object.logo">
+    </ds-comcol-page-logo>
+  </a>
+  <div class="card-block">
+    <h4 class="card-title">{{object.name}}</h4>
+    <p *ngIf="object.shortDescription" class="card-text">{{object.shortDescription}}</p>
+    <a [routerLink]="['/collections/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+
+  </div>
+</div>
diff --git a/src/app/object-grid/collection-grid-element/collection-grid-element.component.scss b/src/app/object-grid/collection-grid-element/collection-grid-element.component.scss
new file mode 100644
index 0000000000..48e2b121d4
--- /dev/null
+++ b/src/app/object-grid/collection-grid-element/collection-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../styles/variables.scss';
+@import '../grid-card-styling.scss';
diff --git a/src/app/object-grid/collection-grid-element/collection-grid-element.component.ts b/src/app/object-grid/collection-grid-element/collection-grid-element.component.ts
new file mode 100644
index 0000000000..80be3d75b3
--- /dev/null
+++ b/src/app/object-grid/collection-grid-element/collection-grid-element.component.ts
@@ -0,0 +1,14 @@
+import { Component, Inject } from '@angular/core';
+
+import { Collection } from '../../core/shared/collection.model';
+import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+import { gridElementFor } from '../grid-element-decorator';
+
+@Component({
+  selector: 'ds-collection-grid-element',
+  styleUrls: ['./collection-grid-element.component.scss'],
+  templateUrl: './collection-grid-element.component.html'
+})
+
+@gridElementFor(Collection)
+export class CollectionGridElementComponent extends ObjectGridElementComponent<Collection> {}
diff --git a/src/app/object-grid/community-grid-element/community-grid-element.component.html b/src/app/object-grid/community-grid-element/community-grid-element.component.html
new file mode 100644
index 0000000000..e4ea3dcb13
--- /dev/null
+++ b/src/app/object-grid/community-grid-element/community-grid-element.component.html
@@ -0,0 +1,12 @@
+<div class="card">
+
+  <a [routerLink]="['/communities/' + object.id]"class="card-img-top">
+    <ds-comcol-page-logo [logo]="object.logo">
+    </ds-comcol-page-logo>
+  </a>
+  <div class="card-block">
+    <h4 class="card-title">{{object.name}}</h4>
+    <p *ngIf="object.shortDescription" class="card-text">{{object.shortDescription}}</p>
+    <a [routerLink]="['/communities/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+  </div>
+</div>
diff --git a/src/app/object-grid/community-grid-element/community-grid-element.component.scss b/src/app/object-grid/community-grid-element/community-grid-element.component.scss
new file mode 100644
index 0000000000..48e2b121d4
--- /dev/null
+++ b/src/app/object-grid/community-grid-element/community-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../styles/variables.scss';
+@import '../grid-card-styling.scss';
diff --git a/src/app/object-grid/community-grid-element/community-grid-element.component.ts b/src/app/object-grid/community-grid-element/community-grid-element.component.ts
new file mode 100644
index 0000000000..e29e037c5d
--- /dev/null
+++ b/src/app/object-grid/community-grid-element/community-grid-element.component.ts
@@ -0,0 +1,14 @@
+import { Component, Input, Inject } from '@angular/core';
+
+import { Community } from '../../core/shared/community.model';
+import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+import { gridElementFor} from '../grid-element-decorator';
+
+@Component({
+  selector: 'ds-community-grid-element',
+  styleUrls: ['./community-grid-element.component.scss'],
+  templateUrl: './community-grid-element.component.html'
+})
+
+@gridElementFor(Community)
+export class CommunityGridElementComponent extends ObjectGridElementComponent<Community> {}
diff --git a/src/app/object-grid/grid-card-styling.scss b/src/app/object-grid/grid-card-styling.scss
new file mode 100644
index 0000000000..52b78524b0
--- /dev/null
+++ b/src/app/object-grid/grid-card-styling.scss
@@ -0,0 +1,36 @@
+.card-title{
+  line-height: 1em;
+  height:3em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1em;
+  margin-bottom:10px;
+}
+.card-text.item-authors {
+  height: 1em;
+}
+.card-text.item-abstract {
+  height: 5em;
+
+}
+.viewButton{
+  display:block;
+}
+
+.card{
+  padding:10px;
+  margin-bottom: 15px;
+}
+
+.card-img-top ::ng-deep  img
+{
+  height: 120px;
+  width: 100%;
+  object-fit: cover;
+  margin-bottom: 10px;
+}
diff --git a/src/app/object-grid/grid-element-decorator.ts b/src/app/object-grid/grid-element-decorator.ts
new file mode 100644
index 0000000000..cd5ebbcaeb
--- /dev/null
+++ b/src/app/object-grid/grid-element-decorator.ts
@@ -0,0 +1,16 @@
+import { GenericConstructor } from '../core/shared/generic-constructor';
+import { ListableObject } from '../object-collection/shared/listable-object.model';
+
+const gridElementMap = new Map();
+export function gridElementFor(gridable: GenericConstructor<ListableObject>) {
+  return function decorator(objectElement: any) {
+    if (!objectElement) {
+      return;
+    }
+    gridElementMap.set(gridable, objectElement);
+  };
+}
+
+export function getGridElementFor(gridable: GenericConstructor<ListableObject>) {
+  return gridElementMap.get(gridable);
+}
diff --git a/src/app/object-grid/item-grid-element/item-grid-element.component.html b/src/app/object-grid/item-grid-element/item-grid-element.component.html
new file mode 100644
index 0000000000..ea7b894896
--- /dev/null
+++ b/src/app/object-grid/item-grid-element/item-grid-element.component.html
@@ -0,0 +1,20 @@
+<div class="card">
+
+  <a [routerLink]="['/items/' + object.id]" class="card-img-top">
+    <ds-thumbnail [thumbnail]="object.getThumbnail()">
+    </ds-thumbnail>
+  </a>
+  <div class="card-block">
+    <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">
+        <span *ngFor="let authorMd of object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let last=last;">{{authorMd.value}}
+            <span *ngIf="!last">; </span>
+        </span>
+    </p>
+    (<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>)
+
+    <p *ngIf="object.findMetadata('dc.description.abstract')" class="item-abstract card-text">{{object.findMetadata("dc.description.abstract") | dsTruncate:[200] }}</p>
+
+    <a [routerLink]="['/items/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+  </div>
+</div>
diff --git a/src/app/object-grid/item-grid-element/item-grid-element.component.scss b/src/app/object-grid/item-grid-element/item-grid-element.component.scss
new file mode 100644
index 0000000000..48e2b121d4
--- /dev/null
+++ b/src/app/object-grid/item-grid-element/item-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../styles/variables.scss';
+@import '../grid-card-styling.scss';
diff --git a/src/app/object-grid/item-grid-element/item-grid-element.component.ts b/src/app/object-grid/item-grid-element/item-grid-element.component.ts
new file mode 100644
index 0000000000..c651ccfc9c
--- /dev/null
+++ b/src/app/object-grid/item-grid-element/item-grid-element.component.ts
@@ -0,0 +1,14 @@
+import { Component, Input, Inject } from '@angular/core';
+
+import { Item } from '../../core/shared/item.model';
+import { gridElementFor } from '../grid-element-decorator';
+import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+
+@Component({
+  selector: 'ds-item-grid-element',
+  styleUrls: ['./item-grid-element.component.scss'],
+  templateUrl: './item-grid-element.component.html'
+})
+
+@gridElementFor(Item)
+export class ItemGridElementComponent extends ObjectGridElementComponent<Item> {}
diff --git a/src/app/object-grid/object-grid-element/object-grid-element.component.html b/src/app/object-grid/object-grid-element/object-grid-element.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/object-grid/object-grid-element/object-grid-element.component.scss b/src/app/object-grid/object-grid-element/object-grid-element.component.scss
new file mode 100644
index 0000000000..0351acf15f
--- /dev/null
+++ b/src/app/object-grid/object-grid-element/object-grid-element.component.scss
@@ -0,0 +1,6 @@
+@import '../../../styles/variables.scss';
+@import '../grid-card-styling.scss';
+:host {
+  display: block;
+  margin-bottom: $spacer;
+}
diff --git a/src/app/object-grid/object-grid-element/object-grid-element.component.ts b/src/app/object-grid/object-grid-element/object-grid-element.component.ts
new file mode 100644
index 0000000000..c3ab5e39e3
--- /dev/null
+++ b/src/app/object-grid/object-grid-element/object-grid-element.component.ts
@@ -0,0 +1,14 @@
+import { Component, Inject } from '@angular/core';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
+
+@Component({
+  selector: 'ds-object-grid-element',
+  styleUrls: ['./object-grid-element.component.scss'],
+  templateUrl: './object-grid-element.component.html'
+})
+export class ObjectGridElementComponent <T extends ListableObject> {
+  object: T;
+  public constructor(@Inject('objectElementProvider') public gridable: ListableObject) {
+    this.object = gridable as T;
+  }
+}
diff --git a/src/app/object-grid/object-grid.component.html b/src/app/object-grid/object-grid.component.html
new file mode 100644
index 0000000000..2ad9c11a8f
--- /dev/null
+++ b/src/app/object-grid/object-grid.component.html
@@ -0,0 +1,23 @@
+<ds-pagination
+  [paginationOptions]="config"
+  [pageInfoState]="pageInfo"
+  [collectionSize]="(pageInfo | async)?.totalElements"
+  [sortOptions]="sortConfig"
+  [hideGear]="hideGear"
+  [hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
+  (pageChange)="onPageChange($event)"
+  (pageSizeChange)="onPageSizeChange($event)"
+  (sortDirectionChange)="onSortDirectionChange($event)"
+  (sortFieldChange)="onSortDirectionChange($event)"
+  (paginationChange)="onPaginationChange($event)">
+  <ul *ngIf="objects.hasSucceeded | async" @fadeIn>
+    <div class="row">
+        <div class="col-lg-3 col-xs-12 col-sm-6"
+          *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
+          <ds-wrapper-grid-element [object]="object"></ds-wrapper-grid-element>
+      </div>
+    </div>
+  </ul>
+  <ds-error *ngIf="objects.hasFailed | async" message="{{'error.objects' | translate}}"></ds-error>
+  <ds-loading *ngIf="objects.isLoading | async" message="{{'loading.objects' | translate}}"></ds-loading>
+</ds-pagination>
diff --git a/src/app/object-grid/object-grid.component.scss b/src/app/object-grid/object-grid.component.scss
new file mode 100644
index 0000000000..da97dd7a62
--- /dev/null
+++ b/src/app/object-grid/object-grid.component.scss
@@ -0,0 +1 @@
+@import '../../styles/variables.scss';
diff --git a/src/app/object-grid/object-grid.component.ts b/src/app/object-grid/object-grid.component.ts
new file mode 100644
index 0000000000..b316fe37c2
--- /dev/null
+++ b/src/app/object-grid/object-grid.component.ts
@@ -0,0 +1,86 @@
+import {
+  Component, EventEmitter,
+  Input,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  OnInit,
+  Output, SimpleChanges, OnChanges, ChangeDetectorRef, DoCheck
+} from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import { RemoteData } from '../core/data/remote-data';
+import { PageInfo } from '../core/shared/page-info.model';
+
+import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
+
+import { SortOptions, SortDirection } from '../core/cache/models/sort-options.model';
+import { fadeIn } from '../shared/animations/fade';
+import { ListableObject } from '../object-collection/shared/listable-object.model';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.Default,
+  encapsulation: ViewEncapsulation.Emulated,
+  selector: 'ds-object-grid',
+  styleUrls: [ './object-grid.component.scss' ],
+  templateUrl: './object-grid.component.html',
+  animations: [fadeIn]
+})
+
+export class ObjectGridComponent implements OnChanges, OnInit  {
+
+  @Input() objects: RemoteData<ListableObject[]>;
+  @Input() config: PaginationComponentOptions;
+  @Input() sortConfig: SortOptions;
+  @Input() hideGear = false;
+  @Input() hidePagerWhenSinglePage = true;
+  pageInfo: Observable<PageInfo>;
+
+  /**
+   * An event fired when the page is changed.
+   * Event's payload equals to the newly selected page.
+   */
+  @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
+
+  /**
+   * An event fired when the page wsize is changed.
+   * Event's payload equals to the newly selected page size.
+   */
+  @Output() pageSizeChange: EventEmitter<number> = new EventEmitter<number>();
+
+  /**
+   * An event fired when the sort direction is changed.
+   * Event's payload equals to the newly selected sort direction.
+   */
+  @Output() sortDirectionChange: EventEmitter<SortDirection> = new EventEmitter<SortDirection>();
+
+  @Output() paginationChange: EventEmitter<SortDirection> = new EventEmitter<any>();
+
+  /**
+   * An event fired when the sort field is changed.
+   * Event's payload equals to the newly selected sort field.
+   */
+  @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
+  data: any = {};
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.objects && !changes.objects.isFirstChange()) {
+      this.pageInfo = this.objects.pageInfo;
+    }
+  }
+
+  ngOnInit(): void {
+    this.pageInfo = this.objects.pageInfo;
+    this.config.pageSize = 4;
+  }
+
+  /**
+   * @param route
+   *    Route is a singleton service provided by Angular.
+   * @param router
+   *    Router is a singleton service provided by Angular.
+   */
+  constructor(private cdRef: ChangeDetectorRef) {
+  }
+
+
+}
diff --git a/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
new file mode 100644
index 0000000000..914fb49487
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
@@ -0,0 +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>
diff --git a/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
new file mode 100644
index 0000000000..790f794381
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../styles/variables.scss';
+@import '../../grid-card-styling.scss';
diff --git a/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts
new file mode 100644
index 0000000000..aa1d495dba
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+import { gridElementFor } from '../../grid-element-decorator';
+import { CollectionSearchResult } from './collection-search-result.model';
+import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
+import { Collection } from '../../../core/shared/collection.model';
+
+@Component({
+  selector: 'ds-collection-search-result-grid-element',
+  styleUrls: ['../search-result-grid-element.component.scss', 'collection-search-result-grid-element.component.scss'],
+  templateUrl: 'collection-search-result-grid-element.component.html'
+})
+
+@gridElementFor(CollectionSearchResult)
+export class CollectionSearchResultGridElementComponent extends SearchResultGridElementComponent<CollectionSearchResult, Collection> {}
diff --git a/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts
new file mode 100644
index 0000000000..fa7945dedd
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts
@@ -0,0 +1,5 @@
+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/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html b/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
new file mode 100644
index 0000000000..d09ef7d668
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
@@ -0,0 +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>
diff --git a/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss b/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
new file mode 100644
index 0000000000..790f794381
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../styles/variables.scss';
+@import '../../grid-card-styling.scss';
diff --git a/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts b/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
new file mode 100644
index 0000000000..1ce9e1d09a
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+import { CommunitySearchResult } from './community-search-result.model';
+import { Community } from '../../../core/shared/community.model';
+import { gridElementFor } from '../../grid-element-decorator';
+import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
+
+@Component({
+  selector: 'ds-community-search-result-grid-element',
+  styleUrls: ['../search-result-grid-element.component.scss', 'community-search-result-grid-element.component.scss'],
+  templateUrl: 'community-search-result-grid-element.component.html'
+})
+
+@gridElementFor(CommunitySearchResult)
+export class CommunitySearchResultGridElementComponent extends SearchResultGridElementComponent<CommunitySearchResult, Community> {
+
+}
diff --git a/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result.model.ts b/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result.model.ts
new file mode 100644
index 0000000000..79ea34b6cd
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/community-search-result/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/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
new file mode 100644
index 0000000000..c6e1bc6b14
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
@@ -0,0 +1,27 @@
+<div class="card">
+  <a [routerLink]="['/items/' + dso.id]" class="card-img-top">
+    <ds-thumbnail [thumbnail]="dso.getThumbnail()">
+    </ds-thumbnail>
+  </a>
+  <div class="card-block">
+    <h4 class="card-title">{{dso.findMetadata('dc.title')}}</h4>
+
+    <p *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);"
+       class="item-authors card-text">
+        <span
+          *ngFor="let authorMd of dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let last=last;">{{authorMd.value}}
+            <span *ngIf="!last">; </span>
+        </span>
+    </p>
+    (<span *ngIf="dso.findMetadata('dc.publisher')"
+           class="item-list-publisher">{{dso.findMetadata("dc.publisher")}}, </span><span
+    *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date">{{dso.findMetadata("dc.date.issued")}}</span>)
+
+    <p *ngIf="dso.findMetadata('dc.description.abstract')" class="item-abstract card-text">
+      {{dso.findMetadata("dc.description.abstract") | dsTruncate:[200] }}</p>
+
+  </div>
+  <a [routerLink]="['/items/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+
+</div>
+
diff --git a/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
new file mode 100644
index 0000000000..790f794381
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../styles/variables.scss';
+@import '../../grid-card-styling.scss';
diff --git a/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
new file mode 100644
index 0000000000..7a82803c9b
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+import { gridElementFor } from '../../grid-element-decorator';
+import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
+import { Item } from '../../../core/shared/item.model';
+import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
+
+@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'
+})
+
+@gridElementFor(ItemSearchResult)
+export class ItemSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> {}
diff --git a/src/app/object-grid/search-result-grid-element/search-result-grid-element.component.scss b/src/app/object-grid/search-result-grid-element/search-result-grid-element.component.scss
new file mode 100644
index 0000000000..0f2684f1f1
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/search-result-grid-element.component.scss
@@ -0,0 +1,8 @@
+ @import '../../../styles/variables.scss';
+ @import '../grid-card-styling.scss';
+:host {
+    /deep/ em {
+        font-weight: bold;
+        font-style: normal;
+    }
+}
diff --git a/src/app/object-grid/search-result-grid-element/search-result-grid-element.component.ts b/src/app/object-grid/search-result-grid-element/search-result-grid-element.component.ts
new file mode 100644
index 0000000000..ba98a58d4b
--- /dev/null
+++ b/src/app/object-grid/search-result-grid-element/search-result-grid-element.component.ts
@@ -0,0 +1,57 @@
+import { Component, Inject } from '@angular/core';
+
+import { SearchResult } from '../../+search-page/search-result.model';
+import { DSpaceObject } from '../../core/shared/dspace-object.model';
+import { Metadatum } from '../../core/shared/metadatum.model';
+import { isEmpty, hasNoValue } from '../../shared/empty.util';
+import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
+
+@Component({
+  selector: 'ds-search-result-grid-element',
+  template: ``
+})
+
+export class SearchResultGridElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends ObjectGridElementComponent<T> {
+  dso: K;
+
+  public constructor(@Inject('objectElementProvider') public gridable: ListableObject) {
+    super(gridable);
+    this.dso = this.object.dspaceObject;
+  }
+
+  getValues(keys: string[]): string[] {
+    const results: string[] = new Array<string>();
+    this.object.hitHighlights.forEach(
+      (md: Metadatum) => {
+        if (keys.indexOf(md.key) > -1) {
+          results.push(md.value);
+        }
+      }
+    );
+    if (isEmpty(results)) {
+      this.dso.filterMetadata(keys).forEach(
+        (md: Metadatum) => {
+          results.push(md.value);
+        }
+      );
+    }
+    return results;
+  }
+
+  getFirstValue(key: string): string {
+    let result: string;
+    this.object.hitHighlights.some(
+      (md: Metadatum) => {
+        if (key === md.key) {
+          result =  md.value;
+          return true;
+        }
+      }
+    );
+    if (hasNoValue(result)) {
+      result = this.dso.findMetadata(key);
+    }
+    return result;
+  }
+}
diff --git a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.html b/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.html
new file mode 100644
index 0000000000..b613b16055
--- /dev/null
+++ b/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.html
@@ -0,0 +1 @@
+<ng-container *ngComponentOutlet="getGridElement(); injector: objectInjector;"></ng-container>
diff --git a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss b/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
new file mode 100644
index 0000000000..48e2b121d4
--- /dev/null
+++ b/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../styles/variables.scss';
+@import '../grid-card-styling.scss';
diff --git a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts b/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
new file mode 100644
index 0000000000..bd15a0d443
--- /dev/null
+++ b/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
@@ -0,0 +1,27 @@
+import { Component, Input, Injector, ReflectiveInjector, OnInit } from '@angular/core';
+import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { getGridElementFor } from '../grid-element-decorator';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
+
+@Component({
+  selector: 'ds-wrapper-grid-element',
+  styleUrls: ['./wrapper-grid-element.component.scss'],
+  templateUrl: './wrapper-grid-element.component.html'
+})
+export class WrapperGridElementComponent implements OnInit {
+  @Input() object: ListableObject;
+  objectInjector: Injector;
+
+  constructor(private injector: Injector) {}
+
+  ngOnInit(): void {
+    this.objectInjector = ReflectiveInjector.resolveAndCreate(
+      [{provide: 'objectElementProvider', useFactory: () => (this.object) }], this.injector);
+
+  }
+
+  getGridElement(): string {
+    const f: GenericConstructor<ListableObject> = this.object.constructor as GenericConstructor<ListableObject>;
+    return getGridElementFor(f);
+  }
+}
diff --git a/src/app/object-list/list-element-decorator.ts b/src/app/object-list/list-element-decorator.ts
index 64a747d4a5..aa044755ea 100644
--- a/src/app/object-list/list-element-decorator.ts
+++ b/src/app/object-list/list-element-decorator.ts
@@ -1,5 +1,5 @@
-import { ListableObject } from './listable-object/listable-object.model';
 import { GenericConstructor } from '../core/shared/generic-constructor';
+import { ListableObject } from '../object-collection/shared/listable-object.model';
 
 const listElementMap = new Map();
 export function listElementFor(listable: GenericConstructor<ListableObject>) {
diff --git a/src/app/object-list/object-list-element/object-list-element.component.ts b/src/app/object-list/object-list-element/object-list-element.component.ts
index df39a7d18d..24f0ec1d93 100644
--- a/src/app/object-list/object-list-element/object-list-element.component.ts
+++ b/src/app/object-list/object-list-element/object-list-element.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { ListableObject } from '../listable-object/listable-object.model';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
 
 @Component({
   selector: 'ds-object-list-element',
diff --git a/src/app/object-list/object-list.component.ts b/src/app/object-list/object-list.component.ts
index 0f7decadd7..352d7bc393 100644
--- a/src/app/object-list/object-list.component.ts
+++ b/src/app/object-list/object-list.component.ts
@@ -11,9 +11,8 @@ import { SortDirection, SortOptions } from '../core/cache/models/sort-options.mo
 
 import { RemoteData } from '../core/data/remote-data';
 import { PageInfo } from '../core/shared/page-info.model';
-import { ListableObject } from '../object-list/listable-object/listable-object.model';
-
 import { fadeIn } from '../shared/animations/fade';
+import { ListableObject } from '../object-collection/shared/listable-object.model';
 import { hasValue } from '../shared/empty.util';
 
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
@@ -83,6 +82,7 @@ export class ObjectListComponent {
   @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
   data: any = {};
 
+
   onPageChange(event) {
     this.pageChange.emit(event);
   }
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..2974a87883 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,9 @@
 import { Component } 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 { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
 
 @Component({
   selector: 'ds-item-search-result-list-element',
diff --git a/src/app/object-list/search-result-list-element/item-search-result/item-search-result.model.ts b/src/app/object-list/search-result-list-element/item-search-result/item-search-result.model.ts
deleted file mode 100644
index d9af3539a0..0000000000
--- a/src/app/object-list/search-result-list-element/item-search-result/item-search-result.model.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { SearchResult } from '../../../+search-page/search-result.model';
-import { Item } from '../../../core/shared/item.model';
-
-export class ItemSearchResult extends SearchResult<Item> {
-}
diff --git a/src/app/object-list/search-result-list-element/search-result-list-element.component.ts b/src/app/object-list/search-result-list-element/search-result-list-element.component.ts
index 4119bc3c2e..ec0afde65d 100644
--- a/src/app/object-list/search-result-list-element/search-result-list-element.component.ts
+++ b/src/app/object-list/search-result-list-element/search-result-list-element.component.ts
@@ -1,11 +1,11 @@
 import { Component, Inject } from '@angular/core';
 
 import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
-import { ListableObject } from '../listable-object/listable-object.model';
 import { SearchResult } from '../../+search-page/search-result.model';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { Metadatum } from '../../core/shared/metadatum.model';
 import { isEmpty, hasNoValue } from '../../shared/empty.util';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
 
 @Component({
   selector: 'ds-search-result-list-element',
diff --git a/src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts b/src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts
index 443b9681d1..2e1184b023 100644
--- a/src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts
+++ b/src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, Injector, ReflectiveInjector, OnInit } from '@angular/core';
-import { ListableObject } from '../listable-object/listable-object.model';
 import { getListElementFor } from '../list-element-decorator'
 import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
 
 @Component({
   selector: 'ds-wrapper-list-element',
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 245d45ea4e..1ebf251e2c 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -15,20 +15,30 @@ 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 { CommunityListElementComponent } from '../object-list/community-list-element/community-list-element.component';
+import { ItemListElementComponent } from '../object-list/item-list-element/item-list-element.component';
+import { ObjectListElementComponent } from '../object-list/object-list-element/object-list-element.component';
+import { SearchResultListElementComponent } from '../object-list/search-result-list-element/search-result-list-element.component';
+import { WrapperListElementComponent } from '../object-list/wrapper-list-element/wrapper-list-element.component';
+import { ObjectListComponent } from '../object-list/object-list.component';
+
+import { CollectionGridElementComponent} from '../object-grid/collection-grid-element/collection-grid-element.component'
+import { CommunityGridElementComponent} from '../object-grid/community-grid-element/community-grid-element.component'
+import { ItemGridElementComponent} from '../object-grid/item-grid-element/item-grid-element.component'
+import { ObjectGridElementComponent} from '../object-grid/object-grid-element/object-grid-element.component'
+import { WrapperGridElementComponent} from '../object-grid/wrapper-grid-element/wrapper-grid-element.component'
+import { ObjectGridComponent } from '../object-grid/object-grid.component';
+import { ObjectCollectionComponent } from '../object-collection/object-collection.component';
 import { ComcolPageContentComponent } from './comcol-page-content/comcol-page-content.component';
 import { ComcolPageHeaderComponent } from './comcol-page-header/comcol-page-header.component';
 import { ComcolPageLogoComponent } from './comcol-page-logo/comcol-page-logo.component';
-import { CommunityListElementComponent } from '../object-list/community-list-element/community-list-element.component';
 import { ErrorComponent } from './error/error.component';
 import { LoadingComponent } from './loading/loading.component';
-import { ItemListElementComponent } from '../object-list/item-list-element/item-list-element.component';
-import { ObjectListComponent } from '../object-list/object-list.component';
-import { ObjectListElementComponent } from '../object-list/object-list-element/object-list-element.component';
+
 import { PaginationComponent } from './pagination/pagination.component';
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component';
-import { SearchResultListElementComponent } from '../object-list/search-result-list-element/search-result-list-element.component';
 import { SearchFormComponent } from './search-form/search-form.component';
-import { WrapperListElementComponent } from '../object-list/wrapper-list-element/wrapper-list-element.component';
+import { SearchResultGridElementComponent } from '../object-grid/search-result-grid-element/search-result-grid-element.component';
 import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component';
 import { VarDirective } from './utils/var.directive';
 
@@ -60,6 +70,11 @@ const COMPONENTS = [
   LoadingComponent,
   ObjectListComponent,
   ObjectListElementComponent,
+  WrapperListElementComponent,
+  ObjectGridComponent,
+  ObjectGridElementComponent,
+  WrapperGridElementComponent,
+  ObjectCollectionComponent,
   PaginationComponent,
   SearchFormComponent,
   ThumbnailComponent,
@@ -69,10 +84,14 @@ const COMPONENTS = [
 
 const ENTRY_COMPONENTS = [
   // put shared entry components (components that are created dynamically) here
+  ItemListElementComponent,
   CollectionListElementComponent,
   CommunityListElementComponent,
-  ItemListElementComponent,
-  SearchResultListElementComponent
+  SearchResultListElementComponent,
+  ItemGridElementComponent,
+  CollectionGridElementComponent,
+  CommunityGridElementComponent,
+  SearchResultGridElementComponent
 ];
 
 const DIRECTIVES = [
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 73aa27eccc..7d05343152 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -2,3 +2,4 @@
 @import '../../node_modules/bootstrap/scss/mixins.scss';
 
 /* Custom mixins go here */
+
diff --git a/yarn.lock b/yarn.lock
index 91b2a787e2..4211b7228a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4804,6 +4804,10 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
+object-fit-images@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/object-fit-images/-/object-fit-images-3.2.3.tgz#4089f6d0070a3b5563d3c1ab6f1b28d61331f0ac"
+
 object-keys@^1.0.8:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"

From 17f839f9e1eb33ebf82538b08bc9ca7d9f1c718f Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Tue, 31 Oct 2017 13:28:48 +0100
Subject: [PATCH 21/47] #150 SortOptions config fixing

---
 ...ty-page-sub-collection-list.component.html | 15 ++++++-------
 .../top-level-community-list.component.html   |  2 +-
 .../+search-page/search-page.component.html   |  2 +-
 src/app/+search-page/search-page.component.ts |  7 +++---
 .../search-results.component.ts               |  2 ++
 .../object-collection.component.html          |  4 ++--
 .../object-collection.component.ts            | 22 +++++++++----------
 src/app/object-grid/object-grid.component.ts  | 19 ++++++++++++++++
 ...-search-result-grid-element.component.html |  2 +-
 src/app/object-list/object-list.component.ts  | 19 ++++++++++++++++
 10 files changed, 66 insertions(+), 28 deletions(-)

diff --git a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html
index f78b212bee..9494cdb755 100644
--- a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html
+++ b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html
@@ -1,11 +1,10 @@
 <ng-container *ngVar="(subCollectionsRDObs | async) as subCollectionsRD">
-  <div *ngIf="subCollectionsRD?.hasSucceeded" @fadeIn>
-    <h2>{{'community.sub-collection-list.head' | translate}}</h2>
-    <ul>
-      <ds-viewable-collection [objects]="subCollectionsRD?.payload">
-      </ds-viewable-collection>
-    </ul>
-  </div>
-  <ds-error *ngIf="subCollectionsRD?.hasFailed" message="{{'error.sub-collections' | translate}}"></ds-error>
+  <div *ngIf="subCollectionsRD?.hasSucceeded " @fadeIn>
+  <h2>{{'community.sub-collection-list.head' | translate}}</h2>
+  <ul>
+    <ds-viewable-collection [objects]="subCollectionsRD?.payload"
+    [sortConfig]="sortConfig"></ds-viewable-collection>
+  </ul>
+</div><ds-error *ngIf="subCollectionsRD?.hasFailed" message="{{'error.sub-collections' | translate}}"></ds-error>
   <ds-loading *ngIf="subCollectionsRD?.isLoading" message="{{'loading.sub-collections' | translate}}"></ds-loading>
 </ng-container>
diff --git a/src/app/+home-page/top-level-community-list/top-level-community-list.component.html b/src/app/+home-page/top-level-community-list/top-level-community-list.component.html
index 4eebb53e1e..934bb3933c 100644
--- a/src/app/+home-page/top-level-community-list/top-level-community-list.component.html
+++ b/src/app/+home-page/top-level-community-list/top-level-community-list.component.html
@@ -4,8 +4,8 @@
   <p class="lead">{{'home.top-level-communities.help' | translate}}</p>
   <ds-viewable-collection
     [config]="config"
+    [sortConfig]="sortConfig"
     [objects]="communitiesRD"
-
     (paginationChange)="updatePage($event)">
   </ds-viewable-collection>
 </div>
diff --git a/src/app/+search-page/search-page.component.html b/src/app/+search-page/search-page.component.html
index c4d679f72b..68a7bf6a9e 100644
--- a/src/app/+search-page/search-page.component.html
+++ b/src/app/+search-page/search-page.component.html
@@ -30,7 +30,7 @@
               </button>
             </div>
             <ds-search-results [searchResults]="resultsRDObs | async"
-                               [searchConfig]="searchOptions"></ds-search-results>
+                               [searchConfig]="searchOptions" [sortConfig]="sortConfig"></ds-search-results>
           </div>
         </div>
       </div>
diff --git a/src/app/+search-page/search-page.component.ts b/src/app/+search-page/search-page.component.ts
index d50f5e9442..d5f220d2b1 100644
--- a/src/app/+search-page/search-page.component.ts
+++ b/src/app/+search-page/search-page.component.ts
@@ -6,7 +6,7 @@ import { RemoteData } from '../core/data/remote-data';
 import { Community } from '../core/shared/community.model';
 import { DSpaceObject } from '../core/shared/dspace-object.model';
 import { isNotEmpty } from '../shared/empty.util';
-import { SearchOptions } from './search-options.model';
+import { SearchOptions,ViewMode } from './search-options.model';
 import { SearchResult } from './search-result.model';
 import { SearchService } from './search-service/search.service';
 import { pushInOut } from '../shared/animations/push';
@@ -36,6 +36,7 @@ export class SearchPageComponent implements OnInit, OnDestroy {
   resultsRDObs: Observable<RemoteData<Array<SearchResult<DSpaceObject>>>>;
   currentParams = {};
   searchOptions: SearchOptions;
+  sortConfig: SortOptions;
   scopeListRDObs: Observable<RemoteData<Community[]>>;
   isMobileView: Observable<boolean>;
 
@@ -58,15 +59,15 @@ export class SearchPageComponent implements OnInit, OnDestroy {
 
     // TODO Update to accommodate view switcher
     this.route.queryParams.map((params) => {
-      if (isNotEmpty(params.view) && params.view == 'grid') {
+      if (isNotEmpty(params.view) && params.view == ViewMode.Grid) {
         pagination.pageSize = 12;
       }
     });
 
 
     const sort: SortOptions = new SortOptions();
+    this.sortConfig=sort;
     this.searchOptions = this.service.searchOptions;
-
   }
 
   ngOnInit(): void {
diff --git a/src/app/+search-page/search-results/search-results.component.ts b/src/app/+search-page/search-results/search-results.component.ts
index 4733699f95..f8b3721630 100644
--- a/src/app/+search-page/search-results/search-results.component.ts
+++ b/src/app/+search-page/search-results/search-results.component.ts
@@ -3,6 +3,7 @@ import { RemoteData } from '../../core/data/remote-data';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { fadeIn, fadeInOut } from '../../shared/animations/fade';
 import { SearchOptions } from '../search-options.model';
+import { SortOptions } from '../../core/cache/models/sort-options.model';
 import { SearchResult } from '../search-result.model';
 
 /**
@@ -21,4 +22,5 @@ import { SearchResult } from '../search-result.model';
 export class SearchResultsComponent {
   @Input() searchResults: RemoteData<Array<SearchResult<DSpaceObject>>>;
   @Input() searchConfig: SearchOptions;
+  @Input() sortConfig: SortOptions;
 }
diff --git a/src/app/object-collection/object-collection.component.html b/src/app/object-collection/object-collection.component.html
index e651c18290..6c2a2fb1de 100644
--- a/src/app/object-collection/object-collection.component.html
+++ b/src/app/object-collection/object-collection.component.html
@@ -1,13 +1,13 @@
 <ds-object-list [config]="config"
                 [sortConfig]="sortConfig"
                 [objects]="objects"
-                *ngIf="getViewMode()=='list'">
+                *ngIf="getViewMode()===viewModeEnum.List">
 </ds-object-list>
 
 <ds-object-grid [config]="config"
                 [sortConfig]="sortConfig"
                 [objects]="objects"
-                *ngIf="getViewMode()=='grid'">
+                *ngIf="getViewMode()===viewModeEnum.Grid">
 </ds-object-grid>
 
 
diff --git a/src/app/object-collection/object-collection.component.ts b/src/app/object-collection/object-collection.component.ts
index 25761073e4..5a6d06509b 100644
--- a/src/app/object-collection/object-collection.component.ts
+++ b/src/app/object-collection/object-collection.component.ts
@@ -11,10 +11,12 @@ import { PageInfo } from '../core/shared/page-info.model';
 
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
 
-import {  SortDirection } from '../core/cache/models/sort-options.model';
+import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
 
 import { ListableObject } from './shared/listable-object.model';
+import { ViewMode } from '../+search-page/search-options.model';
 import { hasValue, isNotEmpty } from '../shared/empty.util';
+
 @Component({
   selector: 'ds-viewable-collection',
   styleUrls: ['./object-collection.component.scss'],
@@ -24,6 +26,7 @@ export class ObjectCollectionComponent implements OnChanges, OnInit {
 
   @Input() objects: RemoteData<ListableObject[]>;
   @Input() config?: PaginationComponentOptions;
+  @Input() sortConfig: SortOptions;
   pageInfo: Observable<PageInfo>;
 
   /**
@@ -52,7 +55,8 @@ export class ObjectCollectionComponent implements OnChanges, OnInit {
    */
   @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
   data: any = {};
-  defaultViewMode: string ='list';
+  currentMode: ViewMode = ViewMode.List;
+  viewModeEnum = ViewMode;
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.objects && !changes.objects.isFirstChange()) {
@@ -60,6 +64,7 @@ export class ObjectCollectionComponent implements OnChanges, OnInit {
     }
   }
 
+
   ngOnInit(): void {
     this.pageInfo = this.objects.pageInfo;
   }
@@ -74,22 +79,15 @@ export class ObjectCollectionComponent implements OnChanges, OnInit {
               private router: Router) {
   }
 
-  getViewMode(): string {
-    // TODO Update to accommodate view switcher
-
+  getViewMode(): ViewMode {
     this.route.queryParams.map((params) => {
       if (isNotEmpty(params.view) && hasValue(params.view)) {
-        return params.view;
-      } else {
-        return this.defaultViewMode;
+        this.currentMode= params.view;
       }
     });
-    return this.defaultViewMode;
+    return this.currentMode;
   }
 
-  setViewMode(viewMode: string) {
-    this.defaultViewMode = viewMode;
-  }
   onPageChange(event) {
     this.pageChange.emit(event);
   }
diff --git a/src/app/object-grid/object-grid.component.ts b/src/app/object-grid/object-grid.component.ts
index b316fe37c2..02931165c8 100644
--- a/src/app/object-grid/object-grid.component.ts
+++ b/src/app/object-grid/object-grid.component.ts
@@ -82,5 +82,24 @@ export class ObjectGridComponent implements OnChanges, OnInit  {
   constructor(private cdRef: ChangeDetectorRef) {
   }
 
+  onPageChange(event) {
+    this.pageChange.emit(event);
+  }
+
+  onPageSizeChange(event) {
+    this.pageSizeChange.emit(event);
+  }
+
+  onSortDirectionChange(event) {
+    this.sortDirectionChange.emit(event);
+  }
+
+  onSortFieldChange(event) {
+    this.sortFieldChange.emit(event);
+  }
+
+  onPaginationChange(event) {
+    this.paginationChange.emit(event);
+  }
 
 }
diff --git a/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
index c6e1bc6b14..895e8b59c3 100644
--- a/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
+++ b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
@@ -20,8 +20,8 @@
     <p *ngIf="dso.findMetadata('dc.description.abstract')" class="item-abstract card-text">
       {{dso.findMetadata("dc.description.abstract") | dsTruncate:[200] }}</p>
 
+    <a [routerLink]="['/items/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
   </div>
-  <a [routerLink]="['/items/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
 
 </div>
 
diff --git a/src/app/object-list/object-list.component.ts b/src/app/object-list/object-list.component.ts
index 352d7bc393..9422d1d843 100644
--- a/src/app/object-list/object-list.component.ts
+++ b/src/app/object-list/object-list.component.ts
@@ -103,4 +103,23 @@ export class ObjectListComponent {
     this.paginationChange.emit(event);
   }
 
+  onPageChange(event) {
+    this.pageChange.emit(event);
+  }
+
+  onPageSizeChange(event) {
+    this.pageSizeChange.emit(event);
+  }
+
+  onSortDirectionChange(event) {
+    this.sortDirectionChange.emit(event);
+  }
+
+  onSortFieldChange(event) {
+    this.sortFieldChange.emit(event);
+  }
+
+  onPaginationChange(event) {
+    this.paginationChange.emit(event);
+  }
 }

From c5bfbeaa00e8309a0a4766895943ae3be221485f Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Tue, 31 Oct 2017 13:51:08 +0100
Subject: [PATCH 22/47] #150 Pre grid/list decorator generalisation commit

---
 src/app/object-grid/object-grid.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/object-grid/object-grid.component.html b/src/app/object-grid/object-grid.component.html
index 2ad9c11a8f..7abfaf28d3 100644
--- a/src/app/object-grid/object-grid.component.html
+++ b/src/app/object-grid/object-grid.component.html
@@ -12,7 +12,7 @@
   (paginationChange)="onPaginationChange($event)">
   <ul *ngIf="objects.hasSucceeded | async" @fadeIn>
     <div class="row">
-        <div class="col-lg-3 col-xs-12 col-sm-6"
+        <div class="col-lg-4 col-sm-4 col-xs-12 "
           *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
           <ds-wrapper-grid-element [object]="object"></ds-wrapper-grid-element>
       </div>

From 491d40c026fbf712774ce7a40fdb4b4c3ce88800 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Tue, 31 Oct 2017 14:47:52 +0100
Subject: [PATCH 23/47] #150 Intermediate commit

---
 src/app/+search-page/search-page.component.ts          | 10 ++--------
 .../object-collection/object-collection.component.ts   | 10 +++++++++-
 src/app/object-grid/object-grid.component.ts           |  1 -
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/app/+search-page/search-page.component.ts b/src/app/+search-page/search-page.component.ts
index d5f220d2b1..0d9064dc87 100644
--- a/src/app/+search-page/search-page.component.ts
+++ b/src/app/+search-page/search-page.component.ts
@@ -57,14 +57,6 @@ export class SearchPageComponent implements OnInit, OnDestroy {
     pagination.currentPage = 1;
     pagination.pageSize = 10;
 
-    // TODO Update to accommodate view switcher
-    this.route.queryParams.map((params) => {
-      if (isNotEmpty(params.view) && params.view == ViewMode.Grid) {
-        pagination.pageSize = 12;
-      }
-    });
-
-
     const sort: SortOptions = new SortOptions();
     this.sortConfig=sort;
     this.searchOptions = this.service.searchOptions;
@@ -80,6 +72,8 @@ export class SearchPageComponent implements OnInit, OnDestroy {
           this.scope = params.scope;
           const page = +params.page || this.searchOptions.pagination.currentPage;
           const pageSize = +params.pageSize || this.searchOptions.pagination.pageSize;
+
+
           const sortDirection = +params.sortDirection || this.searchOptions.sort.direction;
           const pagination = Object.assign({},
             this.searchOptions.pagination,
diff --git a/src/app/object-collection/object-collection.component.ts b/src/app/object-collection/object-collection.component.ts
index 5a6d06509b..a79653d970 100644
--- a/src/app/object-collection/object-collection.component.ts
+++ b/src/app/object-collection/object-collection.component.ts
@@ -28,7 +28,7 @@ export class ObjectCollectionComponent implements OnChanges, OnInit {
   @Input() config?: PaginationComponentOptions;
   @Input() sortConfig: SortOptions;
   pageInfo: Observable<PageInfo>;
-
+  private sub;
   /**
    * An event fired when the page is changed.
    * Event's payload equals to the newly selected page.
@@ -67,6 +67,14 @@ export class ObjectCollectionComponent implements OnChanges, OnInit {
 
   ngOnInit(): void {
     this.pageInfo = this.objects.pageInfo;
+
+    this.sub = this.route
+      .queryParams
+      .subscribe((params) => {
+        if(isNotEmpty(params.view)){
+          this.currentMode = params.view;
+        }
+      });
   }
 
   /**
diff --git a/src/app/object-grid/object-grid.component.ts b/src/app/object-grid/object-grid.component.ts
index 02931165c8..a6b62d735f 100644
--- a/src/app/object-grid/object-grid.component.ts
+++ b/src/app/object-grid/object-grid.component.ts
@@ -70,7 +70,6 @@ export class ObjectGridComponent implements OnChanges, OnInit  {
 
   ngOnInit(): void {
     this.pageInfo = this.objects.pageInfo;
-    this.config.pageSize = 4;
   }
 
   /**

From e7e129f80f59269063180ec75392d431b781ec44 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Thu, 2 Nov 2017 10:53:18 +0100
Subject: [PATCH 24/47] #150 Intermediate commit

---
 src/app/+search-page/search-page.component.ts | 14 ++++++-
 src/app/object-grid/grid-card-styling.scss    | 33 +++++++++------
 .../grid-thumbnail.component.html             |  4 ++
 .../grid-thumbnail.component.scss             |  1 +
 .../grid-thumbnail.component.spec.ts          | 42 +++++++++++++++++++
 .../grid-thumbnail.component.ts               | 30 +++++++++++++
 .../item-grid-element.component.html          |  9 ++--
 .../object-grid/object-grid.component.html    |  4 +-
 ...-search-result-grid-element.component.html | 31 ++++++++------
 src/app/shared/shared.module.ts               |  2 +
 src/styles/_custom_variables.scss             |  2 +-
 11 files changed, 137 insertions(+), 35 deletions(-)
 create mode 100644 src/app/object-grid/grid-thumbnail/grid-thumbnail.component.html
 create mode 100644 src/app/object-grid/grid-thumbnail/grid-thumbnail.component.scss
 create mode 100644 src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
 create mode 100644 src/app/object-grid/grid-thumbnail/grid-thumbnail.component.ts

diff --git a/src/app/+search-page/search-page.component.ts b/src/app/+search-page/search-page.component.ts
index 0d9064dc87..697e379f3d 100644
--- a/src/app/+search-page/search-page.component.ts
+++ b/src/app/+search-page/search-page.component.ts
@@ -71,18 +71,27 @@ export class SearchPageComponent implements OnInit, OnDestroy {
           this.query = params.query || '';
           this.scope = params.scope;
           const page = +params.page || this.searchOptions.pagination.currentPage;
-          const pageSize = +params.pageSize || this.searchOptions.pagination.pageSize;
+          let pageSize = +params.pageSize || this.searchOptions.pagination.pageSize;
+          let pageSizeOptions: number[] = [5, 10, 20, 40, 60, 80, 100];
+
+          if (isNotEmpty(params.view) && params.view === ViewMode.Grid) {
+            pageSize = 12;
+            pageSizeOptions = [12, 24, 36, 48 , 50, 62, 74, 84];
+            // pageSize = 9;
+            // pageSizeOptions = [9, 18, 27, 36 , 45, 54, 63, 72];
+          }
 
 
           const sortDirection = +params.sortDirection || this.searchOptions.sort.direction;
           const pagination = Object.assign({},
             this.searchOptions.pagination,
-            { currentPage: page, pageSize: pageSize }
+            { currentPage: page, pageSize: pageSize, pageSizeOptions: pageSizeOptions}
           );
           const sort = Object.assign({},
             this.searchOptions.sort,
             { direction: sortDirection, field: params.sortField }
           );
+
           this.updateSearchResults({
             pagination: pagination,
             sort: sort
@@ -98,6 +107,7 @@ export class SearchPageComponent implements OnInit, OnDestroy {
 
   private updateSearchResults(searchOptions) {
     this.resultsRDObs = this.service.search(this.query, this.scope, searchOptions);
+    this.searchOptions = searchOptions;
   }
 
   ngOnDestroy() {
diff --git a/src/app/object-grid/grid-card-styling.scss b/src/app/object-grid/grid-card-styling.scss
index 52b78524b0..44f4183bfd 100644
--- a/src/app/object-grid/grid-card-styling.scss
+++ b/src/app/object-grid/grid-card-styling.scss
@@ -1,6 +1,9 @@
+@import '../../styles/custom_variables';
+
 .card-title{
-  line-height: 1em;
-  height:3em;
+  line-height: $line-height-base;
+  height:$headings-line-height;
+  font-size:$headings-font-size;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -8,29 +11,35 @@
 .card-text {
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: 1em;
-  margin-bottom:10px;
+  line-height: $line-height-base;
+  margin-bottom:$card-block-margin-base*2;
 }
 .card-text.item-authors {
-  height: 1em;
+  height: $line-height-base;
 }
 .card-text.item-abstract {
-  height: 5em;
-
+  height: $content-line-height;
 }
+
 .viewButton{
-  display:block;
+  display:table;
+  margin:auto;
+  width: $card-button-width;
 }
 
 .card{
-  padding:10px;
-  margin-bottom: 15px;
+  margin-bottom: $card-block-margin-base *3;
+  height: 98%;
 }
 
 .card-img-top ::ng-deep  img
 {
-  height: 120px;
+  height: $card-thumbnail-height;
   width: 100%;
   object-fit: cover;
-  margin-bottom: 10px;
 }
+
+.card-block{
+  margin: $card-block-margin-base;
+}
+
diff --git a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.html b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.html
new file mode 100644
index 0000000000..6221cbaba1
--- /dev/null
+++ b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.html
@@ -0,0 +1,4 @@
+<div class="thumbnail">
+  <img *ngIf="thumbnail" [src]="thumbnail.content" (error)="errorHandler($event)"/>
+  <img *ngIf="!thumbnail" [src]="holderSource | dsSafeUrl"/>
+</div>
diff --git a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.scss b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.scss
new file mode 100644
index 0000000000..50be6f5ad0
--- /dev/null
+++ b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.scss
@@ -0,0 +1 @@
+@import '../../../styles/variables.scss';
diff --git a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
new file mode 100644
index 0000000000..f4ca434221
--- /dev/null
+++ b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
@@ -0,0 +1,42 @@
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ThumbnailComponent } from './thumbnail.component';
+import { Bitstream } from '../../core/shared/bitstream.model';
+import { SafeUrlPipe } from '../../shared/utils/safe-url-pipe';
+
+describe('ThumbnailComponent', () => {
+  let comp: ThumbnailComponent;
+  let fixture: ComponentFixture<ThumbnailComponent>;
+  let de: DebugElement;
+  let el: HTMLElement;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ThumbnailComponent, SafeUrlPipe]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ThumbnailComponent);
+    comp = fixture.componentInstance; // BannerComponent test instance
+    de = fixture.debugElement.query(By.css('div.thumbnail'));
+    el = de.nativeElement;
+  });
+
+  it('should display image', () => {
+    comp.thumbnail = new Bitstream();
+    comp.thumbnail.content = 'test.url';
+    fixture.detectChanges();
+    const image: HTMLElement = de.query(By.css('img')).nativeElement;
+    expect(image.getAttribute('src')).toBe(comp.thumbnail.content);
+  });
+
+  it('should display placeholder', () => {
+    fixture.detectChanges();
+    const image: HTMLElement = de.query(By.css('img')).nativeElement;
+    expect(image.getAttribute('src')).toBe(comp.holderSource);
+  });
+
+});
diff --git a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.ts b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.ts
new file mode 100644
index 0000000000..7baa47b39e
--- /dev/null
+++ b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.ts
@@ -0,0 +1,30 @@
+import { Component, Input } from '@angular/core';
+import { Bitstream } from '../../core/shared/bitstream.model';
+
+/**
+ * This component renders a given Bitstream as a thumbnail.
+ * One input parameter of type Bitstream is expected.
+ * If no Bitstream is provided, a holderjs image will be rendered instead.
+ */
+
+@Component({
+  selector: 'ds-grid-thumbnail',
+  styleUrls: ['./grid-thumbnail.component.scss'],
+  templateUrl: './grid-thumbnail.component.html'
+})
+export class GridThumbnailComponent {
+
+  @Input() thumbnail: Bitstream;
+
+  data: any = {};
+
+  /**
+   * The default 'holder.js' image
+   */
+  holderSource = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI2MCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwL3RleHQ6Tm8gVGh1bWJuYWlsCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTVmNzJmMmFlMGIgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxM3B0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWY3MmYyYWUwYiI+PHJlY3Qgd2lkdGg9IjI2MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI3Mi4yNDIxODc1IiB5PSI5NiI+Tm8gVGh1bWJuYWlsPC90ZXh0PjwvZz48L2c+PC9zdmc+';
+
+  errorHandler(event) {
+    event.currentTarget.src = this.holderSource;
+  }
+
+}
diff --git a/src/app/object-grid/item-grid-element/item-grid-element.component.html b/src/app/object-grid/item-grid-element/item-grid-element.component.html
index ea7b894896..3fae55088e 100644
--- a/src/app/object-grid/item-grid-element/item-grid-element.component.html
+++ b/src/app/object-grid/item-grid-element/item-grid-element.component.html
@@ -1,17 +1,18 @@
 <div class="card">
 
   <a [routerLink]="['/items/' + object.id]" class="card-img-top">
-    <ds-thumbnail [thumbnail]="object.getThumbnail()">
-    </ds-thumbnail>
+    <ds-grid-thumbnail [thumbnail]="object.getThumbnail()">
+    </ds-grid-thumbnail>
   </a>
   <div class="card-block">
     <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">
+
+    <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>
         </span>
+      <span *ngIf="object.findMetadata('dc.date.issued')">{{object.findMetadata("dc.date.issued")}}</span>
     </p>
-    (<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>)
 
     <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/object-grid/object-grid.component.html b/src/app/object-grid/object-grid.component.html
index 7abfaf28d3..ebcf240d28 100644
--- a/src/app/object-grid/object-grid.component.html
+++ b/src/app/object-grid/object-grid.component.html
@@ -10,14 +10,12 @@
   (sortDirectionChange)="onSortDirectionChange($event)"
   (sortFieldChange)="onSortDirectionChange($event)"
   (paginationChange)="onPaginationChange($event)">
-  <ul *ngIf="objects.hasSucceeded | async" @fadeIn>
-    <div class="row">
+    <div class="row" *ngIf="objects.hasSucceeded | async" @fadeIn>
         <div class="col-lg-4 col-sm-4 col-xs-12 "
           *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
           <ds-wrapper-grid-element [object]="object"></ds-wrapper-grid-element>
       </div>
     </div>
-  </ul>
   <ds-error *ngIf="objects.hasFailed | async" message="{{'error.objects' | translate}}"></ds-error>
   <ds-loading *ngIf="objects.isLoading | async" message="{{'loading.objects' | translate}}"></ds-loading>
 </ds-pagination>
diff --git a/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
index 895e8b59c3..be84039416 100644
--- a/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
+++ b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
@@ -1,24 +1,29 @@
 <div class="card">
   <a [routerLink]="['/items/' + dso.id]" class="card-img-top">
-    <ds-thumbnail [thumbnail]="dso.getThumbnail()">
-    </ds-thumbnail>
+    <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()">
+    </ds-grid-thumbnail>
   </a>
   <div class="card-block">
-    <h4 class="card-title">{{dso.findMetadata('dc.title')}}</h4>
+    <p class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></p>
 
-    <p *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);"
-       class="item-authors card-text">
+    <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 last=last;">{{authorMd.value}}
-            <span *ngIf="!last">; </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>
-    </p>
-    (<span *ngIf="dso.findMetadata('dc.publisher')"
-           class="item-list-publisher">{{dso.findMetadata("dc.publisher")}}, </span><span
-    *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date">{{dso.findMetadata("dc.date.issued")}}</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 *ngIf="dso.findMetadata('dc.description.abstract')" class="item-abstract card-text">
-      {{dso.findMetadata("dc.description.abstract") | dsTruncate:[200] }}</p>
+
+    </p>
+    <p class="item-abstract card-text" [innerHTML]="getFirstValue('dc.description.abstract') | dsTruncate:[200]">
+    </p>
 
     <a [routerLink]="['/items/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
   </div>
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 1ebf251e2c..8ef05b2f89 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -40,6 +40,7 @@ import { ThumbnailComponent } from '../thumbnail/thumbnail.component';
 import { SearchFormComponent } from './search-form/search-form.component';
 import { SearchResultGridElementComponent } from '../object-grid/search-result-grid-element/search-result-grid-element.component';
 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';
 
 const MODULES = [
@@ -78,6 +79,7 @@ const COMPONENTS = [
   PaginationComponent,
   SearchFormComponent,
   ThumbnailComponent,
+  GridThumbnailComponent,
   WrapperListElementComponent,
   ViewModeSwitchComponent
 ];
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);

From 67356efaab30c37e4329a7892a25a4477e93aba6 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Thu, 2 Nov 2017 13:43:02 +0100
Subject: [PATCH 25/47] #150 Intermediate commit

---
 .../search-results/search-results.component.ts  |  3 ++-
 .../shared/dso-element-decorator.ts             | 17 +++++++++++++++++
 .../collection-grid-element.component.ts        |  6 ++++--
 .../community-grid-element.component.ts         |  5 +++--
 src/app/object-grid/grid-card-styling.scss      |  2 +-
 src/app/object-grid/grid-element-decorator.ts   | 16 ----------------
 .../item-grid-element.component.ts              |  5 +++--
 ...tion-search-result-grid-element.component.ts |  6 ++++--
 ...nity-search-result-grid-element.component.ts |  5 +++--
 ...item-search-result-grid-element.component.ts |  5 +++--
 .../wrapper-grid-element.component.ts           |  5 +++--
 .../collection-list-element.component.ts        |  5 +++--
 .../community-list-element.component.ts         |  5 +++--
 .../item-list-element.component.ts              |  5 +++--
 src/app/object-list/list-element-decorator.ts   | 16 ----------------
 src/app/object-list/object-list.component.html  |  2 +-
 ...tion-search-result-list-element.component.ts |  5 +++--
 ...nity-search-result-list-element.component.ts |  5 +++--
 ...item-search-result-list-element.component.ts |  5 +++--
 .../wrapper-list-element.component.ts           |  6 +++---
 src/styles/_custom_variables.scss               |  1 +
 21 files changed, 66 insertions(+), 64 deletions(-)
 create mode 100644 src/app/object-collection/shared/dso-element-decorator.ts
 delete mode 100644 src/app/object-grid/grid-element-decorator.ts

diff --git a/src/app/+search-page/search-results/search-results.component.ts b/src/app/+search-page/search-results/search-results.component.ts
index f8b3721630..4b3fec4565 100644
--- a/src/app/+search-page/search-results/search-results.component.ts
+++ b/src/app/+search-page/search-results/search-results.component.ts
@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 import { RemoteData } from '../../core/data/remote-data';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { fadeIn, fadeInOut } from '../../shared/animations/fade';
-import { SearchOptions } from '../search-options.model';
+import { SearchOptions, ViewMode } from '../search-options.model';
 import { SortOptions } from '../../core/cache/models/sort-options.model';
 import { SearchResult } from '../search-result.model';
 
@@ -23,4 +23,5 @@ export class SearchResultsComponent {
   @Input() searchResults: RemoteData<Array<SearchResult<DSpaceObject>>>;
   @Input() searchConfig: SearchOptions;
   @Input() sortConfig: SortOptions;
+  @Input() viewMode: ViewMode;
 }
diff --git a/src/app/object-collection/shared/dso-element-decorator.ts b/src/app/object-collection/shared/dso-element-decorator.ts
new file mode 100644
index 0000000000..310a65f056
--- /dev/null
+++ b/src/app/object-collection/shared/dso-element-decorator.ts
@@ -0,0 +1,17 @@
+import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { ListableObject } from './listable-object.model';
+import { ViewMode } from '../../+search-page/search-options.model';
+
+const dsoElementMap = new Map();
+export function renderElementsFor(listable: GenericConstructor<ListableObject>, viewMode : ViewMode) {
+  return function decorator(objectElement: any) {
+    if (!objectElement) {
+      return;
+    }
+    dsoElementMap.set(listable+viewMode, objectElement);
+  };
+}
+
+export function rendersDSOType(listable: GenericConstructor<ListableObject>, viewMode : ViewMode) {
+  return dsoElementMap.get(listable+viewMode);
+}
diff --git a/src/app/object-grid/collection-grid-element/collection-grid-element.component.ts b/src/app/object-grid/collection-grid-element/collection-grid-element.component.ts
index 80be3d75b3..7e2ae5f468 100644
--- a/src/app/object-grid/collection-grid-element/collection-grid-element.component.ts
+++ b/src/app/object-grid/collection-grid-element/collection-grid-element.component.ts
@@ -2,7 +2,9 @@ import { Component, Inject } from '@angular/core';
 
 import { Collection } from '../../core/shared/collection.model';
 import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
-import { gridElementFor } from '../grid-element-decorator';
+import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
+import { ViewMode } from '../../+search-page/search-options.model';
+
 
 @Component({
   selector: 'ds-collection-grid-element',
@@ -10,5 +12,5 @@ import { gridElementFor } from '../grid-element-decorator';
   templateUrl: './collection-grid-element.component.html'
 })
 
-@gridElementFor(Collection)
+@renderElementsFor(Collection, ViewMode.Grid)
 export class CollectionGridElementComponent extends ObjectGridElementComponent<Collection> {}
diff --git a/src/app/object-grid/community-grid-element/community-grid-element.component.ts b/src/app/object-grid/community-grid-element/community-grid-element.component.ts
index e29e037c5d..76ee6736be 100644
--- a/src/app/object-grid/community-grid-element/community-grid-element.component.ts
+++ b/src/app/object-grid/community-grid-element/community-grid-element.component.ts
@@ -2,7 +2,8 @@ import { Component, Input, Inject } from '@angular/core';
 
 import { Community } from '../../core/shared/community.model';
 import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
-import { gridElementFor} from '../grid-element-decorator';
+import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
+import { ViewMode } from '../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-community-grid-element',
@@ -10,5 +11,5 @@ import { gridElementFor} from '../grid-element-decorator';
   templateUrl: './community-grid-element.component.html'
 })
 
-@gridElementFor(Community)
+@renderElementsFor(Community, ViewMode.Grid)
 export class CommunityGridElementComponent extends ObjectGridElementComponent<Community> {}
diff --git a/src/app/object-grid/grid-card-styling.scss b/src/app/object-grid/grid-card-styling.scss
index 44f4183bfd..b25c603b55 100644
--- a/src/app/object-grid/grid-card-styling.scss
+++ b/src/app/object-grid/grid-card-styling.scss
@@ -29,7 +29,7 @@
 
 .card{
   margin-bottom: $card-block-margin-base *3;
-  height: 98%;
+  height: $card-height-percentage;
 }
 
 .card-img-top ::ng-deep  img
diff --git a/src/app/object-grid/grid-element-decorator.ts b/src/app/object-grid/grid-element-decorator.ts
deleted file mode 100644
index cd5ebbcaeb..0000000000
--- a/src/app/object-grid/grid-element-decorator.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { GenericConstructor } from '../core/shared/generic-constructor';
-import { ListableObject } from '../object-collection/shared/listable-object.model';
-
-const gridElementMap = new Map();
-export function gridElementFor(gridable: GenericConstructor<ListableObject>) {
-  return function decorator(objectElement: any) {
-    if (!objectElement) {
-      return;
-    }
-    gridElementMap.set(gridable, objectElement);
-  };
-}
-
-export function getGridElementFor(gridable: GenericConstructor<ListableObject>) {
-  return gridElementMap.get(gridable);
-}
diff --git a/src/app/object-grid/item-grid-element/item-grid-element.component.ts b/src/app/object-grid/item-grid-element/item-grid-element.component.ts
index c651ccfc9c..e11c51312a 100644
--- a/src/app/object-grid/item-grid-element/item-grid-element.component.ts
+++ b/src/app/object-grid/item-grid-element/item-grid-element.component.ts
@@ -1,8 +1,9 @@
 import { Component, Input, Inject } from '@angular/core';
 
 import { Item } from '../../core/shared/item.model';
-import { gridElementFor } from '../grid-element-decorator';
+import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
 import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+import { ViewMode } from '../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-item-grid-element',
@@ -10,5 +11,5 @@ import { ObjectGridElementComponent } from '../object-grid-element/object-grid-e
   templateUrl: './item-grid-element.component.html'
 })
 
-@gridElementFor(Item)
+@renderElementsFor(Item, ViewMode.Grid)
 export class ItemGridElementComponent extends ObjectGridElementComponent<Item> {}
diff --git a/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts
index aa1d495dba..6c5e526d15 100644
--- a/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts
+++ b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts
@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
 
-import { gridElementFor } from '../../grid-element-decorator';
+import { renderElementsFor} from '../../../object-collection/shared/dso-element-decorator';
+
 import { CollectionSearchResult } from './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';
 
 @Component({
   selector: 'ds-collection-search-result-grid-element',
@@ -11,5 +13,5 @@ import { Collection } from '../../../core/shared/collection.model';
   templateUrl: 'collection-search-result-grid-element.component.html'
 })
 
-@gridElementFor(CollectionSearchResult)
+@renderElementsFor(CollectionSearchResult, ViewMode.Grid)
 export class CollectionSearchResultGridElementComponent extends SearchResultGridElementComponent<CollectionSearchResult, Collection> {}
diff --git a/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts b/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
index 1ce9e1d09a..b6aa4bdb6d 100644
--- a/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
+++ b/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
@@ -2,8 +2,9 @@ import { Component } from '@angular/core';
 
 import { CommunitySearchResult } from './community-search-result.model';
 import { Community } from '../../../core/shared/community.model';
-import { gridElementFor } from '../../grid-element-decorator';
+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';
 
 @Component({
   selector: 'ds-community-search-result-grid-element',
@@ -11,7 +12,7 @@ import { SearchResultGridElementComponent } from '../search-result-grid-element.
   templateUrl: 'community-search-result-grid-element.component.html'
 })
 
-@gridElementFor(CommunitySearchResult)
+@renderElementsFor(CommunitySearchResult, ViewMode.Grid)
 export class CommunitySearchResultGridElementComponent extends SearchResultGridElementComponent<CommunitySearchResult, Community> {
 
 }
diff --git a/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
index 7a82803c9b..d4989d2efd 100644
--- a/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
+++ b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 
-import { gridElementFor } from '../../grid-element-decorator';
+import { renderElementsFor } from '../../../object-collection/shared/dso-element-decorator';
 import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
 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';
 
 @Component({
   selector: 'ds-item-search-result-grid-element',
@@ -11,5 +12,5 @@ import { ItemSearchResult } from '../../../object-collection/shared/item-search-
   templateUrl: 'item-search-result-grid-element.component.html'
 })
 
-@gridElementFor(ItemSearchResult)
+@renderElementsFor(ItemSearchResult, ViewMode.Grid)
 export class ItemSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> {}
diff --git a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts b/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
index bd15a0d443..000c826188 100644
--- a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
+++ b/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
@@ -1,7 +1,8 @@
 import { Component, Input, Injector, ReflectiveInjector, OnInit } from '@angular/core';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
-import { getGridElementFor } from '../grid-element-decorator';
+import { rendersDSOType } from '../../object-collection/shared/dso-element-decorator';
 import { ListableObject } from '../../object-collection/shared/listable-object.model';
+import { ViewMode } from '../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-wrapper-grid-element',
@@ -22,6 +23,6 @@ export class WrapperGridElementComponent implements OnInit {
 
   getGridElement(): string {
     const f: GenericConstructor<ListableObject> = this.object.constructor as GenericConstructor<ListableObject>;
-    return getGridElementFor(f);
+    return rendersDSOType(f, ViewMode.Grid);
   }
 }
diff --git a/src/app/object-list/collection-list-element/collection-list-element.component.ts b/src/app/object-list/collection-list-element/collection-list-element.component.ts
index a99e64a27f..c065a64b72 100644
--- a/src/app/object-list/collection-list-element/collection-list-element.component.ts
+++ b/src/app/object-list/collection-list-element/collection-list-element.component.ts
@@ -2,7 +2,8 @@ import { Component, Inject } from '@angular/core';
 
 import { Collection } from '../../core/shared/collection.model';
 import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
-import { listElementFor } from '../list-element-decorator';
+import { renderElementsFor } from '../../object-collection/shared/dso-element-decorator';
+import { ViewMode } from '../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-collection-list-element',
@@ -10,5 +11,5 @@ import { listElementFor } from '../list-element-decorator';
   templateUrl: './collection-list-element.component.html'
 })
 
-@listElementFor(Collection)
+@renderElementsFor(Collection, ViewMode.List)
 export class CollectionListElementComponent extends ObjectListElementComponent<Collection> {}
diff --git a/src/app/object-list/community-list-element/community-list-element.component.ts b/src/app/object-list/community-list-element/community-list-element.component.ts
index c05915e8d7..11ff392942 100644
--- a/src/app/object-list/community-list-element/community-list-element.component.ts
+++ b/src/app/object-list/community-list-element/community-list-element.component.ts
@@ -2,7 +2,8 @@ import { Component, Input, Inject } from '@angular/core';
 
 import { Community } from '../../core/shared/community.model';
 import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
-import { listElementFor } from '../list-element-decorator';
+import { renderElementsFor } from '../../object-collection/shared/dso-element-decorator';
+import { ViewMode } from '../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-community-list-element',
@@ -10,5 +11,5 @@ import { listElementFor } from '../list-element-decorator';
   templateUrl: './community-list-element.component.html'
 })
 
-@listElementFor(Community)
+@renderElementsFor(Community, ViewMode.List)
 export class CommunityListElementComponent extends ObjectListElementComponent<Community> {}
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..bdc5733dcd 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
@@ -2,7 +2,8 @@ import { Component, Input, Inject } from '@angular/core';
 
 import { Item } from '../../core/shared/item.model';
 import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
-import { listElementFor } from '../list-element-decorator';
+import { renderElementsFor } from '../../object-collection/shared/dso-element-decorator';
+import { ViewMode } from '../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-item-list-element',
@@ -10,5 +11,5 @@ import { listElementFor } from '../list-element-decorator';
   templateUrl: './item-list-element.component.html'
 })
 
-@listElementFor(Item)
+@renderElementsFor(Item, ViewMode.List)
 export class ItemListElementComponent extends ObjectListElementComponent<Item> {}
diff --git a/src/app/object-list/list-element-decorator.ts b/src/app/object-list/list-element-decorator.ts
index aa044755ea..e69de29bb2 100644
--- a/src/app/object-list/list-element-decorator.ts
+++ b/src/app/object-list/list-element-decorator.ts
@@ -1,16 +0,0 @@
-import { GenericConstructor } from '../core/shared/generic-constructor';
-import { ListableObject } from '../object-collection/shared/listable-object.model';
-
-const listElementMap = new Map();
-export function listElementFor(listable: GenericConstructor<ListableObject>) {
-  return function decorator(objectElement: any) {
-    if (!objectElement) {
-      return;
-    }
-    listElementMap.set(listable, objectElement);
-  };
-}
-
-export function getListElementFor(listable: GenericConstructor<ListableObject>) {
-  return listElementMap.get(listable);
-}
diff --git a/src/app/object-list/object-list.component.html b/src/app/object-list/object-list.component.html
index b97524d58c..0178533bda 100644
--- a/src/app/object-list/object-list.component.html
+++ b/src/app/object-list/object-list.component.html
@@ -12,7 +12,7 @@
   (paginationChange)="onPaginationChange($event)">
   <ul *ngIf="objects?.hasSucceeded"> <!--class="list-unstyled"-->
       <li *ngFor="let object of objects?.payload">
-          <ds-wrapper-list-element [object]="object"></ds-wrapper-list-element>
+        <ds-wrapper-list-element [object]="object"></ds-wrapper-list-element>
       </li>
   </ul>
 </ds-pagination>
diff --git a/src/app/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.ts b/src/app/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.ts
index 9bea14e9a1..1b5d7ef0ba 100644
--- a/src/app/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.ts
+++ b/src/app/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.ts
@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 
-import { listElementFor } from '../../list-element-decorator';
+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';
 
 @Component({
   selector: 'ds-collection-search-result-list-element',
@@ -11,5 +12,5 @@ import { Collection } from '../../../core/shared/collection.model';
   templateUrl: 'collection-search-result-list-element.component.html'
 })
 
-@listElementFor(CollectionSearchResult)
+@renderElementsFor(CollectionSearchResult, ViewMode.List)
 export class CollectionSearchResultListElementComponent extends SearchResultListElementComponent<CollectionSearchResult, Collection> {}
diff --git a/src/app/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.ts b/src/app/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.ts
index 741b4b4f65..d9ab001f58 100644
--- a/src/app/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.ts
+++ b/src/app/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.ts
@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 
-import { listElementFor } from '../../list-element-decorator';
+import { renderElementsFor } from '../../../object-collection/shared/dso-element-decorator';
 import { CommunitySearchResult } from './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';
 
 @Component({
   selector: 'ds-community-search-result-list-element',
@@ -11,7 +12,7 @@ import { Community } from '../../../core/shared/community.model';
   templateUrl: 'community-search-result-list-element.component.html'
 })
 
-@listElementFor(CommunitySearchResult)
+@renderElementsFor(CommunitySearchResult, ViewMode.List)
 export class CommunitySearchResultListElementComponent extends SearchResultListElementComponent<CommunitySearchResult, Community> {
 
 }
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 2974a87883..929233f1a3 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 { listElementFor } from '../../list-element-decorator';
+import { renderElementsFor } from '../../../object-collection/shared/dso-element-decorator';
 import { SearchResultListElementComponent } from '../search-result-list-element.component';
 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';
 
 @Component({
   selector: 'ds-item-search-result-list-element',
@@ -11,5 +12,5 @@ import { ItemSearchResult } from '../../../object-collection/shared/item-search-
   templateUrl: 'item-search-result-list-element.component.html'
 })
 
-@listElementFor(ItemSearchResult)
+@renderElementsFor(ItemSearchResult, ViewMode.List)
 export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> {}
diff --git a/src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts b/src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts
index 2e1184b023..ff5591442d 100644
--- a/src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts
+++ b/src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts
@@ -1,7 +1,8 @@
 import { Component, Input, Injector, ReflectiveInjector, OnInit } from '@angular/core';
-import { getListElementFor } from '../list-element-decorator'
+import { rendersDSOType } from '../../object-collection/shared/dso-element-decorator'
 import { GenericConstructor } from '../../core/shared/generic-constructor';
 import { ListableObject } from '../../object-collection/shared/listable-object.model';
+import { ViewMode } from '../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-wrapper-list-element',
@@ -17,11 +18,10 @@ export class WrapperListElementComponent implements OnInit {
   ngOnInit(): void {
     this.objectInjector = ReflectiveInjector.resolveAndCreate(
       [{provide: 'objectElementProvider', useFactory: () => (this.object) }], this.injector);
-
   }
 
   getListElement(): string {
     const f: GenericConstructor<ListableObject> = this.object.constructor as GenericConstructor<ListableObject>;
-    return getListElementFor(f);
+    return rendersDSOType(f, ViewMode.List);
   }
 }
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index f52a99f014..8c0dcae928 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -1,3 +1,4 @@
 $content-spacing: $spacer * 1.5;
 
 $button-height: $input-btn-padding-y * 2 + $input-btn-line-height + calculateRem($input-btn-border-width*2);
+$card-height-percentage:98%;

From cc4aaa4c79d9a1551f639568c3852a5f4ad06a3a Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Fri, 3 Nov 2017 14:46:33 +0100
Subject: [PATCH 26/47] #150 Safety-commit before moving to "shared" package

---
 dspace-angular.iml                            |  8 +++
 .../object-collection.component.spec.ts       | 52 +++++++++++++++++++
 .../shared/dso-element-decorator.spec.ts      | 16 ++++++
 .../collection-grid-element.component.spec.ts |  0
 .../grid-thumbnail.component.spec.ts          | 10 ++--
 .../item-grid-element.component.spec.ts       |  6 +++
 .../object-grid/object-grid.component.spec.ts |  0
 .../wrapper-grid-element.component.spec.ts    |  0
 8 files changed, 87 insertions(+), 5 deletions(-)
 create mode 100644 dspace-angular.iml
 create mode 100644 src/app/object-collection/object-collection.component.spec.ts
 create mode 100644 src/app/object-collection/shared/dso-element-decorator.spec.ts
 create mode 100644 src/app/object-grid/collection-grid-element/collection-grid-element.component.spec.ts
 create mode 100644 src/app/object-grid/item-grid-element/item-grid-element.component.spec.ts
 create mode 100644 src/app/object-grid/object-grid.component.spec.ts
 create mode 100644 src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts

diff --git a/dspace-angular.iml b/dspace-angular.iml
new file mode 100644
index 0000000000..5806390693
--- /dev/null
+++ b/dspace-angular.iml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="node_modules" level="project" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/src/app/object-collection/object-collection.component.spec.ts b/src/app/object-collection/object-collection.component.spec.ts
new file mode 100644
index 0000000000..abbf66e4f1
--- /dev/null
+++ b/src/app/object-collection/object-collection.component.spec.ts
@@ -0,0 +1,52 @@
+import { ObjectCollectionComponent } from './object-collection.component';
+import { ViewMode } from '../+search-page/search-options.model';
+import { element } from 'protractor';
+import { By } from '@angular/platform-browser';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Config } from '../../config/config.interface';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import { RouterStub } from '../shared/testing/router-stub';
+
+describe('ObjectCollectionComponent', () => {
+  let fixture: ComponentFixture<ObjectCollectionComponent>;
+  let objectCollectionComponent: ObjectCollectionComponent;
+  const queryParam = 'test query';
+  const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+  const activatedRouteStub = {
+    queryParams: Observable.of({
+      query: queryParam,
+      scope: scopeParam
+    })
+  };
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ObjectCollectionComponent ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub }
+      ],
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(ObjectCollectionComponent);
+    objectCollectionComponent = fixture.componentInstance;
+  }));
+  it('should only show the grid component when the viewmode is set to grid', () => {
+    objectCollectionComponent.currentMode = ViewMode.Grid;
+
+    // expect(By.css('ds-object-grid')).toEqual(1);
+    // expect(By.css('ds-object-list')).toEqual(0);
+  });
+
+  it('should only show the list component when the viewmode is set to list', () => {
+    objectCollectionComponent.currentMode = ViewMode.List;
+
+    // expect(By.css('ds-object-list').length).toEqual(1);
+    // expect(By.css('ds-object-grid').length).toEqual(0);
+  })
+
+});
diff --git a/src/app/object-collection/shared/dso-element-decorator.spec.ts b/src/app/object-collection/shared/dso-element-decorator.spec.ts
new file mode 100644
index 0000000000..952afb9ac3
--- /dev/null
+++ b/src/app/object-collection/shared/dso-element-decorator.spec.ts
@@ -0,0 +1,16 @@
+import { ViewMode } from '../../+search-page/search-options.model';
+import { renderElementsFor } from './dso-element-decorator';
+import { Item } from '../../core/shared/item.model';
+
+describe('ElementDecorator', () => {
+  let gridDecorator = renderElementsFor(Item, ViewMode.Grid);
+  let listDecorator = renderElementsFor(Item, ViewMode.List);
+  it('should have a decorator for both list and grid', () => {
+    expect(listDecorator.length).not.toBeNull();
+    expect(gridDecorator.length).not.toBeNull();
+  });
+  it('should have 2 separate decorators for grid and list', () => {
+    expect(listDecorator).not.toEqual(gridDecorator);
+  });
+
+});
diff --git a/src/app/object-grid/collection-grid-element/collection-grid-element.component.spec.ts b/src/app/object-grid/collection-grid-element/collection-grid-element.component.spec.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
index f4ca434221..209ac52997 100644
--- a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
+++ b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
@@ -2,24 +2,24 @@ import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
 
-import { ThumbnailComponent } from './thumbnail.component';
+import { GridThumbnailComponent } from './grid-thumbnail.component';
 import { Bitstream } from '../../core/shared/bitstream.model';
 import { SafeUrlPipe } from '../../shared/utils/safe-url-pipe';
 
 describe('ThumbnailComponent', () => {
-  let comp: ThumbnailComponent;
-  let fixture: ComponentFixture<ThumbnailComponent>;
+  let comp: GridThumbnailComponent;
+  let fixture: ComponentFixture<GridThumbnailComponent>;
   let de: DebugElement;
   let el: HTMLElement;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ThumbnailComponent, SafeUrlPipe]
+      declarations: [GridThumbnailComponent, SafeUrlPipe]
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ThumbnailComponent);
+    fixture = TestBed.createComponent(GridThumbnailComponent);
     comp = fixture.componentInstance; // BannerComponent test instance
     de = fixture.debugElement.query(By.css('div.thumbnail'));
     el = de.nativeElement;
diff --git a/src/app/object-grid/item-grid-element/item-grid-element.component.spec.ts b/src/app/object-grid/item-grid-element/item-grid-element.component.spec.ts
new file mode 100644
index 0000000000..0da99aa697
--- /dev/null
+++ b/src/app/object-grid/item-grid-element/item-grid-element.component.spec.ts
@@ -0,0 +1,6 @@
+import { ItemGridElementComponent } from './item-grid-element.component';
+
+describe('ItemGridElementComponent',()=>{
+  let itemGridElementComponent: ItemGridElementComponent;
+
+})
diff --git a/src/app/object-grid/object-grid.component.spec.ts b/src/app/object-grid/object-grid.component.spec.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts b/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts
new file mode 100644
index 0000000000..e69de29bb2

From 520b7f3e1204780a47f955640f482cf553bd623e Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Fri, 3 Nov 2017 15:02:01 +0100
Subject: [PATCH 27/47] #150 Moved list,grid and object-collection to shared
 package

---
 src/app/+search-page/search-page.module.ts    | 12 +++----
 src/app/+search-page/search-result.model.ts   |  2 +-
 .../search-service/search.service.ts          |  1 +
 src/app/core/shared/dspace-object.model.ts    |  2 +-
 .../object-collection.component.scss          |  1 -
 .../shared/item-search-result.model.ts        |  5 ---
 .../collection-grid-element.component.scss    |  2 --
 .../community-grid-element.component.scss     |  2 --
 .../grid-thumbnail.component.scss             |  1 -
 .../item-grid-element.component.scss          |  2 --
 .../object-grid-element.component.scss        |  6 ----
 .../object-grid/object-grid.component.scss    |  1 -
 ...-search-result-grid-element.component.scss |  2 --
 .../collection-search-result.model.ts         |  5 ---
 ...-search-result-grid-element.component.scss |  2 --
 .../community-search-result.model.ts          |  5 ---
 ...-search-result-grid-element.component.scss |  2 --
 .../wrapper-grid-element.component.scss       |  2 --
 .../collection-list-element.component.scss    |  1 -
 .../community-list-element.component.scss     |  1 -
 .../item-list-element.component.scss          |  1 -
 .../object-list/object-list.component.scss    |  1 -
 ...-search-result-list-element.component.scss |  1 -
 .../collection-search-result.model.ts         |  5 ---
 ...-search-result-list-element.component.scss |  1 -
 .../community-search-result.model.ts          |  5 ---
 ...-search-result-list-element.component.scss |  1 -
 .../wrapper-list-element.component.scss       |  2 --
 .../object-collection.component.html          |  0
 .../object-collection.component.scss          |  1 +
 .../object-collection.component.spec.ts       |  6 ++--
 .../object-collection.component.ts            | 12 +++----
 .../shared/dso-element-decorator.spec.ts      |  4 +--
 .../shared/dso-element-decorator.ts           |  4 +--
 .../shared/item-search-result.model.ts        |  5 +++
 .../shared/listable-object.model.ts           |  0
 .../collection-grid-element.component.html    |  0
 .../collection-grid-element.component.scss    |  2 ++
 .../collection-grid-element.component.spec.ts |  0
 .../collection-grid-element.component.ts      |  4 +--
 .../community-grid-element.component.html     |  0
 .../community-grid-element.component.scss     |  2 ++
 .../community-grid-element.component.ts       |  4 +--
 .../object-grid/grid-card-styling.scss        |  2 +-
 .../grid-thumbnail.component.html             |  0
 .../grid-thumbnail.component.scss             |  1 +
 .../grid-thumbnail.component.spec.ts          |  4 +--
 .../grid-thumbnail.component.ts               |  2 +-
 .../item-grid-element.component.html          |  0
 .../item-grid-element.component.scss          |  2 ++
 .../item-grid-element.component.spec.ts       |  0
 .../item-grid-element.component.ts            |  4 +--
 .../object-grid-element.component.html        |  0
 .../object-grid-element.component.scss        |  6 ++++
 .../object-grid-element.component.ts          |  0
 .../object-grid/object-grid.component.html    |  0
 .../object-grid/object-grid.component.scss    |  1 +
 .../object-grid/object-grid.component.spec.ts |  0
 .../object-grid/object-grid.component.ts      | 10 +++---
 ...-search-result-grid-element.component.html |  0
 ...-search-result-grid-element.component.scss |  2 ++
 ...on-search-result-grid-element.component.ts |  4 +--
 .../collection-search-result.model.ts         |  5 +++
 ...-search-result-grid-element.component.html |  0
 ...-search-result-grid-element.component.scss |  2 ++
 ...ty-search-result-grid-element.component.ts |  4 +--
 .../community-search-result.model.ts          |  5 +++
 ...-search-result-grid-element.component.html |  0
 ...-search-result-grid-element.component.scss |  2 ++
 ...em-search-result-grid-element.component.ts |  4 +--
 .../search-result-grid-element.component.scss |  4 +--
 .../search-result-grid-element.component.ts   |  8 ++---
 .../wrapper-grid-element.component.html       |  0
 .../wrapper-grid-element.component.scss       |  2 ++
 .../wrapper-grid-element.component.spec.ts    |  0
 .../wrapper-grid-element.component.ts         |  4 +--
 .../collection-list-element.component.html    |  0
 .../collection-list-element.component.scss    |  1 +
 .../collection-list-element.component.ts      |  4 +--
 .../community-list-element.component.html     |  0
 .../community-list-element.component.scss     |  1 +
 .../community-list-element.component.ts       |  4 +--
 .../item-list-element.component.html          |  0
 .../item-list-element.component.scss          |  1 +
 .../item-list-element.component.ts            |  4 +--
 .../object-list-element.component.html        |  0
 .../object-list-element.component.scss        |  2 +-
 .../object-list-element.component.ts          |  0
 .../object-list/object-list.component.html    |  0
 .../object-list/object-list.component.scss    |  1 +
 .../object-list/object-list.component.ts      | 11 +++++--
 ...-search-result-list-element.component.html |  0
 ...-search-result-list-element.component.scss |  1 +
 ...on-search-result-list-element.component.ts |  4 +--
 .../collection-search-result.model.ts         |  5 +++
 ...-search-result-list-element.component.html |  0
 ...-search-result-list-element.component.scss |  1 +
 ...ty-search-result-list-element.component.ts |  4 +--
 .../community-search-result.model.ts          |  5 +++
 ...-search-result-list-element.component.html |  0
 ...-search-result-list-element.component.scss |  1 +
 ...em-search-result-list-element.component.ts |  4 +--
 .../search-result-list-element.component.scss |  4 +--
 .../search-result-list-element.component.ts   |  8 ++---
 .../wrapper-list-element.component.html       |  0
 .../wrapper-list-element.component.scss       |  2 ++
 .../wrapper-list-element.component.ts         |  4 +--
 src/app/shared/shared.module.ts               | 32 +++++++++----------
 108 files changed, 153 insertions(+), 147 deletions(-)
 delete mode 100644 src/app/object-collection/object-collection.component.scss
 delete mode 100644 src/app/object-collection/shared/item-search-result.model.ts
 delete mode 100644 src/app/object-grid/collection-grid-element/collection-grid-element.component.scss
 delete mode 100644 src/app/object-grid/community-grid-element/community-grid-element.component.scss
 delete mode 100644 src/app/object-grid/grid-thumbnail/grid-thumbnail.component.scss
 delete mode 100644 src/app/object-grid/item-grid-element/item-grid-element.component.scss
 delete mode 100644 src/app/object-grid/object-grid-element/object-grid-element.component.scss
 delete mode 100644 src/app/object-grid/object-grid.component.scss
 delete mode 100644 src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
 delete mode 100644 src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts
 delete mode 100644 src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
 delete mode 100644 src/app/object-grid/search-result-grid-element/community-search-result/community-search-result.model.ts
 delete mode 100644 src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
 delete mode 100644 src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
 delete mode 100644 src/app/object-list/collection-list-element/collection-list-element.component.scss
 delete mode 100644 src/app/object-list/community-list-element/community-list-element.component.scss
 delete mode 100644 src/app/object-list/item-list-element/item-list-element.component.scss
 delete mode 100644 src/app/object-list/object-list.component.scss
 delete mode 100644 src/app/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss
 delete mode 100644 src/app/object-list/search-result-list-element/collection-search-result/collection-search-result.model.ts
 delete mode 100644 src/app/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss
 delete mode 100644 src/app/object-list/search-result-list-element/community-search-result/community-search-result.model.ts
 delete mode 100644 src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss
 delete mode 100644 src/app/object-list/wrapper-list-element/wrapper-list-element.component.scss
 rename src/app/{ => shared}/object-collection/object-collection.component.html (100%)
 create mode 100644 src/app/shared/object-collection/object-collection.component.scss
 rename src/app/{ => shared}/object-collection/object-collection.component.spec.ts (90%)
 rename src/app/{ => shared}/object-collection/object-collection.component.ts (87%)
 rename src/app/{ => shared}/object-collection/shared/dso-element-decorator.spec.ts (80%)
 rename src/app/{ => shared}/object-collection/shared/dso-element-decorator.ts (77%)
 create mode 100644 src/app/shared/object-collection/shared/item-search-result.model.ts
 rename src/app/{ => shared}/object-collection/shared/listable-object.model.ts (100%)
 rename src/app/{ => shared}/object-grid/collection-grid-element/collection-grid-element.component.html (100%)
 create mode 100644 src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss
 rename src/app/{ => shared}/object-grid/collection-grid-element/collection-grid-element.component.spec.ts (100%)
 rename src/app/{ => shared}/object-grid/collection-grid-element/collection-grid-element.component.ts (80%)
 rename src/app/{ => shared}/object-grid/community-grid-element/community-grid-element.component.html (100%)
 create mode 100644 src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss
 rename src/app/{ => shared}/object-grid/community-grid-element/community-grid-element.component.ts (80%)
 rename src/app/{ => shared}/object-grid/grid-card-styling.scss (94%)
 rename src/app/{ => shared}/object-grid/grid-thumbnail/grid-thumbnail.component.html (100%)
 create mode 100644 src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss
 rename src/app/{ => shared}/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts (91%)
 rename src/app/{ => shared}/object-grid/grid-thumbnail/grid-thumbnail.component.ts (95%)
 rename src/app/{ => shared}/object-grid/item-grid-element/item-grid-element.component.html (100%)
 create mode 100644 src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss
 rename src/app/{ => shared}/object-grid/item-grid-element/item-grid-element.component.spec.ts (100%)
 rename src/app/{ => shared}/object-grid/item-grid-element/item-grid-element.component.ts (80%)
 rename src/app/{ => shared}/object-grid/object-grid-element/object-grid-element.component.html (100%)
 create mode 100644 src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss
 rename src/app/{ => shared}/object-grid/object-grid-element/object-grid-element.component.ts (100%)
 rename src/app/{ => shared}/object-grid/object-grid.component.html (100%)
 create mode 100644 src/app/shared/object-grid/object-grid.component.scss
 rename src/app/{ => shared}/object-grid/object-grid.component.spec.ts (100%)
 rename src/app/{ => shared}/object-grid/object-grid.component.ts (88%)
 rename src/app/{ => shared}/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html (100%)
 create mode 100644 src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
 rename src/app/{ => shared}/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts (84%)
 create mode 100644 src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts
 rename src/app/{ => shared}/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html (100%)
 create mode 100644 src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
 rename src/app/{ => shared}/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts (84%)
 create mode 100644 src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result.model.ts
 rename src/app/{ => shared}/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html (100%)
 create mode 100644 src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
 rename src/app/{ => shared}/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts (84%)
 rename src/app/{ => shared}/object-grid/search-result-grid-element/search-result-grid-element.component.scss (51%)
 rename src/app/{ => shared}/object-grid/search-result-grid-element/search-result-grid-element.component.ts (83%)
 rename src/app/{ => shared}/object-grid/wrapper-grid-element/wrapper-grid-element.component.html (100%)
 create mode 100644 src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
 rename src/app/{ => shared}/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts (100%)
 rename src/app/{ => shared}/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts (86%)
 rename src/app/{ => shared}/object-list/collection-list-element/collection-list-element.component.html (100%)
 create mode 100644 src/app/shared/object-list/collection-list-element/collection-list-element.component.scss
 rename src/app/{ => shared}/object-list/collection-list-element/collection-list-element.component.ts (80%)
 rename src/app/{ => shared}/object-list/community-list-element/community-list-element.component.html (100%)
 create mode 100644 src/app/shared/object-list/community-list-element/community-list-element.component.scss
 rename src/app/{ => shared}/object-list/community-list-element/community-list-element.component.ts (80%)
 rename src/app/{ => shared}/object-list/item-list-element/item-list-element.component.html (100%)
 create mode 100644 src/app/shared/object-list/item-list-element/item-list-element.component.scss
 rename src/app/{ => shared}/object-list/item-list-element/item-list-element.component.ts (80%)
 rename src/app/{ => shared}/object-list/object-list-element/object-list-element.component.html (100%)
 rename src/app/{ => shared}/object-list/object-list-element/object-list-element.component.scss (56%)
 rename src/app/{ => shared}/object-list/object-list-element/object-list-element.component.ts (100%)
 rename src/app/{ => shared}/object-list/object-list.component.html (100%)
 create mode 100644 src/app/shared/object-list/object-list.component.scss
 rename src/app/{ => shared}/object-list/object-list.component.ts (90%)
 rename src/app/{ => shared}/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html (100%)
 create mode 100644 src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss
 rename src/app/{ => shared}/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.ts (84%)
 create mode 100644 src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result.model.ts
 rename src/app/{ => shared}/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html (100%)
 create mode 100644 src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss
 rename src/app/{ => shared}/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.ts (84%)
 create mode 100644 src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result.model.ts
 rename src/app/{ => shared}/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html (100%)
 create mode 100644 src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss
 rename src/app/{ => shared}/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts (84%)
 rename src/app/{ => shared}/object-list/search-result-list-element/search-result-list-element.component.scss (67%)
 rename src/app/{ => shared}/object-list/search-result-list-element/search-result-list-element.component.ts (83%)
 rename src/app/{ => shared}/object-list/wrapper-list-element/wrapper-list-element.component.html (100%)
 create mode 100644 src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.scss
 rename src/app/{ => shared}/object-list/wrapper-list-element/wrapper-list-element.component.ts (86%)

diff --git a/src/app/+search-page/search-page.module.ts b/src/app/+search-page/search-page.module.ts
index be99a0eae4..7c2001c909 100644
--- a/src/app/+search-page/search-page.module.ts
+++ b/src/app/+search-page/search-page.module.ts
@@ -4,12 +4,12 @@ import { SharedModule } from '../shared/shared.module';
 import { SearchPageRoutingModule } from './search-page-routing.module';
 import { SearchPageComponent } from './search-page.component';
 import { SearchResultsComponent } from './search-results/search-results.component';
-import { ItemSearchResultListElementComponent } from '../object-list/search-result-list-element/item-search-result/item-search-result-list-element.component';
-import { CollectionSearchResultListElementComponent } from '../object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component';
-import { CommunitySearchResultListElementComponent } from '../object-list/search-result-list-element/community-search-result/community-search-result-list-element.component';
-import { ItemSearchResultGridElementComponent } from '../object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component';
-import { CommunitySearchResultGridElementComponent } from '../object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component'
-import { CollectionSearchResultGridElementComponent } from '../object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component';
+import { ItemSearchResultListElementComponent } from '../shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component';
+import { CollectionSearchResultListElementComponent } from '../shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component';
+import { CommunitySearchResultListElementComponent } from '../shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component';
+import { ItemSearchResultGridElementComponent } from '../shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component';
+import { CommunitySearchResultGridElementComponent } from '../shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component'
+import { CollectionSearchResultGridElementComponent } from '../shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component';
 import { SearchService } from './search-service/search.service';
 import { SearchSidebarComponent } from './search-sidebar/search-sidebar.component';
 import { SearchSidebarService } from './search-sidebar/search-sidebar.service';
diff --git a/src/app/+search-page/search-result.model.ts b/src/app/+search-page/search-result.model.ts
index 602d8ac9c2..cc2bd8cd58 100644
--- a/src/app/+search-page/search-result.model.ts
+++ b/src/app/+search-page/search-result.model.ts
@@ -1,6 +1,6 @@
 import { DSpaceObject } from '../core/shared/dspace-object.model';
 import { Metadatum } from '../core/shared/metadatum.model';
-import { ListableObject } from '../object-collection/shared/listable-object.model';
+import { ListableObject } from '../shared/object-collection/shared/listable-object.model';
 
 export class SearchResult<T extends DSpaceObject> implements ListableObject {
 
diff --git a/src/app/+search-page/search-service/search.service.ts b/src/app/+search-page/search-service/search.service.ts
index 5258756bfb..63b1b04dce 100644
--- a/src/app/+search-page/search-service/search.service.ts
+++ b/src/app/+search-page/search-service/search.service.ts
@@ -15,6 +15,7 @@ import { FacetValue } from './facet-value.model';
 import { ItemSearchResult } from '../../object-collection/shared/item-search-result.model';
 import { ViewMode } from '../../+search-page/search-options.model';
 import { Router, NavigationExtras, ActivatedRoute } from '@angular/router';
+import { ItemSearchResult } from '../../shared/object-collection/shared/item-search-result.model';
 import { RouteService } from '../../shared/route.service';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { SortOptions } from '../../core/cache/models/sort-options.model';
diff --git a/src/app/core/shared/dspace-object.model.ts b/src/app/core/shared/dspace-object.model.ts
index a17a6b31ce..8f96f2485a 100644
--- a/src/app/core/shared/dspace-object.model.ts
+++ b/src/app/core/shared/dspace-object.model.ts
@@ -3,7 +3,7 @@ import { isEmpty, isNotEmpty } from '../../shared/empty.util';
 import { CacheableObject } from '../cache/object-cache.reducer';
 import { RemoteData } from '../data/remote-data';
 import { ResourceType } from './resource-type';
-import { ListableObject } from '../../object-collection/shared/listable-object.model';
+import { ListableObject } from '../../shared/object-collection/shared/listable-object.model';
 import { Observable } from 'rxjs/Observable';
 
 /**
diff --git a/src/app/object-collection/object-collection.component.scss b/src/app/object-collection/object-collection.component.scss
deleted file mode 100644
index da97dd7a62..0000000000
--- a/src/app/object-collection/object-collection.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../styles/variables.scss';
diff --git a/src/app/object-collection/shared/item-search-result.model.ts b/src/app/object-collection/shared/item-search-result.model.ts
deleted file mode 100644
index 75d56a2488..0000000000
--- a/src/app/object-collection/shared/item-search-result.model.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { SearchResult } from '../../+search-page/search-result.model';
-import { Item } from '../../core/shared/item.model';
-
-export class ItemSearchResult extends SearchResult<Item> {
-}
diff --git a/src/app/object-grid/collection-grid-element/collection-grid-element.component.scss b/src/app/object-grid/collection-grid-element/collection-grid-element.component.scss
deleted file mode 100644
index 48e2b121d4..0000000000
--- a/src/app/object-grid/collection-grid-element/collection-grid-element.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../styles/variables.scss';
-@import '../grid-card-styling.scss';
diff --git a/src/app/object-grid/community-grid-element/community-grid-element.component.scss b/src/app/object-grid/community-grid-element/community-grid-element.component.scss
deleted file mode 100644
index 48e2b121d4..0000000000
--- a/src/app/object-grid/community-grid-element/community-grid-element.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../styles/variables.scss';
-@import '../grid-card-styling.scss';
diff --git a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.scss b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.scss
deleted file mode 100644
index 50be6f5ad0..0000000000
--- a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';
diff --git a/src/app/object-grid/item-grid-element/item-grid-element.component.scss b/src/app/object-grid/item-grid-element/item-grid-element.component.scss
deleted file mode 100644
index 48e2b121d4..0000000000
--- a/src/app/object-grid/item-grid-element/item-grid-element.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../styles/variables.scss';
-@import '../grid-card-styling.scss';
diff --git a/src/app/object-grid/object-grid-element/object-grid-element.component.scss b/src/app/object-grid/object-grid-element/object-grid-element.component.scss
deleted file mode 100644
index 0351acf15f..0000000000
--- a/src/app/object-grid/object-grid-element/object-grid-element.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import '../../../styles/variables.scss';
-@import '../grid-card-styling.scss';
-:host {
-  display: block;
-  margin-bottom: $spacer;
-}
diff --git a/src/app/object-grid/object-grid.component.scss b/src/app/object-grid/object-grid.component.scss
deleted file mode 100644
index da97dd7a62..0000000000
--- a/src/app/object-grid/object-grid.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../styles/variables.scss';
diff --git a/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
deleted file mode 100644
index 790f794381..0000000000
--- a/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../styles/variables.scss';
-@import '../../grid-card-styling.scss';
diff --git a/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts b/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts
deleted file mode 100644
index fa7945dedd..0000000000
--- a/src/app/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/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss b/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
deleted file mode 100644
index 790f794381..0000000000
--- a/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../styles/variables.scss';
-@import '../../grid-card-styling.scss';
diff --git a/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result.model.ts b/src/app/object-grid/search-result-grid-element/community-search-result/community-search-result.model.ts
deleted file mode 100644
index 79ea34b6cd..0000000000
--- a/src/app/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/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
deleted file mode 100644
index 790f794381..0000000000
--- a/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../styles/variables.scss';
-@import '../../grid-card-styling.scss';
diff --git a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss b/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
deleted file mode 100644
index 48e2b121d4..0000000000
--- a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../styles/variables.scss';
-@import '../grid-card-styling.scss';
diff --git a/src/app/object-list/collection-list-element/collection-list-element.component.scss b/src/app/object-list/collection-list-element/collection-list-element.component.scss
deleted file mode 100644
index ad84b72f8c..0000000000
--- a/src/app/object-list/collection-list-element/collection-list-element.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/object-list/community-list-element/community-list-element.component.scss b/src/app/object-list/community-list-element/community-list-element.component.scss
deleted file mode 100644
index ad84b72f8c..0000000000
--- a/src/app/object-list/community-list-element/community-list-element.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/object-list/item-list-element/item-list-element.component.scss b/src/app/object-list/item-list-element/item-list-element.component.scss
deleted file mode 100644
index ad84b72f8c..0000000000
--- a/src/app/object-list/item-list-element/item-list-element.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/object-list/object-list.component.scss b/src/app/object-list/object-list.component.scss
deleted file mode 100644
index b14c7376e3..0000000000
--- a/src/app/object-list/object-list.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss b/src/app/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss
deleted file mode 100644
index 88eb98509a..0000000000
--- a/src/app/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/object-list/search-result-list-element/collection-search-result/collection-search-result.model.ts b/src/app/object-list/search-result-list-element/collection-search-result/collection-search-result.model.ts
deleted file mode 100644
index fa7945dedd..0000000000
--- a/src/app/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/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss b/src/app/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss
deleted file mode 100644
index 88eb98509a..0000000000
--- a/src/app/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/object-list/search-result-list-element/community-search-result/community-search-result.model.ts b/src/app/object-list/search-result-list-element/community-search-result/community-search-result.model.ts
deleted file mode 100644
index 79ea34b6cd..0000000000
--- a/src/app/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/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
deleted file mode 100644
index 88eb98509a..0000000000
--- a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/object-list/wrapper-list-element/wrapper-list-element.component.scss b/src/app/object-list/wrapper-list-element/wrapper-list-element.component.scss
deleted file mode 100644
index 6f997644cc..0000000000
--- a/src/app/object-list/wrapper-list-element/wrapper-list-element.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../styles/variables.scss';
-
diff --git a/src/app/object-collection/object-collection.component.html b/src/app/shared/object-collection/object-collection.component.html
similarity index 100%
rename from src/app/object-collection/object-collection.component.html
rename to src/app/shared/object-collection/object-collection.component.html
diff --git a/src/app/shared/object-collection/object-collection.component.scss b/src/app/shared/object-collection/object-collection.component.scss
new file mode 100644
index 0000000000..48e6526dff
--- /dev/null
+++ b/src/app/shared/object-collection/object-collection.component.scss
@@ -0,0 +1 @@
+@import '../../../styles/variables';
diff --git a/src/app/object-collection/object-collection.component.spec.ts b/src/app/shared/object-collection/object-collection.component.spec.ts
similarity index 90%
rename from src/app/object-collection/object-collection.component.spec.ts
rename to src/app/shared/object-collection/object-collection.component.spec.ts
index abbf66e4f1..a56a3e56dc 100644
--- a/src/app/object-collection/object-collection.component.spec.ts
+++ b/src/app/shared/object-collection/object-collection.component.spec.ts
@@ -1,13 +1,13 @@
 import { ObjectCollectionComponent } from './object-collection.component';
-import { ViewMode } from '../+search-page/search-options.model';
+import { ViewMode } from '../../+search-page/search-options.model';
 import { element } from 'protractor';
 import { By } from '@angular/platform-browser';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { Config } from '../../config/config.interface';
+import { Config } from '../../../config/config.interface';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
-import { RouterStub } from '../shared/testing/router-stub';
+import { RouterStub } from '../testing/router-stub';
 
 describe('ObjectCollectionComponent', () => {
   let fixture: ComponentFixture<ObjectCollectionComponent>;
diff --git a/src/app/object-collection/object-collection.component.ts b/src/app/shared/object-collection/object-collection.component.ts
similarity index 87%
rename from src/app/object-collection/object-collection.component.ts
rename to src/app/shared/object-collection/object-collection.component.ts
index a79653d970..8d5a9ce3c7 100644
--- a/src/app/object-collection/object-collection.component.ts
+++ b/src/app/shared/object-collection/object-collection.component.ts
@@ -6,16 +6,16 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 import { Observable } from 'rxjs/Observable';
 
-import { RemoteData } from '../core/data/remote-data';
-import { PageInfo } from '../core/shared/page-info.model';
+import { RemoteData } from '../../core/data/remote-data';
+import { PageInfo } from '../../core/shared/page-info.model';
 
-import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
+import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
 
-import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
+import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
 
 import { ListableObject } from './shared/listable-object.model';
-import { ViewMode } from '../+search-page/search-options.model';
-import { hasValue, isNotEmpty } from '../shared/empty.util';
+import { ViewMode } from '../../+search-page/search-options.model';
+import { hasValue, isNotEmpty } from '../empty.util';
 
 @Component({
   selector: 'ds-viewable-collection',
diff --git a/src/app/object-collection/shared/dso-element-decorator.spec.ts b/src/app/shared/object-collection/shared/dso-element-decorator.spec.ts
similarity index 80%
rename from src/app/object-collection/shared/dso-element-decorator.spec.ts
rename to src/app/shared/object-collection/shared/dso-element-decorator.spec.ts
index 952afb9ac3..b4b27bb52a 100644
--- a/src/app/object-collection/shared/dso-element-decorator.spec.ts
+++ b/src/app/shared/object-collection/shared/dso-element-decorator.spec.ts
@@ -1,6 +1,6 @@
-import { ViewMode } from '../../+search-page/search-options.model';
+import { ViewMode } from '../../../+search-page/search-options.model';
 import { renderElementsFor } from './dso-element-decorator';
-import { Item } from '../../core/shared/item.model';
+import { Item } from '../../../core/shared/item.model';
 
 describe('ElementDecorator', () => {
   let gridDecorator = renderElementsFor(Item, ViewMode.Grid);
diff --git a/src/app/object-collection/shared/dso-element-decorator.ts b/src/app/shared/object-collection/shared/dso-element-decorator.ts
similarity index 77%
rename from src/app/object-collection/shared/dso-element-decorator.ts
rename to src/app/shared/object-collection/shared/dso-element-decorator.ts
index 310a65f056..5dc085d3a7 100644
--- a/src/app/object-collection/shared/dso-element-decorator.ts
+++ b/src/app/shared/object-collection/shared/dso-element-decorator.ts
@@ -1,6 +1,6 @@
-import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { GenericConstructor } from '../../../core/shared/generic-constructor';
 import { ListableObject } from './listable-object.model';
-import { ViewMode } from '../../+search-page/search-options.model';
+import { ViewMode } from '../../../+search-page/search-options.model';
 
 const dsoElementMap = new Map();
 export function renderElementsFor(listable: GenericConstructor<ListableObject>, viewMode : ViewMode) {
diff --git a/src/app/shared/object-collection/shared/item-search-result.model.ts b/src/app/shared/object-collection/shared/item-search-result.model.ts
new file mode 100644
index 0000000000..d9af3539a0
--- /dev/null
+++ b/src/app/shared/object-collection/shared/item-search-result.model.ts
@@ -0,0 +1,5 @@
+import { SearchResult } from '../../../+search-page/search-result.model';
+import { Item } from '../../../core/shared/item.model';
+
+export class ItemSearchResult extends SearchResult<Item> {
+}
diff --git a/src/app/object-collection/shared/listable-object.model.ts b/src/app/shared/object-collection/shared/listable-object.model.ts
similarity index 100%
rename from src/app/object-collection/shared/listable-object.model.ts
rename to src/app/shared/object-collection/shared/listable-object.model.ts
diff --git a/src/app/object-grid/collection-grid-element/collection-grid-element.component.html b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html
similarity index 100%
rename from src/app/object-grid/collection-grid-element/collection-grid-element.component.html
rename to src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html
diff --git a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss
new file mode 100644
index 0000000000..946c8a6a31
--- /dev/null
+++ b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../styles/variables';
+@import '../grid-card-styling';
diff --git a/src/app/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
similarity index 100%
rename from src/app/object-grid/collection-grid-element/collection-grid-element.component.spec.ts
rename to src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.spec.ts
diff --git a/src/app/object-grid/collection-grid-element/collection-grid-element.component.ts b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.ts
similarity index 80%
rename from src/app/object-grid/collection-grid-element/collection-grid-element.component.ts
rename to src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.ts
index 7e2ae5f468..09aadab15e 100644
--- a/src/app/object-grid/collection-grid-element/collection-grid-element.component.ts
+++ b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.ts
@@ -1,9 +1,9 @@
 import { Component, Inject } from '@angular/core';
 
-import { Collection } from '../../core/shared/collection.model';
+import { Collection } from '../../../core/shared/collection.model';
 import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
 import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
-import { ViewMode } from '../../+search-page/search-options.model';
+import { ViewMode } from '../../../+search-page/search-options.model';
 
 
 @Component({
diff --git a/src/app/object-grid/community-grid-element/community-grid-element.component.html b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.html
similarity index 100%
rename from src/app/object-grid/community-grid-element/community-grid-element.component.html
rename to src/app/shared/object-grid/community-grid-element/community-grid-element.component.html
diff --git a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss
new file mode 100644
index 0000000000..946c8a6a31
--- /dev/null
+++ b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../styles/variables';
+@import '../grid-card-styling';
diff --git a/src/app/object-grid/community-grid-element/community-grid-element.component.ts b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.ts
similarity index 80%
rename from src/app/object-grid/community-grid-element/community-grid-element.component.ts
rename to src/app/shared/object-grid/community-grid-element/community-grid-element.component.ts
index 76ee6736be..d40bd717a4 100644
--- a/src/app/object-grid/community-grid-element/community-grid-element.component.ts
+++ b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.ts
@@ -1,9 +1,9 @@
 import { Component, Input, Inject } from '@angular/core';
 
-import { Community } from '../../core/shared/community.model';
+import { Community } from '../../../core/shared/community.model';
 import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
 import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
-import { ViewMode } from '../../+search-page/search-options.model';
+import { ViewMode } from '../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-community-grid-element',
diff --git a/src/app/object-grid/grid-card-styling.scss b/src/app/shared/object-grid/grid-card-styling.scss
similarity index 94%
rename from src/app/object-grid/grid-card-styling.scss
rename to src/app/shared/object-grid/grid-card-styling.scss
index b25c603b55..2fe199d1ce 100644
--- a/src/app/object-grid/grid-card-styling.scss
+++ b/src/app/shared/object-grid/grid-card-styling.scss
@@ -1,4 +1,4 @@
-@import '../../styles/custom_variables';
+@import '../../../styles/custom_variables';
 
 .card-title{
   line-height: $line-height-base;
diff --git a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.html b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html
similarity index 100%
rename from src/app/object-grid/grid-thumbnail/grid-thumbnail.component.html
rename to src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html
diff --git a/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss
new file mode 100644
index 0000000000..45a533cd01
--- /dev/null
+++ b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss
@@ -0,0 +1 @@
+@import '../../../../styles/variables';
diff --git a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
similarity index 91%
rename from src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
rename to src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
index 209ac52997..2d2bd6305a 100644
--- a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
+++ b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
@@ -3,8 +3,8 @@ import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
 
 import { GridThumbnailComponent } from './grid-thumbnail.component';
-import { Bitstream } from '../../core/shared/bitstream.model';
-import { SafeUrlPipe } from '../../shared/utils/safe-url-pipe';
+import { Bitstream } from '../../../core/shared/bitstream.model';
+import { SafeUrlPipe } from '../../utils/safe-url-pipe';
 
 describe('ThumbnailComponent', () => {
   let comp: GridThumbnailComponent;
diff --git a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.ts b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.ts
similarity index 95%
rename from src/app/object-grid/grid-thumbnail/grid-thumbnail.component.ts
rename to src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.ts
index 7baa47b39e..8ca93470da 100644
--- a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.ts
+++ b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { Bitstream } from '../../core/shared/bitstream.model';
+import { Bitstream } from '../../../core/shared/bitstream.model';
 
 /**
  * This component renders a given Bitstream as a thumbnail.
diff --git a/src/app/object-grid/item-grid-element/item-grid-element.component.html b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.html
similarity index 100%
rename from src/app/object-grid/item-grid-element/item-grid-element.component.html
rename to src/app/shared/object-grid/item-grid-element/item-grid-element.component.html
diff --git a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss
new file mode 100644
index 0000000000..946c8a6a31
--- /dev/null
+++ b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../styles/variables';
+@import '../grid-card-styling';
diff --git a/src/app/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
similarity index 100%
rename from src/app/object-grid/item-grid-element/item-grid-element.component.spec.ts
rename to src/app/shared/object-grid/item-grid-element/item-grid-element.component.spec.ts
diff --git a/src/app/object-grid/item-grid-element/item-grid-element.component.ts b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.ts
similarity index 80%
rename from src/app/object-grid/item-grid-element/item-grid-element.component.ts
rename to src/app/shared/object-grid/item-grid-element/item-grid-element.component.ts
index e11c51312a..c41a6c9352 100644
--- a/src/app/object-grid/item-grid-element/item-grid-element.component.ts
+++ b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.ts
@@ -1,9 +1,9 @@
 import { Component, Input, Inject } from '@angular/core';
 
-import { Item } from '../../core/shared/item.model';
+import { Item } from '../../../core/shared/item.model';
 import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
 import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
-import { ViewMode } from '../../+search-page/search-options.model';
+import { ViewMode } from '../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-item-grid-element',
diff --git a/src/app/object-grid/object-grid-element/object-grid-element.component.html b/src/app/shared/object-grid/object-grid-element/object-grid-element.component.html
similarity index 100%
rename from src/app/object-grid/object-grid-element/object-grid-element.component.html
rename to src/app/shared/object-grid/object-grid-element/object-grid-element.component.html
diff --git a/src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss b/src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss
new file mode 100644
index 0000000000..d299edd0ab
--- /dev/null
+++ b/src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss
@@ -0,0 +1,6 @@
+@import '../../../../styles/variables';
+@import '../grid-card-styling';
+:host {
+  display: block;
+  margin-bottom: $spacer;
+}
diff --git a/src/app/object-grid/object-grid-element/object-grid-element.component.ts b/src/app/shared/object-grid/object-grid-element/object-grid-element.component.ts
similarity index 100%
rename from src/app/object-grid/object-grid-element/object-grid-element.component.ts
rename to src/app/shared/object-grid/object-grid-element/object-grid-element.component.ts
diff --git a/src/app/object-grid/object-grid.component.html b/src/app/shared/object-grid/object-grid.component.html
similarity index 100%
rename from src/app/object-grid/object-grid.component.html
rename to src/app/shared/object-grid/object-grid.component.html
diff --git a/src/app/shared/object-grid/object-grid.component.scss b/src/app/shared/object-grid/object-grid.component.scss
new file mode 100644
index 0000000000..48e6526dff
--- /dev/null
+++ b/src/app/shared/object-grid/object-grid.component.scss
@@ -0,0 +1 @@
+@import '../../../styles/variables';
diff --git a/src/app/object-grid/object-grid.component.spec.ts b/src/app/shared/object-grid/object-grid.component.spec.ts
similarity index 100%
rename from src/app/object-grid/object-grid.component.spec.ts
rename to src/app/shared/object-grid/object-grid.component.spec.ts
diff --git a/src/app/object-grid/object-grid.component.ts b/src/app/shared/object-grid/object-grid.component.ts
similarity index 88%
rename from src/app/object-grid/object-grid.component.ts
rename to src/app/shared/object-grid/object-grid.component.ts
index a6b62d735f..c811d90d62 100644
--- a/src/app/object-grid/object-grid.component.ts
+++ b/src/app/shared/object-grid/object-grid.component.ts
@@ -8,13 +8,13 @@ import {
 } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 
-import { RemoteData } from '../core/data/remote-data';
-import { PageInfo } from '../core/shared/page-info.model';
+import { RemoteData } from '../../core/data/remote-data';
+import { PageInfo } from '../../core/shared/page-info.model';
 
-import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
+import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
 
-import { SortOptions, SortDirection } from '../core/cache/models/sort-options.model';
-import { fadeIn } from '../shared/animations/fade';
+import { SortOptions, SortDirection } from '../../core/cache/models/sort-options.model';
+import { fadeIn } from '../animations/fade';
 import { ListableObject } from '../object-collection/shared/listable-object.model';
 
 @Component({
diff --git a/src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
similarity index 100%
rename from src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
rename to src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
diff --git a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
new file mode 100644
index 0000000000..2867dd78ac
--- /dev/null
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../../styles/variables';
+@import '../../grid-card-styling';
diff --git a/src/app/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
similarity index 84%
rename from src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts
rename to src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts
index 6c5e526d15..0228107a57 100644
--- a/src/app/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
@@ -4,8 +4,8 @@ import { renderElementsFor} from '../../../object-collection/shared/dso-element-
 
 import { CollectionSearchResult } from './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';
+import { Collection } from '../../../../core/shared/collection.model';
+import { ViewMode } from '../../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-collection-search-result-grid-element',
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
new file mode 100644
index 0000000000..ad48247e70
--- /dev/null
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts
@@ -0,0 +1,5 @@
+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/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
similarity index 100%
rename from src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
rename to src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
diff --git a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
new file mode 100644
index 0000000000..2867dd78ac
--- /dev/null
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../../styles/variables';
+@import '../../grid-card-styling';
diff --git a/src/app/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
similarity index 84%
rename from src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
rename to src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
index b6aa4bdb6d..4876a784fc 100644
--- a/src/app/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 { 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 { ViewMode } from '../../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-community-search-result-grid-element',
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
new file mode 100644
index 0000000000..efeb328e11
--- /dev/null
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/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/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
similarity index 100%
rename from src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
rename to src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
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
new file mode 100644
index 0000000000..2867dd78ac
--- /dev/null
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../../styles/variables';
+@import '../../grid-card-styling';
diff --git a/src/app/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
similarity index 84%
rename from src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
rename to src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
index d4989d2efd..f9fe13cb88 100644
--- a/src/app/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
@@ -2,9 +2,9 @@ import { Component } from '@angular/core';
 
 import { renderElementsFor } from '../../../object-collection/shared/dso-element-decorator';
 import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
-import { Item } from '../../../core/shared/item.model';
+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 { ViewMode } from '../../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-item-search-result-grid-element',
diff --git a/src/app/object-grid/search-result-grid-element/search-result-grid-element.component.scss b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss
similarity index 51%
rename from src/app/object-grid/search-result-grid-element/search-result-grid-element.component.scss
rename to src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss
index 0f2684f1f1..ebec5817e6 100644
--- a/src/app/object-grid/search-result-grid-element/search-result-grid-element.component.scss
+++ b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss
@@ -1,5 +1,5 @@
- @import '../../../styles/variables.scss';
- @import '../grid-card-styling.scss';
+ @import '../../../../styles/variables';
+ @import '../grid-card-styling';
 :host {
     /deep/ em {
         font-weight: bold;
diff --git a/src/app/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
similarity index 83%
rename from src/app/object-grid/search-result-grid-element/search-result-grid-element.component.ts
rename to src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts
index ba98a58d4b..052a9377b5 100644
--- a/src/app/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
@@ -1,9 +1,9 @@
 import { Component, Inject } from '@angular/core';
 
-import { SearchResult } from '../../+search-page/search-result.model';
-import { DSpaceObject } from '../../core/shared/dspace-object.model';
-import { Metadatum } from '../../core/shared/metadatum.model';
-import { isEmpty, hasNoValue } from '../../shared/empty.util';
+import { SearchResult } from '../../../+search-page/search-result.model';
+import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+import { Metadatum } from '../../../core/shared/metadatum.model';
+import { isEmpty, hasNoValue } from '../../empty.util';
 import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
 import { ListableObject } from '../../object-collection/shared/listable-object.model';
 
diff --git a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.html b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.html
similarity index 100%
rename from src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.html
rename to src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.html
diff --git a/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
new file mode 100644
index 0000000000..946c8a6a31
--- /dev/null
+++ b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../styles/variables';
+@import '../grid-card-styling';
diff --git a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts
similarity index 100%
rename from src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts
rename to src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts
diff --git a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
similarity index 86%
rename from src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
rename to src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
index 000c826188..912df16786 100644
--- a/src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
+++ b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
@@ -1,8 +1,8 @@
 import { Component, Input, Injector, ReflectiveInjector, OnInit } from '@angular/core';
-import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { GenericConstructor } from '../../../core/shared/generic-constructor';
 import { rendersDSOType } from '../../object-collection/shared/dso-element-decorator';
 import { ListableObject } from '../../object-collection/shared/listable-object.model';
-import { ViewMode } from '../../+search-page/search-options.model';
+import { ViewMode } from '../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-wrapper-grid-element',
diff --git a/src/app/object-list/collection-list-element/collection-list-element.component.html b/src/app/shared/object-list/collection-list-element/collection-list-element.component.html
similarity index 100%
rename from src/app/object-list/collection-list-element/collection-list-element.component.html
rename to src/app/shared/object-list/collection-list-element/collection-list-element.component.html
diff --git a/src/app/shared/object-list/collection-list-element/collection-list-element.component.scss b/src/app/shared/object-list/collection-list-element/collection-list-element.component.scss
new file mode 100644
index 0000000000..45a533cd01
--- /dev/null
+++ b/src/app/shared/object-list/collection-list-element/collection-list-element.component.scss
@@ -0,0 +1 @@
+@import '../../../../styles/variables';
diff --git a/src/app/object-list/collection-list-element/collection-list-element.component.ts b/src/app/shared/object-list/collection-list-element/collection-list-element.component.ts
similarity index 80%
rename from src/app/object-list/collection-list-element/collection-list-element.component.ts
rename to src/app/shared/object-list/collection-list-element/collection-list-element.component.ts
index c065a64b72..5e08e8ef3a 100644
--- a/src/app/object-list/collection-list-element/collection-list-element.component.ts
+++ b/src/app/shared/object-list/collection-list-element/collection-list-element.component.ts
@@ -1,9 +1,9 @@
 import { Component, Inject } from '@angular/core';
 
-import { Collection } from '../../core/shared/collection.model';
+import { Collection } from '../../../core/shared/collection.model';
 import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
 import { renderElementsFor } from '../../object-collection/shared/dso-element-decorator';
-import { ViewMode } from '../../+search-page/search-options.model';
+import { ViewMode } from '../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-collection-list-element',
diff --git a/src/app/object-list/community-list-element/community-list-element.component.html b/src/app/shared/object-list/community-list-element/community-list-element.component.html
similarity index 100%
rename from src/app/object-list/community-list-element/community-list-element.component.html
rename to src/app/shared/object-list/community-list-element/community-list-element.component.html
diff --git a/src/app/shared/object-list/community-list-element/community-list-element.component.scss b/src/app/shared/object-list/community-list-element/community-list-element.component.scss
new file mode 100644
index 0000000000..45a533cd01
--- /dev/null
+++ b/src/app/shared/object-list/community-list-element/community-list-element.component.scss
@@ -0,0 +1 @@
+@import '../../../../styles/variables';
diff --git a/src/app/object-list/community-list-element/community-list-element.component.ts b/src/app/shared/object-list/community-list-element/community-list-element.component.ts
similarity index 80%
rename from src/app/object-list/community-list-element/community-list-element.component.ts
rename to src/app/shared/object-list/community-list-element/community-list-element.component.ts
index 11ff392942..cd6e6f7574 100644
--- a/src/app/object-list/community-list-element/community-list-element.component.ts
+++ b/src/app/shared/object-list/community-list-element/community-list-element.component.ts
@@ -1,9 +1,9 @@
 import { Component, Input, Inject } from '@angular/core';
 
-import { Community } from '../../core/shared/community.model';
+import { Community } from '../../../core/shared/community.model';
 import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
 import { renderElementsFor } from '../../object-collection/shared/dso-element-decorator';
-import { ViewMode } from '../../+search-page/search-options.model';
+import { ViewMode } from '../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-community-list-element',
diff --git a/src/app/object-list/item-list-element/item-list-element.component.html b/src/app/shared/object-list/item-list-element/item-list-element.component.html
similarity index 100%
rename from src/app/object-list/item-list-element/item-list-element.component.html
rename to src/app/shared/object-list/item-list-element/item-list-element.component.html
diff --git a/src/app/shared/object-list/item-list-element/item-list-element.component.scss b/src/app/shared/object-list/item-list-element/item-list-element.component.scss
new file mode 100644
index 0000000000..45a533cd01
--- /dev/null
+++ b/src/app/shared/object-list/item-list-element/item-list-element.component.scss
@@ -0,0 +1 @@
+@import '../../../../styles/variables';
diff --git a/src/app/object-list/item-list-element/item-list-element.component.ts b/src/app/shared/object-list/item-list-element/item-list-element.component.ts
similarity index 80%
rename from src/app/object-list/item-list-element/item-list-element.component.ts
rename to src/app/shared/object-list/item-list-element/item-list-element.component.ts
index bdc5733dcd..43c59f0980 100644
--- a/src/app/object-list/item-list-element/item-list-element.component.ts
+++ b/src/app/shared/object-list/item-list-element/item-list-element.component.ts
@@ -1,9 +1,9 @@
 import { Component, Input, Inject } from '@angular/core';
 
-import { Item } from '../../core/shared/item.model';
+import { Item } from '../../../core/shared/item.model';
 import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
 import { renderElementsFor } from '../../object-collection/shared/dso-element-decorator';
-import { ViewMode } from '../../+search-page/search-options.model';
+import { ViewMode } from '../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-item-list-element',
diff --git a/src/app/object-list/object-list-element/object-list-element.component.html b/src/app/shared/object-list/object-list-element/object-list-element.component.html
similarity index 100%
rename from src/app/object-list/object-list-element/object-list-element.component.html
rename to src/app/shared/object-list/object-list-element/object-list-element.component.html
diff --git a/src/app/object-list/object-list-element/object-list-element.component.scss b/src/app/shared/object-list/object-list-element/object-list-element.component.scss
similarity index 56%
rename from src/app/object-list/object-list-element/object-list-element.component.scss
rename to src/app/shared/object-list/object-list-element/object-list-element.component.scss
index 1a22768fe8..f96f4ae744 100644
--- a/src/app/object-list/object-list-element/object-list-element.component.scss
+++ b/src/app/shared/object-list/object-list-element/object-list-element.component.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import '../../../../styles/variables';
 
 :host {
   display: block;
diff --git a/src/app/object-list/object-list-element/object-list-element.component.ts b/src/app/shared/object-list/object-list-element/object-list-element.component.ts
similarity index 100%
rename from src/app/object-list/object-list-element/object-list-element.component.ts
rename to src/app/shared/object-list/object-list-element/object-list-element.component.ts
diff --git a/src/app/object-list/object-list.component.html b/src/app/shared/object-list/object-list.component.html
similarity index 100%
rename from src/app/object-list/object-list.component.html
rename to src/app/shared/object-list/object-list.component.html
diff --git a/src/app/shared/object-list/object-list.component.scss b/src/app/shared/object-list/object-list.component.scss
new file mode 100644
index 0000000000..48e6526dff
--- /dev/null
+++ b/src/app/shared/object-list/object-list.component.scss
@@ -0,0 +1 @@
+@import '../../../styles/variables';
diff --git a/src/app/object-list/object-list.component.ts b/src/app/shared/object-list/object-list.component.ts
similarity index 90%
rename from src/app/object-list/object-list.component.ts
rename to src/app/shared/object-list/object-list.component.ts
index 9422d1d843..c1e3d21760 100644
--- a/src/app/object-list/object-list.component.ts
+++ b/src/app/shared/object-list/object-list.component.ts
@@ -9,9 +9,14 @@ import {
 
 import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
 
-import { RemoteData } from '../core/data/remote-data';
-import { PageInfo } from '../core/shared/page-info.model';
-import { fadeIn } from '../shared/animations/fade';
+import { RemoteData } from '../../core/data/remote-data';
+import { PageInfo } from '../../core/shared/page-info.model';
+
+import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
+
+import { SortOptions, SortDirection } from '../../core/cache/models/sort-options.model';
+
+import { fadeIn } from '../animations/fade';
 import { ListableObject } from '../object-collection/shared/listable-object.model';
 import { hasValue } from '../shared/empty.util';
 
diff --git a/src/app/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
similarity index 100%
rename from src/app/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html
rename to src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html
diff --git a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss
new file mode 100644
index 0000000000..1d0786105c
--- /dev/null
+++ b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss
@@ -0,0 +1 @@
+@import '../../../../../styles/variables';
diff --git a/src/app/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
similarity index 84%
rename from src/app/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.ts
rename to src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.ts
index 1b5d7ef0ba..5545ea17ec 100644
--- a/src/app/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
@@ -3,8 +3,8 @@ 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 { Collection } from '../../../../core/shared/collection.model';
+import { ViewMode } from '../../../../+search-page/search-options.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
new file mode 100644
index 0000000000..ad48247e70
--- /dev/null
+++ b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result.model.ts
@@ -0,0 +1,5 @@
+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/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
similarity index 100%
rename from src/app/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html
rename to src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html
diff --git a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss
new file mode 100644
index 0000000000..1d0786105c
--- /dev/null
+++ b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss
@@ -0,0 +1 @@
+@import '../../../../../styles/variables';
diff --git a/src/app/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
similarity index 84%
rename from src/app/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.ts
rename to src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.ts
index d9ab001f58..2d96f61833 100644
--- a/src/app/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
@@ -3,8 +3,8 @@ import { Component } from '@angular/core';
 import { renderElementsFor } from '../../../object-collection/shared/dso-element-decorator';
 import { CommunitySearchResult } from './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';
+import { Community } from '../../../../core/shared/community.model';
+import { ViewMode } from '../../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-community-search-result-list-element',
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
new file mode 100644
index 0000000000..efeb328e11
--- /dev/null
+++ b/src/app/shared/object-list/search-result-list-element/community-search-result/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/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
similarity index 100%
rename from src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
rename to src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
diff --git a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss
new file mode 100644
index 0000000000..1d0786105c
--- /dev/null
+++ b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss
@@ -0,0 +1 @@
+@import '../../../../../styles/variables';
diff --git a/src/app/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
similarity index 84%
rename from src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts
rename to src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts
index 929233f1a3..d1011c8c45 100644
--- a/src/app/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
@@ -2,9 +2,9 @@ import { Component } from '@angular/core';
 
 import { renderElementsFor } from '../../../object-collection/shared/dso-element-decorator';
 import { SearchResultListElementComponent } from '../search-result-list-element.component';
-import { Item } from '../../../core/shared/item.model';
+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 { ViewMode } from '../../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-item-search-result-list-element',
diff --git a/src/app/object-list/search-result-list-element/search-result-list-element.component.scss b/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.scss
similarity index 67%
rename from src/app/object-list/search-result-list-element/search-result-list-element.component.scss
rename to src/app/shared/object-list/search-result-list-element/search-result-list-element.component.scss
index 5ec8b5d81b..7134c43dad 100644
--- a/src/app/object-list/search-result-list-element/search-result-list-element.component.scss
+++ b/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.scss
@@ -1,7 +1,7 @@
-@import '../../../styles/variables.scss';
+@import '../../../../styles/variables';
 :host {
     ::ng-deep em {
         font-weight: bold;
         font-style: normal;
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/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
similarity index 83%
rename from src/app/object-list/search-result-list-element/search-result-list-element.component.ts
rename to src/app/shared/object-list/search-result-list-element/search-result-list-element.component.ts
index ec0afde65d..b89bb56da6 100644
--- a/src/app/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
@@ -1,10 +1,10 @@
 import { Component, Inject } from '@angular/core';
 
 import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
-import { SearchResult } from '../../+search-page/search-result.model';
-import { DSpaceObject } from '../../core/shared/dspace-object.model';
-import { Metadatum } from '../../core/shared/metadatum.model';
-import { isEmpty, hasNoValue } from '../../shared/empty.util';
+import { SearchResult } from '../../../+search-page/search-result.model';
+import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+import { Metadatum } from '../../../core/shared/metadatum.model';
+import { isEmpty, hasNoValue } from '../../empty.util';
 import { ListableObject } from '../../object-collection/shared/listable-object.model';
 
 @Component({
diff --git a/src/app/object-list/wrapper-list-element/wrapper-list-element.component.html b/src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.html
similarity index 100%
rename from src/app/object-list/wrapper-list-element/wrapper-list-element.component.html
rename to src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.html
diff --git a/src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.scss b/src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.scss
new file mode 100644
index 0000000000..51a7fc6a55
--- /dev/null
+++ b/src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../styles/variables';
+
diff --git a/src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts b/src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.ts
similarity index 86%
rename from src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts
rename to src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.ts
index ff5591442d..6450babae8 100644
--- a/src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts
+++ b/src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.ts
@@ -1,8 +1,8 @@
 import { Component, Input, Injector, ReflectiveInjector, OnInit } from '@angular/core';
 import { rendersDSOType } from '../../object-collection/shared/dso-element-decorator'
-import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { GenericConstructor } from '../../../core/shared/generic-constructor';
 import { ListableObject } from '../../object-collection/shared/listable-object.model';
-import { ViewMode } from '../../+search-page/search-options.model';
+import { ViewMode } from '../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-wrapper-list-element',
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 8ef05b2f89..7ee5ba56df 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -14,21 +14,21 @@ 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 { CommunityListElementComponent } from '../object-list/community-list-element/community-list-element.component';
-import { ItemListElementComponent } from '../object-list/item-list-element/item-list-element.component';
-import { ObjectListElementComponent } from '../object-list/object-list-element/object-list-element.component';
-import { SearchResultListElementComponent } from '../object-list/search-result-list-element/search-result-list-element.component';
-import { WrapperListElementComponent } from '../object-list/wrapper-list-element/wrapper-list-element.component';
-import { ObjectListComponent } from '../object-list/object-list.component';
+import { CollectionListElementComponent } from './object-list/collection-list-element/collection-list-element.component';
+import { CommunityListElementComponent } from './object-list/community-list-element/community-list-element.component';
+import { ItemListElementComponent } from './object-list/item-list-element/item-list-element.component';
+import { ObjectListElementComponent } from './object-list/object-list-element/object-list-element.component';
+import { SearchResultListElementComponent } from './object-list/search-result-list-element/search-result-list-element.component';
+import { WrapperListElementComponent } from './object-list/wrapper-list-element/wrapper-list-element.component';
+import { ObjectListComponent } from './object-list/object-list.component';
 
-import { CollectionGridElementComponent} from '../object-grid/collection-grid-element/collection-grid-element.component'
-import { CommunityGridElementComponent} from '../object-grid/community-grid-element/community-grid-element.component'
-import { ItemGridElementComponent} from '../object-grid/item-grid-element/item-grid-element.component'
-import { ObjectGridElementComponent} from '../object-grid/object-grid-element/object-grid-element.component'
-import { WrapperGridElementComponent} from '../object-grid/wrapper-grid-element/wrapper-grid-element.component'
-import { ObjectGridComponent } from '../object-grid/object-grid.component';
-import { ObjectCollectionComponent } from '../object-collection/object-collection.component';
+import { CollectionGridElementComponent} from './object-grid/collection-grid-element/collection-grid-element.component'
+import { CommunityGridElementComponent} from './object-grid/community-grid-element/community-grid-element.component'
+import { ItemGridElementComponent} from './object-grid/item-grid-element/item-grid-element.component'
+import { ObjectGridElementComponent} from './object-grid/object-grid-element/object-grid-element.component'
+import { WrapperGridElementComponent} from './object-grid/wrapper-grid-element/wrapper-grid-element.component'
+import { ObjectGridComponent } from './object-grid/object-grid.component';
+import { ObjectCollectionComponent } from './object-collection/object-collection.component';
 import { ComcolPageContentComponent } from './comcol-page-content/comcol-page-content.component';
 import { ComcolPageHeaderComponent } from './comcol-page-header/comcol-page-header.component';
 import { ComcolPageLogoComponent } from './comcol-page-logo/comcol-page-logo.component';
@@ -38,9 +38,9 @@ import { LoadingComponent } from './loading/loading.component';
 import { PaginationComponent } from './pagination/pagination.component';
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component';
 import { SearchFormComponent } from './search-form/search-form.component';
-import { SearchResultGridElementComponent } from '../object-grid/search-result-grid-element/search-result-grid-element.component';
+import { SearchResultGridElementComponent } from './object-grid/search-result-grid-element/search-result-grid-element.component';
 import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component';
-import { GridThumbnailComponent } from '../object-grid/grid-thumbnail/grid-thumbnail.component';
+import { GridThumbnailComponent } from './object-grid/grid-thumbnail/grid-thumbnail.component';
 import { VarDirective } from './utils/var.directive';
 
 const MODULES = [

From 04218060ddec55993f779ef7c0a3d4f63372a939 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Mon, 6 Nov 2017 10:08:28 +0100
Subject: [PATCH 28/47] 150 Backup commit

---
 .../object-collection.component.spec.ts       | 13 +++---
 .../collection-grid-element.component.spec.ts | 43 ++++++++++++++++++
 .../community-grid-element.component.spec.ts  | 44 +++++++++++++++++++
 .../item-grid-element.component.spec.ts       | 42 +++++++++++++++++-
 ...-search-result-grid-element.component.html | 14 +++++-
 ...-search-result-grid-element.component.html | 14 +++++-
 .../wrapper-grid-element.component.spec.ts    | 43 ++++++++++++++++++
 7 files changed, 202 insertions(+), 11 deletions(-)
 create mode 100644 src/app/shared/object-grid/community-grid-element/community-grid-element.component.spec.ts

diff --git a/src/app/shared/object-collection/object-collection.component.spec.ts b/src/app/shared/object-collection/object-collection.component.spec.ts
index a56a3e56dc..6793042f35 100644
--- a/src/app/shared/object-collection/object-collection.component.spec.ts
+++ b/src/app/shared/object-collection/object-collection.component.spec.ts
@@ -4,7 +4,7 @@ import { element } from 'protractor';
 import { By } from '@angular/platform-browser';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Config } from '../../../config/config.interface';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
 import { RouterStub } from '../testing/router-stub';
@@ -12,6 +12,7 @@ import { RouterStub } from '../testing/router-stub';
 describe('ObjectCollectionComponent', () => {
   let fixture: ComponentFixture<ObjectCollectionComponent>;
   let objectCollectionComponent: ObjectCollectionComponent;
+
   const queryParam = 'test query';
   const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
   const activatedRouteStub = {
@@ -34,19 +35,21 @@ describe('ObjectCollectionComponent', () => {
   beforeEach(async(() => {
     fixture = TestBed.createComponent(ObjectCollectionComponent);
     objectCollectionComponent = fixture.componentInstance;
+
   }));
   it('should only show the grid component when the viewmode is set to grid', () => {
     objectCollectionComponent.currentMode = ViewMode.Grid;
 
-    // expect(By.css('ds-object-grid')).toEqual(1);
-    // expect(By.css('ds-object-list')).toEqual(0);
+
+    expect(fixture.debugElement.query(By.css('ds-object-grid'))).toBeDefined();
+    expect(fixture.debugElement.query(By.css('ds-object-list'))).toBeNull();
   });
 
   it('should only show the list component when the viewmode is set to list', () => {
     objectCollectionComponent.currentMode = ViewMode.List;
 
-    // expect(By.css('ds-object-list').length).toEqual(1);
-    // expect(By.css('ds-object-grid').length).toEqual(0);
+    expect(fixture.debugElement.query(By.css('ds-object-list'))).toBeDefined();
+    expect(fixture.debugElement.query(By.css('ds-object-grid'))).toBeNull();
   })
 
 });
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 e69de29bb2..a1af8b5a3c 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
@@ -0,0 +1,43 @@
+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 { By } from '@angular/platform-browser';
+
+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
+  })
+};
+
+describe('CollectionGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CollectionGridElementComponent ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useFactory: (collectionGridElementComponent)}
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  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();
+  })
+})
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
new file mode 100644
index 0000000000..f6ab7bc6cd
--- /dev/null
+++ b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.spec.ts
@@ -0,0 +1,44 @@
+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 { By } from '@angular/platform-browser';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
+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
+  })
+};
+describe('CommunityGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommunityGridElementComponent ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useFactory: (communityGridElementComponent)}
+      ],
+
+    schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(CommunityGridElementComponent);
+    communityGridElementComponent = fixture.componentInstance;
+
+  }));
+
+  it('should show the community cards in the 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.spec.ts b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.spec.ts
index 0da99aa697..b4fb9c8029 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,6 +1,44 @@
 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 { By } from '@angular/platform-browser';
+import { TruncatePipe } from '../../utils/truncate.pipe';
 
-describe('ItemGridElementComponent',()=>{
-  let itemGridElementComponent: ItemGridElementComponent;
+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
+  })
+};
 
+describe('ItemGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ItemGridElementComponent , TruncatePipe],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useFactory: (itemGridElementComponent)}
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(ItemGridElementComponent);
+    itemGridElementComponent = fixture.componentInstance;
+
+  }));
+
+  it('should show the item cards in the grid element',()=>{
+    expect(fixture.debugElement.query(By.css('ds-item-grid-element'))).toBeDefined();
+  })
 })
diff --git a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
index 914fb49487..ae63924374 100644
--- a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
@@ -1,2 +1,12 @@
-<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 class="card">
+  <a [routerLink]="['/collections/' + dso.id]"class="card-img-top">
+    <ds-comcol-page-logo [logo]="dso.logo">
+    </ds-comcol-page-logo>
+  </a>
+  <div class="card-block">
+    <h4 class="card-title">{{dso.name}}</h4>
+    <p *ngIf="dso.shortDescription" class="card-text">{{dso.shortDescription}}</p>
+    <a [routerLink]="['/collections/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+
+  </div>
+</div>
diff --git a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
index d09ef7d668..2707934c56 100644
--- a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
@@ -1,2 +1,12 @@
-<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 class="card">
+
+  <a [routerLink]="['/communities/' + dso.id]"class="card-img-top">
+    <ds-comcol-page-logo [logo]="dso.logo">
+    </ds-comcol-page-logo>
+  </a>
+  <div class="card-block">
+    <h4 class="card-title">{{dso.name}}</h4>
+    <p *ngIf="dso.shortDescription" class="card-text">{{dso.shortDescription}}</p>
+    <a [routerLink]="['/communities/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+  </div>
+</div>
diff --git a/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts
index e69de29bb2..5b02fbe95a 100644
--- a/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts
@@ -0,0 +1,43 @@
+import { WrapperGridElementComponent } from './wrapper-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 { By } from '@angular/platform-browser';
+
+let wrapperGridElementComponent: WrapperGridElementComponent;
+let fixture: ComponentFixture<WrapperGridElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+
+describe('WrapperGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WrapperGridElementComponent ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useFactory: (wrapperGridElementComponent)}
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(WrapperGridElementComponent);
+    wrapperGridElementComponent = fixture.componentInstance;
+
+  }));
+
+  it('should show the wrapper element containing the cards',()=>{
+    expect(fixture.debugElement.query(By.css('ds-collection-grid-element'))).toBeDefined();
+  })
+})

From 68dd411ae782e2f78eeccbd0da3edcee61fb0dec Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Mon, 6 Nov 2017 13:40:00 +0100
Subject: [PATCH 29/47] #150 Grid element testing

---
 .../collection-grid-element.component.spec.ts | 26 +++++-
 .../community-grid-element.component.spec.ts  | 24 +++++-
 .../item-grid-element.component.spec.ts       | 30 ++++++-
 ...arch-result-grid-element.component.spec.ts | 67 +++++++++++++++
 ...arch-result-grid-element.component.spec.ts | 67 +++++++++++++++
 ...arch-result-grid-element.component.spec.ts | 84 +++++++++++++++++++
 6 files changed, 290 insertions(+), 8 deletions(-)
 create mode 100644 src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.spec.ts
 create mode 100644 src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.spec.ts
 create mode 100644 src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.spec.ts

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 a1af8b5a3c..fd935af992 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
@@ -5,6 +5,7 @@ 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 collectionGridElementComponent: CollectionGridElementComponent;
 let fixture: ComponentFixture<CollectionGridElementComponent>;
@@ -16,6 +17,15 @@ const activatedRouteStub = {
     scope: scopeParam
   })
 };
+let mockCollection: Collection = Object.assign(new Collection(), {
+  metadata: [
+    {
+      key: 'dc.description.abstract',
+      language: 'en_US',
+      value: 'Short description'
+    }]
+});
+let createdGridElementComponent:CollectionGridElementComponent= new CollectionGridElementComponent(mockCollection);
 
 describe('CollectionGridElementComponent', () => {
   beforeEach(async(() => {
@@ -24,7 +34,7 @@ describe('CollectionGridElementComponent', () => {
       providers: [
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: Router, useClass: RouterStub },
-        { provide: 'objectElementProvider', useFactory: (collectionGridElementComponent)}
+        { provide: 'objectElementProvider', useValue: (createdGridElementComponent)}
       ],
 
       schemas: [ NO_ERRORS_SCHEMA ]
@@ -33,11 +43,19 @@ describe('CollectionGridElementComponent', () => {
 
   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();
-  })
+  });
+
+  it('should only show the description if "short description" metadata is present',()=>{
+    let 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-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 f6ab7bc6cd..dc837e3c0c 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
@@ -18,6 +18,18 @@ const activatedRouteStub = {
     scope: scopeParam
   })
 };
+
+let mockCommunity: Community = Object.assign(new Community(), {
+  metadata: [
+    {
+      key: 'dc.description.abstract',
+      language: 'en_US',
+      value: 'Short description'
+    }]
+});
+
+let createdGridElementComponent:CommunityGridElementComponent= new CommunityGridElementComponent(mockCommunity);
+
 describe('CommunityGridElementComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -25,7 +37,7 @@ describe('CommunityGridElementComponent', () => {
       providers: [
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: Router, useClass: RouterStub },
-        { provide: 'objectElementProvider', useFactory: (communityGridElementComponent)}
+        { provide: 'objectElementProvider', useValue: (createdGridElementComponent)}
       ],
 
     schemas: [ NO_ERRORS_SCHEMA ]
@@ -41,4 +53,14 @@ describe('CommunityGridElementComponent', () => {
   it('should show the community cards in the grid element',()=>{
     expect(fixture.debugElement.query(By.css('ds-community-grid-element'))).toBeDefined();
   })
+
+  it('should only show the description if "short description" metadata is present',()=>{
+    let 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-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 b4fb9c8029..8913dca3ee 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
@@ -6,6 +6,7 @@ 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 itemGridElementComponent: ItemGridElementComponent;
 let fixture: ComponentFixture<ItemGridElementComponent>;
@@ -17,6 +18,17 @@ const activatedRouteStub = {
     scope: scopeParam
   })
 };
+/* tslint:disable:no-shadowed-variable */
+let mockItem: Item = Object.assign(new Item(), {
+  metadata: [
+    {
+      key: 'dc.contributor.author',
+      language: 'en_US',
+      value: 'Smith, Donald'
+    }]
+});
+
+let createdGridElementComponent:ItemGridElementComponent= new ItemGridElementComponent(mockItem);
 
 describe('ItemGridElementComponent', () => {
   beforeEach(async(() => {
@@ -25,7 +37,7 @@ describe('ItemGridElementComponent', () => {
       providers: [
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: Router, useClass: RouterStub },
-        { provide: 'objectElementProvider', useFactory: (itemGridElementComponent)}
+        { provide: 'objectElementProvider', useValue: {createdGridElementComponent}}
       ],
 
       schemas: [ NO_ERRORS_SCHEMA ]
@@ -39,6 +51,18 @@ describe('ItemGridElementComponent', () => {
   }));
 
   it('should show the item cards in the grid element',()=>{
-    expect(fixture.debugElement.query(By.css('ds-item-grid-element'))).toBeDefined();
-  })
+    expect(fixture.debugElement.query(By.css('ds-item-grid-element'))).toBeDefined()
+  });
+
+  it('should only show the author span if the author metadata is present',()=>{
+    let 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-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
new file mode 100644
index 0000000000..8d6fe6fb38
--- /dev/null
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.spec.ts
@@ -0,0 +1,67 @@
+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 { 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';
+
+
+let fixture: ComponentFixture<CollectionSearchResultGridElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+let mockCollection: Collection = Object.assign(new Collection(), {
+  metadata: [
+    {
+      key: 'dc.description.abstract',
+      language: 'en_US',
+      value: 'Short description'
+    } ]
+
+});
+
+let createdGridElementComponent: CollectionSearchResultGridElementComponent = new CollectionSearchResultGridElementComponent(mockCollection);
+
+
+describe('CollectionSearchResultGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CollectionSearchResultGridElementComponent, TruncatePipe ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: (createdGridElementComponent) }
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(CollectionSearchResultGridElementComponent);
+  }));
+
+  it('should show the item result cards in the grid element', () => {
+    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',()=>{
+    let 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-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
new file mode 100644
index 0000000000..0924700da7
--- /dev/null
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.spec.ts
@@ -0,0 +1,67 @@
+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 { By } from '@angular/platform-browser';
+import { TruncatePipe } from '../../../utils/truncate.pipe';
+import { Community } from '../../../../core/shared/community.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
+  })
+};
+let mockCommunity: Community = Object.assign(new Community(), {
+  metadata: [
+    {
+      key: 'dc.description.abstract',
+      language: 'en_US',
+      value: 'Short description'
+    } ]
+
+});
+
+let createdGridElementComponent: CommunitySearchResultGridElementComponent = new CommunitySearchResultGridElementComponent(mockCommunity);
+
+
+describe('CommunitySearchResultGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommunitySearchResultGridElementComponent, TruncatePipe ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: (createdGridElementComponent) }
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(CommunitySearchResultGridElementComponent);
+  }));
+
+  it('should show the item result cards in the grid element', () => {
+    expect(fixture.debugElement.query(By.css('ds-community-search-result-grid-element'))).toBeDefined();
+  });
+
+
+  it('should only show the description if "short description" metadata is present',()=>{
+    let 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-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
new file mode 100644
index 0000000000..318910304f
--- /dev/null
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.spec.ts
@@ -0,0 +1,84 @@
+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 } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { TruncatePipe } from '../../../utils/truncate.pipe';
+import { Item } from '../../../../core/shared/item.model';
+
+
+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
+  })
+};
+let 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'
+    }]
+});
+let createdGridElementComponent:ItemSearchResultGridElementComponent= new ItemSearchResultGridElementComponent(mockItem);
+
+describe('ItemSearchResultGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ItemSearchResultGridElementComponent, TruncatePipe ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: (createdGridElementComponent) }
+      ],
+
+      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',()=>{
+    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',()=>{
+    let 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',()=>{
+    let 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();
+    }
+  });
+
+
+
+
+});

From 7ae8950be5405c392d6399c024dc2178379ad520 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Mon, 13 Nov 2017 13:37:02 +0100
Subject: [PATCH 30/47] #150 Removal of inherited css + restyling using
 bootstrap classes

---
 package.json                                  |  1 -
 .../collection-grid-element.component.html    |  6 ++-
 .../collection-grid-element.component.scss    |  2 +-
 .../community-grid-element.component.html     |  6 ++-
 .../community-grid-element.component.scss     |  2 +-
 .../shared/object-grid/grid-card-styling.scss | 45 -------------------
 .../item-grid-element.component.html          |  6 ++-
 .../item-grid-element.component.scss          |  2 +-
 .../object-grid-element.component.scss        |  1 -
 .../object-grid/object-grid.component.html    |  4 +-
 .../object-grid/object-grid.component.scss    | 22 +++++++++
 ...-search-result-grid-element.component.html |  7 +--
 ...-search-result-grid-element.component.scss |  1 -
 ...-search-result-grid-element.component.html |  6 ++-
 ...-search-result-grid-element.component.scss |  2 +-
 ...-search-result-grid-element.component.html | 10 +++--
 ...-search-result-grid-element.component.scss |  2 +-
 .../search-result-grid-element.component.scss |  1 -
 .../wrapper-grid-element.component.scss       |  2 +-
 src/styles/_custom_variables.scss             |  2 +
 yarn.lock                                     |  4 --
 21 files changed, 58 insertions(+), 76 deletions(-)
 delete mode 100644 src/app/shared/object-grid/grid-card-styling.scss

diff --git a/package.json b/package.json
index 662b4b627f..f2bb074ff4 100644
--- a/package.json
+++ b/package.json
@@ -103,7 +103,6 @@
     "methods": "1.1.2",
     "morgan": "1.9.0",
     "ngx-pagination": "3.0.1",
-    "object-fit-images": "^3.2.3",
     "pem": "1.12.3",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.4.3",
diff --git a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html
index 5dc717cf54..b1287212a3 100644
--- a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html
+++ b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html
@@ -3,10 +3,12 @@
     <ds-comcol-page-logo [logo]="object.logo">
     </ds-comcol-page-logo>
   </a>
-  <div class="card-block">
+  <div class="card-body">
     <h4 class="card-title">{{object.name}}</h4>
     <p *ngIf="object.shortDescription" class="card-text">{{object.shortDescription}}</p>
-    <a [routerLink]="['/collections/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+    <div class="text-center">
+      <a [routerLink]="['/collections/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+    </div>
 
   </div>
 </div>
diff --git a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss
index 946c8a6a31..51a7fc6a55 100644
--- a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss
+++ b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss
@@ -1,2 +1,2 @@
 @import '../../../../styles/variables';
-@import '../grid-card-styling';
+
diff --git a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.html b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.html
index e4ea3dcb13..b6f4c5c5d9 100644
--- a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.html
+++ b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.html
@@ -4,9 +4,11 @@
     <ds-comcol-page-logo [logo]="object.logo">
     </ds-comcol-page-logo>
   </a>
-  <div class="card-block">
+  <div class="card-body">
     <h4 class="card-title">{{object.name}}</h4>
     <p *ngIf="object.shortDescription" class="card-text">{{object.shortDescription}}</p>
-    <a [routerLink]="['/communities/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+    <div class="text-center">
+      <a [routerLink]="['/communities/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+    </div>
   </div>
 </div>
diff --git a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss
index 946c8a6a31..51a7fc6a55 100644
--- a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss
+++ b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss
@@ -1,2 +1,2 @@
 @import '../../../../styles/variables';
-@import '../grid-card-styling';
+
diff --git a/src/app/shared/object-grid/grid-card-styling.scss b/src/app/shared/object-grid/grid-card-styling.scss
deleted file mode 100644
index 2fe199d1ce..0000000000
--- a/src/app/shared/object-grid/grid-card-styling.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-@import '../../../styles/custom_variables';
-
-.card-title{
-  line-height: $line-height-base;
-  height:$headings-line-height;
-  font-size:$headings-font-size;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.card-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: $line-height-base;
-  margin-bottom:$card-block-margin-base*2;
-}
-.card-text.item-authors {
-  height: $line-height-base;
-}
-.card-text.item-abstract {
-  height: $content-line-height;
-}
-
-.viewButton{
-  display:table;
-  margin:auto;
-  width: $card-button-width;
-}
-
-.card{
-  margin-bottom: $card-block-margin-base *3;
-  height: $card-height-percentage;
-}
-
-.card-img-top ::ng-deep  img
-{
-  height: $card-thumbnail-height;
-  width: 100%;
-  object-fit: cover;
-}
-
-.card-block{
-  margin: $card-block-margin-base;
-}
-
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 3fae55088e..b8bacfaf2e 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
@@ -4,7 +4,7 @@
     <ds-grid-thumbnail [thumbnail]="object.getThumbnail()">
     </ds-grid-thumbnail>
   </a>
-  <div class="card-block">
+  <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">
@@ -16,6 +16,8 @@
 
     <p *ngIf="object.findMetadata('dc.description.abstract')" class="item-abstract card-text">{{object.findMetadata("dc.description.abstract") | dsTruncate:[200] }}</p>
 
-    <a [routerLink]="['/items/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+    <div class="text-center">
+      <a [routerLink]="['/items/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+    </div>
   </div>
 </div>
diff --git a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss
index 946c8a6a31..51a7fc6a55 100644
--- a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss
+++ b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss
@@ -1,2 +1,2 @@
 @import '../../../../styles/variables';
-@import '../grid-card-styling';
+
diff --git a/src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss b/src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss
index d299edd0ab..d4720c4a64 100644
--- a/src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss
+++ b/src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss
@@ -1,5 +1,4 @@
 @import '../../../../styles/variables';
-@import '../grid-card-styling';
 :host {
   display: block;
   margin-bottom: $spacer;
diff --git a/src/app/shared/object-grid/object-grid.component.html b/src/app/shared/object-grid/object-grid.component.html
index ebcf240d28..32c3e9ec4f 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)="onSortDirectionChange($event)"
   (paginationChange)="onPaginationChange($event)">
-    <div class="row" *ngIf="objects.hasSucceeded | async" @fadeIn>
-        <div class="col-lg-4 col-sm-4 col-xs-12 "
+    <div class="row " *ngIf="objects.hasSucceeded | async" @fadeIn>
+        <div class="col-lg-4 col-sm-6 col-xs-12 "
           *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
           <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 48e6526dff..c01dfbdc85 100644
--- a/src/app/shared/object-grid/object-grid.component.scss
+++ b/src/app/shared/object-grid/object-grid.component.scss
@@ -1 +1,23 @@
 @import '../../../styles/variables';
+
+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;
+  }
+  div.card {
+    margin-bottom: 20px;
+  }
+}
diff --git a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
index ae63924374..d6b1bfb5f4 100644
--- a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
@@ -3,10 +3,11 @@
     <ds-comcol-page-logo [logo]="dso.logo">
     </ds-comcol-page-logo>
   </a>
-  <div class="card-block">
+  <div class="card-body">
     <h4 class="card-title">{{dso.name}}</h4>
     <p *ngIf="dso.shortDescription" class="card-text">{{dso.shortDescription}}</p>
-    <a [routerLink]="['/collections/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
-
+    <div class="text-center">
+      <a [routerLink]="['/collections/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+    </div>
   </div>
 </div>
diff --git a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
index 2867dd78ac..1d0786105c 100644
--- a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
@@ -1,2 +1 @@
 @import '../../../../../styles/variables';
-@import '../../grid-card-styling';
diff --git a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
index 2707934c56..8ff6874bff 100644
--- a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
@@ -4,9 +4,11 @@
     <ds-comcol-page-logo [logo]="dso.logo">
     </ds-comcol-page-logo>
   </a>
-  <div class="card-block">
+  <div class="card-body">
     <h4 class="card-title">{{dso.name}}</h4>
     <p *ngIf="dso.shortDescription" class="card-text">{{dso.shortDescription}}</p>
-    <a [routerLink]="['/communities/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+    <div class="text-center">
+      <a [routerLink]="['/communities/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+    </div>
   </div>
 </div>
diff --git a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
index 2867dd78ac..bd63aa6a3a 100644
--- a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
@@ -1,2 +1,2 @@
 @import '../../../../../styles/variables';
-@import '../../grid-card-styling';
+
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 be84039416..ce9324477f 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,10 +1,10 @@
 <div class="card">
-  <a [routerLink]="['/items/' + dso.id]" class="card-img-top">
+  <a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
     <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()">
     </ds-grid-thumbnail>
   </a>
-  <div class="card-block">
-    <p class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></p>
+  <div class="card-body">
+    <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">
@@ -25,7 +25,9 @@
     <p class="item-abstract card-text" [innerHTML]="getFirstValue('dc.description.abstract') | dsTruncate:[200]">
     </p>
 
-    <a [routerLink]="['/items/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+    <div class="text-center">
+      <a [routerLink]="['/items/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+    </div>
   </div>
 
 </div>
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 2867dd78ac..bd63aa6a3a 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,2 @@
 @import '../../../../../styles/variables';
-@import '../../grid-card-styling';
+
diff --git a/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss
index ebec5817e6..e8d681fb32 100644
--- a/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss
+++ b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss
@@ -1,5 +1,4 @@
  @import '../../../../styles/variables';
- @import '../grid-card-styling';
 :host {
     /deep/ em {
         font-weight: bold;
diff --git a/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
index 946c8a6a31..51a7fc6a55 100644
--- a/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
+++ b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
@@ -1,2 +1,2 @@
 @import '../../../../styles/variables';
-@import '../grid-card-styling';
+
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 8c0dcae928..4dcc161cc4 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -2,3 +2,5 @@ $content-spacing: $spacer * 1.5;
 
 $button-height: $input-btn-padding-y * 2 + $input-btn-line-height + calculateRem($input-btn-border-width*2);
 $card-height-percentage:98%;
+$card-thumbnail-height:240px;
+
diff --git a/yarn.lock b/yarn.lock
index 4211b7228a..91b2a787e2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4804,10 +4804,6 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-fit-images@^3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/object-fit-images/-/object-fit-images-3.2.3.tgz#4089f6d0070a3b5563d3c1ab6f1b28d61331f0ac"
-
 object-keys@^1.0.8:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"

From 9be1d5946474219cce9e5a768cdcc324477e4765 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Tue, 14 Nov 2017 14:51:49 +0100
Subject: [PATCH 31/47] Additional IDE generated files ignored

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index f8395956f5..dd5f5fa391 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,6 +14,7 @@ npm-debug.log
 /coverage/
 
 .idea
+*.iml
 *.ngfactory.ts
 *.css.shim.ts
 *.scss.shim.ts

From ee099e275c821f2afcedd64657737b570e6d19d8 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Wed, 15 Nov 2017 09:15:34 +0100
Subject: [PATCH 32/47] #150 Removal of iml file + small margin between
 pagination and grid

---
 dspace-angular.iml                                    | 8 --------
 src/app/shared/object-grid/object-grid.component.html | 2 +-
 2 files changed, 1 insertion(+), 9 deletions(-)
 delete mode 100644 dspace-angular.iml

diff --git a/dspace-angular.iml b/dspace-angular.iml
deleted file mode 100644
index 5806390693..0000000000
--- a/dspace-angular.iml
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="sourceFolder" forTests="false" />
-    <orderEntry type="library" name="node_modules" level="project" />
-  </component>
-</module>
\ No newline at end of file
diff --git a/src/app/shared/object-grid/object-grid.component.html b/src/app/shared/object-grid/object-grid.component.html
index 32c3e9ec4f..445d681268 100644
--- a/src/app/shared/object-grid/object-grid.component.html
+++ b/src/app/shared/object-grid/object-grid.component.html
@@ -10,7 +10,7 @@
   (sortDirectionChange)="onSortDirectionChange($event)"
   (sortFieldChange)="onSortDirectionChange($event)"
   (paginationChange)="onPaginationChange($event)">
-    <div class="row " *ngIf="objects.hasSucceeded | async" @fadeIn>
+    <div class="row mt-2" *ngIf="objects.hasSucceeded | async" @fadeIn>
         <div class="col-lg-4 col-sm-6 col-xs-12 "
           *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
           <ds-wrapper-grid-element [object]="object"></ds-wrapper-grid-element>

From d1b225bd954a5cfb6de493c6524eab5b9720bdd3 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Wed, 15 Nov 2017 10:28:11 +0100
Subject: [PATCH 33/47] #150 Merge fixes

---
 .../search-service/search.service.ts          |  2 +-
 .../object-collection.component.html          |  2 ++
 .../object-collection.component.ts            |  5 ++--
 .../object-grid/object-grid.component.html    |  4 +--
 .../object-grid/object-grid.component.scss    |  4 +++
 .../object-grid/object-grid.component.ts      |  4 +--
 .../object-list/object-list.component.ts      | 27 +------------------
 7 files changed, 15 insertions(+), 33 deletions(-)

diff --git a/src/app/+search-page/search-service/search.service.ts b/src/app/+search-page/search-service/search.service.ts
index 63b1b04dce..8ca84f4a32 100644
--- a/src/app/+search-page/search-service/search.service.ts
+++ b/src/app/+search-page/search-service/search.service.ts
@@ -12,7 +12,7 @@ import { Item } from '../../core/shared/item.model';
 import { SearchFilterConfig } from './search-filter-config.model';
 import { FilterType } from './filter-type.model';
 import { FacetValue } from './facet-value.model';
-import { ItemSearchResult } from '../../object-collection/shared/item-search-result.model';
+import { ItemSearchResult } from '../../shared/object-collection/shared/item-search-result.model';
 import { ViewMode } from '../../+search-page/search-options.model';
 import { Router, NavigationExtras, ActivatedRoute } from '@angular/router';
 import { ItemSearchResult } from '../../shared/object-collection/shared/item-search-result.model';
diff --git a/src/app/shared/object-collection/object-collection.component.html b/src/app/shared/object-collection/object-collection.component.html
index 6c2a2fb1de..c9b1cb92f5 100644
--- a/src/app/shared/object-collection/object-collection.component.html
+++ b/src/app/shared/object-collection/object-collection.component.html
@@ -1,12 +1,14 @@
 <ds-object-list [config]="config"
                 [sortConfig]="sortConfig"
                 [objects]="objects"
+                [hideGear]="hideGear"
                 *ngIf="getViewMode()===viewModeEnum.List">
 </ds-object-list>
 
 <ds-object-grid [config]="config"
                 [sortConfig]="sortConfig"
                 [objects]="objects"
+                [hideGear]="true"
                 *ngIf="getViewMode()===viewModeEnum.Grid">
 </ds-object-grid>
 
diff --git a/src/app/shared/object-collection/object-collection.component.ts b/src/app/shared/object-collection/object-collection.component.ts
index 8d5a9ce3c7..5a356dcbdc 100644
--- a/src/app/shared/object-collection/object-collection.component.ts
+++ b/src/app/shared/object-collection/object-collection.component.ts
@@ -27,6 +27,7 @@ export class ObjectCollectionComponent implements OnChanges, OnInit {
   @Input() objects: RemoteData<ListableObject[]>;
   @Input() config?: PaginationComponentOptions;
   @Input() sortConfig: SortOptions;
+  @Input() hideGear = false;
   pageInfo: Observable<PageInfo>;
   private sub;
   /**
@@ -60,13 +61,13 @@ export class ObjectCollectionComponent implements OnChanges, OnInit {
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.objects && !changes.objects.isFirstChange()) {
-      this.pageInfo = this.objects.pageInfo;
+      // this.pageInfo = this.objects.pageInfo;
     }
   }
 
 
   ngOnInit(): void {
-    this.pageInfo = this.objects.pageInfo;
+    // this.pageInfo = this.objects.pageInfo;
 
     this.sub = this.route
       .queryParams
diff --git a/src/app/shared/object-grid/object-grid.component.html b/src/app/shared/object-grid/object-grid.component.html
index 445d681268..ad9bf20a32 100644
--- a/src/app/shared/object-grid/object-grid.component.html
+++ b/src/app/shared/object-grid/object-grid.component.html
@@ -10,9 +10,9 @@
   (sortDirectionChange)="onSortDirectionChange($event)"
   (sortFieldChange)="onSortDirectionChange($event)"
   (paginationChange)="onPaginationChange($event)">
-    <div class="row mt-2" *ngIf="objects.hasSucceeded | async" @fadeIn>
+    <div class="row mt-2" *ngIf="objects?.hasSucceeded" @fadeIn>
         <div class="col-lg-4 col-sm-6 col-xs-12 "
-          *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
+          *ngFor="let object of objects?.payload">
           <ds-wrapper-grid-element [object]="object"></ds-wrapper-grid-element>
       </div>
     </div>
diff --git a/src/app/shared/object-grid/object-grid.component.scss b/src/app/shared/object-grid/object-grid.component.scss
index c01dfbdc85..a85e38d26f 100644
--- a/src/app/shared/object-grid/object-grid.component.scss
+++ b/src/app/shared/object-grid/object-grid.component.scss
@@ -17,6 +17,10 @@ ds-wrapper-grid-element ::ng-deep {
     overflow: hidden;
     text-overflow: ellipsis;
   }
+  .item-authors{
+    line-height: $line-height-base;
+    height: ($line-height-base*1.5)+em;
+  }
   div.card {
     margin-bottom: 20px;
   }
diff --git a/src/app/shared/object-grid/object-grid.component.ts b/src/app/shared/object-grid/object-grid.component.ts
index c811d90d62..1c890c8959 100644
--- a/src/app/shared/object-grid/object-grid.component.ts
+++ b/src/app/shared/object-grid/object-grid.component.ts
@@ -64,12 +64,12 @@ export class ObjectGridComponent implements OnChanges, OnInit  {
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.objects && !changes.objects.isFirstChange()) {
-      this.pageInfo = this.objects.pageInfo;
+      // this.pageInfo = this.objects.pageInfo;
     }
   }
 
   ngOnInit(): void {
-    this.pageInfo = this.objects.pageInfo;
+    // this.pageInfo = this.objects.pageInfo;
   }
 
   /**
diff --git a/src/app/shared/object-list/object-list.component.ts b/src/app/shared/object-list/object-list.component.ts
index c1e3d21760..a300e06f59 100644
--- a/src/app/shared/object-list/object-list.component.ts
+++ b/src/app/shared/object-list/object-list.component.ts
@@ -7,8 +7,6 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 
-import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
-
 import { RemoteData } from '../../core/data/remote-data';
 import { PageInfo } from '../../core/shared/page-info.model';
 
@@ -18,9 +16,8 @@ import { SortOptions, SortDirection } from '../../core/cache/models/sort-options
 
 import { fadeIn } from '../animations/fade';
 import { ListableObject } from '../object-collection/shared/listable-object.model';
-import { hasValue } from '../shared/empty.util';
+import { hasValue } from '../empty.util';
 
-import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.Default,
@@ -86,28 +83,6 @@ export class ObjectListComponent {
    */
   @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
   data: any = {};
-
-
-  onPageChange(event) {
-    this.pageChange.emit(event);
-  }
-
-  onPageSizeChange(event) {
-    this.pageSizeChange.emit(event);
-  }
-
-  onSortDirectionChange(event) {
-    this.sortDirectionChange.emit(event);
-  }
-
-  onSortFieldChange(event) {
-    this.sortFieldChange.emit(event);
-  }
-
-  onPaginationChange(event) {
-    this.paginationChange.emit(event);
-  }
-
   onPageChange(event) {
     this.pageChange.emit(event);
   }

From db0db81c63de93f5fc0124ff4ffbda4139300ba5 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Fri, 17 Nov 2017 16:26:33 +0100
Subject: [PATCH 34/47] #150 Generalised AbstractListableElementComponent
 instead of grid/list specific implementations

---
 .../abstract-listable-element.component.ts         | 13 +++++++++++++
 .../collection-grid-element.component.ts           |  4 ++--
 .../community-grid-element.component.ts            |  4 ++--
 .../item-grid-element.component.ts                 |  4 ++--
 .../object-grid-element.component.html             |  0
 .../object-grid-element.component.scss             |  5 -----
 .../object-grid-element.component.ts               | 14 --------------
 .../search-result-grid-element.component.ts        |  4 ++--
 .../collection-list-element.component.ts           |  4 ++--
 .../community-list-element.component.ts            |  4 ++--
 .../item-list-element.component.ts                 |  4 ++--
 .../object-list-element.component.html             |  0
 .../object-list-element.component.scss             |  6 ------
 .../object-list-element.component.ts               | 14 --------------
 .../search-result-list-element.component.ts        |  4 ++--
 src/app/shared/shared.module.ts                    |  6 ++----
 16 files changed, 31 insertions(+), 59 deletions(-)
 create mode 100644 src/app/shared/object-collection/shared/object-collection-element/abstract-listable-element.component.ts
 delete mode 100644 src/app/shared/object-grid/object-grid-element/object-grid-element.component.html
 delete mode 100644 src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss
 delete mode 100644 src/app/shared/object-grid/object-grid-element/object-grid-element.component.ts
 delete mode 100644 src/app/shared/object-list/object-list-element/object-list-element.component.html
 delete mode 100644 src/app/shared/object-list/object-list-element/object-list-element.component.scss
 delete mode 100644 src/app/shared/object-list/object-list-element/object-list-element.component.ts

diff --git a/src/app/shared/object-collection/shared/object-collection-element/abstract-listable-element.component.ts b/src/app/shared/object-collection/shared/object-collection-element/abstract-listable-element.component.ts
new file mode 100644
index 0000000000..d52036b5dc
--- /dev/null
+++ b/src/app/shared/object-collection/shared/object-collection-element/abstract-listable-element.component.ts
@@ -0,0 +1,13 @@
+import { Component, Inject } from '@angular/core';
+import { ListableObject } from '../listable-object.model';
+
+@Component({
+  selector: 'ds-abstract-object-element',
+  template: ``,
+})
+export class AbstractListableElementComponent <T extends ListableObject> {
+  object: T;
+  public constructor(@Inject('objectElementProvider') public listableObject: ListableObject) {
+    this.object = listableObject as T;
+  }
+}
diff --git a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.ts b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.ts
index 09aadab15e..a7f5ef3e49 100644
--- a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.ts
+++ b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.ts
@@ -1,9 +1,9 @@
 import { Component, Inject } from '@angular/core';
 
 import { Collection } from '../../../core/shared/collection.model';
-import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
 import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
 import { ViewMode } from '../../../+search-page/search-options.model';
+import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
 
 
 @Component({
@@ -13,4 +13,4 @@ import { ViewMode } from '../../../+search-page/search-options.model';
 })
 
 @renderElementsFor(Collection, ViewMode.Grid)
-export class CollectionGridElementComponent extends ObjectGridElementComponent<Collection> {}
+export class CollectionGridElementComponent extends AbstractListableElementComponent<Collection> {}
diff --git a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.ts b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.ts
index d40bd717a4..21d73ff0fa 100644
--- a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.ts
+++ b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, Inject } from '@angular/core';
 
 import { Community } from '../../../core/shared/community.model';
-import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
 import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
 import { ViewMode } from '../../../+search-page/search-options.model';
 
@@ -12,4 +12,4 @@ import { ViewMode } from '../../../+search-page/search-options.model';
 })
 
 @renderElementsFor(Community, ViewMode.Grid)
-export class CommunityGridElementComponent extends ObjectGridElementComponent<Community> {}
+export class CommunityGridElementComponent extends AbstractListableElementComponent<Community> {}
diff --git a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.ts b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.ts
index c41a6c9352..5a8d46f1f2 100644
--- a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.ts
+++ b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, Inject } from '@angular/core';
 
 import { Item } from '../../../core/shared/item.model';
 import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
-import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
 import { ViewMode } from '../../../+search-page/search-options.model';
 
 @Component({
@@ -12,4 +12,4 @@ import { ViewMode } from '../../../+search-page/search-options.model';
 })
 
 @renderElementsFor(Item, ViewMode.Grid)
-export class ItemGridElementComponent extends ObjectGridElementComponent<Item> {}
+export class ItemGridElementComponent extends AbstractListableElementComponent<Item> {}
diff --git a/src/app/shared/object-grid/object-grid-element/object-grid-element.component.html b/src/app/shared/object-grid/object-grid-element/object-grid-element.component.html
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss b/src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss
deleted file mode 100644
index d4720c4a64..0000000000
--- a/src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '../../../../styles/variables';
-:host {
-  display: block;
-  margin-bottom: $spacer;
-}
diff --git a/src/app/shared/object-grid/object-grid-element/object-grid-element.component.ts b/src/app/shared/object-grid/object-grid-element/object-grid-element.component.ts
deleted file mode 100644
index c3ab5e39e3..0000000000
--- a/src/app/shared/object-grid/object-grid-element/object-grid-element.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, Inject } from '@angular/core';
-import { ListableObject } from '../../object-collection/shared/listable-object.model';
-
-@Component({
-  selector: 'ds-object-grid-element',
-  styleUrls: ['./object-grid-element.component.scss'],
-  templateUrl: './object-grid-element.component.html'
-})
-export class ObjectGridElementComponent <T extends ListableObject> {
-  object: T;
-  public constructor(@Inject('objectElementProvider') public gridable: ListableObject) {
-    this.object = gridable as T;
-  }
-}
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 052a9377b5..8e1d7e0647 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
@@ -4,7 +4,7 @@ import { SearchResult } from '../../../+search-page/search-result.model';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 import { Metadatum } from '../../../core/shared/metadatum.model';
 import { isEmpty, hasNoValue } from '../../empty.util';
-import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
 import { ListableObject } from '../../object-collection/shared/listable-object.model';
 
 @Component({
@@ -12,7 +12,7 @@ import { ListableObject } from '../../object-collection/shared/listable-object.m
   template: ``
 })
 
-export class SearchResultGridElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends ObjectGridElementComponent<T> {
+export class SearchResultGridElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends AbstractListableElementComponent<T> {
   dso: K;
 
   public constructor(@Inject('objectElementProvider') public gridable: ListableObject) {
diff --git a/src/app/shared/object-list/collection-list-element/collection-list-element.component.ts b/src/app/shared/object-list/collection-list-element/collection-list-element.component.ts
index 5e08e8ef3a..f95c087d5c 100644
--- a/src/app/shared/object-list/collection-list-element/collection-list-element.component.ts
+++ b/src/app/shared/object-list/collection-list-element/collection-list-element.component.ts
@@ -1,9 +1,9 @@
 import { Component, Inject } from '@angular/core';
 
 import { Collection } from '../../../core/shared/collection.model';
-import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
 import { renderElementsFor } from '../../object-collection/shared/dso-element-decorator';
 import { ViewMode } from '../../../+search-page/search-options.model';
+import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
 
 @Component({
   selector: 'ds-collection-list-element',
@@ -12,4 +12,4 @@ import { ViewMode } from '../../../+search-page/search-options.model';
 })
 
 @renderElementsFor(Collection, ViewMode.List)
-export class CollectionListElementComponent extends ObjectListElementComponent<Collection> {}
+export class CollectionListElementComponent extends AbstractListableElementComponent<Collection> {}
diff --git a/src/app/shared/object-list/community-list-element/community-list-element.component.ts b/src/app/shared/object-list/community-list-element/community-list-element.component.ts
index cd6e6f7574..e92c080a31 100644
--- a/src/app/shared/object-list/community-list-element/community-list-element.component.ts
+++ b/src/app/shared/object-list/community-list-element/community-list-element.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, Inject } from '@angular/core';
 
 import { Community } from '../../../core/shared/community.model';
-import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
+import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
 import { renderElementsFor } from '../../object-collection/shared/dso-element-decorator';
 import { ViewMode } from '../../../+search-page/search-options.model';
 
@@ -12,4 +12,4 @@ import { ViewMode } from '../../../+search-page/search-options.model';
 })
 
 @renderElementsFor(Community, ViewMode.List)
-export class CommunityListElementComponent extends ObjectListElementComponent<Community> {}
+export class CommunityListElementComponent extends AbstractListableElementComponent<Community> {}
diff --git a/src/app/shared/object-list/item-list-element/item-list-element.component.ts b/src/app/shared/object-list/item-list-element/item-list-element.component.ts
index 43c59f0980..e4efbd6b08 100644
--- a/src/app/shared/object-list/item-list-element/item-list-element.component.ts
+++ b/src/app/shared/object-list/item-list-element/item-list-element.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, Inject } from '@angular/core';
 
 import { Item } from '../../../core/shared/item.model';
-import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
+import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
 import { renderElementsFor } from '../../object-collection/shared/dso-element-decorator';
 import { ViewMode } from '../../../+search-page/search-options.model';
 
@@ -12,4 +12,4 @@ import { ViewMode } from '../../../+search-page/search-options.model';
 })
 
 @renderElementsFor(Item, ViewMode.List)
-export class ItemListElementComponent extends ObjectListElementComponent<Item> {}
+export class ItemListElementComponent extends AbstractListableElementComponent<Item> {}
diff --git a/src/app/shared/object-list/object-list-element/object-list-element.component.html b/src/app/shared/object-list/object-list-element/object-list-element.component.html
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/app/shared/object-list/object-list-element/object-list-element.component.scss b/src/app/shared/object-list/object-list-element/object-list-element.component.scss
deleted file mode 100644
index f96f4ae744..0000000000
--- a/src/app/shared/object-list/object-list-element/object-list-element.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import '../../../../styles/variables';
-
-:host {
-  display: block;
-  margin-bottom: $spacer;
-}
diff --git a/src/app/shared/object-list/object-list-element/object-list-element.component.ts b/src/app/shared/object-list/object-list-element/object-list-element.component.ts
deleted file mode 100644
index 24f0ec1d93..0000000000
--- a/src/app/shared/object-list/object-list-element/object-list-element.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, Inject } from '@angular/core';
-import { ListableObject } from '../../object-collection/shared/listable-object.model';
-
-@Component({
-  selector: 'ds-object-list-element',
-  styleUrls: ['./object-list-element.component.scss'],
-  templateUrl: './object-list-element.component.html'
-})
-export class ObjectListElementComponent <T extends ListableObject> {
-  object: T;
-  public constructor(@Inject('objectElementProvider') public listable: ListableObject) {
-    this.object = listable as T;
-  }
-}
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 b89bb56da6..6c79eaad53 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
@@ -1,18 +1,18 @@
 import { Component, Inject } from '@angular/core';
 
-import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
 import { SearchResult } from '../../../+search-page/search-result.model';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 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';
 
 @Component({
   selector: 'ds-search-result-list-element',
   template: ``
 })
 
-export class SearchResultListElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends ObjectListElementComponent<T> {
+export class SearchResultListElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends AbstractListableElementComponent<T> {
   dso: K;
 
   public constructor(@Inject('objectElementProvider') public listable: ListableObject) {
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 7ee5ba56df..ca13067851 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -17,7 +17,6 @@ import { TruncatePipe } from './utils/truncate.pipe';
 import { CollectionListElementComponent } from './object-list/collection-list-element/collection-list-element.component';
 import { CommunityListElementComponent } from './object-list/community-list-element/community-list-element.component';
 import { ItemListElementComponent } from './object-list/item-list-element/item-list-element.component';
-import { ObjectListElementComponent } from './object-list/object-list-element/object-list-element.component';
 import { SearchResultListElementComponent } from './object-list/search-result-list-element/search-result-list-element.component';
 import { WrapperListElementComponent } from './object-list/wrapper-list-element/wrapper-list-element.component';
 import { ObjectListComponent } from './object-list/object-list.component';
@@ -25,7 +24,7 @@ import { ObjectListComponent } from './object-list/object-list.component';
 import { CollectionGridElementComponent} from './object-grid/collection-grid-element/collection-grid-element.component'
 import { CommunityGridElementComponent} from './object-grid/community-grid-element/community-grid-element.component'
 import { ItemGridElementComponent} from './object-grid/item-grid-element/item-grid-element.component'
-import { ObjectGridElementComponent} from './object-grid/object-grid-element/object-grid-element.component'
+import { AbstractListableElementComponent} from './object-collection/shared/object-collection-element/abstract-listable-element.component'
 import { WrapperGridElementComponent} from './object-grid/wrapper-grid-element/wrapper-grid-element.component'
 import { ObjectGridComponent } from './object-grid/object-grid.component';
 import { ObjectCollectionComponent } from './object-collection/object-collection.component';
@@ -70,10 +69,9 @@ const COMPONENTS = [
   ErrorComponent,
   LoadingComponent,
   ObjectListComponent,
-  ObjectListElementComponent,
+  AbstractListableElementComponent,
   WrapperListElementComponent,
   ObjectGridComponent,
-  ObjectGridElementComponent,
   WrapperGridElementComponent,
   ObjectCollectionComponent,
   PaginationComponent,

From d045b67b736ad16ea618b9401c3f00e0668f1f1c Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Tue, 21 Nov 2017 13:57:49 +0100
Subject: [PATCH 35/47] 150 Separate maps per viewMode

---
 .../object-collection/shared/dso-element-decorator.ts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/app/shared/object-collection/shared/dso-element-decorator.ts b/src/app/shared/object-collection/shared/dso-element-decorator.ts
index 5dc085d3a7..51aa57bc50 100644
--- a/src/app/shared/object-collection/shared/dso-element-decorator.ts
+++ b/src/app/shared/object-collection/shared/dso-element-decorator.ts
@@ -3,15 +3,18 @@ import { ListableObject } from './listable-object.model';
 import { ViewMode } from '../../../+search-page/search-options.model';
 
 const dsoElementMap = new Map();
-export function renderElementsFor(listable: GenericConstructor<ListableObject>, viewMode : ViewMode) {
+export function renderElementsFor(listable: GenericConstructor<ListableObject>, viewMode: ViewMode) {
   return function decorator(objectElement: any) {
     if (!objectElement) {
       return;
     }
-    dsoElementMap.set(listable+viewMode, objectElement);
+    if (!dsoElementMap.get(viewMode)) {
+      dsoElementMap.set(viewMode, new Map());
+    }
+    dsoElementMap.get(viewMode).set(listable, objectElement);
   };
 }
 
-export function rendersDSOType(listable: GenericConstructor<ListableObject>, viewMode : ViewMode) {
-  return dsoElementMap.get(listable+viewMode);
+export function rendersDSOType(listable: GenericConstructor<ListableObject>, viewMode: ViewMode) {
+  return dsoElementMap.get(viewMode).get(listable);
 }

From e331f7e288d0a2b09cfd9c21a87527da9b1fbd42 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Tue, 21 Nov 2017 16:16:37 +0100
Subject: [PATCH 36/47] #150 Rollback to previous state (not part of this
 issue)

---
 ...ty-page-sub-collection-list.component.html | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html
index 9494cdb755..b04e93ff71 100644
--- a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html
+++ b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html
@@ -1,10 +1,15 @@
 <ng-container *ngVar="(subCollectionsRDObs | async) as subCollectionsRD">
-  <div *ngIf="subCollectionsRD?.hasSucceeded " @fadeIn>
-  <h2>{{'community.sub-collection-list.head' | translate}}</h2>
-  <ul>
-    <ds-viewable-collection [objects]="subCollectionsRD?.payload"
-    [sortConfig]="sortConfig"></ds-viewable-collection>
-  </ul>
-</div><ds-error *ngIf="subCollectionsRD?.hasFailed" message="{{'error.sub-collections' | translate}}"></ds-error>
+  <div *ngIf="subCollectionsRD?.hasSucceeded" @fadeIn>
+    <h2>{{'community.sub-collection-list.head' | translate}}</h2>
+    <ul>
+      <li *ngFor="let collection of subCollectionsRD?.payload">
+        <p>
+          <span class="lead"><a [routerLink]="['/collections', collection.id]">{{collection.name}}</a></span><br>
+          <span class="text-muted">{{collection.shortDescription}}</span>
+        </p>
+      </li>
+    </ul>
+  </div>
+  <ds-error *ngIf="subCollectionsRD?.hasFailed" message="{{'error.sub-collections' | translate}}"></ds-error>
   <ds-loading *ngIf="subCollectionsRD?.isLoading" message="{{'loading.sub-collections' | translate}}"></ds-loading>
 </ng-container>

From 27ae938153b81d3f5373e852fd26ca4eef8df5be Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Wed, 22 Nov 2017 08:13:24 +0100
Subject: [PATCH 37/47] #150 Avoid first "null" download for initial content

---
 .../object-grid/grid-thumbnail/grid-thumbnail.component.html  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html
index 6221cbaba1..c0c3c1f65f 100644
--- a/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html
+++ b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html
@@ -1,4 +1,4 @@
 <div class="thumbnail">
-  <img *ngIf="thumbnail" [src]="thumbnail.content" (error)="errorHandler($event)"/>
-  <img *ngIf="!thumbnail" [src]="holderSource | dsSafeUrl"/>
+  <img *ngIf="thumbnail && thumbnail.content" [src]="thumbnail.content" (error)="errorHandler($event)"/>
+  <img *ngIf="!(thumbnail && thumbnail.content)" [src]="holderSource | dsSafeUrl"/>
 </div>

From b86905ab0522c8157e24db151a6a58af3d68fde7 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Thu, 30 Nov 2017 15:06:52 +0100
Subject: [PATCH 38/47] #150 Fixing rebase errors

---
 src/app/+search-page/search-page.component.ts         | 5 +++--
 src/app/+search-page/search-service/search.service.ts | 1 -
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/+search-page/search-page.component.ts b/src/app/+search-page/search-page.component.ts
index 697e379f3d..6952a2da96 100644
--- a/src/app/+search-page/search-page.component.ts
+++ b/src/app/+search-page/search-page.component.ts
@@ -12,6 +12,8 @@ import { SearchService } from './search-service/search.service';
 import { pushInOut } from '../shared/animations/push';
 import { HostWindowService } from '../shared/host-window.service';
 import { SearchSidebarService } from './search-sidebar/search-sidebar.service';
+import { PaginationComponentOptions } from 'src/app/shared/pagination/pagination-component-options.model';
+import { SortOptions } from '../core/cache/models/sort-options.model';
 
 /**
  * This component renders a simple item page.
@@ -58,7 +60,7 @@ export class SearchPageComponent implements OnInit, OnDestroy {
     pagination.pageSize = 10;
 
     const sort: SortOptions = new SortOptions();
-    this.sortConfig=sort;
+    this.sortConfig = sort;
     this.searchOptions = this.service.searchOptions;
   }
 
@@ -81,7 +83,6 @@ export class SearchPageComponent implements OnInit, OnDestroy {
             // pageSizeOptions = [9, 18, 27, 36 , 45, 54, 63, 72];
           }
 
-
           const sortDirection = +params.sortDirection || this.searchOptions.sort.direction;
           const pagination = Object.assign({},
             this.searchOptions.pagination,
diff --git a/src/app/+search-page/search-service/search.service.ts b/src/app/+search-page/search-service/search.service.ts
index 8ca84f4a32..52d86927d6 100644
--- a/src/app/+search-page/search-service/search.service.ts
+++ b/src/app/+search-page/search-service/search.service.ts
@@ -15,7 +15,6 @@ import { FacetValue } from './facet-value.model';
 import { ItemSearchResult } from '../../shared/object-collection/shared/item-search-result.model';
 import { ViewMode } from '../../+search-page/search-options.model';
 import { Router, NavigationExtras, ActivatedRoute } from '@angular/router';
-import { ItemSearchResult } from '../../shared/object-collection/shared/item-search-result.model';
 import { RouteService } from '../../shared/route.service';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { SortOptions } from '../../core/cache/models/sort-options.model';

From 9b812100b12a558c1ea6d722309c18835b73e5e6 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Fri, 1 Dec 2017 11:50:34 +0100
Subject: [PATCH 39/47] #150 Fixing path to use relative import

---
 src/app/+search-page/search-page.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/+search-page/search-page.component.ts b/src/app/+search-page/search-page.component.ts
index 6952a2da96..101eb68e8f 100644
--- a/src/app/+search-page/search-page.component.ts
+++ b/src/app/+search-page/search-page.component.ts
@@ -12,7 +12,7 @@ import { SearchService } from './search-service/search.service';
 import { pushInOut } from '../shared/animations/push';
 import { HostWindowService } from '../shared/host-window.service';
 import { SearchSidebarService } from './search-sidebar/search-sidebar.service';
-import { PaginationComponentOptions } from 'src/app/shared/pagination/pagination-component-options.model';
+import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
 import { SortOptions } from '../core/cache/models/sort-options.model';
 
 /**

From 1f873acea4edff6826ffe28797171a94c2a62286 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Fri, 1 Dec 2017 13:09:48 +0100
Subject: [PATCH 40/47] #150 TSLint error fixing

---
 .../object-collection.component.spec.ts       |  1 -
 .../object-collection.component.ts            |  5 ++--
 .../shared/dso-element-decorator.spec.ts      |  4 +--
 .../collection-grid-element.component.spec.ts | 16 +++++-------
 .../collection-grid-element.component.ts      |  1 -
 .../community-grid-element.component.spec.ts  | 14 +++++-----
 .../item-grid-element.component.spec.ts       | 15 +++++------
 ...arch-result-grid-element.component.spec.ts | 15 +++++------
 ...arch-result-grid-element.component.spec.ts | 16 +++++-------
 ...arch-result-grid-element.component.spec.ts | 26 ++++++++-----------
 .../wrapper-grid-element.component.spec.ts    |  2 +-
 .../object-list/object-list.component.ts      |  1 -
 12 files changed, 49 insertions(+), 67 deletions(-)

diff --git a/src/app/shared/object-collection/object-collection.component.spec.ts b/src/app/shared/object-collection/object-collection.component.spec.ts
index 6793042f35..b27a342eac 100644
--- a/src/app/shared/object-collection/object-collection.component.spec.ts
+++ b/src/app/shared/object-collection/object-collection.component.spec.ts
@@ -40,7 +40,6 @@ describe('ObjectCollectionComponent', () => {
   it('should only show the grid component when the viewmode is set to grid', () => {
     objectCollectionComponent.currentMode = ViewMode.Grid;
 
-
     expect(fixture.debugElement.query(By.css('ds-object-grid'))).toBeDefined();
     expect(fixture.debugElement.query(By.css('ds-object-list'))).toBeNull();
   });
diff --git a/src/app/shared/object-collection/object-collection.component.ts b/src/app/shared/object-collection/object-collection.component.ts
index 5a356dcbdc..3af92443c1 100644
--- a/src/app/shared/object-collection/object-collection.component.ts
+++ b/src/app/shared/object-collection/object-collection.component.ts
@@ -65,14 +65,13 @@ export class ObjectCollectionComponent implements OnChanges, OnInit {
     }
   }
 
-
   ngOnInit(): void {
     // this.pageInfo = this.objects.pageInfo;
 
     this.sub = this.route
       .queryParams
       .subscribe((params) => {
-        if(isNotEmpty(params.view)){
+        if (isNotEmpty(params.view)) {
           this.currentMode = params.view;
         }
       });
@@ -91,7 +90,7 @@ export class ObjectCollectionComponent implements OnChanges, OnInit {
   getViewMode(): ViewMode {
     this.route.queryParams.map((params) => {
       if (isNotEmpty(params.view) && hasValue(params.view)) {
-        this.currentMode= params.view;
+        this.currentMode = params.view;
       }
     });
     return this.currentMode;
diff --git a/src/app/shared/object-collection/shared/dso-element-decorator.spec.ts b/src/app/shared/object-collection/shared/dso-element-decorator.spec.ts
index b4b27bb52a..9f54bebed9 100644
--- a/src/app/shared/object-collection/shared/dso-element-decorator.spec.ts
+++ b/src/app/shared/object-collection/shared/dso-element-decorator.spec.ts
@@ -3,8 +3,8 @@ import { renderElementsFor } from './dso-element-decorator';
 import { Item } from '../../../core/shared/item.model';
 
 describe('ElementDecorator', () => {
-  let gridDecorator = renderElementsFor(Item, ViewMode.Grid);
-  let listDecorator = renderElementsFor(Item, ViewMode.List);
+  const gridDecorator = renderElementsFor(Item, ViewMode.Grid);
+  const listDecorator = renderElementsFor(Item, ViewMode.List);
   it('should have a decorator for both list and grid', () => {
     expect(listDecorator.length).not.toBeNull();
     expect(gridDecorator.length).not.toBeNull();
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 fd935af992..eaa6edc4d0 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
@@ -6,8 +6,6 @@ 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 collectionGridElementComponent: CollectionGridElementComponent;
 let fixture: ComponentFixture<CollectionGridElementComponent>;
 const queryParam = 'test query';
 const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
@@ -17,7 +15,7 @@ const activatedRouteStub = {
     scope: scopeParam
   })
 };
-let mockCollection: Collection = Object.assign(new Collection(), {
+const mockCollection: Collection = Object.assign(new Collection(), {
   metadata: [
     {
       key: 'dc.description.abstract',
@@ -25,7 +23,7 @@ let mockCollection: Collection = Object.assign(new Collection(), {
       value: 'Short description'
     }]
 });
-let createdGridElementComponent:CollectionGridElementComponent= new CollectionGridElementComponent(mockCollection);
+const createdGridElementComponent:CollectionGridElementComponent= new CollectionGridElementComponent(mockCollection);
 
 describe('CollectionGridElementComponent', () => {
   beforeEach(async(() => {
@@ -45,16 +43,16 @@ describe('CollectionGridElementComponent', () => {
     fixture = TestBed.createComponent(CollectionGridElementComponent);
   }));
 
-  it('should show the collection cards in the grid element',()=>{
+  it('should show the collection cards in the grid element',() => {
     expect(fixture.debugElement.query(By.css('ds-collection-grid-element'))).toBeDefined();
   });
 
-  it('should only show the description if "short description" metadata is present',()=>{
-    let descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
+  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){
+    if (mockCollection.shortDescription.length > 0) {
       expect(descriptionText).toBeDefined();
-    }else{
+    }else {
       expect(descriptionText).not.toBeDefined();
     }
   });
diff --git a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.ts b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.ts
index a7f5ef3e49..f383367e3f 100644
--- a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.ts
+++ b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.ts
@@ -5,7 +5,6 @@ import { renderElementsFor} from '../../object-collection/shared/dso-element-dec
 import { ViewMode } from '../../../+search-page/search-options.model';
 import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
 
-
 @Component({
   selector: 'ds-collection-grid-element',
   styleUrls: ['./collection-grid-element.component.scss'],
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 dc837e3c0c..cb9e20449e 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
@@ -19,7 +19,7 @@ const activatedRouteStub = {
   })
 };
 
-let mockCommunity: Community = Object.assign(new Community(), {
+const mockCommunity: Community = Object.assign(new Community(), {
   metadata: [
     {
       key: 'dc.description.abstract',
@@ -28,7 +28,7 @@ let mockCommunity: Community = Object.assign(new Community(), {
     }]
 });
 
-let createdGridElementComponent:CommunityGridElementComponent= new CommunityGridElementComponent(mockCommunity);
+const createdGridElementComponent:CommunityGridElementComponent= new CommunityGridElementComponent(mockCommunity);
 
 describe('CommunityGridElementComponent', () => {
   beforeEach(async(() => {
@@ -50,16 +50,16 @@ describe('CommunityGridElementComponent', () => {
 
   }));
 
-  it('should show the community cards in the grid element',()=>{
+  it('should show the community cards in the grid element',() => {
     expect(fixture.debugElement.query(By.css('ds-community-grid-element'))).toBeDefined();
   })
 
-  it('should only show the description if "short description" metadata is present',()=>{
-    let descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
+  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){
+    if (mockCommunity.shortDescription.length > 0) {
       expect(descriptionText).toBeDefined();
-    }else{
+    }else {
       expect(descriptionText).not.toBeDefined();
     }
   });
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 8913dca3ee..3be46965ee 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
@@ -19,7 +19,7 @@ const activatedRouteStub = {
   })
 };
 /* tslint:disable:no-shadowed-variable */
-let mockItem: Item = Object.assign(new Item(), {
+const mockItem: Item = Object.assign(new Item(), {
   metadata: [
     {
       key: 'dc.contributor.author',
@@ -28,7 +28,7 @@ let mockItem: Item = Object.assign(new Item(), {
     }]
 });
 
-let createdGridElementComponent:ItemGridElementComponent= new ItemGridElementComponent(mockItem);
+const createdGridElementComponent:ItemGridElementComponent= new ItemGridElementComponent(mockItem);
 
 describe('ItemGridElementComponent', () => {
   beforeEach(async(() => {
@@ -50,19 +50,18 @@ describe('ItemGridElementComponent', () => {
 
   }));
 
-  it('should show the item cards in the grid element',()=>{
+  it('should show the item cards in the grid element',() => {
     expect(fixture.debugElement.query(By.css('ds-item-grid-element'))).toBeDefined()
   });
 
-  it('should only show the author span if the author metadata is present',()=>{
-    let itemAuthorField = expect(fixture.debugElement.query(By.css('p.item-authors')));
+  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){
+    if (mockItem.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length > 0) {
       expect(itemAuthorField).toBeDefined();
-    }else{
+    }else {
       expect(itemAuthorField).toBeDefined();
     }
   });
 
-
 })
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 8d6fe6fb38..a3b3710080 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
@@ -9,7 +9,6 @@ import { TruncatePipe } from '../../../utils/truncate.pipe';
 import { Community } from '../../../../core/shared/community.model';
 import { Collection } from '../../../../core/shared/collection.model';
 
-
 let fixture: ComponentFixture<CollectionSearchResultGridElementComponent>;
 const queryParam = 'test query';
 const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
@@ -19,7 +18,7 @@ const activatedRouteStub = {
     scope: scopeParam
   })
 };
-let mockCollection: Collection = Object.assign(new Collection(), {
+const mockCollection: Collection = Object.assign(new Collection(), {
   metadata: [
     {
       key: 'dc.description.abstract',
@@ -29,8 +28,7 @@ let mockCollection: Collection = Object.assign(new Collection(), {
 
 });
 
-let createdGridElementComponent: CollectionSearchResultGridElementComponent = new CollectionSearchResultGridElementComponent(mockCollection);
-
+const createdGridElementComponent: CollectionSearchResultGridElementComponent = new CollectionSearchResultGridElementComponent(mockCollection);
 
 describe('CollectionSearchResultGridElementComponent', () => {
   beforeEach(async(() => {
@@ -54,13 +52,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',() => {
+    const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
 
-  it('should only show the description if "short description" metadata is present',()=>{
-    let descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
-
-    if(mockCollection.shortDescription.length>0){
+    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 0924700da7..dd9e16a120 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
@@ -8,8 +8,6 @@ import { By } from '@angular/platform-browser';
 import { TruncatePipe } from '../../../utils/truncate.pipe';
 import { Community } from '../../../../core/shared/community.model';
 
-
-let communitySearchResultGridElementComponent: CommunitySearchResultGridElementComponent;
 let fixture: ComponentFixture<CommunitySearchResultGridElementComponent>;
 const queryParam = 'test query';
 const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
@@ -19,7 +17,7 @@ const activatedRouteStub = {
     scope: scopeParam
   })
 };
-let mockCommunity: Community = Object.assign(new Community(), {
+const mockCommunity: Community = Object.assign(new Community(), {
   metadata: [
     {
       key: 'dc.description.abstract',
@@ -29,8 +27,7 @@ let mockCommunity: Community = Object.assign(new Community(), {
 
 });
 
-let createdGridElementComponent: CommunitySearchResultGridElementComponent = new CommunitySearchResultGridElementComponent(mockCommunity);
-
+const createdGridElementComponent: CommunitySearchResultGridElementComponent = new CommunitySearchResultGridElementComponent(mockCommunity);
 
 describe('CommunitySearchResultGridElementComponent', () => {
   beforeEach(async(() => {
@@ -54,13 +51,12 @@ describe('CommunitySearchResultGridElementComponent', () => {
     expect(fixture.debugElement.query(By.css('ds-community-search-result-grid-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')));
 
-  it('should only show the description if "short description" metadata is present',()=>{
-    let descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
-
-    if(mockCommunity.shortDescription.length>0){
+    if (mockCommunity.shortDescription.length > 0) {
       expect(descriptionText).toBeDefined();
-    }else{
+    }else {
       expect(descriptionText).not.toBeDefined();
     }
   });
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 318910304f..1a2ca908e2 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
@@ -8,7 +8,6 @@ import { By } from '@angular/platform-browser';
 import { TruncatePipe } from '../../../utils/truncate.pipe';
 import { Item } from '../../../../core/shared/item.model';
 
-
 let itemSearchResultGridElementComponent: ItemSearchResultGridElementComponent;
 let fixture: ComponentFixture<ItemSearchResultGridElementComponent>;
 const queryParam = 'test query';
@@ -19,7 +18,7 @@ const activatedRouteStub = {
     scope: scopeParam
   })
 };
-let mockItem: Item = Object.assign(new Item(), {
+const mockItem: Item = Object.assign(new Item(), {
   metadata: [
     {
       key: 'dc.contributor.author',
@@ -32,7 +31,7 @@ let mockItem: Item = Object.assign(new Item(), {
       value: '1650-06-26'
     }]
 });
-let createdGridElementComponent:ItemSearchResultGridElementComponent= new ItemSearchResultGridElementComponent(mockItem);
+const createdGridElementComponent:ItemSearchResultGridElementComponent= new ItemSearchResultGridElementComponent(mockItem);
 
 describe('ItemSearchResultGridElementComponent', () => {
   beforeEach(async(() => {
@@ -54,31 +53,28 @@ describe('ItemSearchResultGridElementComponent', () => {
 
   }));
 
-  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',()=>{
-    let itemAuthorField = expect(fixture.debugElement.query(By.css('p.item-authors')));
+  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){
+    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',()=>{
-    let dateField = expect(fixture.debugElement.query(By.css('span.item-list-date')));
+  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){
+    if (mockItem.findMetadata('dc.date.issued').length > 0) {
       expect(dateField).toBeDefined();
-    }else{
+    }else {
       expect(dateField).not.toBeDefined();
     }
   });
 
-
-
-
 });
diff --git a/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts
index 5b02fbe95a..390b003e2e 100644
--- a/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts
@@ -37,7 +37,7 @@ describe('WrapperGridElementComponent', () => {
 
   }));
 
-  it('should show the wrapper element containing the cards',()=>{
+  it('should show the wrapper element containing the cards',() => {
     expect(fixture.debugElement.query(By.css('ds-collection-grid-element'))).toBeDefined();
   })
 })
diff --git a/src/app/shared/object-list/object-list.component.ts b/src/app/shared/object-list/object-list.component.ts
index a300e06f59..b9abed37ac 100644
--- a/src/app/shared/object-list/object-list.component.ts
+++ b/src/app/shared/object-list/object-list.component.ts
@@ -18,7 +18,6 @@ import { fadeIn } from '../animations/fade';
 import { ListableObject } from '../object-collection/shared/listable-object.model';
 import { hasValue } from '../empty.util';
 
-
 @Component({
   changeDetection: ChangeDetectionStrategy.Default,
   encapsulation: ViewEncapsulation.Emulated,

From 5061ceef3c36ceced4355fcca8fcc380c0bbd6ee Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Fri, 1 Dec 2017 13:34:38 +0100
Subject: [PATCH 41/47] #150 Payload compatibility fix

---
 .../core/data/browse-response-parsing.service.spec.ts  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/core/data/browse-response-parsing.service.spec.ts b/src/app/core/data/browse-response-parsing.service.spec.ts
index 5f27519a93..263c4a0532 100644
--- a/src/app/core/data/browse-response-parsing.service.spec.ts
+++ b/src/app/core/data/browse-response-parsing.service.spec.ts
@@ -2,6 +2,7 @@ import { BrowseResponseParsingService } from './browse-response-parsing.service'
 import { BrowseEndpointRequest } from './request.models';
 import { BrowseSuccessResponse, ErrorResponse } from '../cache/response-cache.models';
 import { BrowseDefinition } from '../shared/browse-definition.model';
+import { DSpaceRESTV2Response } from '../dspace-rest-v2/dspace-rest-v2-response.model';
 
 describe('BrowseResponseParsingService', () => {
   let service: BrowseResponseParsingService;
@@ -48,7 +49,7 @@ describe('BrowseResponseParsingService', () => {
         _links: { self: { href: 'https://rest.api/discover/browses' } },
         page: { size: 20, totalElements: 2, totalPages: 1, number: 0 }
       }, statusCode: '200'
-    };
+    } as DSpaceRESTV2Response;
 
     const invalidResponse1 = {
       payload: {
@@ -71,22 +72,21 @@ describe('BrowseResponseParsingService', () => {
         _links: { self: { href: 'https://rest.api/discover/browses' } },
         page: { size: 20, totalElements: 2, totalPages: 1, number: 0 }
       }, statusCode: '200'
-    };
+    } as DSpaceRESTV2Response;
 
     const invalidResponse2 = {
       payload: {
-        browses: [{}, {}],
         _links: { self: { href: 'https://rest.api/discover/browses' } },
         page: { size: 20, totalElements: 2, totalPages: 1, number: 0 }
       }, statusCode: '200'
-    };
+    } as DSpaceRESTV2Response ;
 
     const invalidResponse3 = {
       payload: {
         _links: { self: { href: 'https://rest.api/discover/browses' } },
         page: { size: 20, totalElements: 2, totalPages: 1, number: 0 }
       }, statusCode: '500'
-    };
+    } as DSpaceRESTV2Response;
 
     const definitions = [
       Object.assign(new BrowseDefinition(), {

From 827058762449b14ff3f36cd6eddfee3ab055b0b0 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Thu, 7 Dec 2017 13:12:41 +0100
Subject: [PATCH 42/47] #150 Mive object-list.component test to correct package
 + delete empty file

---
 src/app/object-list/list-element-decorator.ts                  | 0
 src/app/{ => shared}/object-list/object-list.component.spec.ts | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 src/app/object-list/list-element-decorator.ts
 rename src/app/{ => shared}/object-list/object-list.component.spec.ts (100%)

diff --git a/src/app/object-list/list-element-decorator.ts b/src/app/object-list/list-element-decorator.ts
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/app/object-list/object-list.component.spec.ts b/src/app/shared/object-list/object-list.component.spec.ts
similarity index 100%
rename from src/app/object-list/object-list.component.spec.ts
rename to src/app/shared/object-list/object-list.component.spec.ts

From 4a56bd0f1483a002c6b0c48dedca8b6f4b0efa11 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Tue, 19 Dec 2017 10:41:35 +0100
Subject: [PATCH 43/47] #150 Feedback fixes

---
 src/app/+search-page/search-page.component.ts | 11 +++-
 .../object-grid/object-grid.component.html    |  4 +-
 .../object-grid/object-grid.component.ts      | 56 +++++++++----------
 3 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/src/app/+search-page/search-page.component.ts b/src/app/+search-page/search-page.component.ts
index 101eb68e8f..5ed649e4cc 100644
--- a/src/app/+search-page/search-page.component.ts
+++ b/src/app/+search-page/search-page.component.ts
@@ -77,10 +77,15 @@ export class SearchPageComponent implements OnInit, OnDestroy {
           let pageSizeOptions: number[] = [5, 10, 20, 40, 60, 80, 100];
 
           if (isNotEmpty(params.view) && params.view === ViewMode.Grid) {
-            pageSize = 12;
             pageSizeOptions = [12, 24, 36, 48 , 50, 62, 74, 84];
-            // pageSize = 9;
-            // pageSizeOptions = [9, 18, 27, 36 , 45, 54, 63, 72];
+            if (pageSizeOptions.indexOf(pageSize) === -1) {
+              pageSize = 12;
+            }
+          }
+          if (isNotEmpty(params.view) && params.view === ViewMode.List) {
+            if (pageSizeOptions.indexOf(pageSize) === -1) {
+              pageSize = 10;
+            }
           }
 
           const sortDirection = +params.sortDirection || this.searchOptions.sort.direction;
diff --git a/src/app/shared/object-grid/object-grid.component.html b/src/app/shared/object-grid/object-grid.component.html
index ad9bf20a32..64231bc931 100644
--- a/src/app/shared/object-grid/object-grid.component.html
+++ b/src/app/shared/object-grid/object-grid.component.html
@@ -1,14 +1,14 @@
 <ds-pagination
   [paginationOptions]="config"
   [pageInfoState]="pageInfo"
-  [collectionSize]="(pageInfo | async)?.totalElements"
+  [collectionSize]="pageInfo?.totalElements"
   [sortOptions]="sortConfig"
   [hideGear]="hideGear"
   [hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
   (pageChange)="onPageChange($event)"
   (pageSizeChange)="onPageSizeChange($event)"
   (sortDirectionChange)="onSortDirectionChange($event)"
-  (sortFieldChange)="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 "
diff --git a/src/app/shared/object-grid/object-grid.component.ts b/src/app/shared/object-grid/object-grid.component.ts
index 1c890c8959..2bf77fc0c3 100644
--- a/src/app/shared/object-grid/object-grid.component.ts
+++ b/src/app/shared/object-grid/object-grid.component.ts
@@ -1,12 +1,10 @@
 import {
+  ChangeDetectionStrategy,
   Component, EventEmitter,
   Input,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  OnInit,
-  Output, SimpleChanges, OnChanges, ChangeDetectorRef, DoCheck
+  Output,
+  ViewEncapsulation
 } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
 
 import { RemoteData } from '../../core/data/remote-data';
 import { PageInfo } from '../../core/shared/page-info.model';
@@ -16,6 +14,7 @@ import { PaginationComponentOptions } from '../pagination/pagination-component-o
 import { SortOptions, SortDirection } from '../../core/cache/models/sort-options.model';
 import { fadeIn } from '../animations/fade';
 import { ListableObject } from '../object-collection/shared/listable-object.model';
+import { hasValue } from '../empty.util';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.Default,
@@ -26,14 +25,35 @@ import { ListableObject } from '../object-collection/shared/listable-object.mode
   animations: [fadeIn]
 })
 
-export class ObjectGridComponent implements OnChanges, OnInit  {
+export class ObjectGridComponent {
 
-  @Input() objects: RemoteData<ListableObject[]>;
   @Input() config: PaginationComponentOptions;
   @Input() sortConfig: SortOptions;
   @Input() hideGear = false;
   @Input() hidePagerWhenSinglePage = true;
-  pageInfo: Observable<PageInfo>;
+  private _objects: RemoteData<ListableObject[]>;
+  pageInfo: PageInfo;
+  @Input() set objects(objects: RemoteData<ListableObject[]>) {
+    this._objects = objects;
+    if (hasValue(objects)) {
+      this.pageInfo = objects.pageInfo;
+    }
+  }
+  get objects() {
+    return this._objects;
+  }
+
+  /**
+   * An event fired when the page is changed.
+   * Event's payload equals to the newly selected page.
+   */
+  @Output() change: EventEmitter<{
+    pagination: PaginationComponentOptions,
+    sort: SortOptions
+  }> = new EventEmitter<{
+    pagination: PaginationComponentOptions,
+    sort: SortOptions
+  }>();
 
   /**
    * An event fired when the page is changed.
@@ -61,26 +81,6 @@ export class ObjectGridComponent implements OnChanges, OnInit  {
    */
   @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
   data: any = {};
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.objects && !changes.objects.isFirstChange()) {
-      // this.pageInfo = this.objects.pageInfo;
-    }
-  }
-
-  ngOnInit(): void {
-    // this.pageInfo = this.objects.pageInfo;
-  }
-
-  /**
-   * @param route
-   *    Route is a singleton service provided by Angular.
-   * @param router
-   *    Router is a singleton service provided by Angular.
-   */
-  constructor(private cdRef: ChangeDetectorRef) {
-  }
-
   onPageChange(event) {
     this.pageChange.emit(event);
   }

From df3179018321d6d79c120ad57b3e7fbb1d45dfcb Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Wed, 20 Dec 2017 16:10:39 +0100
Subject: [PATCH 44/47] #150 Remove incorrectly referencing searchOptions

---
 src/app/+search-page/search-service/search.service.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/+search-page/search-service/search.service.ts b/src/app/+search-page/search-service/search.service.ts
index 52d86927d6..8c903f261d 100644
--- a/src/app/+search-page/search-service/search.service.ts
+++ b/src/app/+search-page/search-service/search.service.ts
@@ -100,7 +100,7 @@ export class SearchService implements OnDestroy {
   }
 
   search(query: string, scopeId?: string, searchOptions?: SearchOptions): Observable<RemoteData<Array<SearchResult<DSpaceObject>>>> {
-    this.searchOptions = this.searchOptions;
+    this.searchOptions = searchOptions;
     let self = `https://dspace7.4science.it/dspace-spring-rest/api/search?query=${query}`;
     if (hasValue(scopeId)) {
       self += `&scope=${scopeId}`;
@@ -124,7 +124,7 @@ export class SearchService implements OnDestroy {
 
     if (isNotEmpty(searchOptions)) {
       returningPageInfo.elementsPerPage = searchOptions.pagination.pageSize;
-      returningPageInfo.currentPage = searchOptions.pagination.currentPage;
+     returningPageInfo.currentPage = searchOptions.pagination.currentPage;
     } else {
       returningPageInfo.elementsPerPage = 10;
       returningPageInfo.currentPage = 1;

From 0e4c93bd491d727e6dd6b1203c2ec8d69445156c Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Wed, 20 Dec 2017 16:19:22 +0100
Subject: [PATCH 45/47] #150 Separate pageSizeOptions for list and grid

---
 .../search-settings/search-settings.component.ts      | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/app/+search-page/search-settings/search-settings.component.ts b/src/app/+search-page/search-settings/search-settings.component.ts
index 7b8bb8eb6e..ad6aeb21dd 100644
--- a/src/app/+search-page/search-settings/search-settings.component.ts
+++ b/src/app/+search-page/search-settings/search-settings.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { SearchService } from '../search-service/search.service';
-import { SearchOptions } from '../search-options.model';
+import { SearchOptions, ViewMode } from '../search-options.model';
 import { SortDirection } from '../../core/cache/models/sort-options.model';
 import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
 
@@ -20,6 +20,9 @@ export class SearchSettingsComponent implements OnInit {
    * Number of items per page.
    */
   public pageSize;
+  @Input() public pageSizeOptions;
+  public listPageSizeOptions: number[] = [5, 10, 20, 40, 60, 80, 100];
+  public gridPageSizeOptions: number[] = [12, 24, 36, 48 , 50, 62, 74, 84];
 
   private sub;
   private scope: string;
@@ -36,6 +39,7 @@ export class SearchSettingsComponent implements OnInit {
   ngOnInit(): void {
     this.searchOptions = this.service.searchOptions;
     this.pageSize = this.searchOptions.pagination.pageSize;
+    this.pageSizeOptions = this.searchOptions.pagination.pageSizeOptions;
     this.sub = this.route
       .queryParams
       .subscribe((params) => {
@@ -45,6 +49,11 @@ export class SearchSettingsComponent implements OnInit {
         this.page  = +params.page || this.searchOptions.pagination.currentPage;
         this.pageSize = +params.pageSize || this.searchOptions.pagination.pageSize;
         this.direction = +params.sortDirection || this.searchOptions.sort.direction;
+        if (params.view === ViewMode.Grid) {
+          this.pageSizeOptions = this.gridPageSizeOptions;
+        } else {
+          this.pageSizeOptions = this.listPageSizeOptions;
+        }
       });
   }
 

From c89e34386b80c440f08e67d932b1dae0e7582492 Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Thu, 21 Dec 2017 08:53:49 +0100
Subject: [PATCH 46/47] #150 Get component's pageSizeOptions

---
 .../+search-page/search-settings/search-settings.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/+search-page/search-settings/search-settings.component.html b/src/app/+search-page/search-settings/search-settings.component.html
index d5a4d412ff..4ee0812602 100644
--- a/src/app/+search-page/search-settings/search-settings.component.html
+++ b/src/app/+search-page/search-settings/search-settings.component.html
@@ -14,7 +14,7 @@
     <h5>{{ 'search.sidebar.settings.rpp' | translate}}</h5>
 
     <select class="form-control" (change)="reloadRPP($event)">
-        <option *ngFor="let item of searchOptions.pagination.pageSizeOptions" [value]="item"
+        <option *ngFor="let item of pageSizeOptions" [value]="item"
                 [selected]="item === searchOptions.pagination.pageSize ? 'selected': null">
             {{item}}
         </option>

From bbd6dcd47596c8e05145b08b3e65f2f066115f4b Mon Sep 17 00:00:00 2001
From: Jonas Van Goolen <jonas@atmire.com>
Date: Thu, 11 Jan 2018 10:41:05 +0100
Subject: [PATCH 47/47] #150 alligning statements....

---
 src/app/+search-page/search-service/search.service.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/+search-page/search-service/search.service.ts b/src/app/+search-page/search-service/search.service.ts
index 8c903f261d..36ec4dcaa1 100644
--- a/src/app/+search-page/search-service/search.service.ts
+++ b/src/app/+search-page/search-service/search.service.ts
@@ -124,7 +124,7 @@ export class SearchService implements OnDestroy {
 
     if (isNotEmpty(searchOptions)) {
       returningPageInfo.elementsPerPage = searchOptions.pagination.pageSize;
-     returningPageInfo.currentPage = searchOptions.pagination.currentPage;
+      returningPageInfo.currentPage = searchOptions.pagination.currentPage;
     } else {
       returningPageInfo.elementsPerPage = 10;
       returningPageInfo.currentPage = 1;