MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Library | explore-redesign]: Result landing redesign for small screens (mobile) - main info & tabs of main info. 

1. fos.component.ts & sdg.component.ts: Added Beta badge and "View all" link.
2. fundedBy.component.ts: Added @Input isMobile and relative checks in html | Updated how projects appear in mobile | Added ng-template for #funder and #dropInfo.
3. relatedTo.component.ts: Added @Input isMobile and relative checks in html | Added uk-margin-small-bottom between communities in mobile.
4. showSubjects.component.ts:
   a. Added @Input isMobile and relative checks in html.
   b. Added @Input() viewAllSubjects: boolean = false, @Input() viewAllClassifiedSubjects: boolean = false, @Output() viewAllClicked  = new EventEmitter(); and methods "viewAllSubjectsClicked()", "viewAllSubjectsByVocabularyClicked()" to show subjects properly in mobile.
5. full-screen-modal.component.ts: Added method "backClicked()" and field public stayOpenInBack: boolean = false.
6. resultLanding.module.ts: Imported FullScreenModalModule.
7. resultLanding.component.ts & resultLanding.component.html: Redesign for small screens (mobile) for main info and its tabs (Summary, References, etc..).
This commit is contained in:
Konstantina Galouni 2023-02-20 17:56:02 +02:00
parent 9715de74d2
commit 6947890c20
9 changed files with 531 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
landingPages/landing-utils/fos.component.ts
View File

