46063: working CSS truncation, but were switching to JS again...

src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html

@@ -1,34 +1,37 @@
-<div class="card">
-  <a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
-    <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()">
-    </ds-grid-thumbnail>
-  </a>
-  <div class="card-body">
-    <h4 class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></h4>
+<ds-truncatable [id]="dso.id">
+    <div class="card">
+        <a [@slide]="(isCollapsed() | async)? 'expanded' : 'collapsed'"
+           [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
+            <div>
+                <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()">
+                </ds-grid-thumbnail>
+                <div [@overlay]="(isCollapsed() | async)? 'hide' : 'show'"
+                     class="thumbnail-overlay"></div>
+            </div>
+        </a>
+        <div class="card-body">
+            <ds-truncatable-part [id]="dso.id" [minLines]="1" [maxLines]="3" type="h4">
+                <h4 class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></h4>
+            </ds-truncatable-part>
+            <p *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])"
+               class="item-authors card-text text-muted">
+                <ds-truncatable-part [id]="dso.id" [minLines]="1" [maxLines]="3">
+                    <span *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date">{{dso.findMetadata("dc.date.issued")}}</span>
+                    <span *ngFor="let authorMd of dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);">,
+                        <span [innerHTML]="authorMd.value"></span>
+                    </span>
+                </ds-truncatable-part>
+            </p>
+            <ds-truncatable-part [id]="dso.id" [minLines]="3" [maxLines]="15">
+                <p class="item-abstract card-text"
+                   [innerHTML]="getFirstValue('dc.description.abstract')">
+                </p>
+            </ds-truncatable-part>
+            <div class="text-center">
+                <a [routerLink]="['/items/' + dso.id]"
+                   class="lead btn btn-primary viewButton">View</a>
+            </div>
+        </div>
 
-    <p *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])"
-       class="item-authors card-text text-muted">
-        <span
-          *ngFor="let authorMd of dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let first=first;">
-          <span *ngIf="first" [innerHTML]="authorMd.value">
-          <span
-            *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length>1">, ...</span>
-          </span>
-        </span>
-      <span *ngIf="dso.findMetadata('dc.date.issued')"
-            class="item-list-date">
-      <span *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length>1">,</span>
-      {{dso.findMetadata("dc.date.issued")}}</span>
-
-
-    </p>
-    <p class="item-abstract card-text" [innerHTML]="getFirstValue('dc.description.abstract') | dsTruncate:[200]">
-    </p>
-
-    <div class="text-center">
-      <a [routerLink]="['/items/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
     </div>
-  </div>
-
-</div>
-
+</ds-truncatable>

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

@@ -1,2 +1,14 @@
 @import '../../../../../styles/variables';
 
+.card {
+    a > div {
+        position: relative;
+        .thumbnail-overlay {
+            height: 100%;
+            position: absolute;
+            top: 0;
+            width: 100%;
+            background-color: map-get($theme-colors, primary);
+        }
+    }
+}

src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts

@@ -5,11 +5,14 @@ import { SearchResultGridElementComponent } from '../search-result-grid-element.
 import { Item } from '../../../../core/shared/item.model';
 import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
 import { ViewMode } from '../../../../+search-page/search-options.model';
+import { slide } from '../../../animations/slide';
+import { overlay } from '../../../animations/overlay';
 
 @Component({
   selector: 'ds-item-search-result-grid-element',
   styleUrls: ['../search-result-grid-element.component.scss', 'item-search-result-grid-element.component.scss'],
-  templateUrl: 'item-search-result-grid-element.component.html'
+  templateUrl: 'item-search-result-grid-element.component.html',
+  animations: [slide, overlay],
 })
 
 @renderElementsFor(ItemSearchResult, ViewMode.Grid)

src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts

@@ -6,6 +6,8 @@ import { Metadatum } from '../../../core/shared/metadatum.model';
 import { isEmpty, hasNoValue } from '../../empty.util';
 import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
 import { ListableObject } from '../../object-collection/shared/listable-object.model';
+import { TruncatableService } from '../../truncatable/truncatable.service';
+import { Observable } from 'rxjs/Observable';
 
 @Component({
   selector: 'ds-search-result-grid-element',
@@ -15,7 +17,7 @@ import { ListableObject } from '../../object-collection/shared/listable-object.m
 export class SearchResultGridElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends AbstractListableElementComponent<T> {
   dso: K;
 
-  public constructor(@Inject('objectElementProvider') public gridable: ListableObject) {
+  public constructor(@Inject('objectElementProvider') public gridable: ListableObject, private truncatableService: TruncatableService) {
     super(gridable);
     this.dso = this.object.dspaceObject;
   }
@@ -44,7 +46,7 @@ export class SearchResultGridElementComponent<T extends SearchResult<K>, K exten
     this.object.hitHighlights.some(
       (md: Metadatum) => {
         if (key === md.key) {
-          result =  md.value;
+          result = md.value;
           return true;
         }
       }
@@ -54,4 +56,8 @@ export class SearchResultGridElementComponent<T extends SearchResult<K>, K exten
     }
     return result;
   }
+
+  isCollapsed(): Observable<boolean> {
+    return this.truncatableService.isCollapsed(this.dso.id);
+  }
 }