diff --git a/src/app/+search-page/search-service/search.service.ts b/src/app/+search-page/search-service/search.service.ts index 4b5ba7b702..77327ee219 100644 --- a/src/app/+search-page/search-service/search.service.ts +++ b/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 sample abstract.', - 'This is a sample abstract. But, to fill up some space, here\'s "Hello" in several different languages : ', + 'This is a sample abstractabstractabstractabstractabstractabstractabstractabstract. But, to fill up some space, here\'s "Hello" in several different languages : ', 'This is a Sample HTML webpage including several images and styles (CSS).', 'This is really just a sample abstract. But, Í’vé thrown ïn a cõuple of spëciâl charactèrs för êxtrå fuñ!', 'This abstract is really quite great', diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 00a3e56121..29be537891 100644 --- a/src/app/app.component.scss +++ b/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); +} \ No newline at end of file diff --git a/src/app/object-list/item-list-element/item-list-element.component.html b/src/app/object-list/item-list-element/item-list-element.component.html index ef5cf8aec4..1e88cc4889 100644 --- a/src/app/object-list/item-list-element/item-list-element.component.html +++ b/src/app/object-list/item-list-element/item-list-element.component.html @@ -3,13 +3,16 @@
- + {{authorMd.value}} ; - ({{object.findMetadata("dc.publisher")}}, {{object.findMetadata("dc.date.issued")}}) + ({{object.findMetadata("dc.publisher")}}, {{object.findMetadata("dc.date.issued")}}) -
-
+
+ {{item.findMetadata("dc.description.abstract") | dsTruncate:[200] }} +
diff --git a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html index bce61e9036..b1af777bcb 100644 --- a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html +++ b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html @@ -8,7 +8,7 @@ (, ) -
- +
+
\ No newline at end of file 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 index 88eb98509a..5a1e457327 100644 --- 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 @@ -1 +1,2 @@ -@import '../../../../styles/variables.scss'; \ No newline at end of file +@import '../../../../styles/variables.scss'; + diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 16a7009ae6..89df25a38e 100644 --- a/src/app/shared/shared.module.ts +++ b/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({ diff --git a/src/app/shared/truncatable/truncatable.component.html b/src/app/shared/truncatable/truncatable.component.html deleted file mode 100644 index aa070c834b..0000000000 --- a/src/app/shared/truncatable/truncatable.component.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/shared/truncatable/truncatable.component.ts b/src/app/shared/truncatable/truncatable.component.ts deleted file mode 100644 index ddece47fd9..0000000000 --- a/src/app/shared/truncatable/truncatable.component.ts +++ /dev/null @@ -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); - } -} diff --git a/src/app/shared/utils/clamp-directive.ts b/src/app/shared/utils/clamp-directive.ts deleted file mode 100644 index 0cac019dcb..0000000000 --- a/src/app/shared/utils/clamp-directive.ts +++ /dev/null @@ -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); - } -} 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); diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 73aa27eccc..6c773e34a3 100644 --- a/src/styles/_mixins.scss +++ b/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%); + } +} \ No newline at end of file