@ -37,6 +37,7 @@ import {StringUtils} from "../../utils/string-utils.class";
<div class="uk-hidden@m"> <div class="uk-hidden@m">
<div class="uk-grid uk-grid-small uk-grid-divider" uk-grid> <div class="uk-grid uk-grid-small uk-grid-divider" uk-grid>
<div class="uk-width-1-4 uk-text-meta"> <div class="uk-width-1-4 uk-text-meta">
<div class="uk-text-xsmall" style="color: #EEB204">Beta</div>
Fields of Science (FOS) Fields of Science (FOS)
</div> </div>
<div class="uk-width-expand"> <div class="uk-width-expand">
@ -48,6 +49,15 @@ import {StringUtils} from "../../utils/string-utils.class";
</div> </div>
</div> </div>
</div> </div>
<div class="uk-text-right uk-margin-small-top">
<a *ngIf="subjects && subjects.length > threshold && !viewAll"
(click)="viewAllClick();" class="view-more-less-link uk-text-truncate">
<span class="">View all</span>
<!-- <span class="">View all & suggest</span>-->
</a>
<!-- <a *ngIf="(subjects && subjects.length <= threshold || viewAll)" class="uk-link uk-text-truncate"-->
<!-- (click)="feedbackClick();">Feedback</a>-->
</div>
</div> </div>
` `
}) })
@ -58,7 +68,7 @@ export class FosComponent {
@Output() viewAllClicked = new EventEmitter(); @Output() viewAllClicked = new EventEmitter();
@Output() suggestClicked = new EventEmitter(); @Output() suggestClicked = new EventEmitter();
public lessBtn: boolean = false; public lessBtn: boolean = false;
public threshold: number = 3; // was 2 public threshold: number = 2;
public routerHelper: RouterHelper = new RouterHelper(); public routerHelper: RouterHelper = new RouterHelper();
public properties = properties; public properties = properties;
public title: string = "Fields of Science"; public title: string = "Fields of Science";

120
landingPages/landing-utils/fundedBy.component.ts
View File

@ -6,72 +6,94 @@ import {HelperFunctions} from '../../utils/HelperFunctions.class';
@Component({ @Component({
selector: 'fundedBy', selector: 'fundedBy',
template: ` template: `
<div class="uk-margin-small-bottom uk-flex uk-flex-between"> <div *ngIf="!isMobile" class="uk-margin-small-bottom uk-flex uk-flex-between">
<span *ngIf="viewAll && !lessBtn" class="clickable uk-h6 uk-flex uk-flex-middle" (click)="viewLessClick()"> <span *ngIf="viewAll && !lessBtn" class="clickable uk-h6 uk-flex uk-flex-middle" (click)="viewLessClick()">
<icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon> <icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon>
{{title}} {{title}}
</span> </span>
<span *ngIf="!viewAll || lessBtn" class="uk-text-emphasis uk-text-bolder">{{title}}</span> <span *ngIf="!viewAll || lessBtn" class="uk-text-emphasis uk-text-bolder">{{title}}</span>
<a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;" class="view-more-less-link">View less</a> <a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;"
class="view-more-less-link">View less</a>
<a *ngIf="fundedByProjects && fundedByProjects.length > threshold && !viewAll" <a *ngIf="fundedByProjects && fundedByProjects.length > threshold && !viewAll"
(click)="viewAllClick();" class="view-more-less-link">View all</a> (click)="viewAllClick();" class="view-more-less-link">View all</a>
</div> </div>
<div> <div *ngIf="!isMobile">
<span *ngFor="let item of fundedByProjects.slice(0, viewAll?fundedByProjects.length:threshold) let i=index"> <span *ngFor="let item of fundedByProjects.slice(0, viewAll?fundedByProjects.length:threshold) let i=index">
<span class="uk-text-emphasis"> <span class="uk-text-emphasis">
<a class="uk-link uk-link-text"> <a class="uk-link uk-link-text">
<span <ng-container *ngTemplateOutlet="funder; context: {item: item}"></ng-container>
*ngIf="item['funderShortname'] || item['funderName']">{{item['funderShortname'] ? item['funderShortname'] : item['funderName']}}</span> </a>
<span *ngIf="!item['funderShortname'] && !item['funderName']">[no funder available]</span> </span>
<span <div class="default-dropdown uk-margin-remove-top uk-dropdown"
*ngIf="item['acronym'] || item['title']">| {{ item['acronym'] ? item['acronym'] : item['title']}}</span> uk-dropdown="pos: bottom-left; mode:click">
</a> <ng-container *ngTemplateOutlet="dropInfo; context: { item: item}"></ng-container>
</span> </div>
<div class="default-dropdown uk-margin-remove-top uk-dropdown" <span *ngIf="i < (fundedByProjects.slice(0, viewAll?fundedByProjects.length:threshold).length - 1)">, </span>
uk-dropdown="pos: bottom-left; mode:click"> </span>
<div class="uk-padding-small"> </div>
<span>Project</span> <div *ngIf="isMobile">
<div class="uk-margin-bottom"> <div *ngFor="let item of fundedByProjects.slice(0, viewAll?fundedByProjects.length:threshold) let i=index"
<a *ngIf="item.id" class="uk-h6 uk-margin-remove portal-link" class="uk-flex uk-flex-between uk-flex-middle uk-margin-small-bottom">
[queryParams]="{projectId: item.id}" [routerLink]="url"> <span class="uk-text-emphasis">
{{item['acronym'] ? item['acronym'] : item['title']}} <ng-container *ngTemplateOutlet="funder; context: {item: item}"></ng-container>
</a> </span>
<span *ngIf="!item.id" class="uk-h6 uk-margin-remove"> <icon name="info" visuallyHidden="info" [type]="'outlined'" class="uk-link"></icon>
<div class="default-dropdown uk-margin-remove-top uk-dropdown"
uk-dropdown="pos: bottom-left; mode:click">
<ng-container *ngTemplateOutlet="dropInfo; context: { item: item}"></ng-container>
</div>
</div>
</div>
<ng-template #funder let-item=item>
<span
*ngIf="item['funderShortname'] || item['funderName']">{{item['funderShortname'] ? item['funderShortname'] : item['funderName']}}</span>
<span *ngIf="!item['funderShortname'] && !item['funderName']">[no funder available]</span>
<span *ngIf="item['acronym'] || item['title']">| {{ item['acronym'] ? item['acronym'] : item['title']}}</span>
</ng-template>
<ng-template #dropInfo let-item=item>
<div class="uk-padding-small">
<span>Project</span>
<div class="uk-margin-bottom">
<a *ngIf="item.id" class="uk-h6 uk-margin-remove portal-link"
[queryParams]="{projectId: item.id}" [routerLink]="url">
{{item['acronym'] ? item['acronym'] : item['title']}}
</a>
<span *ngIf="!item.id" class="uk-h6 uk-margin-remove">
{{item['acronym'] ? item['acronym'] : item['title']}} {{item['acronym'] ? item['acronym'] : item['title']}}
</span> </span>
<div *ngIf="item.acronym && item.title" class="uk-text-meta"> <div *ngIf="item.acronym && item.title" class="uk-text-meta">
{{item.title}} {{item.title}}
</div> </div>
</div> </div>
<ul class="uk-list uk-padding-remove-left uk-margin-bottom"> <ul class="uk-list uk-padding-remove-left uk-margin-bottom">
<li *ngIf="item.funderShortname || item.funderName"> <li *ngIf="item.funderShortname || item.funderName">
<span class="uk-text-meta">Funder: </span> <span class="uk-text-meta">Funder: </span>
{{item.funderName ? item.funderName : item.funderShortname}} {{item.funderName ? item.funderName : item.funderShortname}}
<span *ngIf="item.funderShortname && item.funderName"> <span *ngIf="item.funderShortname && item.funderName">
({{item.funderShortname}}) ({{item.funderShortname}})
</span> </span>
</li> </li>
<li *ngIf="item.code"> <li *ngIf="item.code">
<span class="uk-text-meta">Project Code: </span>{{item.code}} <span class="uk-text-meta">Project Code: </span>{{item.code}}
</li> </li>
<li *ngIf="item.funding"> <li *ngIf="item.funding">
<span class="uk-text-meta">Funding stream: </span>{{item.funding}} <span class="uk-text-meta">Funding stream: </span>{{item.funding}}
</li> </li>
</ul> </ul>
<div *ngIf="getVocabularyLabel(item, provenanceActionVocabulary, i) || item.validated" class="uk-text-meta"> <div *ngIf="getVocabularyLabel(item, provenanceActionVocabulary, i) || item.validated" class="uk-text-meta">
<span *ngIf="item.validated">Validated by funder</span> <span *ngIf="item.validated">Validated by funder</span>
<span *ngIf="item.provenanceAction && item.validated"> | </span> <span *ngIf="item.provenanceAction && item.validated"> | </span>
<span *ngIf="item.provenanceAction">{{item.provenanceAction}}</span> <span *ngIf="item.provenanceAction">{{item.provenanceAction}}</span>
</div> </div>
</div> </div>
</div> </ng-template>
<span *ngIf="i < (fundedByProjects.slice(0, viewAll?fundedByProjects.length:threshold).length - 1)">, </span>
</span>
</div>
` `
}) })
export class FundedByComponent { export class FundedByComponent {
@Input() isMobile: boolean = false;
@Input() fundedByProjects: Project[]; @Input() fundedByProjects: Project[];
@Input() viewAll: boolean = false; @Input() viewAll: boolean = false;
@Output() viewAllClicked = new EventEmitter(); @Output() viewAllClicked = new EventEmitter();

6
landingPages/landing-utils/relatedTo.component.ts
View File

@ -13,7 +13,7 @@ import {OpenaireEntities} from "../../utils/properties/searchFields";
selector: 'relatedTo, [relatedTo]', selector: 'relatedTo, [relatedTo]',
template: ` template: `
<ng-container *ngIf="communities && communities.length > 0"> <ng-container *ngIf="communities && communities.length > 0">
<div class="uk-margin-small-bottom uk-flex uk-flex-between"> <div *ngIf="!mobileView" class="uk-margin-small-bottom uk-flex uk-flex-between">
<span *ngIf="viewAll && !lessBtn" class="clickable uk-h6 uk-flex uk-flex-middle" (click)="viewLessClick()"> <span *ngIf="viewAll && !lessBtn" class="clickable uk-h6 uk-flex uk-flex-middle" (click)="viewLessClick()">
<icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon> <icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon>
{{title}} {{title}}
@ -23,7 +23,8 @@ import {OpenaireEntities} from "../../utils/properties/searchFields";
<a *ngIf="communities && communities.length > threshold && !viewAll" <a *ngIf="communities && communities.length > threshold && !viewAll"
(click)="viewAllClick();" class="view-more-less-link">View all</a> (click)="viewAllClick();" class="view-more-less-link">View all</a>
</div> </div>
<div *ngFor="let community of communities.slice(0, viewAll?communities.length:threshold)" class="uk-text-truncate"> <div *ngFor="let community of communities.slice(0, viewAll?communities.length:threshold)" class="uk-text-truncate"
[class.uk-margin-small-bottom]="mobileView">
<!-- If there are any communities with dashboard --> <!-- If there are any communities with dashboard -->
<a *ngIf="community.link" href="{{community.link}}" target="_blank" [attr.uk-tooltip]="community.labelContext" class="custom-external"> <a *ngIf="community.link" href="{{community.link}}" target="_blank" [attr.uk-tooltip]="community.labelContext" class="custom-external">
{{community.labelContext}} {{community.labelContext}}
@ -44,6 +45,7 @@ import {OpenaireEntities} from "../../utils/properties/searchFields";
}) })
export class RelatedToComponent implements OnInit { export class RelatedToComponent implements OnInit {
@Input() mobileView: boolean = false;
@Input() contexts: Context[]; @Input() contexts: Context[];
@Input() viewAll: boolean = false; @Input() viewAll: boolean = false;
@Output() viewAllClicked = new EventEmitter(); @Output() viewAllClicked = new EventEmitter();

16
landingPages/landing-utils/sdg.component.ts
View File

@ -39,21 +39,27 @@ import {StringUtils} from "../../utils/string-utils.class";
</div> </div>
</div> </div>
<div class="uk-hidden@m"> <div class="uk-hidden@m">
<div class="uk-text-xsmall" style="color: #EEB204">Beta</div>
<div class="uk-flex uk-flex-middle uk-flex-wrap"> <div class="uk-flex uk-flex-middle uk-flex-wrap">
<img src="assets/common-assets/common/The_Global_Goals_Icon_Color.svg" <img src="assets/common-assets/common/The_Global_Goals_Icon_Color.svg"
loading="lazy" alt="sdg_colors" style="width:18px; height:18px"> loading="lazy" alt="sdg_colors" style="width:18px; height:18px">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right uk-text-meta">SDGs:</span> <span class="uk-margin-xsmall-left uk-margin-xsmall-right uk-text-meta">SDGs:</span>
<div *ngFor="let subject of subjects.slice(0, viewAll?subjects.length:threshold); let i=index" class="uk-text-truncate"> <div *ngFor="let subject of subjects.slice(0, viewAll?subjects.length:threshold); let i=index" class="uk-text-truncate">
<a [routerLink]=" properties.searchLinkToResults" <a [routerLink]=" properties.searchLinkToResults" [queryParams]="{'sdg': urlEncodeAndQuote(subject)}">{{subject}}</a>
[queryParams]="{'sdg': urlEncodeAndQuote(subject)}"> <span *ngIf="(viewAll && i<subjects.length-1) || i<threshold-1">, &nbsp;</span>
{{subject}}
</a>
<span>, &nbsp;</span>
</div> </div>
<!-- <div> <!-- <div>
{{subjects.slice(0, viewAll?subjects.length:threshold).join(", ")}} {{subjects.slice(0, viewAll?subjects.length:threshold).join(", ")}}
</div> --> </div> -->
</div> </div>
<div class="uk-text-right uk-margin-small-top">
<a *ngIf="subjects && subjects.length > threshold && !viewAll"
(click)="viewAllClick();" class="view-more-less-link uk-link uk-text-truncate">
View all</a>
<!-- View all & suggest</a>-->
<!-- <a *ngIf="(subjects && subjects.length <= threshold || viewAll)" class="uk-link uk-link-text uk-text-truncate"-->
<!-- (click)="suggestClick();">Suggest</a>-->
</div>
</div> </div>
` `
}) })

56
landingPages/landing-utils/showSubjects.component.ts
View File

