#150 Removal of inherited css + restyling using bootstrap classes

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",

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>

src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss

@@ -1,2 +1,2 @@
 @import '../../../../styles/variables';
-@import '../grid-card-styling';
+

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>

src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss

@@ -1,2 +1,2 @@
 @import '../../../../styles/variables';
-@import '../grid-card-styling';
+

src/app/shared/object-grid/grid-card-styling.scss

@@ -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;
-}
-

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>

src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss

@@ -1,2 +1,2 @@
 @import '../../../../styles/variables';
-@import '../grid-card-styling';
+

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;

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="row " *ngIf="objects.hasSucceeded | async" @fadeIn>
-        <div class="col-lg-4 col-sm-4 col-xs-12 "
+        <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>

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;
+  }
+}

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>

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';

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>

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';
+

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">
+  <div class="card-body">
-    <p class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></p>
+    <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>

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';
+

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;

src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss

@@ -1,2 +1,2 @@
 @import '../../../../styles/variables';
-@import '../grid-card-styling';
+

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;
+

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"