46063: css attempt to fix multiline clamping

src/app/+search-page/search-service/search.service.ts

@@ -39,7 +39,7 @@ export class SearchService implements OnDestroy {
   totalPages = 5;
   mockedHighlights: string[] = new Array(
     'This is a <em>sample abstract</em>.',
-    'This is a sample abstract. But, to fill up some space, here\'s <em>"Hello"</em> in several different languages : ',
+    'This is a sample abstractabstractabstractabstractabstractabstractabstractabstract. But, to fill up some space, here\'s <em>"Hello"</em> in several different languages : ',
     'This is a Sample HTML webpage including several <em>images</em> and styles (CSS).',
     'This is <em>really</em> just a sample abstract. But, Í’vé thrown ïn a cõuple of spëciâl charactèrs för êxtrå fuñ!',
     'This abstract is <em>really quite great</em>',

src/app/app.component.scss

@@ -1,4 +1,5 @@
 @import '../styles/variables.scss';
+@import '../styles/mixins.scss';
 @import '../../node_modules/bootstrap/scss/bootstrap.scss';
 @import "../../node_modules/font-awesome/scss/font-awesome.scss";
 
@@ -31,3 +32,7 @@ body {
   margin-top: $content-spacing;
   margin-bottom: $content-spacing;
 }
+
+.clamp-3 {
+  @include clamp(3);
+}

src/app/object-list/item-list-element/item-list-element.component.html

@@ -3,13 +3,16 @@
 </a>
 <div>
   <span class="text-muted">
-    <span *ngIf="object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);" class="item-list-authors">
+    <span *ngIf="object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);"
+          class="item-list-authors">
         <span *ngFor="let authorMd of object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let last=last;">{{authorMd.value}}
             <span *ngIf="!last">; </span>
         </span>
     </span>
-    (<span *ngIf="object.findMetadata('dc.publisher')" class="item-list-publisher">{{object.findMetadata("dc.publisher")}}, </span><span *ngIf="object.findMetadata('dc.date.issued')" class="item-list-date">{{object.findMetadata("dc.date.issued")}}</span>)
+    (<span *ngIf="object.findMetadata('dc.publisher')" class="item-list-publisher">{{object.findMetadata("dc.publisher")}}, </span><span
+          *ngIf="object.findMetadata('dc.date.issued')" class="item-list-date">{{object.findMetadata("dc.date.issued")}}</span>)
   </span>
-  <div *ngIf="object.findMetadata('dc.description.abstract')" class="item-list-abstract">
-      <ds-truncatable [lines]="lines" [innerHTML]="object.findMetadata('dc.description.abstract')"></ds-truncatable></div>
+    <div *ngIf="item.findMetadata('dc.description.abstract')" class="item-list-abstract">
+        {{item.findMetadata("dc.description.abstract") | dsTruncate:[200] }}
+    </div>
 </div>

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

@@ -8,7 +8,7 @@
     </span>
     (<span *ngIf="dso.findMetadata('dc.publisher')" class="item-list-publisher" [innerHTML]="getFirstValue('dc.publisher')">, </span><span *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date" [innerHTML]="getFirstValue('dc.date.issued')"></span>)
   </span>
-    <div  width="100%" *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract">
-        <span [dsClamp]="lines" [innerHTML]="getFirstValue('dc.description.abstract')" ></span>
+    <div *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract">
+        <div class="clamp-3" [innerHTML]="getFirstValue('dc.description.abstract')"></div>
     </div>
 </div>

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

@@ -1 +1,2 @@
-@import '../../../../styles/variables.scss';
+@import '../../../../styles/variables.scss';
+

src/app/shared/shared.module.ts

@@ -31,9 +31,7 @@ import { SearchFormComponent } from './search-form/search-form.component';
 import { WrapperListElementComponent } from '../object-list/wrapper-list-element/wrapper-list-element.component';
 import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component';
 import { VarDirective } from './utils/var.directive';
-import { TruncatableComponent } from './truncatable/truncatable.component';
 import { ShaveDirective } from './utils/shave.directive';
-import { TextOverflowClampDirective } from './utils/clamp-directive';
 
 
 const MODULES = [
@@ -69,7 +67,6 @@ const COMPONENTS = [
   ThumbnailComponent,
   WrapperListElementComponent,
   ViewModeSwitchComponent,
-  TruncatableComponent
 ];
 
 const ENTRY_COMPONENTS = [
@@ -82,8 +79,7 @@ const ENTRY_COMPONENTS = [
 
 const DIRECTIVES = [
   VarDirective,
-  ShaveDirective,
-  TextOverflowClampDirective
+  ShaveDirective
 ];
 
 @NgModule({

src/app/shared/truncatable/truncatable.component.html

@@ -1 +0,0 @@
-<span dsShave [shave]="{character: '...'}" [shaveHeight]="height" [innerHTML]="innerHTML"></span>

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

@@ -1,28 +0,0 @@
-import {
-  ChangeDetectorRef, Component, ElementRef, Inject, Input,
-  OnInit
-} from '@angular/core';
-import { NativeWindowRef, NativeWindowService } from '../window.service';
-
-@Component({
-  selector: 'ds-truncatable',
-  templateUrl: './truncatable.component.html'
-})
-export class TruncatableComponent implements OnInit {
-
-  @Input() lines: number;
-  @Input() innerHTML;
-  height;
-  styles: any;
-
-  public constructor(private elementRef: ElementRef, @Inject(NativeWindowService) private _window: NativeWindowRef, private changeDetectorRef: ChangeDetectorRef) {
-  }
-
-  ngOnInit(): void {
-    this.styles = this._window.nativeWindow.getComputedStyle(this.elementRef.nativeElement);
-    setTimeout(() => {
-      this.height = this.styles.lineHeight.replace('px', '') * this.lines;
-      this.changeDetectorRef.detectChanges();
-    }, 0);
-  }
-}

src/app/shared/utils/clamp-directive.ts

@@ -1,20 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  Input,
-  OnChanges
-} from '@angular/core';
-
-import * as clampLib from 'text-overflow-clamp';
-
-@Directive({selector: '[dsClamp]'})
-export class TextOverflowClampDirective implements OnChanges {
-    @Input('dsClamp') lines: number;
-
-    constructor(private el: ElementRef) {
-    }
-
-    ngOnChanges(): void {
-        clampLib(this.el.nativeElement, this.lines);
-    }
-}

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);
+$button-height: $input-btn-padding-y * 2 + $input-btn-line-height + calculateRem($input-btn-border-width*2);

src/styles/_mixins.scss

@@ -1,4 +1,26 @@
 @import '../../node_modules/bootstrap/scss/functions.scss';
 @import '../../node_modules/bootstrap/scss/mixins.scss';
+@import '../../node_modules/bootstrap/scss/variables.scss';
 
-/* Custom mixins go here */
+@mixin clamp($lines) {
+    max-height: $lines * $line-height-base * $font-size-base;
+    position: relative;
+    overflow: hidden;
+    line-height: $line-height-base;
+    overflow-wrap: break-word;
+
+    &:after {
+        content: "...";
+        color: $link-color;
+        text-align: right;
+        position: absolute;
+        padding-right: 15px;
+        top: ($lines - 1) * $line-height-base * $font-size-base;
+        right: 0;
+        width: 30%;
+        min-width: 75px;
+        max-width: 150px;
+        height: $line-height-base * $font-size-base;
+        background: linear-gradient(to right, rgba(255, 255, 255, 0), $body-bg 50%);
+    }
+}