@ -1,9 +1,9 @@
import { import {
ChangeDetectorRef, ChangeDetectorRef,
Component, Component,
ElementRef, ElementRef, EventEmitter,
HostListener, HostListener,
Input, Input, Output,
QueryList, QueryList,
ViewChild, ViewChild,
ViewChildren ViewChildren
@ -13,24 +13,24 @@ import {properties} from "../../../../environments/environment";
@Component({ @Component({
selector: 'showSubjects', selector: 'showSubjects',
template: ` template: `
<ng-container *ngIf="(classifiedSubjects && classifiedSubjects.size > 0) || (eoscSubjects && eoscSubjects.length > 0)"> <ng-container *ngIf="!viewAllSubjects && ((classifiedSubjects && classifiedSubjects.size > 0) || (eoscSubjects && eoscSubjects.length > 0))">
<div class="uk-text-meta"> <div *ngIf="!viewAllClassifiedSubjects" class="uk-text-meta">
Subjects by Vocabulary Subjects by Vocabulary
</div> </div>
<ng-container *ngTemplateOutlet="subjects_by_vocabulary_template; context: {customClasses: 'multi-line-ellipsis lines-2', id: 'content'}"></ng-container> <ng-container *ngTemplateOutlet="subjects_by_vocabulary_template; context: {customClasses: (isMobile && viewAllClassifiedSubjects) ? '' : 'multi-line-ellipsis lines-2', id: 'content'}"></ng-container>
<ng-container *ngIf="eoscSubjects && eoscSubjects.length > 0"><ng-container *ngTemplateOutlet="eosc_subjects_template"></ng-container></ng-container> <ng-container *ngIf="eoscSubjects && eoscSubjects.length > 0"><ng-container *ngTemplateOutlet="eosc_subjects_template"></ng-container></ng-container>
<div *ngIf="isClassifiedLarge" class="uk-text-right"> <div *ngIf="isClassifiedLarge && !viewAllClassifiedSubjects" class="uk-text-right">
<a (click)="openSubjectsByVocabularyModal()" class="view-more-less-link">View all</a> <a (click)="viewAllSubjectsByVocabularyClicked()" class="view-more-less-link">View all</a>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="(subjects && subjects.length > 0) || (otherSubjects && otherSubjects.size > 0)"> <ng-container *ngIf="!viewAllClassifiedSubjects && ((subjects && subjects.length > 0) || (otherSubjects && otherSubjects.size > 0))">
<div class="uk-text-meta uk-margin-small-bottom" [class.uk-margin-medium-top]="classifiedSubjects && classifiedSubjects.size > 0"> <div *ngIf="!viewAllSubjects" class="uk-text-meta uk-margin-small-bottom" [class.uk-margin-medium-top]="classifiedSubjects && classifiedSubjects.size > 0">
Subjects Subjects
</div> </div>
<ng-container *ngTemplateOutlet="subjects_template; context: {customClasses: 'multi-line-ellipsis lines-2', id: 'content'}"></ng-container> <ng-container *ngTemplateOutlet="subjects_template; context: {customClasses: (isMobile && viewAllSubjects) ? '' : 'multi-line-ellipsis lines-2', id: 'content'}"></ng-container>
<div *ngIf="isLarge" class="uk-text-right uk-margin-small-top"> <div *ngIf="isLarge && !viewAllSubjects" class="uk-text-right uk-margin-small-top">
<a (click)="openSubjectsModal()" class="view-more-less-link">View all</a> <a (click)="viewAllSubjectsClicked()" class="view-more-less-link">View all</a>
</div> </div>
</ng-container> </ng-container>
@ -49,7 +49,7 @@ import {properties} from "../../../../environments/environment";
</div> </div>
</ng-template> </ng-template>
<modal-alert #subjectsModal *ngIf="(subjects && subjects.length > 0) || (otherSubjects && otherSubjects.size > 0)"> <modal-alert #subjectsModal *ngIf="!isMobile && ((subjects && subjects.length > 0) || (otherSubjects && otherSubjects.size > 0))">
<div class="uk-text-small"> <div class="uk-text-small">
<ng-container *ngTemplateOutlet="subjects_template"></ng-container> <ng-container *ngTemplateOutlet="subjects_template"></ng-container>
</div> </div>
@ -94,7 +94,7 @@ import {properties} from "../../../../environments/environment";
</div> </div>
</ng-template> </ng-template>
<modal-alert #subjectsByVocabularyModal *ngIf="(classifiedSubjects && classifiedSubjects.size > 0) || (eoscSubjects && eoscSubjects.length > 0)" large="true"> <modal-alert #subjectsByVocabularyModal *ngIf="!isMobile && ((classifiedSubjects && classifiedSubjects.size > 0) || (eoscSubjects && eoscSubjects.length > 0))" large="true">
<div class="uk-text-small"> <div class="uk-text-small">
<ng-container *ngTemplateOutlet="subjects_by_vocabulary_template"></ng-container> <ng-container *ngTemplateOutlet="subjects_by_vocabulary_template"></ng-container>
<ng-container *ngIf="eoscSubjects && eoscSubjects.length > 0"><ng-container *ngTemplateOutlet="eosc_subjects_template"></ng-container></ng-container> <ng-container *ngIf="eoscSubjects && eoscSubjects.length > 0"><ng-container *ngTemplateOutlet="eosc_subjects_template"></ng-container></ng-container>
@ -104,12 +104,16 @@ import {properties} from "../../../../environments/environment";
}) })
export class ShowSubjectsComponent { export class ShowSubjectsComponent {
@Input() isMobile: boolean = false;
@Input() subjects: string[]; @Input() subjects: string[];
@Input() otherSubjects: Map<string, string[]>; @Input() otherSubjects: Map<string, string[]>;
@Input() classifiedSubjects: Map<string, string[]>; @Input() classifiedSubjects: Map<string, string[]>;
@Input() eoscSubjects: any[]; @Input() eoscSubjects: any[];
isLarge: boolean = false; isLarge: boolean = false;
isClassifiedLarge: boolean = false; isClassifiedLarge: boolean = false;
@Input() viewAllSubjects: boolean = false;
@Input() viewAllClassifiedSubjects: boolean = false;
@Output() viewAllClicked = new EventEmitter();
properties = properties; properties = properties;
specialSubjects = []; specialSubjects = [];
@ViewChildren("content", { read: ElementRef }) content: QueryList<ElementRef>; @ViewChildren("content", { read: ElementRef }) content: QueryList<ElementRef>;
@ -206,4 +210,28 @@ export class ShowSubjectsComponent {
this.subjectsByVocabularyModal.alertTitle = "Subjects by Vocabulary"; this.subjectsByVocabularyModal.alertTitle = "Subjects by Vocabulary";
this.subjectsByVocabularyModal.open(); this.subjectsByVocabularyModal.open();
} }
public viewAllSubjectsClicked() {
if(this.isMobile) {
this.viewAllSubjects = true;
this.viewAllClicked.emit({
subtitle: 'Subjects',
id: 'subjects'
});
} else {
this.openSubjectsModal();
}
}
public viewAllSubjectsByVocabularyClicked() {
if(this.isMobile) {
this.viewAllClassifiedSubjects = true;
this.viewAllClicked.emit({
subtitle: 'Subjects by Vocabulary',
id: 'classifiedSubjects'
});
} else {
this.openSubjectsByVocabularyModal();
}
}
} }

463
landingPages/result/resultLanding.component.html
View File

@ -1,6 +1,6 @@
<!-- Desktop view --> <!-- Desktop view -->
<div id="tm-main" class="uk-visible@m landing uk-section uk-padding-remove tm-middle"> <div id="tm-main" class="uk-visible@m landing uk-section uk-padding-remove tm-middle">
<div class="tm-main"> <div *ngIf="!isMobile" class="tm-main">
<div class="publication"> <div class="publication">
<div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid> <div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid>
@ -303,89 +303,10 @@
<div id="landing-sections" class="uk-text-small"> <div id="landing-sections" class="uk-text-small">
<ng-container> <ng-container>
<div id="summary" class="landing-section landing-section-height-auto uk-padding uk-padding-remove-horizontal"> <ng-container *ngTemplateOutlet="summary_content"></ng-container>
<div *ngIf="!hasPrimaryInfo" class="uk-height-small uk-flex uk-flex-center uk-flex-middle">
<div class="uk-animation-fade uk-text-meta uk-text-large">
No summary information available
</div>
</div>
<div *ngIf="hasPrimaryInfo">
<!-- Description -->
<div *ngIf="resultLandingInfo.description" class="uk-margin-medium-bottom">
<div class="uk-text-justify ">
<div class="uk-text-meta">Abstract</div>
<div class="multi-line-ellipsis lines-10">
<div #descriptionDiv class="uk-margin-small-bottom"
[innerHTML]="resultLandingInfo.description"></div>
</div>
<div *ngIf="showViewMoreButton" class="uk-flex uk-flex-right">
<a (click)="openDescriptionModal();" class="view-more-less-link">
View more
</a>
</div>
</div>
</div>
<div *ngIf="resultLandingInfo.countries && resultLandingInfo.countries.length > 0" class="uk-margin-medium-bottom">
<div class="uk-text-meta">
{{(resultLandingInfo.countries.length === 1) ? 'Country ' : 'Countries '}}
</div>
<div>
{{resultLandingInfo.countries.join(", ")}}
</div>
</div>
<div *ngIf="resultLandingInfo.subjects || resultLandingInfo.otherSubjects ||
resultLandingInfo.classifiedSubjects" class="uk-margin-medium-bottom">
<showSubjects [subjects]="resultLandingInfo.subjects"
[otherSubjects]="resultLandingInfo.otherSubjects"
[classifiedSubjects]="resultLandingInfo.classifiedSubjects"
[eoscSubjects]="resultLandingInfo.eoscSubjects">
</showSubjects>
</div>
<!-- Related Organizations-->
<div *ngIf="resultLandingInfo.organizations && resultLandingInfo.organizations.length > 0"
class="uk-margin-medium-bottom uk-width-2-3@m">
<div class="uk-text-meta uk-margin-small-bottom">Related {{openaireEntities.ORGANIZATIONS}}</div>
<ng-container *ngTemplateOutlet="organizations_template; context: { threshold: lessBtnOrganizations ? resultLandingInfo.organizations.length : thresholdOrganizations }"></ng-container>
<div *ngIf="resultLandingInfo.organizations.length > thresholdOrganizations && !lessBtnOrganizations"
class="uk-text-center">
<a (click)="viewAllOrganizationsClick();" class="view-more-less-link">
View all
</a>
</div>
<div *ngIf="viewAllOrganizations && lessBtnOrganizations" class="uk-text-center">
<a (click)="viewAllOrganizations = !viewAllOrganizations; lessBtnOrganizations=false;" class="view-more-less-link">View less</a>
</div>
</div>
</div>
</div>
</ng-container> </ng-container>
<ng-container *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0"> <ng-container *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0">
<div id="references" class="landing-section uk-padding uk-padding-remove-horizontal"> <ng-container *ngTemplateOutlet="references_content"></ng-container>
<results-and-pages *ngIf="resultLandingInfo.references.length > pageSize" [type]="'references'"
[page]="referencesPage" [pageSize]="pageSize"
[totalResults]="resultLandingInfo.references.length">
</results-and-pages>
<div
*ngFor="let item of resultLandingInfo.references.slice((referencesPage-1)*pageSize, referencesPage*pageSize)">
<p *ngIf="item">
{{item.name}}
<ng-container *ngIf="item.ids && item.ids.length > 0">
<span *ngFor="let id of item.ids">
[<a *ngIf="id.type !== 'openaire'" href="{{getReferenceUrl(id)}}"
target="_blank">{{getReferenceIdName(id)}}</a>
<a *ngIf="id.type === 'openaire'" [routerLink]="properties.searchLinkToResult.split('?')[0]"
[queryParams]="{id: id.value}"
target="_blank">OpenAIRE</a>]
</span>
</ng-container>
</p>
</div>
<paging-no-load *ngIf="resultLandingInfo.references.length > pageSize"
(pageChange)="updateReferencesPage($event)"
[currentPage]="referencesPage" [size]="pageSize"
[totalResults]="resultLandingInfo.references.length">
</paging-no-load>
</div>
</ng-container> </ng-container>
<ng-container *ngIf="resultLandingInfo.relatedResults?.length > 0"> <ng-container *ngIf="resultLandingInfo.relatedResults?.length > 0">
<div id="all_related" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="all_related" class="landing-section uk-padding uk-padding-remove-horizontal">
@ -394,63 +315,12 @@
</ng-container> </ng-container>
<ng-container *ngIf="resultLandingInfo.bioentities && bioentitiesNum> 0"> <ng-container *ngIf="resultLandingInfo.bioentities && bioentitiesNum> 0">
<div id="bioentities" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="bioentities" class="landing-section uk-padding uk-padding-remove-horizontal">
<results-and-pages *ngIf="bioentitiesNum > 2*pageSize" [type]="'bioentities'" <ng-container *ngTemplateOutlet="bioentities_content"></ng-container>
[page]="bioentitiesPage" [pageSize]="2*pageSize"
[totalResults]="bioentitiesNum">
</results-and-pages>
<div class="uk-text-center uk-child-width-1-4@s uk-child-width-1-2 uk-grid uk-grid-medium uk-margin-bottom" uk-grid>
<ng-container *ngFor="let key of getKeys(resultLandingInfo.bioentities) let i=index">
<ng-container
*ngFor="let keyIn of keysToArray(resultLandingInfo.bioentities.get(key)).slice((bioentitiesPage-1)*2*pageSize, bioentitiesPage*2*pageSize)">
<div>
<div [title]="key" *ngIf="keyIn && !resultLandingInfo.bioentities.get(key).get(keyIn)"
class="uk-card uk-card-default uk-card-body">
{{keyIn}}
</div>
<a [href]="resultLandingInfo.bioentities.get(key).get(keyIn)" target="_blank"
[title]="key" *ngIf="keyIn && resultLandingInfo.bioentities.get(key).get(keyIn)"
class="uk-card uk-card-default uk-card-hover uk-card-body custom-external">
{{keyIn}}
</a>
</div>
</ng-container>
</ng-container>
</div>
<paging-no-load *ngIf="bioentitiesNum > 2*pageSize"
(pageChange)="updateBioentitiesPage($event)"
[currentPage]="bioentitiesPage" [size]="2*pageSize"
[totalResults]="bioentitiesNum">
</paging-no-load>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="enermapsId && properties.enermapsURL"> <ng-container *ngIf="enermapsId && properties.enermapsURL">
<div id="enermaps" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="enermaps" class="landing-section uk-padding uk-padding-remove-horizontal">
<div class=" uk-inline uk-text-center "> <ng-container *ngTemplateOutlet="enermapsTool_content"></ng-container>
<img class="uk-width-auto" [src]="properties.enermapsURL +'/images/datasets/' + enermapsId +
'.png'"
alt="Enermaps tool preview" loading="lazy">
<div class="uk-overlay uk-overlay-default uk-position-bottom">
<p>Visit <a
class=" uk-margin-right uk-margin-small-top custom-external"
[href]="properties.enermapsURL + '/?shared_id=' + enermapsId" target="_blank" >
Enermaps tool
</a></p>
</div>
</div>
<ul *ngIf="enermapsDetails?.length > 0" class="uk-list uk-animation-fade">
<ng-container *ngFor="let detail of enermapsDetails">
<li *ngIf="detail[0] && detail[1]">
<span class="uk-text-meta">{{detail[0]}}: </span>
<span>
<ng-container *ngFor="let word of detail[1].split(' ')">
<ng-container *ngIf="!word.startsWith('http://') && !word.startsWith('https://')">{{word}} </ng-container>
<a *ngIf="word.startsWith('http://') || word.startsWith('https://')"
target="_blank" [href]="word">{{word}} </a>
</ng-container>
</span>
</li>
</ng-container>
</ul>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="resultLandingInfo && (resultLandingInfo.measure || hasAltMetrics)"> <ng-container *ngIf="resultLandingInfo && (resultLandingInfo.measure || hasAltMetrics)">
@ -775,19 +645,7 @@
<!-- EOSC Services--> <!-- EOSC Services-->
<div *ngIf="resultLandingInfo.eoscSubjects?.length > 0 && properties.adminToolsPortalType == 'eosc' <div *ngIf="resultLandingInfo.eoscSubjects?.length > 0 && properties.adminToolsPortalType == 'eosc'
&& (!viewAll || viewAll=='egiNotebook')"> && (!viewAll || viewAll=='egiNotebook')">
<div class="uk-flex uk-flex-between uk-flex-middle uk-margin-small-bottom"> <ng-container *ngTemplateOutlet="compatibleEOSC_content"></ng-container>
<span class="uk-text-light-grey uk-text-nowrap uk-margin-small-right">Compatible EOSC Services</span>
</div>
<div class="uk-margin-small-bottom uk-flex">
<img src="assets/common-assets/eosc-logo.png"
loading="lazy" alt="eosc_logo" style="width:27px; height:27px">
<div class="uk-margin-small-left uk-flex uk-flex-column uk-flex-center">
<div *ngFor="let subject of resultLandingInfo.eoscSubjects; let i=index" class="uk-text-truncate">
<a [href]="subject.link" target="_blank" class="custom-external">{{subject.value}}</a>
</div>
</div>
</div>
</div> </div>
<div *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0 && (!viewAll || viewAll=='sdg')"> <div *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0 && (!viewAll || viewAll=='sdg')">
@ -821,11 +679,12 @@
</div> </div>
<!-- Mobile view --> <!-- Mobile view -->
<div class="uk-hidden@m uk-position-relative landing"> <div *ngIf="isMobile" class="uk-hidden@m uk-position-relative landing">
<ng-container *ngIf="resultLandingInfo"> <ng-container *ngIf="resultLandingInfo">
<div class="uk-container uk-section"> <div class="uk-container uk-section">
<div *ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0" <div *ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0"
class="uk-margin-small-bottom uk-flex uk-flex-middle"> class="uk-margin-small-bottom uk-flex uk-flex-middle"
[ngClass]="(resultLandingInfo.hostedBy_collectedFrom[0].accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')">
<icon [name]="resultLandingInfo.hostedBy_collectedFrom[0].accessRightIcon" [flex]="true" [ratio]="1"></icon> <icon [name]="resultLandingInfo.hostedBy_collectedFrom[0].accessRightIcon" [flex]="true" [ratio]="1"></icon>
<span class="uk-margin-xsmall-left uk-text-small uk-text-uppercase uk-text-bolder">{{resultLandingInfo.hostedBy_collectedFrom[0].accessRight}}</span> <span class="uk-margin-xsmall-left uk-text-small uk-text-uppercase uk-text-bolder">{{resultLandingInfo.hostedBy_collectedFrom[0].accessRight}}</span>
</div> </div>
@ -844,68 +703,70 @@
<showIdentifiers [identifiers]="resultLandingInfo.identifiers" [showViewAll]="true"></showIdentifiers> <showIdentifiers [identifiers]="resultLandingInfo.identifiers" [showViewAll]="true"></showIdentifiers>
</div> </div>
<!-- SDGs --> <!-- SDGs -->
<div *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0 && (!viewAll || viewAll=='sdg')" class="uk-margin-small-top"> <div *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0 && !viewAllMobile" class="uk-margin-small-top">
<sdg [subjects]="resultLandingInfo.sdg" (viewAllClicked)="viewAll=$event" (feedbackClicked)="feedbackClicked('Sustainable Development Goals (SDGs)')"></sdg> <sdg [subjects]="resultLandingInfo.sdg" (suggestClicked)="suggestMobileClicked($event)"
(viewAllClicked)="viewAllMobile=$event; openFsModal(sdgsFsModal, 'Sustainable Development Goals (SDGs)')"></sdg>
</div> </div>
<!-- FOS --> <!-- FOS -->
<div *ngIf="resultLandingInfo.fos && resultLandingInfo.fos.length > 0 && (!viewAll || viewAll=='fos')" class="uk-margin-small-top"> <div *ngIf="resultLandingInfo.fos && resultLandingInfo.fos.length > 0 && !viewAllMobile" class="uk-margin-small-top">
<fos [subjects]="resultLandingInfo.fos" (viewAllClicked)="viewAll=$event" (feedbackClicked)="feedbackClicked('Fields of Science and Technology (FOS)')"></fos> <fos [subjects]="resultLandingInfo.fos" (feedbackClicked)="feedbackClicked('Fields of Science and Technology (FOS)')"
(viewAllClicked)="viewAllMobile=$event; openFsModal(fosFsModal, 'Fields of Science (FoS)')"></fos>
</div> </div>
</div> </div>
<div class="uk-section uk-margin-top uk-text-large uk-text-empashis uk-text-bold"> <div class="uk-section uk-margin-top uk-text-large uk-text-empashis uk-text-bold">
<hr> <hr>
<ng-container> <ng-container>
<div class="uk-flex uk-flex-middle uk-flex-between"> <div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(summaryFsModal, 'Summary'); onSelectActiveTab('summary')">
<span>Summary</span> <span>Summary</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon> <icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div> </div>
<hr> <hr>
</ng-container> </ng-container>
<ng-container *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0"> <ng-container *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0">
<div class="uk-flex uk-flex-middle uk-flex-between"> <div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(referencesFsModal, 'References'); onSelectActiveTab('references')">
<span>References</span> <span>References</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon> <icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div> </div>
<hr> <hr>
</ng-container> </ng-container>
<ng-container *ngIf="resultLandingInfo.relatedResults?.length > 0"> <ng-container *ngIf="resultLandingInfo.relatedResults?.length > 0">
<div class="uk-flex uk-flex-middle uk-flex-between"> <div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(relatedResearchFsModal, 'Related Research'); onSelectActiveTab('all_related')">
<span>Related Research</span> <span>Related Research</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon> <icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div> </div>
<hr> <hr>
</ng-container> </ng-container>
<ng-container *ngIf="resultLandingInfo.bioentities && bioentitiesNum> 0"> <ng-container *ngIf="resultLandingInfo.bioentities && bioentitiesNum> 0">
<div class="uk-flex uk-flex-middle uk-flex-between"> <div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(bioentitiesFsModal, 'External Databases'); onSelectActiveTab('bioentities')">
<span>External Databases</span> <span>External Databases</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon> <icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div> </div>
<hr> <hr>
</ng-container> </ng-container>
<ng-container *ngIf="enermapsId && properties.enermapsURL"> <ng-container *ngIf="resultLandingInfo.eoscSubjects?.length > 0 && properties.adminToolsPortalType == 'eosc'
<div class="uk-flex uk-flex-middle uk-flex-between">
<span>Enermaps Tool</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="resultLandingInfo.eoscSubjects?.length > 0 && properties.adminToolsPortalType == 'eosc'
&& (!viewAll || viewAll=='egiNotebook')"> && (!viewAll || viewAll=='egiNotebook')">
<div class="uk-flex uk-flex-middle uk-flex-between"> <div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(compatibleEOSCFsModal, 'Compatible EOSC Services'); onSelectActiveTab('summary')">
<span>Compatible EOSC Services</span> <span>Compatible EOSC Services</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon> <icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0 && (!viewAll || viewAll=='fundedBy')"> <ng-container *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0 && (!viewAll || viewAll=='fundedBy')">
<div class="uk-flex uk-flex-middle uk-flex-between"> <div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(fundedByFsModal, 'Funded by'); onSelectActiveTab('summary')">
<span>Funded by</span> <span>Funded by</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon> <icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div> </div>
<hr> <hr>
</ng-container> </ng-container>
<ng-container *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0 && !noCommunities && (!viewAll || viewAll=='relatedTo')"> <ng-container *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0 && !noCommunities && (!viewAll || viewAll=='relatedTo')">
<div class="uk-flex uk-flex-middle uk-flex-between"> <div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(relatedCommunitiesFsModal, 'Related to Research Communities'); onSelectActiveTab('summary')">
<span>Related to Research Communities</span> <span>Related to Research Communities</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="enermapsId && properties.enermapsURL">
<div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(enermapsToolFsModal, 'Enermaps Tool'); onSelectActiveTab('enermaps')">
<span>Enermaps Tool</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon> <icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div> </div>
<hr> <hr>
@ -940,6 +801,71 @@
</div> </div>
</div> </div>
</div> </div>
<fs-modal #summaryFsModal [classTitle]="'uk-background-primary-opacity'" (cancelEmitter)="cancelSummaryClicked()">
<ng-container *ngTemplateOutlet="summary_content"></ng-container>
</fs-modal>
<fs-modal #referencesFsModal [classTitle]="'uk-background-primary-opacity'"
*ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0">
<ng-container *ngTemplateOutlet="references_content"></ng-container>
</fs-modal>
<fs-modal #relatedResearchFsModal [classTitle]="'uk-background-primary-opacity'"
*ngIf="resultLandingInfo.relatedResults?.length > 0">
<div class="landing-section uk-padding uk-padding-remove-horizontal">
<ng-container *ngTemplateOutlet="relation_in_tab; context: { researchResults: filteredRelatedResults, header: ''}"></ng-container>
</div>
</fs-modal>
<fs-modal #bioentitiesFsModal [classTitle]="'uk-background-primary-opacity'"
*ngIf="resultLandingInfo.bioentities && bioentitiesNum> 0">
<div class="landing-section uk-padding uk-padding-remove-horizontal">
<ng-container *ngTemplateOutlet="bioentities_content"></ng-container>
</div>
</fs-modal>
<fs-modal #compatibleEOSCFsModal [classTitle]="'uk-background-primary-opacity'">
<ng-container *ngIf="resultLandingInfo.eoscSubjects?.length > 0 && properties.adminToolsPortalType == 'eosc' && (!viewAll || viewAll=='egiNotebook')">
<ng-container *ngTemplateOutlet="compatibleEOSC_content"></ng-container>
</ng-container>
</fs-modal>
<fs-modal #fundedByFsModal [classTitle]="'uk-background-primary-opacity'">
<ng-container *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0 && (!viewAll || viewAll=='fundedBy')">
<fundedBy [fundedByProjects]="resultLandingInfo.fundedByProjects" [provenanceActionVocabulary]="provenanceActionVocabulary" (viewAllClicked)="viewAll=$event"
[isMobile]="true" [viewAll]="true"></fundedBy>
</ng-container>
</fs-modal>
<fs-modal #relatedCommunitiesFsModal [classTitle]="'uk-background-primary-opacity'">
<ng-container *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0 && !noCommunities && (!viewAll || viewAll=='relatedTo')">
<relatedTo [contexts]="resultLandingInfo.contexts" [viewAll]="viewAll=='relatedTo'"
(viewAllClicked)="viewAll=$event" (noCommunities)="noCommunities = true"
[mobileView]="true" [viewAll]="true"></relatedTo>
</ng-container>
</fs-modal>
<fs-modal #enermapsToolFsModal [classTitle]="'uk-background-primary-opacity'">
<div *ngIf="enermapsId && properties.enermapsURL" class="landing-section uk-padding uk-padding-remove-horizontal">
<ng-container *ngTemplateOutlet="enermapsTool_content"></ng-container>
</div>
</fs-modal>
<fs-modal #sdgsFsModal *ngIf="isMobile" [classTitle]="'uk-background-primary-opacity'" (cancelEmitter)="sdgsFsModalCancelled()">
<ng-container *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0">
<sdg *ngIf="viewAllMobile=='sdg'" [subjects]="resultLandingInfo.sdg" [viewAll]="true" (suggestClicked)="suggestMobileClicked($event)"></sdg>
<sdg-fos-suggest *ngIf="viewAllMobile=='sdgSuggest'" #sdgFosSuggest [title]="resultLandingInfo.title" [entityType]="resultLandingInfo.resultType"></sdg-fos-suggest>
</ng-container>
</fs-modal>
<fs-modal #fosFsModal *ngIf="isMobile" [classTitle]="'uk-background-primary-opacity'" (cancelEmitter)="fosFsModalCancelled()">
<ng-container *ngIf="resultLandingInfo.fos && resultLandingInfo.fos.length > 0">
<fos *ngIf="viewAllMobile=='fos'" [subjects]="resultLandingInfo.fos" [viewAll]="true"(viewAllClicked)="viewAllMobile=$event"></fos>
<sdg-fos-suggest *ngIf="viewAllMobile=='fosSuggest'" #sdgFosSuggest [title]="resultLandingInfo.title" [entityType]="resultLandingInfo.resultType"></sdg-fos-suggest>
</ng-container>
</fs-modal>
</ng-container> </ng-container>
</div> </div>
@ -981,14 +907,14 @@
<ng-container *ngTemplateOutlet="organizations_template; context: { threshold: resultLandingInfo.organizations.length}"></ng-container> <ng-container *ngTemplateOutlet="organizations_template; context: { threshold: resultLandingInfo.organizations.length}"></ng-container>
</modal-alert> </modal-alert>
<modal-alert *ngIf="resultLandingInfo?.description" #descriptionModal <modal-alert *ngIf="!isMobile && resultLandingInfo?.description" #descriptionModal
[large]="true"> [large]="true">
<div [innerHTML]="resultLandingInfo.description"></div> <div [innerHTML]="resultLandingInfo.description"></div>
</modal-alert> </modal-alert>
<!--<modal-alert *ngIf="resultLandingInfo && resultLandingInfo.sdg?.length > 0"--> <!--<modal-alert *ngIf="resultLandingInfo && resultLandingInfo.sdg?.length > 0"-->
<!-- #sdgSelectionModal [large]="true" (alertOutput)="sdgModalOutput()" (cancelOutput)="sdgModalCancel()">--> <!-- #sdgSelectionModal [large]="true" (alertOutput)="sdgModalOutput()" (cancelOutput)="sdgModalCancel()">-->
<sdg-fos-suggest *ngIf="resultLandingInfo && (resultLandingInfo.sdg?.length > 0 || resultLandingInfo.fos?.length > 0)" <sdg-fos-suggest *ngIf="!isMobile && resultLandingInfo && (resultLandingInfo.sdg?.length > 0 || resultLandingInfo.fos?.length > 0)"
#sdgFosSuggest [title]="resultLandingInfo.title" [entityType]="resultLandingInfo.resultType"> #sdgFosSuggest [title]="resultLandingInfo.title" [entityType]="resultLandingInfo.resultType">
</sdg-fos-suggest> </sdg-fos-suggest>
<!--</modal-alert>--> <!--</modal-alert>-->
@ -1043,3 +969,174 @@
</paging-no-load> </paging-no-load>
</div> </div>
</ng-template> </ng-template>
<ng-template #summary_content>
<div id="summary" class="landing-section landing-section-height-auto uk-padding uk-padding-remove-horizontal">
<div *ngIf="!hasPrimaryInfo" class="uk-height-small uk-flex uk-flex-center uk-flex-middle">
<div class="uk-animation-fade uk-text-meta uk-text-large">
No summary information available
</div>
</div>
<div *ngIf="hasPrimaryInfo">
<!-- Description -->
<div *ngIf="resultLandingInfo.description && (!viewAllMobile || viewAllMobile == 'description')" class="uk-margin-medium-bottom">
<div class="uk-text-justify ">
<div *ngIf="viewAllMobile != 'description'" class="uk-text-meta">Abstract</div>
<div [ngClass]="viewAllMobile == 'description' ? '' : 'multi-line-ellipsis lines-10'">
<div #descriptionDiv class="uk-margin-small-bottom"
[innerHTML]="resultLandingInfo.description"></div>
</div>
<div *ngIf="showViewMoreButton && viewAllMobile != 'description'" class="uk-flex uk-flex-right">
<a (click)="viewAllDescriptionClicked();" class="view-more-less-link">
View more
</a>
</div>
</div>
</div>
<div *ngIf="resultLandingInfo.countries && resultLandingInfo.countries.length > 0 && !viewAllMobile" class="uk-margin-medium-bottom">
<div class="uk-text-meta">
{{(resultLandingInfo.countries.length === 1) ? 'Country ' : 'Countries '}}
</div>
<div>
{{resultLandingInfo.countries.join(", ")}}
</div>
</div>
<div *ngIf="(resultLandingInfo.subjects || resultLandingInfo.otherSubjects || resultLandingInfo.classifiedSubjects)
&& (!viewAllMobile || viewAllMobile == 'subjects' || viewAllMobile == 'classifiedSubjects')
&& (!isMobile || tabMobile=='Summary')"
class="uk-margin-medium-bottom">
<showSubjects [subjects]="resultLandingInfo.subjects"
[otherSubjects]="resultLandingInfo.otherSubjects"
[classifiedSubjects]="resultLandingInfo.classifiedSubjects"
[eoscSubjects]="resultLandingInfo.eoscSubjects"
[isMobile]="isMobile"
[viewAllSubjects]="viewAllMobile=='subjects'"
[viewAllClassifiedSubjects]="viewAllMobile=='classifiedSubjects'"
(viewAllClicked)="viewAllSubjectsMobileClicked($event)">
</showSubjects>
</div>
<!-- Related Organizations-->
<div *ngIf="resultLandingInfo.organizations && resultLandingInfo.organizations.length > 0 && (!viewAllMobile || viewAllMobile == 'organizations')"
class="uk-margin-medium-bottom uk-width-2-3@m">
<div *ngIf="viewAllMobile != 'organizations'" class="uk-text-meta uk-margin-small-bottom">Related {{openaireEntities.ORGANIZATIONS}}</div>
<ng-container *ngTemplateOutlet="organizations_template; context: { threshold: lessBtnOrganizations ? resultLandingInfo.organizations.length : thresholdOrganizations }"></ng-container>
<div *ngIf="resultLandingInfo.organizations.length > thresholdOrganizations && !lessBtnOrganizations"
class="uk-text-center">
<a (click)="viewAllOrganizationsClick();" class="view-more-less-link uk-visible@m">
View all
</a>
<a (click)="viewAllOrganizationsMobileClicked()" class="view-more-less-link uk-hidden@m">
View all
</a>
</div>
<div *ngIf="viewAllOrganizations && lessBtnOrganizations" class="uk-text-center">
<a (click)="viewAllOrganizations = !viewAllOrganizations; lessBtnOrganizations=false;" class="view-more-less-link">View less</a>
</div>
</div>
</div>
</div>
</ng-template>
<ng-template #references_content>
<div id="references" class="landing-section uk-padding uk-padding-remove-horizontal">
<results-and-pages *ngIf="resultLandingInfo.references.length > pageSize" [type]="'references'"
[page]="referencesPage" [pageSize]="pageSize"
[totalResults]="resultLandingInfo.references.length">
</results-and-pages>
<div
*ngFor="let item of resultLandingInfo.references.slice((referencesPage-1)*pageSize, referencesPage*pageSize)">
<p *ngIf="item">
{{item.name}}
<ng-container *ngIf="item.ids && item.ids.length > 0">
<span *ngFor="let id of item.ids">
[<a *ngIf="id.type !== 'openaire'" href="{{getReferenceUrl(id)}}"
target="_blank">{{getReferenceIdName(id)}}</a>
<a *ngIf="id.type === 'openaire'" [routerLink]="properties.searchLinkToResult.split('?')[0]"
[queryParams]="{id: id.value}"
target="_blank">OpenAIRE</a>]
</span>
</ng-container>
</p>
</div>
<paging-no-load *ngIf="resultLandingInfo.references.length > pageSize"
(pageChange)="updateReferencesPage($event)"
[currentPage]="referencesPage" [size]="pageSize"
[totalResults]="resultLandingInfo.references.length">
</paging-no-load>
</div>
</ng-template>
<ng-template #bioentities_content>
<results-and-pages *ngIf="bioentitiesNum > 2*pageSize" [type]="'bioentities'"
[page]="bioentitiesPage" [pageSize]="2*pageSize"
[totalResults]="bioentitiesNum">
</results-and-pages>
<div class="uk-text-center uk-child-width-1-4@s uk-child-width-1-2 uk-grid uk-grid-medium uk-margin-bottom" uk-grid>
<ng-container *ngFor="let key of getKeys(resultLandingInfo.bioentities) let i=index">
<ng-container
*ngFor="let keyIn of keysToArray(resultLandingInfo.bioentities.get(key)).slice((bioentitiesPage-1)*2*pageSize, bioentitiesPage*2*pageSize)">
<div>
<div [title]="key" *ngIf="keyIn && !resultLandingInfo.bioentities.get(key).get(keyIn)"
class="uk-card uk-card-default uk-card-body">
{{keyIn}}
</div>
<a [href]="resultLandingInfo.bioentities.get(key).get(keyIn)" target="_blank"
[title]="key" *ngIf="keyIn && resultLandingInfo.bioentities.get(key).get(keyIn)"
class="uk-card uk-card-default uk-card-hover uk-card-body custom-external">
{{keyIn}}
</a>
</div>
</ng-container>
</ng-container>
</div>
<paging-no-load *ngIf="bioentitiesNum > 2*pageSize"
(pageChange)="updateBioentitiesPage($event)"
[currentPage]="bioentitiesPage" [size]="2*pageSize"
[totalResults]="bioentitiesNum">
</paging-no-load>
</ng-template>
<ng-template #compatibleEOSC_content>
<div class="uk-flex uk-flex-between uk-flex-middle uk-margin-small-bottom">
<span class="uk-text-light-grey uk-text-nowrap uk-margin-small-right">Compatible EOSC Services</span>
</div>
<div class="uk-margin-small-bottom uk-flex">
<img src="assets/common-assets/eosc-logo.png"
loading="lazy" alt="eosc_logo" style="width:27px; height:27px">
<div class="uk-margin-small-left uk-flex uk-flex-column uk-flex-center">
<div *ngFor="let subject of resultLandingInfo.eoscSubjects; let i=index" class="uk-text-truncate">
<a [href]="subject.link" target="_blank" class="custom-external">{{subject.value}}</a>
</div>
</div>
</div>
</ng-template>
<ng-template #enermapsTool_content>
<div class=" uk-inline uk-text-center ">
<img class="uk-width-auto" [src]="properties.enermapsURL +'/images/datasets/' + enermapsId +
'.png'"
alt="Enermaps tool preview" loading="lazy">
<div class="uk-overlay uk-overlay-default uk-position-bottom">
<p>Visit <a
class=" uk-margin-right uk-margin-small-top custom-external"
[href]="properties.enermapsURL + '/?shared_id=' + enermapsId" target="_blank" >
Enermaps tool
</a></p>
</div>
</div>
<ul *ngIf="enermapsDetails?.length > 0" class="uk-list uk-animation-fade">
<ng-container *ngFor="let detail of enermapsDetails">
<li *ngIf="detail[0] && detail[1]">
<span class="uk-text-meta">{{detail[0]}}: </span>
<span>
<ng-container *ngFor="let word of detail[1].split(' ')">
<ng-container *ngIf="!word.startsWith('http://') && !word.startsWith('https://')">{{word}} </ng-container>
<a *ngIf="word.startsWith('http://') || word.startsWith('https://')"
target="_blank" [href]="word">{{word}} </a>
</ng-container>
</span>
</li>
</ng-container>
</ul>
</ng-template>

97
landingPages/result/resultLanding.component.ts
View File

@ -26,7 +26,9 @@ import {UserManagementService} from "../../services/user-management.service";
import {OpenaireEntities} from "../../utils/properties/searchFields"; import {OpenaireEntities} from "../../utils/properties/searchFields";
import {Option} from "../../sharedComponents/input/input.component"; import {Option} from "../../sharedComponents/input/input.component";
import {NumberUtils} from '../../utils/number-utils.class'; import {NumberUtils} from '../../utils/number-utils.class';
import {FullScreenModalComponent} from "../../utils/modal/full-screen-modal/full-screen-modal.component";
import {SdgFosSuggestComponent} from '../landing-utils/sdg-fos-suggest/sdg-fos-suggest.component'; import {SdgFosSuggestComponent} from '../landing-utils/sdg-fos-suggest/sdg-fos-suggest.component';
import {LayoutService} from "../../dashboard/sharedComponents/sidebar/layout.service";
declare var ResizeObserver; declare var ResizeObserver;
@ -142,9 +144,24 @@ export class ResultLandingComponent {
// public shouldSticky: boolean = true; // public shouldSticky: boolean = true;
public tabMobile: string = "";
public viewAllMobile: string = "";
public viewAll: string = ""; public viewAll: string = "";
@ViewChild("sdgFosSuggest") sdgFosSuggest: SdgFosSuggestComponent; @ViewChild("sdgFosSuggest") sdgFosSuggest: SdgFosSuggestComponent;
public isMobile: boolean = false;
// Full screen modals for small screens (mobile)
@ViewChild('summaryFsModal') summaryFsModal: FullScreenModalComponent;
@ViewChild('referencesFsModal') referencesFsModal: FullScreenModalComponent;
@ViewChild('relatedResearchFsModal') relatedResearchFsModal: FullScreenModalComponent;
@ViewChild('bioentitiesFsModal') bioentitiesFsModal: FullScreenModalComponent;
@ViewChild('compatibleEOSCFsModal') compatibleEOSCFsModal: FullScreenModalComponent;
@ViewChild('fundedByFsModal') fundedByFsModal: FullScreenModalComponent;
@ViewChild('relatedCommunitiesFsModal') relatedCommunitiesFsModal: FullScreenModalComponent;
@ViewChild('enermapsToolFsModal') enermapsToolFsModal: FullScreenModalComponent;
@ViewChild('sdgsFsModal') sdgsFsModal: FullScreenModalComponent;
@ViewChild('fosFsModal') fosFsModal: FullScreenModalComponent;
public noCommunities: boolean = false; public noCommunities: boolean = false;
public rightSidebarOffcanvasClicked: boolean = false; public rightSidebarOffcanvasClicked: boolean = false;
@ -163,10 +180,14 @@ export class ResultLandingComponent {
private cdr: ChangeDetectorRef, private cdr: ChangeDetectorRef,
private _location: Location, private _location: Location,
private indexInfoService: IndexInfoService, private indexInfoService: IndexInfoService,
private userManagementService: UserManagementService) { private userManagementService: UserManagementService,
private layoutService: LayoutService) {
} }
ngOnInit() { ngOnInit() {
this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
this.isMobile = isMobile;
}));
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => { this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
this.isLoggedIn = !!user; this.isLoggedIn = !!user;
}, error => { this.isLoggedIn = false} )); }, error => { this.isLoggedIn = false} ));
@ -897,6 +918,26 @@ export class ResultLandingComponent {
} }
} }
public viewAllSubjectsMobileClicked(event: string) {
this.summaryFsModal.title += " - "+event['subtitle'];
this.summaryFsModal.back = true;
this.viewAllMobile = event['id'];
}
public viewAllOrganizationsMobileClicked() {
this.summaryFsModal.title += " - Related "+this.openaireEntities.ORGANIZATIONS;
this.summaryFsModal.back = true;
this.lessBtnOrganizations = true;
this.viewAllMobile = "organizations";
}
public cancelSummaryClicked() {
this.summaryFsModal.title = "Summary";
this.summaryFsModal.back = false;
this.lessBtnOrganizations = false;
this.viewAllMobile = "";
}
public openOrganizationsModal() { public openOrganizationsModal() {
this.organizationsModal.cancelButton = false; this.organizationsModal.cancelButton = false;
this.organizationsModal.okButton = false; this.organizationsModal.okButton = false;
@ -911,18 +952,60 @@ export class ResultLandingComponent {
this.viewAll = ""; this.viewAll = "";
} }
public sdgsFsModalCancelled() {
if(this.viewAllMobile == "sdg") {
this.viewAllMobile = "";
} else {
this.viewAllMobile = "sdg";
}
}
public fosFsModalCancelled() {
if(this.viewAllMobile == "fos") {
this.viewAllMobile = "";
} else {
this.viewAllMobile = "fos";
}
}
public suggestMobileClicked(value: string) {
if(this.viewAllMobile == 'sdg' || this.viewAllMobile == 'fos') {
this.sdgsFsModal.title += " - Suggest";
this.sdgsFsModal.back = true;
this.sdgFosSuggest.subjects=this.resultLandingInfo.sdg;
this.sdgFosSuggest.subjectType="sdg";
this.viewAllMobile = "sdgSuggest";
}
if(value == 'sdg') {
this.sdgFosSuggest.subjects=this.resultLandingInfo.sdg;
this.sdgFosSuggest.subjectType="sdg";
} else if(value == 'fos') {
this.sdgFosSuggest.subjects=this.resultLandingInfo.fos;
this.sdgFosSuggest.subjectType="fos";
}
}
public suggestClicked(value: string) { public suggestClicked(value: string) {
if(value == 'sdg') { if(value == 'sdg') {
this.sdgFosSuggest.subjects=this.resultLandingInfo.sdg; this.sdgFosSuggest.subjects=this.resultLandingInfo.sdg;
this.sdgFosSuggest.subjectType="sdg"; this.sdgFosSuggest.subjectType="sdg";
} else if(value == 'fos') { } else if(value == 'fos') {
console.log(this.resultLandingInfo.fos);
this.sdgFosSuggest.subjects=this.resultLandingInfo.fos; this.sdgFosSuggest.subjects=this.resultLandingInfo.fos;
this.sdgFosSuggest.subjectType="fos"; this.sdgFosSuggest.subjectType="fos";
} }
this.sdgFosSuggest.openSelectionModal(); this.sdgFosSuggest.openSelectionModal();
} }
public viewAllDescriptionClicked() {
if(this.isMobile) {
this.summaryFsModal.title += " - Abstract";
this.summaryFsModal.back = true;
this.viewAllMobile = "description";
} else {
this.openDescriptionModal();
}
}
public openDescriptionModal() { public openDescriptionModal() {
this.descriptionModal.alertFooter = false; this.descriptionModal.alertFooter = false;
this.descriptionModal.alertTitle = "Abstract"; this.descriptionModal.alertTitle = "Abstract";
@ -948,6 +1031,13 @@ export class ResultLandingComponent {
// this.sdgSelectionModal.open(); // this.sdgSelectionModal.open();
// } // }
public openFsModal(fsModal: FullScreenModalComponent, title: string) {
fsModal.title = title;
fsModal.okButton = false;
fsModal.stayOpenInBack = true;
fsModal.open();
this.tabMobile = title;
}
/*private openFosSelectionModal() { /*private openFosSelectionModal() {
this.fosSelectionModal.cancelButton = false; this.fosSelectionModal.cancelButton = false;
this.fosSelectionModal.alertTitle = "Please select FOS that are the most relevant for this publication."; this.fosSelectionModal.alertTitle = "Please select FOS that are the most relevant for this publication.";
@ -957,4 +1047,7 @@ export class ResultLandingComponent {
public sdgModalOutput() { public sdgModalOutput() {
this.sdgFosSuggest.sdgModalOutput(); this.sdgFosSuggest.sdgModalOutput();
}*/ }*/
public closeFsModal(fsModal: FullScreenModalComponent) {
fsModal.cancel();
}
} }

3
landingPages/result/resultLanding.module.ts
View File

@ -38,6 +38,7 @@ import {InputModule} from "../../sharedComponents/input/input.module";
import {EGIDataTransferModule} from "../../utils/dataTransfer/transferData.module"; import {EGIDataTransferModule} from "../../utils/dataTransfer/transferData.module";
import {RecaptchaModule} from 'ng-recaptcha'; import {RecaptchaModule} from 'ng-recaptcha';
import {SdgFosSuggestModule} from '../landing-utils/sdg-fos-suggest/sdg-fos-suggest.module'; import {SdgFosSuggestModule} from '../landing-utils/sdg-fos-suggest/sdg-fos-suggest.module';
import {FullScreenModalModule} from "../../utils/modal/full-screen-modal/full-screen-modal.module";
@NgModule({ @NgModule({
imports: [ imports: [
@ -47,7 +48,7 @@ import {SdgFosSuggestModule} from '../landing-utils/sdg-fos-suggest/sdg-fos-sugg
DeletedByInferenceModule, ShowAuthorsModule, HelperModule, ResultLandingUtilsModule, AlertModalModule, DeletedByInferenceModule, ShowAuthorsModule, HelperModule, ResultLandingUtilsModule, AlertModalModule,
AnnotationModule, LandingHeaderModule, NoLoadPaging, ResultPreviewModule, FeedbackModule, TabsModule, LoadingModule, AnnotationModule, LandingHeaderModule, NoLoadPaging, ResultPreviewModule, FeedbackModule, TabsModule, LoadingModule,
OrcidModule, MatFormFieldModule, MatSelectModule, IconsModule, InputModule, EGIDataTransferModule, RecaptchaModule, OrcidModule, MatFormFieldModule, MatSelectModule, IconsModule, InputModule, EGIDataTransferModule, RecaptchaModule,
SdgFosSuggestModule SdgFosSuggestModule, FullScreenModalModule
], ],
declarations: [ declarations: [
ResultLandingComponent ResultLandingComponent

17
utils/modal/full-screen-modal/full-screen-modal.component.ts
View File

@ -23,7 +23,7 @@ declare var ResizeObserver;
<div class="uk-modal-dialog"> <div class="uk-modal-dialog">
<div #header class="uk-modal-header uk-flex uk-flex-middle" [ngClass]="classTitle"> <div #header class="uk-modal-header uk-flex uk-flex-middle" [ngClass]="classTitle">
<div [class.uk-invisible]="!back" class="uk-width-medium@l uk-width-auto uk-flex uk-flex-center"> <div [class.uk-invisible]="!back" class="uk-width-medium@l uk-width-auto uk-flex uk-flex-center">
<button class="uk-button uk-button-link" [disabled]="!back" (click)="cancel()"> <button class="uk-button uk-button-link" [disabled]="!back" (click)="backClicked()">
<icon name="west" [flex]="true" ratio="3"></icon> <icon name="west" [flex]="true" ratio="3"></icon>
</button> </button>
</div> </div>
@ -57,6 +57,10 @@ export class FullScreenModalComponent implements AfterViewInit, OnDestroy {
@Input() classTitle: string = "uk-background-primary uk-light"; @Input() classTitle: string = "uk-background-primary uk-light";
@Input() classBody: string = 'uk-container-large'; @Input() classBody: string = 'uk-container-large';
back: boolean = false; back: boolean = false;
/**
* if the value is true then on ok clicked, modal will stay open.
*/
public stayOpenInBack: boolean = false;
title: string; title: string;
okButton: boolean = false; okButton: boolean = false;
okButtonText = 'OK'; okButtonText = 'OK';
@ -129,12 +133,21 @@ export class FullScreenModalComponent implements AfterViewInit, OnDestroy {
UIkit.modal(this.modal.nativeElement).show(); UIkit.modal(this.modal.nativeElement).show();
HelperFunctions.scroll(); HelperFunctions.scroll();
} }
cancel() { cancel() {
UIkit.modal(this.modal.nativeElement).hide(); UIkit.modal(this.modal.nativeElement).hide();
HelperFunctions.scroll(); HelperFunctions.scroll();
this.cancelEmitter.emit(); this.cancelEmitter.emit();
} }
backClicked() {
if(this.stayOpenInBack) {
HelperFunctions.scroll();
this.cancelEmitter.emit();
} else {
this.cancel();
}
}
ok() { ok() {
UIkit.modal(this.modal.nativeElement).hide(); UIkit.modal(this.modal.nativeElement).hide();