[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:
parent
9715de74d2
commit
6947890c20
|
|
@ -37,6 +37,7 @@ import {StringUtils} from "../../utils/string-utils.class";
|
|||
<div class="uk-hidden@m">
|
||||
<div class="uk-grid uk-grid-small uk-grid-divider" uk-grid>
|
||||
<div class="uk-width-1-4 uk-text-meta">
|
||||
<div class="uk-text-xsmall" style="color: #EEB204">Beta</div>
|
||||
Fields of Science (FOS)
|
||||
</div>
|
||||
<div class="uk-width-expand">
|
||||
|
|
@ -48,6 +49,15 @@ import {StringUtils} from "../../utils/string-utils.class";
|
|||
</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>
|
||||
`
|
||||
})
|
||||
|
|
@ -58,7 +68,7 @@ export class FosComponent {
|
|||
@Output() viewAllClicked = new EventEmitter();
|
||||
@Output() suggestClicked = new EventEmitter();
|
||||
public lessBtn: boolean = false;
|
||||
public threshold: number = 3; // was 2
|
||||
public threshold: number = 2;
|
||||
public routerHelper: RouterHelper = new RouterHelper();
|
||||
public properties = properties;
|
||||
public title: string = "Fields of Science";
|
||||
|
|
|
|||
|
|
@ -6,72 +6,94 @@ import {HelperFunctions} from '../../utils/HelperFunctions.class';
|
|||
@Component({
|
||||
selector: 'fundedBy',
|
||||
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()">
|
||||
<icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon>
|
||||
{{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"
|
||||
(click)="viewAllClick();" class="view-more-less-link">View all</a>
|
||||
</div>
|
||||
<div>
|
||||
<div *ngIf="!isMobile">
|
||||
<span *ngFor="let item of fundedByProjects.slice(0, viewAll?fundedByProjects.length:threshold) let i=index">
|
||||
<span class="uk-text-emphasis">
|
||||
<a class="uk-link uk-link-text">
|
||||
<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>
|
||||
</a>
|
||||
</span>
|
||||
<div class="default-dropdown uk-margin-remove-top uk-dropdown"
|
||||
uk-dropdown="pos: bottom-left; mode:click">
|
||||
<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">
|
||||
<span class="uk-text-emphasis">
|
||||
<a class="uk-link uk-link-text">
|
||||
<ng-container *ngTemplateOutlet="funder; context: {item: item}"></ng-container>
|
||||
</a>
|
||||
</span>
|
||||
<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>
|
||||
<span *ngIf="i < (fundedByProjects.slice(0, viewAll?fundedByProjects.length:threshold).length - 1)">, </span>
|
||||
</span>
|
||||
</div>
|
||||
<div *ngIf="isMobile">
|
||||
<div *ngFor="let item of fundedByProjects.slice(0, viewAll?fundedByProjects.length:threshold) let i=index"
|
||||
class="uk-flex uk-flex-between uk-flex-middle uk-margin-small-bottom">
|
||||
<span class="uk-text-emphasis">
|
||||
<ng-container *ngTemplateOutlet="funder; context: {item: item}"></ng-container>
|
||||
</span>
|
||||
<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']}}
|
||||
</span>
|
||||
<div *ngIf="item.acronym && item.title" class="uk-text-meta">
|
||||
{{item.title}}
|
||||
</div>
|
||||
</div>
|
||||
<ul class="uk-list uk-padding-remove-left uk-margin-bottom">
|
||||
<li *ngIf="item.funderShortname || item.funderName">
|
||||
<span class="uk-text-meta">Funder: </span>
|
||||
{{item.funderName ? item.funderName : item.funderShortname}}
|
||||
<span *ngIf="item.funderShortname && item.funderName">
|
||||
<div *ngIf="item.acronym && item.title" class="uk-text-meta">
|
||||
{{item.title}}
|
||||
</div>
|
||||
</div>
|
||||
<ul class="uk-list uk-padding-remove-left uk-margin-bottom">
|
||||
<li *ngIf="item.funderShortname || item.funderName">
|
||||
<span class="uk-text-meta">Funder: </span>
|
||||
{{item.funderName ? item.funderName : item.funderShortname}}
|
||||
<span *ngIf="item.funderShortname && item.funderName">
|
||||
({{item.funderShortname}})
|
||||
</span>
|
||||
</li>
|
||||
<li *ngIf="item.code">
|
||||
<span class="uk-text-meta">Project Code: </span>{{item.code}}
|
||||
</li>
|
||||
<li *ngIf="item.funding">
|
||||
<span class="uk-text-meta">Funding stream: </span>{{item.funding}}
|
||||
</li>
|
||||
</ul>
|
||||
<div *ngIf="getVocabularyLabel(item, provenanceActionVocabulary, i) || item.validated" class="uk-text-meta">
|
||||
<span *ngIf="item.validated">Validated by funder</span>
|
||||
<span *ngIf="item.provenanceAction && item.validated"> | </span>
|
||||
<span *ngIf="item.provenanceAction">{{item.provenanceAction}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span *ngIf="i < (fundedByProjects.slice(0, viewAll?fundedByProjects.length:threshold).length - 1)">, </span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li *ngIf="item.code">
|
||||
<span class="uk-text-meta">Project Code: </span>{{item.code}}
|
||||
</li>
|
||||
<li *ngIf="item.funding">
|
||||
<span class="uk-text-meta">Funding stream: </span>{{item.funding}}
|
||||
</li>
|
||||
</ul>
|
||||
<div *ngIf="getVocabularyLabel(item, provenanceActionVocabulary, i) || item.validated" class="uk-text-meta">
|
||||
<span *ngIf="item.validated">Validated by funder</span>
|
||||
<span *ngIf="item.provenanceAction && item.validated"> | </span>
|
||||
<span *ngIf="item.provenanceAction">{{item.provenanceAction}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
`
|
||||
})
|
||||
|
||||
export class FundedByComponent {
|
||||
@Input() isMobile: boolean = false;
|
||||
@Input() fundedByProjects: Project[];
|
||||
@Input() viewAll: boolean = false;
|
||||
@Output() viewAllClicked = new EventEmitter();
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import {OpenaireEntities} from "../../utils/properties/searchFields";
|
|||
selector: 'relatedTo, [relatedTo]',
|
||||
template: `
|
||||
<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()">
|
||||
<icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon>
|
||||
{{title}}
|
||||
|
|
@ -23,7 +23,8 @@ import {OpenaireEntities} from "../../utils/properties/searchFields";
|
|||
<a *ngIf="communities && communities.length > threshold && !viewAll"
|
||||
(click)="viewAllClick();" class="view-more-less-link">View all</a>
|
||||
</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 -->
|
||||
<a *ngIf="community.link" href="{{community.link}}" target="_blank" [attr.uk-tooltip]="community.labelContext" class="custom-external">
|
||||
{{community.labelContext}}
|
||||
|
|
@ -44,6 +45,7 @@ import {OpenaireEntities} from "../../utils/properties/searchFields";
|
|||
})
|
||||
|
||||
export class RelatedToComponent implements OnInit {
|
||||
@Input() mobileView: boolean = false;
|
||||
@Input() contexts: Context[];
|
||||
@Input() viewAll: boolean = false;
|
||||
@Output() viewAllClicked = new EventEmitter();
|
||||
|
|
|
|||
|
|
@ -39,21 +39,27 @@ import {StringUtils} from "../../utils/string-utils.class";
|
|||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<img src="assets/common-assets/common/The_Global_Goals_Icon_Color.svg"
|
||||
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>
|
||||
<div *ngFor="let subject of subjects.slice(0, viewAll?subjects.length:threshold); let i=index" class="uk-text-truncate">
|
||||
<a [routerLink]=" properties.searchLinkToResults"
|
||||
[queryParams]="{'sdg': urlEncodeAndQuote(subject)}">
|
||||
{{subject}}
|
||||
</a>
|
||||
<span>, </span>
|
||||
<a [routerLink]=" properties.searchLinkToResults" [queryParams]="{'sdg': urlEncodeAndQuote(subject)}">{{subject}}</a>
|
||||
<span *ngIf="(viewAll && i<subjects.length-1) || i<threshold-1">, </span>
|
||||
</div>
|
||||
<!-- <div>
|
||||
{{subjects.slice(0, viewAll?subjects.length:threshold).join(", ")}}
|
||||
</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>
|
||||
`
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import {
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
ElementRef,
|
||||
ElementRef, EventEmitter,
|
||||
HostListener,
|
||||
Input,
|
||||
Input, Output,
|
||||
QueryList,
|
||||
ViewChild,
|
||||
ViewChildren
|
||||
|
|
@ -13,24 +13,24 @@ import {properties} from "../../../../environments/environment";
|
|||
@Component({
|
||||
selector: 'showSubjects',
|
||||
template: `
|
||||
<ng-container *ngIf="(classifiedSubjects && classifiedSubjects.size > 0) || (eoscSubjects && eoscSubjects.length > 0)">
|
||||
<div class="uk-text-meta">
|
||||
<ng-container *ngIf="!viewAllSubjects && ((classifiedSubjects && classifiedSubjects.size > 0) || (eoscSubjects && eoscSubjects.length > 0))">
|
||||
<div *ngIf="!viewAllClassifiedSubjects" class="uk-text-meta">
|
||||
Subjects by Vocabulary
|
||||
</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>
|
||||
<div *ngIf="isClassifiedLarge" class="uk-text-right">
|
||||
<a (click)="openSubjectsByVocabularyModal()" class="view-more-less-link">View all</a>
|
||||
<div *ngIf="isClassifiedLarge && !viewAllClassifiedSubjects" class="uk-text-right">
|
||||
<a (click)="viewAllSubjectsByVocabularyClicked()" class="view-more-less-link">View all</a>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
<ng-container *ngIf="(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">
|
||||
<ng-container *ngIf="!viewAllClassifiedSubjects && ((subjects && subjects.length > 0) || (otherSubjects && otherSubjects.size > 0))">
|
||||
<div *ngIf="!viewAllSubjects" class="uk-text-meta uk-margin-small-bottom" [class.uk-margin-medium-top]="classifiedSubjects && classifiedSubjects.size > 0">
|
||||
Subjects
|
||||
</div>
|
||||
<ng-container *ngTemplateOutlet="subjects_template; context: {customClasses: 'multi-line-ellipsis lines-2', id: 'content'}"></ng-container>
|
||||
<div *ngIf="isLarge" class="uk-text-right uk-margin-small-top">
|
||||
<a (click)="openSubjectsModal()" class="view-more-less-link">View all</a>
|
||||
<ng-container *ngTemplateOutlet="subjects_template; context: {customClasses: (isMobile && viewAllSubjects) ? '' : 'multi-line-ellipsis lines-2', id: 'content'}"></ng-container>
|
||||
<div *ngIf="isLarge && !viewAllSubjects" class="uk-text-right uk-margin-small-top">
|
||||
<a (click)="viewAllSubjectsClicked()" class="view-more-less-link">View all</a>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
|
|
@ -49,7 +49,7 @@ import {properties} from "../../../../environments/environment";
|
|||
</div>
|
||||
</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">
|
||||
<ng-container *ngTemplateOutlet="subjects_template"></ng-container>
|
||||
</div>
|
||||
|
|
@ -94,7 +94,7 @@ import {properties} from "../../../../environments/environment";
|
|||
</div>
|
||||
</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">
|
||||
<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>
|
||||
|
|
@ -104,12 +104,16 @@ import {properties} from "../../../../environments/environment";
|
|||
})
|
||||
|
||||
export class ShowSubjectsComponent {
|
||||
@Input() isMobile: boolean = false;
|
||||
@Input() subjects: string[];
|
||||
@Input() otherSubjects: Map<string, string[]>;
|
||||
@Input() classifiedSubjects: Map<string, string[]>;
|
||||
@Input() eoscSubjects: any[];
|
||||
isLarge: boolean = false;
|
||||
isClassifiedLarge: boolean = false;
|
||||
@Input() viewAllSubjects: boolean = false;
|
||||
@Input() viewAllClassifiedSubjects: boolean = false;
|
||||
@Output() viewAllClicked = new EventEmitter();
|
||||
properties = properties;
|
||||
specialSubjects = [];
|
||||
@ViewChildren("content", { read: ElementRef }) content: QueryList<ElementRef>;
|
||||
|
|
@ -206,4 +210,28 @@ export class ShowSubjectsComponent {
|
|||
this.subjectsByVocabularyModal.alertTitle = "Subjects by Vocabulary";
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- Desktop view -->
|
||||
<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 *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid>
|
||||
|
||||
|
|
@ -303,89 +303,10 @@
|
|||
|
||||
<div id="landing-sections" class="uk-text-small">
|
||||
<ng-container>
|
||||
<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" 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 *ngTemplateOutlet="summary_content"></ng-container>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0">
|
||||
<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-container *ngTemplateOutlet="references_content"></ng-container>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="resultLandingInfo.relatedResults?.length > 0">
|
||||
<div id="all_related" class="landing-section uk-padding uk-padding-remove-horizontal">
|
||||
|
|
@ -394,63 +315,12 @@
|
|||
</ng-container>
|
||||
<ng-container *ngIf="resultLandingInfo.bioentities && bioentitiesNum> 0">
|
||||
<div id="bioentities" class="landing-section uk-padding uk-padding-remove-horizontal">
|
||||
<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-container *ngTemplateOutlet="bioentities_content"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="enermapsId && properties.enermapsURL">
|
||||
<div id="enermaps" class="landing-section uk-padding uk-padding-remove-horizontal">
|
||||
<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-container *ngTemplateOutlet="enermapsTool_content"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="resultLandingInfo && (resultLandingInfo.measure || hasAltMetrics)">
|
||||
|
|
@ -775,19 +645,7 @@
|
|||
<!-- EOSC Services-->
|
||||
<div *ngIf="resultLandingInfo.eoscSubjects?.length > 0 && properties.adminToolsPortalType == 'eosc'
|
||||
&& (!viewAll || viewAll=='egiNotebook')">
|
||||
<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-container *ngTemplateOutlet="compatibleEOSC_content"></ng-container>
|
||||
</div>
|
||||
|
||||
<div *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0 && (!viewAll || viewAll=='sdg')">
|
||||
|
|
@ -821,11 +679,12 @@
|
|||
</div>
|
||||
|
||||
<!-- 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">
|
||||
<div class="uk-container uk-section">
|
||||
<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>
|
||||
<span class="uk-margin-xsmall-left uk-text-small uk-text-uppercase uk-text-bolder">{{resultLandingInfo.hostedBy_collectedFrom[0].accessRight}}</span>
|
||||
</div>
|
||||
|
|
@ -844,68 +703,70 @@
|
|||
<showIdentifiers [identifiers]="resultLandingInfo.identifiers" [showViewAll]="true"></showIdentifiers>
|
||||
</div>
|
||||
<!-- SDGs -->
|
||||
<div *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0 && (!viewAll || viewAll=='sdg')" class="uk-margin-small-top">
|
||||
<sdg [subjects]="resultLandingInfo.sdg" (viewAllClicked)="viewAll=$event" (feedbackClicked)="feedbackClicked('Sustainable Development Goals (SDGs)')"></sdg>
|
||||
<div *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0 && !viewAllMobile" class="uk-margin-small-top">
|
||||
<sdg [subjects]="resultLandingInfo.sdg" (suggestClicked)="suggestMobileClicked($event)"
|
||||
(viewAllClicked)="viewAllMobile=$event; openFsModal(sdgsFsModal, 'Sustainable Development Goals (SDGs)')"></sdg>
|
||||
</div>
|
||||
<!-- FOS -->
|
||||
<div *ngIf="resultLandingInfo.fos && resultLandingInfo.fos.length > 0 && (!viewAll || viewAll=='fos')" class="uk-margin-small-top">
|
||||
<fos [subjects]="resultLandingInfo.fos" (viewAllClicked)="viewAll=$event" (feedbackClicked)="feedbackClicked('Fields of Science and Technology (FOS)')"></fos>
|
||||
<div *ngIf="resultLandingInfo.fos && resultLandingInfo.fos.length > 0 && !viewAllMobile" class="uk-margin-small-top">
|
||||
<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 class="uk-section uk-margin-top uk-text-large uk-text-empashis uk-text-bold">
|
||||
<hr>
|
||||
<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>
|
||||
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
|
||||
</div>
|
||||
<hr>
|
||||
</ng-container>
|
||||
<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>
|
||||
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
|
||||
</div>
|
||||
<hr>
|
||||
</ng-container>
|
||||
<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>
|
||||
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
|
||||
</div>
|
||||
<hr>
|
||||
</ng-container>
|
||||
<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>
|
||||
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
|
||||
</div>
|
||||
<hr>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="enermapsId && properties.enermapsURL">
|
||||
<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'
|
||||
<ng-container *ngIf="resultLandingInfo.eoscSubjects?.length > 0 && properties.adminToolsPortalType == 'eosc'
|
||||
&& (!viewAll || viewAll=='egiNotebook')">
|
||||
<div class="uk-flex uk-flex-middle uk-flex-between">
|
||||
<span>Compatible EOSC Services</span>
|
||||
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0 && (!viewAll || viewAll=='fundedBy')">
|
||||
<div class="uk-flex uk-flex-middle uk-flex-between">
|
||||
<span>Funded by</span>
|
||||
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
|
||||
</div>
|
||||
<hr>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0 && !noCommunities && (!viewAll || viewAll=='relatedTo')">
|
||||
<div class="uk-flex uk-flex-middle uk-flex-between">
|
||||
<span>Related to Research Communities</span>
|
||||
<div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(compatibleEOSCFsModal, 'Compatible EOSC Services'); onSelectActiveTab('summary')">
|
||||
<span>Compatible EOSC Services</span>
|
||||
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0 && (!viewAll || viewAll=='fundedBy')">
|
||||
<div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(fundedByFsModal, 'Funded by'); onSelectActiveTab('summary')">
|
||||
<span>Funded by</span>
|
||||
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
|
||||
</div>
|
||||
<hr>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0 && !noCommunities && (!viewAll || viewAll=='relatedTo')">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<hr>
|
||||
|
|
@ -940,6 +801,71 @@
|
|||
</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>
|
||||
</div>
|
||||
|
||||
|
|
@ -981,14 +907,14 @@
|
|||
<ng-container *ngTemplateOutlet="organizations_template; context: { threshold: resultLandingInfo.organizations.length}"></ng-container>
|
||||
</modal-alert>
|
||||
|
||||
<modal-alert *ngIf="resultLandingInfo?.description" #descriptionModal
|
||||
<modal-alert *ngIf="!isMobile && resultLandingInfo?.description" #descriptionModal
|
||||
[large]="true">
|
||||
<div [innerHTML]="resultLandingInfo.description"></div>
|
||||
</modal-alert>
|
||||
|
||||
<!--<modal-alert *ngIf="resultLandingInfo && resultLandingInfo.sdg?.length > 0"-->
|
||||
<!-- #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">
|
||||
</sdg-fos-suggest>
|
||||
<!--</modal-alert>-->
|
||||
|
|
@ -1043,3 +969,174 @@
|
|||
</paging-no-load>
|
||||
</div>
|
||||
</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>
|
||||
|
|
@ -26,7 +26,9 @@ import {UserManagementService} from "../../services/user-management.service";
|
|||
import {OpenaireEntities} from "../../utils/properties/searchFields";
|
||||
import {Option} from "../../sharedComponents/input/input.component";
|
||||
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 {LayoutService} from "../../dashboard/sharedComponents/sidebar/layout.service";
|
||||
|
||||
declare var ResizeObserver;
|
||||
|
||||
|
|
@ -142,9 +144,24 @@ export class ResultLandingComponent {
|
|||
|
||||
// public shouldSticky: boolean = true;
|
||||
|
||||
public tabMobile: string = "";
|
||||
public viewAllMobile: string = "";
|
||||
public viewAll: string = "";
|
||||
@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 rightSidebarOffcanvasClicked: boolean = false;
|
||||
|
|
@ -163,10 +180,14 @@ export class ResultLandingComponent {
|
|||
private cdr: ChangeDetectorRef,
|
||||
private _location: Location,
|
||||
private indexInfoService: IndexInfoService,
|
||||
private userManagementService: UserManagementService) {
|
||||
private userManagementService: UserManagementService,
|
||||
private layoutService: LayoutService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
|
||||
this.isMobile = isMobile;
|
||||
}));
|
||||
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
|
||||
this.isLoggedIn = !!user;
|
||||
}, 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() {
|
||||
this.organizationsModal.cancelButton = false;
|
||||
this.organizationsModal.okButton = false;
|
||||
|
|
@ -911,18 +952,60 @@ export class ResultLandingComponent {
|
|||
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) {
|
||||
if(value == 'sdg') {
|
||||
this.sdgFosSuggest.subjects=this.resultLandingInfo.sdg;
|
||||
this.sdgFosSuggest.subjectType="sdg";
|
||||
} else if(value == 'fos') {
|
||||
console.log(this.resultLandingInfo.fos);
|
||||
this.sdgFosSuggest.subjects=this.resultLandingInfo.fos;
|
||||
this.sdgFosSuggest.subjectType="fos";
|
||||
}
|
||||
this.sdgFosSuggest.openSelectionModal();
|
||||
}
|
||||
|
||||
public viewAllDescriptionClicked() {
|
||||
if(this.isMobile) {
|
||||
this.summaryFsModal.title += " - Abstract";
|
||||
this.summaryFsModal.back = true;
|
||||
this.viewAllMobile = "description";
|
||||
} else {
|
||||
this.openDescriptionModal();
|
||||
}
|
||||
}
|
||||
|
||||
public openDescriptionModal() {
|
||||
this.descriptionModal.alertFooter = false;
|
||||
this.descriptionModal.alertTitle = "Abstract";
|
||||
|
|
@ -948,6 +1031,13 @@ export class ResultLandingComponent {
|
|||
// 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() {
|
||||
this.fosSelectionModal.cancelButton = false;
|
||||
this.fosSelectionModal.alertTitle = "Please select FOS that are the most relevant for this publication.";
|
||||
|
|
@ -957,4 +1047,7 @@ export class ResultLandingComponent {
|
|||
public sdgModalOutput() {
|
||||
this.sdgFosSuggest.sdgModalOutput();
|
||||
}*/
|
||||
public closeFsModal(fsModal: FullScreenModalComponent) {
|
||||
fsModal.cancel();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ import {InputModule} from "../../sharedComponents/input/input.module";
|
|||
import {EGIDataTransferModule} from "../../utils/dataTransfer/transferData.module";
|
||||
import {RecaptchaModule} from 'ng-recaptcha';
|
||||
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({
|
||||
imports: [
|
||||
|
|
@ -47,7 +48,7 @@ import {SdgFosSuggestModule} from '../landing-utils/sdg-fos-suggest/sdg-fos-sugg
|
|||
DeletedByInferenceModule, ShowAuthorsModule, HelperModule, ResultLandingUtilsModule, AlertModalModule,
|
||||
AnnotationModule, LandingHeaderModule, NoLoadPaging, ResultPreviewModule, FeedbackModule, TabsModule, LoadingModule,
|
||||
OrcidModule, MatFormFieldModule, MatSelectModule, IconsModule, InputModule, EGIDataTransferModule, RecaptchaModule,
|
||||
SdgFosSuggestModule
|
||||
SdgFosSuggestModule, FullScreenModalModule
|
||||
],
|
||||
declarations: [
|
||||
ResultLandingComponent
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ declare var ResizeObserver;
|
|||
<div class="uk-modal-dialog">
|
||||
<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">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -57,6 +57,10 @@ export class FullScreenModalComponent implements AfterViewInit, OnDestroy {
|
|||
@Input() classTitle: string = "uk-background-primary uk-light";
|
||||
@Input() classBody: string = 'uk-container-large';
|
||||
back: boolean = false;
|
||||
/**
|
||||
* if the value is true then on ok clicked, modal will stay open.
|
||||
*/
|
||||
public stayOpenInBack: boolean = false;
|
||||
title: string;
|
||||
okButton: boolean = false;
|
||||
okButtonText = 'OK';
|
||||
|
|
@ -129,12 +133,21 @@ export class FullScreenModalComponent implements AfterViewInit, OnDestroy {
|
|||
UIkit.modal(this.modal.nativeElement).show();
|
||||
HelperFunctions.scroll();
|
||||
}
|
||||
|
||||
|
||||
cancel() {
|
||||
UIkit.modal(this.modal.nativeElement).hide();
|
||||
HelperFunctions.scroll();
|
||||
this.cancelEmitter.emit();
|
||||
}
|
||||
|
||||
backClicked() {
|
||||
if(this.stayOpenInBack) {
|
||||
HelperFunctions.scroll();
|
||||
this.cancelEmitter.emit();
|
||||
} else {
|
||||
this.cancel();
|
||||
}
|
||||
}
|
||||
|
||||
ok() {
|
||||
UIkit.modal(this.modal.nativeElement).hide();
|
||||
|
|
|
|||
Loading…
Reference in New Issue