46063: removed ellipsis, added other animations..

src/app/shared/animations/focus.ts

+import { animate, state, transition, trigger, style } from '@angular/animations';
+
+export const focusShadow = trigger('focusShadow', [
+
+  state('focus', style({ 'box-shadow': '0 0 6px #777777' })),
+
+  state('blur', style({ 'box-shadow': 'none' })),
+
+  transition('focus <=> blur', animate(250))
+]);
+
+export const focusBackground = trigger('focusBackground', [
+
+  state('focus', style({ 'background-color': 'rgba(119, 119, 119, 0.1)' })),
+
+  state('blur', style({ 'background-color': 'transparent' })),
+
+  transition('focus <=> blur', animate(250))
+]);

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

@@ -7,7 +7,7 @@ ds-wrapper-grid-element ::ng-deep {
     width: 100%;
   }
   div.card {
-    margin-bottom: 20px;
+    margin-bottom: $spacer;
   }
 }
 

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

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

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

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

src/app/shared/object-list/object-list.component.html

@@ -11,7 +11,7 @@
   (sortFieldChange)="onSortFieldChange($event)"
   (paginationChange)="onPaginationChange($event)">
   <ul *ngIf="objects?.hasSucceeded" class="list-unstyled">
-      <li *ngFor="let object of objects?.payload?.page">
+      <li *ngFor="let object of objects?.payload?.page" class="mt-2 mb-2">
         <ds-wrapper-list-element [object]="object"></ds-wrapper-list-element>
       </li>
   </ul>

src/app/shared/object-list/object-list.component.scss

-@import '../../../styles/variables';
+@import '../../../styles/variables';
\ No newline at end of file

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

 <ds-truncatable [id]="dso.id">
-    <ds-truncatable-part [id]="dso.id" [minLines]="1" [maxLines]="5" type="title">
-        <a [routerLink]="['/items/' + dso.id]" class="lead"
-           [innerHTML]="getFirstValue('dc.title')"></a>
-    </ds-truncatable-part>
-    <div>
+    <div [@focusBackground]="(isCollapsed() | async)?'blur':'focus'">
+        <a
+            [routerLink]="['/items/' + dso.id]" class="lead"
+            [innerHTML]="getFirstValue('dc.title')"></a>
+        <div>
   <span class="text-muted">
-
-    <ds-truncatable-part [id]="dso.id" [minLines]="1" [maxLines]="5">
+    <ds-truncatable-part [id]="dso.id" [minLines]="1">
             (<span *ngIf="dso.findMetadata('dc.publisher')" class="item-list-publisher"
                    [innerHTML]="getFirstValue('dc.publisher')">, </span><span
             *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date"
@@ -19,10 +18,11 @@
             </span>
         </ds-truncatable-part>
   </span>
-        <div *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract">
-            <ds-truncatable-part [id]="dso.id" [minLines]="3" [maxLines]="15"><span
-                    [innerHTML]="getFirstValue('dc.description.abstract')"></span>
-            </ds-truncatable-part>
+            <div *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract">
+                <ds-truncatable-part [id]="dso.id" [minLines]="3"><span
+                        [innerHTML]="getFirstValue('dc.description.abstract')"></span>
+                </ds-truncatable-part>
+            </div>
         </div>
     </div>
 </ds-truncatable>
\ No newline at end of file

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

@@ -6,25 +6,16 @@ import { Item } from '../../../../core/shared/item.model';
 import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
 import { ViewMode } from '../../../../+search-page/search-options.model';
 import { ListableObject } from '../../../object-collection/shared/listable-object.model';
+import { focusBackground } from '../../../animations/focus';
 
 @Component({
   selector: 'ds-item-search-result-list-element',
   styleUrls: ['../search-result-list-element.component.scss', 'item-search-result-list-element.component.scss'],
-  templateUrl: 'item-search-result-list-element.component.html'
+  templateUrl: 'item-search-result-list-element.component.html',
+  animations: [focusBackground],
+
 })
 
 @renderElementsFor(ItemSearchResult, ViewMode.List)
-export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> implements OnInit {
-  lines = 3;
-
-  constructor(@Inject('objectElementProvider') public listable: ListableObject, private changeDetectorRef: ChangeDetectorRef) {
-    super(listable);
-  }
-
-  ngOnInit() {
-    setTimeout(() => {
-      this.lines = 4;
-      this.changeDetectorRef.detectChanges();
-    }, 0);
-  }
+export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> {
 }

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

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

src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss

@@ -9,9 +9,7 @@
     line-height: $line-height;
     overflow-wrap: break-word;
     &:after {
-        content: "...";
-        color: $link-color;
-        text-align: right;
+        content: "";
         position: absolute;
         padding-right: 15px;
         top: ($lines - 1) * $height;

src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts

@@ -11,11 +11,11 @@ import { TruncatableService } from '../truncatable.service';
 
 export class TruncatablePartComponent implements OnInit, OnDestroy {
   @Input() minLines: number;
-  @Input() maxLines: number;
+  @Input() maxLines = -1;
   @Input() initialExpand = false;
   @Input() id: string;
   @Input() type: string;
-  private lines: number;
+  private lines: string;
   private sub;
 
   public constructor(private service: TruncatableService) {
@@ -28,9 +28,9 @@ export class TruncatablePartComponent implements OnInit, OnDestroy {
   private setLines() {
     this.sub = this.service.isCollapsed(this.id).subscribe((collapsed: boolean) => {
       if (collapsed) {
-        this.lines = this.minLines;
+        this.lines = this.minLines.toString();
       } else {
-        this.lines = this.maxLines;
+        this.lines = this.maxLines < 0 ? 'none' : this.maxLines.toString();
       }
     });
   }