Merging explore-redesign branch into develop for Explore July release #7
|
@ -1,52 +1,55 @@
|
||||||
import {Component, Input} from '@angular/core';
|
import {Component, ElementRef, Input, ViewChild} from '@angular/core';
|
||||||
import {ActivatedRoute} from '@angular/router';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'showTitle',
|
selector: 'showTitle',
|
||||||
template: `
|
template: `
|
||||||
<h1 [ngClass]="classNames" class="uk-h6">
|
<h1 [ngClass]="classNames" class="uk-h6">
|
||||||
<ng-container *ngTemplateOutlet="_title;"></ng-container>
|
<ng-container *ngTemplateOutlet="_title;"></ng-container>
|
||||||
</h1>
|
</h1>
|
||||||
<ng-template #_title>
|
|
||||||
<div *ngIf="title != undefined" class="landingTitle uk-text-break">
|
|
||||||
<span *ngIf="title['url'] != undefined && title['url'] != null && title['url'] != ''"
|
|
||||||
class="custom-external">
|
|
||||||
<a *ngIf="title['name'] != undefined && title['name'] != ''"
|
|
||||||
href="{{title['url']}}" target="_blank"
|
|
||||||
[innerHTML]="title['name']">
|
|
||||||
</a>
|
|
||||||
<a *ngIf="title['name'] == undefined || title['name'] == ''"
|
|
||||||
href="{{title['url']}}" target="_blank">
|
|
||||||
[no title available]
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
<span *ngIf="(title['name'] != undefined && title['name'] != '') &&
|
|
||||||
(title['url'] == undefined || title['url'] == null || title['url'] == '')"
|
|
||||||
[innerHTML]="title['name']">
|
|
||||||
</span>
|
|
||||||
<span *ngIf="(title['name'] == undefined || title['name'] == '') &&
|
|
||||||
(title['url'] == undefined || title['url'] == null || title['url'] == '')"
|
|
||||||
>
|
|
||||||
[no title available]
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="titleName" class="uk-text-break">
|
|
||||||
<span [innerHTML]="titleName"></span>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="!titleName && !title">
|
|
||||||
<span>No title available</span>
|
|
||||||
</div>
|
|
||||||
</ng-template>
|
|
||||||
`
|
|
||||||
|
|
||||||
})
|
<ng-template #_title>
|
||||||
|
<div *ngIf="title != undefined" class="landingTitle uk-text-break">
|
||||||
|
<span *ngIf="title['url'] != undefined && title['url'] != null && title['url'] != ''"
|
||||||
|
class="custom-external">
|
||||||
|
<a *ngIf="title['name'] != undefined && title['name'] != ''"
|
||||||
|
href="{{title['url']}}" target="_blank"
|
||||||
|
[innerHTML]="title['name']">
|
||||||
|
</a>
|
||||||
|
<a *ngIf="title['name'] == undefined || title['name'] == ''"
|
||||||
|
href="{{title['url']}}" target="_blank">
|
||||||
|
[no title available]
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
<span *ngIf="(title['name'] != undefined && title['name'] != '') &&
|
||||||
|
(title['url'] == undefined || title['url'] == null || title['url'] == '')"
|
||||||
|
[innerHTML]="title['name']">
|
||||||
|
</span>
|
||||||
|
<span *ngIf="(title['name'] == undefined || title['name'] == '') &&
|
||||||
|
(title['url'] == undefined || title['url'] == null || title['url'] == '')">
|
||||||
|
[no title available]
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="titleName" #titleDiv class="uk-text-break multi-line-ellipsis lines-5">
|
||||||
|
<span [innerHTML]="titleName" [attr.uk-tooltip]="showTitleTooltip ? 'cls: uk-active uk-width-large' : 'cls: uk-invisible'"
|
||||||
|
[title]="titleName"></span>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="!titleName && !title">
|
||||||
|
<span>No title available</span>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
`
|
||||||
|
})
|
||||||
|
|
||||||
export class ShowTitleComponent {
|
export class ShowTitleComponent {
|
||||||
@Input() titleName: string;
|
@Input() titleName: string;
|
||||||
@Input() title: { [key: string]: string };
|
@Input() title: { [key: string]: string };
|
||||||
@Input() iconClass:string;
|
@Input() iconClass:string;
|
||||||
@Input() classNames: string = "";
|
@Input() classNames: string = "";
|
||||||
|
@ViewChild("titleDiv") titleDiv: ElementRef;
|
||||||
|
|
||||||
constructor () {}
|
constructor () {}
|
||||||
|
|
||||||
|
get showTitleTooltip():boolean {
|
||||||
|
return !!this.titleDiv && (this.titleDiv.nativeElement.clientHeight >= 5 * 21);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,14 +19,14 @@
|
||||||
<!-- 1st section (title, metadata) -->
|
<!-- 1st section (title, metadata) -->
|
||||||
<div class="uk-margin-small-bottom">
|
<div class="uk-margin-small-bottom">
|
||||||
<!-- Title -->
|
<!-- Title -->
|
||||||
<div>
|
<div class="multi-line-ellipsis lines-3">
|
||||||
<h2 class="uk-margin-remove uk-text-break uk-inline-block uk-h6">
|
<h2 class="uk-margin-remove uk-text-break uk-inline-block uk-h6">
|
||||||
<a *ngIf="!externalUrl && result.id" (click)="onClick()" [queryParams]="createParam()"
|
<a *ngIf="!externalUrl && result.id" (click)="onClick()" [queryParams]="createParam()"
|
||||||
[routerLink]="url" class="uk-link uk-text-decoration-none uk-width-expand">
|
[routerLink]="url" class="uk-link uk-text-decoration-none uk-width-expand">
|
||||||
<div *ngIf="(result.title) || result.acronym">
|
<div *ngIf="(result.title) || result.acronym">
|
||||||
<span *ngIf="result.acronym">
|
<span *ngIf="result.acronym">
|
||||||
{{result.acronym}}
|
{{result.acronym}}
|
||||||
</span>
|
</span>
|
||||||
<span *ngIf="result.acronym && (result.title)"> (</span>
|
<span *ngIf="result.acronym && (result.title)"> (</span>
|
||||||
<span *ngIf="result.title" [innerHTML]="result.title"></span>
|
<span *ngIf="result.title" [innerHTML]="result.title"></span>
|
||||||
<span *ngIf="result.acronym && result.title">)</span>
|
<span *ngIf="result.acronym && result.title">)</span>
|
||||||
|
@ -36,8 +36,8 @@
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a *ngIf="externalUrl && result.id" (click)="onClick()"
|
<a *ngIf="externalUrl && result.id" (click)="onClick()"
|
||||||
target="_blank" [href]="externalUrl+result.id"
|
target="_blank" [href]="externalUrl+result.id"
|
||||||
class="custom-external uk-link uk-text-decoration-none uk-width-expand">
|
class="custom-external uk-link uk-text-decoration-none uk-width-expand">
|
||||||
<span *ngIf="(result.title) || result.acronym">
|
<span *ngIf="(result.title) || result.acronym">
|
||||||
<span *ngIf="result.acronym">
|
<span *ngIf="result.acronym">
|
||||||
{{result.acronym}}
|
{{result.acronym}}
|
||||||
|
@ -47,14 +47,14 @@
|
||||||
<span *ngIf="result.acronym && result.title">)</span>
|
<span *ngIf="result.acronym && result.title">)</span>
|
||||||
</span>
|
</span>
|
||||||
<span *ngIf="!result.title && !result.acronym">
|
<span *ngIf="!result.title && !result.acronym">
|
||||||
[no title available]
|
[no title available]
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<div *ngIf="!result.id" class="uk-width-expand">
|
<div *ngIf="!result.id" class="uk-width-expand">
|
||||||
<div *ngIf="(result.title) || result.acronym">
|
<div *ngIf="(result.title) || result.acronym">
|
||||||
<span *ngIf="result.acronym">
|
<span *ngIf="result.acronym">
|
||||||
{{result.acronym}}
|
{{result.acronym}}
|
||||||
</span>
|
</span>
|
||||||
<span *ngIf="result.acronym && (result.title)"> (</span>
|
<span *ngIf="result.acronym && (result.title)"> (</span>
|
||||||
<span *ngIf="result.title" [innerHTML]="result.title"></span>
|
<span *ngIf="result.title" [innerHTML]="result.title"></span>
|
||||||
<span *ngIf="result.acronym && result.title">)</span>
|
<span *ngIf="result.acronym && result.title">)</span>
|
||||||
|
|
Loading…
Reference in New Issue