Merging explore-redesign branch into develop for Explore July release #7

Merged
konstantina.galouni merged 112 commits from explore-redesign into develop 2023-07-05 11:11:53 +02:00
2 changed files with 54 additions and 51 deletions
Showing only changes of commit 6679e6bac0 - Show all commits

View File

@ -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);
}
} }

View File

@ -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>