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

[Explore & Library & Common Assets | new-theme]: Updates related to result landing redesign. 

1. fos.component.css: Removed rule "mark.highlighted" and ".custom-bottom-border" updated with variables.
2. feedback.component.html: Updated width of email input for small screens.
3. parsingFunctions.class.ts: In "parseAllSubjects()" method, comment otherSubjects and push them in subjects.
4. showIdentifiers.component.ts: Updated classes in <modal-alert>.
5. showSubjects.component.ts: "Subjects by Vocabulary" and "Subjects" separated & view more functionality added in "Subjects".
6. resultLanding.component:
	a. Added button and modal for <addThis> (share in social media).
	b. View more functionality for related organizations.
	c. Graph and feedback section sticky.
	d. Added checks for summary tab and right sidebar.
	e. In small screens made right sidebar offcanvas.
7. resultLanding.module.ts: Updated iconsService.registerIcons to register link, graph, quotes.
8. orcid-work.component.ts: Added visually-hidden in icon buttons for landing | Updated classes in <modal-alert> and use buttons of alert instead of custom.
9. no-load-paging.component.ts: Use new component <results-and-pages> for results and pages number and set uk-flex-right in <paging-no-load> (default is center).
10. cookie-law.css: In ".cookie-law-wrapper" increased z-index from 100 to 1000.
11. showAuthors.component.ts: Removed shadow from search button | Updated classes in <modal-alert>.
12. icons.ts: Added "quotes" svg.
13. alert.ts: Updated modal to have header - body - footer (theme was updated too) | classTitle input set default to "uk-background-primary-opacity" | @Input() overflowBody: boolean = true; added to add overflow in body.
14. paging.module.ts: Added ResultsAndPagesNumComponent in declarations and exports.
15. pagingFormatter.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them.
16. pagingFormatterNoLoad.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them | Set customClasses default to "uk-flex-center".
17. tabs.component.ts: Updated margins/ paddings | Added @Input() offsetForSticky:number=0; to compare with the top distance for isSticky.
18. resultsAndPagesNum.component.ts: [NEW] Component to show number of results, number of pages and current page (used in paging).
19. landing-utils.css:
	a. Moved variables in .landing instead of :root.
	b. Added variable --landing-light-color-rgb: var(--light-color-rgb);
	c. Added glass filter in #graph_and_feedback.
	d. Set z-index of #main-tabs-div and #graph_and_feedback to 979 (default 980 caused problems with metrics box).
	e. Added padding-bottom: 80px and margin-top: 80px in .landing-sections.
	f. Added top rule for #right-sidebar-switcher.
	g. Added custom width rules for .landing-left-sidebar-width.
20. css-rules.txt: Added cookie-law-wrapper: 1000 info for z-index
21. explore-custom.css: Added variable --background-primary-rgb: var(--explore-color-rgb);
This commit is contained in:
Konstantina Galouni 2022-04-20 17:40:18 +03:00
parent 8b7143c8cb
commit 53d05bf54f
18 changed files with 472 additions and 324 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
landingPages/feedback/feedback.component.html
View File

@ -52,7 +52,7 @@
</div>
<div>
<div class="uk-grid uk-flex-top" uk-grid>
<div input class="uk-width-expand" [formInput]="form.get('email')" placeholder="E-mail">
<div input class="uk-width-expand@m uk-width-1-1" [formInput]="form.get('email')" placeholder="E-mail">
<span note>Please leave us your E-mail to notify you about the reporting status.</span>
</div>
<div class="uk-width-auto">

17
landingPages/landing-utils/parsingFunctions.class.ts
View File

@ -641,14 +641,19 @@ export class ParsingFunctions {
}
classifiedSubjects.get(this.notebook_label).push(this.notebook_value);
} else {
if (otherSubjects == undefined) {
otherSubjects = new Map<string, string[]>();
}
// if (otherSubjects == undefined) {
// otherSubjects = new Map<string, string[]>();
// }
//
// if (!otherSubjects.has(subject.classname)) {
// otherSubjects.set(subject.classname, new Array<string>());
// }
// otherSubjects.get(classname).push(content);
if (!otherSubjects.has(subject.classname)) {
otherSubjects.set(subject.classname, new Array<string>());
if (subjects == undefined) {
subjects = new Array<string>();
}
otherSubjects.get(classname).push(content);
subjects.push(content);
}
}
}

5
landingPages/landing-utils/showIdentifiers.component.ts
View File

@ -47,9 +47,8 @@ import {properties} from "../../../../environments/environment";
<a (click)="openIdentifiersModal()">View all</a>
</div>
<modal-alert #identifiersModal [classTitle]="'landing-modal-header'"
[classBody]="'landing-modal uk-padding-remove'">
<div class="uk-padding uk-padding-remove-top uk-text-small">
<modal-alert #identifiersModal>
<div class="uk-text-small">
<ng-container *ngTemplateOutlet="identifiers_template; context: { modal: true}"></ng-container>
</div>
</modal-alert>

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

@ -1,46 +1,69 @@
import {Component, Input} from '@angular/core';
import {
ChangeDetectorRef,
Component,
ElementRef,
HostListener,
Input,
QueryList,
ViewChild,
ViewChildren
} from '@angular/core';
import {properties} from "../../../../environments/environment";
@Component({
selector: 'showSubjects',
template: `
<div class="uk-text-muted">
Subjects
</div>
<div class="uk-margin-small-top">
<div>
<ng-container *ngIf="classifiedSubjects && classifiedSubjects.size > 0">
<div *ngFor="let key of getKeys(classifiedSubjects)" style="line-height: 20px">
<span uk-icon="tag"></span>
<span class="uk-text-bold"> {{key}}: </span>
<ng-container *ngFor="let subject of classifiedSubjects.get(key)">
<span class="uk-display-inline-block label-classified">
<span *ngIf="specialSubjects.indexOf(subject) == -1 ">{{subject}}</span>
<a class="uk-link-reset" *ngIf="specialSubjects.indexOf(subject) != -1"
[routerLink]=" properties.searchLinkToAdvancedResults"
[queryParams]="getSubjectParameter(subject)" >
{{subject}}
</a>
</span>
</ng-container>
</div>
</ng-container>
<div *ngIf="(subjects && subjects.length > 0) || (otherSubjects && otherSubjects.size > 0)" class="uk-text-break">
<span uk-icon="tag"></span>
<span class="uk-text-bold"> free text keywords: </span>
<span *ngIf="subjects && subjects.length > 0">{{subjects.join(', ')}}</span>
<span *ngIf="(subjects && subjects.length > 0) && (otherSubjects && otherSubjects.size > 0)">, </span>
<span *ngIf="otherSubjects && otherSubjects.size > 0">
<span *ngFor="let key of getKeys(otherSubjects); let i=index">
<span *ngIf="otherSubjects.get(key).length > 0">
<span>{{otherSubjects.get(key).join(', ')}}</span>
<span *ngIf="i < (otherSubjects.size - 1)">, </span>
</span>
</span>
</span>
</div>
template: `
<ng-container *ngIf="classifiedSubjects && classifiedSubjects.size > 0">
<div class="uk-text-meta uk-margin-small-bottom">
Subjects by Vocabulary
</div>
</div>
<div *ngFor="let key of getKeys(classifiedSubjects)" class="uk-grid uk-grid-small uk-flex-middle" uk-grid>
<span>
<span uk-icon="tag"></span>
<span class="uk-text-bold uk-margin-small-right"> {{key}}: </span>
</span>
<span *ngFor="let subject of classifiedSubjects.get(key)" class="uk-width-auto uk-flex">
<span class="uk-border-rounded uk-label uk-label-small uk-label-primary uk-text-truncate">
<span *ngIf="specialSubjects.indexOf(subject) == -1 ">{{subject}}</span>
<a class="uk-link-reset" *ngIf="specialSubjects.indexOf(subject) != -1"
[routerLink]=" properties.searchLinkToAdvancedResults"
[queryParams]="getSubjectParameter(subject)">
{{subject}}
</a>
</span>
</span>
</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">
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()">View all</a>
</div>
</ng-container>
<ng-template #subjects_template let-customClasses="customClasses" let-id="id">
<div class="uk-text-break" [ngClass]="customClasses">
<p *ngIf="subjects && subjects.length > 0"><span #content [id]="id">{{subjects.join(', ')}}</span></p>
<!-- <span *ngIf="(subjects && subjects.length > 0) && (otherSubjects && otherSubjects.size > 0)">, </span>-->
<!-- <span *ngIf="otherSubjects && otherSubjects.size > 0">-->
<!-- <span *ngFor="let key of getKeys(otherSubjects); let i=index">-->
<!-- <span *ngIf="otherSubjects.get(key).length > 0">-->
<!-- <span>{{otherSubjects.get(key).join(', ')}}</span>-->
<!-- <span *ngIf="i < (otherSubjects.size - 1)">, </span>-->
<!-- </span>-->
<!-- </span>-->
<!-- </span>-->
</div>
</ng-template>
<modal-alert #subjectsModal>
<div class="uk-text-small">
<ng-container *ngTemplateOutlet="subjects_template"></ng-container>
</div>
</modal-alert>
`
})
@ -48,10 +71,18 @@ export class ShowSubjectsComponent {
@Input() subjects: string[];
@Input() otherSubjects: Map<string, string[]>;
@Input() classifiedSubjects: Map<string, string[]>;
isLarge: boolean = false;
properties = properties;
specialSubjects = [];
@ViewChildren("content", { read: ElementRef }) content: QueryList<ElementRef>;
@ViewChild('subjectsModal') subjectsModal;
constructor() {
@HostListener('window:resize', ['$event'])
onResize(event) {
this.checkLarge();
}
constructor(private cdr: ChangeDetectorRef) {
if(properties.dashboard == "explore") {
this.specialSubjects = [
// "Physics::Optics",
@ -79,10 +110,30 @@ export class ShowSubjectsComponent {
ngOnInit() {
}
ngAfterViewInit() {
this.checkLarge();
}
checkLarge() {
let overflow = 42;
if(typeof document !== "undefined" && this.content) {
let element = this.content.find(content => content.nativeElement.id === "content");
this.isLarge = (element && element.nativeElement.offsetHeight > overflow);
this.cdr.detectChanges();
}
}
public getKeys(map) {
return Array.from(map.keys());
}
getSubjectParameter(param){
return {'f0':'resultsubject','fv0':'"' +(param)+'"', size:50};
}
public openSubjectsModal() {
this.subjectsModal.cancelButton = false;
this.subjectsModal.okButton = false;
this.subjectsModal.alertTitle = "Subjects";
this.subjectsModal.open();
}
}

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

@ -1,14 +1,22 @@
<div id="tm-main" class="landing uk-section uk-padding-remove-top tm-middle">
<div id="tm-main" class="landing uk-section uk-padding-remove tm-middle">
<div class="tm-main">
<div *ngIf="errorMessage.length > 0 || showLoading" class="landing-background-default-color">
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-margin-large-top"
role="alert">{{errorMessage}}</div>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
</div>
<div *ngIf="resultLandingInfo" class="publication">
<div *ngIf="!showFeedback" class="uk-grid">
<!-- left box - actions -->
<div class="uk-width-small landing-background-light-color">
<div class="uk-flex uk-flex-column uk-flex-between uk-flex-center landing-column-height landing-left-column-border uk-sticky"
<div class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color">
<div class="uk-flex uk-flex-column uk-flex-between uk-flex-center landing-sidebar-height uk-sticky"
uk-sticky="bottom: true" [attr.offset]="offset">
<div [class.uk-hidden]="!hasAltMetrics && !metricsCalculated"
class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between">
<!-- [class.uk-hidden]="!hasAltMetrics && !metricsCalculated"-->
<div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between">
<ng-container *ngIf="resultLandingInfo && (hasAltMetrics || hasMetrics)">
<metrics *ngIf="hasMetrics" class="uk-margin-bottom"
[pageViews]="pageViews"
@ -23,11 +31,15 @@
<div class="uk-text-meta">Actions</div>
<ul class="uk-list">
<!-- Share -->
<!-- <li>-->
<!-- social-->
<!-- &lt;!&ndash; TODO: MOVE SOCIAL TO MODAL OR DROP!!!! &ndash;&gt;-->
<!-- &lt;!&ndash; <addThis></addThis>&ndash;&gt;-->
<!-- </li>-->
<li class="uk-text-center">
<a (click)="openAddThisModal()"
[title]="'Share this '+getTypeName() + ' in your social networks'"
[attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'">
<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
<icon name="share" visuallyHidden="share"></icon>
</span>
</a>
</li>
<!-- Link to -->
<li *ngIf="isRouteAvailable('participate/direct-claim')" class="uk-text-center"
[title]="'Link this '+getTypeName()+' to...'"
@ -35,7 +47,7 @@
<a [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'project'])"
routerLinkActive="router-link-active" routerLink="/participate/direct-claim">
<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
<icon name="link"></icon>
<icon name="link" visuallyHidden="link"></icon>
</span>
</a>
</li>
@ -45,14 +57,7 @@
[title]="'Cite this '+getTypeName()"
[attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'">
<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
<svg width="20"
height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
data-svg="quote-right">
<path d="M17.27,7.79 C17.27,9.45 16.97,10.43 15.99,12.02 C14.98,13.64 13,15.23 11.56,15.97 L11.1,15.08 C12.34,14.2 13.14,13.51 14.02,11.82 C14.27,11.34 14.41,10.92 14.49,10.54 C14.3,10.58 14.09,10.6 13.88,10.6 C12.06,10.6 10.59,9.12 10.59,7.3 C10.59,5.48 12.06,4 13.88,4 C15.39,4 16.67,5.02 17.05,6.42 C17.19,6.82 17.27,7.27 17.27,7.79 L17.27,7.79 Z"></path>
<path d="M8.68,7.79 C8.68,9.45 8.38,10.43 7.4,12.02 C6.39,13.64 4.41,15.23 2.97,15.97 L2.51,15.08 C3.75,14.2 4.55,13.51 5.43,11.82 C5.68,11.34 5.82,10.92 5.9,10.54 C5.71,10.58 5.5,10.6 5.29,10.6 C3.47,10.6 2,9.12 2,7.3 C2,5.48 3.47,4 5.29,4 C6.8,4 8.08,5.02 8.46,6.42 C8.6,6.82 8.68,7.27 8.68,7.79 L8.68,7.79 Z"></path>
</svg>
<icon name="quotes" visuallyHidden="cite"></icon>
</span>
</a>
</li>
@ -84,12 +89,38 @@
</div>
<!-- center box-->
<div *ngIf="resultLandingInfo" class="uk-width-expand uk-padding-remove landing-background-default-color">
<!-- uk-sticky="bottom: true; offset: 90vh;"-->
<div class="uk-padding-large uk-padding-remove-vertical uk-margin-medium-top">
<div *ngIf="resultLandingInfo" class="uk-width-expand uk-padding-remove uk-margin-large-left uk-margin-large-right landing-background-default-color">
<ng-template #graph_and_feedback_template>
<div class="uk-flex uk-margin-small-top uk-margin-small-bottom">
<!-- Last Index Info-->
<div class="uk-width-2-3@m uk-width-1-2 graph">
<icon name="graph" customClass="uk-text-primary"></icon>
<span class="uk-margin-small-left uk-text-baseline uk-text-meta">
Powered by <a href="https://graph.openaire.eu" target="_blank" class="uk-text-primary">OpenAIRE Research Graph</a>
</span>
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta">
. Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
</span>
</div>
<!--Feedback-->
<div class="uk-width-expand uk-text-right">
<span class="uk-text-meta uk-text-xsmall">Anything wrong?</span>
<a (click)="showFeedback = true; scroll()" class="uk-text-xsmall"> Report an Issue</a>
</div>
</div>
</ng-template>
<div #graph_and_feedback id="graph_and_feedback" class="uk-text-xsmall uk-visible@m" uk-sticky="bottom: true;" [attr.offset]="calcGraphOffset()">
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div>
<div class="uk-margin-medium-top">
<!-- schema.org-->
<schema2jsonld *ngIf="resultLandingInfo.record" [data]=resultLandingInfo.record
[URL]="canonicalUrl"></schema2jsonld>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
<span *ngIf="resultLandingInfo.deletedByInferenceIds" class="uk-text-primary uk-flex uk-flex-middle">
<icon flex="true" ratio="0.8" name="auto_awesome_motion"></icon>
<a (click)="openDeletedByInference()" class="uk-text-primary uk-text-small uk-margin-small-left">
@ -144,14 +175,12 @@
</div>
</div>
<div id="main-tabs-div" class="uk-padding-large uk-padding-remove-vertical"
uk-sticky="bottom: true; offset: 0"
<div id="main-tabs-div"
uk-sticky="bottom: true; media: @m" [attr.offset]="offset"
cls-active="active">
<div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
<div [ngStyle]="{'padding-top': offset+'px'}">
<showTitle *ngIf="stickyHeader" [titleName]="resultLandingInfo.title" classNames="uk-margin-remove-bottom"></showTitle>
</div>
<my-tabs (selectedActiveTab)="onSelectActiveTab($event)" [(isSticky)]="stickyHeader">
<showTitle *ngIf="stickyHeader" [titleName]="resultLandingInfo.title" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>
<my-tabs (selectedActiveTab)="onSelectActiveTab($event)" [offsetForSticky]="offset" [(isSticky)]="stickyHeader">
<my-tab tabTitle="Summary" [tabId]="'summary'" [active]="true"></my-tab>
<my-tab *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0"
[tabTitle]="'References'" [tabId]="'references'"
@ -172,11 +201,11 @@
</div>
</div>
<div id="landing-sections" class="uk-padding-large uk-padding-remove-vertical">
<div id="landing-sections" class="uk-text-small">
<ng-container>
<div id="summary" class="landing-section 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-alert uk-alert-primary" role="alert">
<div class="uk-animation-fade uk-text-meta uk-text-large">
No summary information available
</div>
</div>
@ -203,49 +232,29 @@
<!-- 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">Related {{openaireEntities.ORGANIZATIONS}}</div>
<ul class="uk-list organizations uk-margin-remove-top">
<li *ngFor="let organization of (showAll?resultLandingInfo.organizations:resultLandingInfo.organizations.slice(0,3))">
<a [routerLink]="properties.searchLinkToOrganization.split('?')[0]" [queryParams]="{organizationId: organization.id}">
{{(organization.name ? organization.name : (organization.shortname?organization.shortname:'[No title available]'))}}
<span *ngIf="!organization.name && organization.shortname">({{organization.shortname}})</span>
</a>
<div *ngIf="organization.country && !organization.country.toLowerCase().includes('unknown')">{{organization.country}}</div>
</li>
</ul>
<div *ngIf="!showAll && resultLandingInfo.organizations.length > 3" class="uk-text-center">
<a (click)="showAll = !showAll;">
<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();">
View more
</a>
</div>
<div *ngIf="showAll && resultLandingInfo.organizations.length > 3" class="uk-text-center">
<a (click)="showAll = !showAll;">View less</a>
<div *ngIf="viewAllOrganizations && lessBtnOrganizations" class="uk-text-center">
<a (click)="viewAllOrganizations = !viewAllOrganizations; lessBtnOrganizations=false;">View less</a>
</div>
</div>
</div>
<div *ngIf="hasSecondaryInfo" class="uk-width-1-3@m uk-width-1-1 right-column uk-padding-remove">
<div *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0 ||
resultLandingInfo.contexts && resultLandingInfo.contexts.length >0">
</div>
</div>
<div *ngIf="!hasPrimaryInfo && !hasSecondaryInfo"
class="uk-width-expand uk-padding">
<div class="uk-animation-fade uk-alert uk-alert-primary" role="alert">
No summary information available
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0">
<div id="references" class="landing-section uk-padding uk-padding-remove-horizontal">
<no-load-paging *ngIf="resultLandingInfo.references.length > 1.5*pageSize" [type]="'references'"
(pageChange)="updateReferencesPage($event)"
[page]="referencesPage" [pageSize]="1.5*pageSize"
<results-and-pages *ngIf="resultLandingInfo.references.length > pageSize" [type]="'references'"
[page]="referencesPage" [pageSize]="pageSize"
[totalResults]="resultLandingInfo.references.length">
</no-load-paging>
</results-and-pages>
<div
*ngFor="let item of resultLandingInfo.references.slice((referencesPage-1)*1.5*pageSize, referencesPage*1.5*pageSize)">
*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">
@ -259,11 +268,11 @@
</ng-container>
</p>
</div>
<no-load-paging *ngIf="resultLandingInfo.references.length > 1.5*pageSize" [type]="'references'"
<paging-no-load *ngIf="resultLandingInfo.references.length > pageSize"
(pageChange)="updateReferencesPage($event)"
[page]="referencesPage" [pageSize]="1.5*pageSize"
[currentPage]="referencesPage" [size]="pageSize"
[totalResults]="resultLandingInfo.references.length">
</no-load-paging>
</paging-no-load>
</div>
</ng-container>
<ng-container *ngIf="resultLandingInfo.relatedResults?.length > 0">
@ -273,32 +282,33 @@
</ng-container>
<ng-container *ngIf="resultLandingInfo.bioentities && bioentitiesNum> 0">
<div id="bioentities" class="landing-section uk-padding uk-padding-remove-horizontal">
<no-load-paging *ngIf="bioentitiesNum > 2*pageSize" [type]="'bioentities'"
(pageChange)="updateBioentitiesPage($event)"
<results-and-pages *ngIf="bioentitiesNum > 2*pageSize" [type]="'bioentities'"
[page]="bioentitiesPage" [pageSize]="2*pageSize"
[totalResults]="bioentitiesNum">
</no-load-paging>
<div class="uk-child-width-1-4@s uk-child-width-1-2 bioentities-buttons" uk-grid>
</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)">
<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" class="custom-external"
[title]="key" *ngIf="keyIn && resultLandingInfo.bioentities.get(key).get(keyIn)">
<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>
<no-load-paging *ngIf="bioentitiesNum > 2*pageSize" [type]="'bioentities'"
<paging-no-load *ngIf="bioentitiesNum > 2*pageSize"
(pageChange)="updateBioentitiesPage($event)"
[page]="bioentitiesPage" [pageSize]="2*pageSize"
[currentPage]="bioentitiesPage" [size]="2*pageSize"
[totalResults]="bioentitiesNum">
</no-load-paging>
</paging-no-load>
</div>
</ng-container>
<ng-container *ngIf="enermapsId && properties.enermapsURL">
@ -332,45 +342,54 @@
</div>
</ng-container>
</div>
<div class="uk-text-xsmall uk-hidden@m"><ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container></div>
<div class="uk-margin-small-top uk-flex" uk-sticky="bottom: true" [attr.offset]="offset">
<!-- Last Index Info-->
<div class="uk-width-2-3@m uk-width-1-2">
<img src="assets/common-assets/graph.svg" style="opacity: 0.4; width:18px; height:20px" loading="lazy" alt="graph">
<span class="uk-margin-small-left uk-text-baseline uk-text-meta uk-text-xsmall">
Powered by <a href="https://graph.openaire.eu" target="_blank" class="graph">OpenAIRE Research Graph</a>
</span>
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta uk-text-xsmall">
. Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
</span>
</div>
<!--Feedback-->
<div class="uk-width-expand uk-text-right">
<span class="uk-text-meta uk-text-xsmall">Anything wrong?</span>
<a (click)="showFeedback = true; scroll()" class="uk-text-xsmall"> Report an Issue</a>
</div>
</div>
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']"></helper>
</div>
<!-- right box-->
<div *ngIf="resultLandingInfo"
class="uk-width-1-3 uk-width-1-4@l uk-padding-remove landing-background-grey-color uk-text-small" [class.uk-animation-right]="viewAll">
<div class="uk-sticky uk-overflow-auto landing-column-height" uk-sticky="bottom: true" [attr.offset]="offset">
<ng-container *ngIf="resultLandingInfo && hasRightSidebarInfo">
<div id="right-sidebar-switcher" uk-toggle href="#right-column-offcanvas"
class="offcanvas-switcher uk-flex uk-flex-center uk-flex-middle uk-hidden@m"
(click)="rightSidebarOffcanvasClicked = true;">
<icon name="more" ratio="1.5" customClass="uk-text-primary" flex="true" visuallyHidden="sidebar"></icon>
</div>
<div id="right-column-offcanvas" class="uk-offcanvas offcanvas" uk-offcanvas="flip: true; overlay: true;">
<div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close offcanvas-close uk-close uk-icon" type="button">
<icon name="close" ratio="1.5" visuallyHidden="close"></icon>
</button>
<div *ngIf="rightSidebarOffcanvasClicked" class="uk-padding">
<ng-container *ngTemplateOutlet="right_column"></ng-container>
</div>
</div>
</div>
<div *ngIf="!rightSidebarOffcanvasClicked" class="uk-width-1-3 uk-width-1-4@l uk-padding-remove landing-background-grey-color uk-text-small uk-visible@m"
[class.uk-animation-right]="viewAll">
<div class="uk-sticky uk-overflow-auto landing-sidebar-height" uk-sticky="bottom: true" [attr.offset]="offset">
<ng-container *ngTemplateOutlet="right_column"></ng-container>
</div>
</div>
<ng-template #right_column>
<div class="uk-margin-medium-top uk-list uk-list-large uk-padding uk-padding-remove-vertical" [class.uk-list-divider]="!viewAll">
<!-- EGI Notebook-->
<!-- EGI Notebook-->
<div *ngIf="resultLandingInfo.showEgiNotebookButton && properties.adminToolsPortalType == 'explore'
&& (properties.environment == 'beta' || properties.environment == 'development') && (!viewAll || viewAll=='egiNotebook')">
&& (properties.environment == 'beta' || properties.environment == 'development') && (!viewAll || viewAll=='egiNotebook')">
<a class="uk-link-text uk-text-bold custom-external"
target="_blank" [href]="properties.egiNotebookLink">
<!-- <span class="uk-icon-button uk-icon">-->
<img src="assets/common-assets/eosc-logo.png"
loading="lazy" alt="eosc_logo" style="width:27px; height:27px">
<!-- </span>-->
<!-- <span class="uk-icon-button uk-icon">-->
<img src="assets/common-assets/eosc-logo.png"
loading="lazy" alt="eosc_logo" style="width:27px; height:27px">
<!-- </span>-->
<span class="uk-margin-small-left uk-text-uppercase"><u>EOSC SERVICE: EGI NOTEBOOK</u></span>
</a>
</div>
<!-- <hr *ngIf="resultLandingInfo.showEgiNotebookButton && properties.adminToolsPortalType == 'explore'-->
<!-- && (properties.environment == 'beta' || properties.environment == 'development')">-->
<!-- <hr *ngIf="resultLandingInfo.showEgiNotebookButton && properties.adminToolsPortalType == 'explore'-->
<!-- && (properties.environment == 'beta' || properties.environment == 'development')">-->
<div *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0 && (!viewAll || viewAll=='sdg')">
<sdg [subjects]="resultLandingInfo.sdg" (viewAllClicked)="viewAll=$event"></sdg>
</div>
@ -381,73 +400,39 @@
<div *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0 && (!viewAll || viewAll=='fundedBy')">
<fundedBy [fundedByProjects]="resultLandingInfo.fundedByProjects" (viewAllClicked)="viewAll=$event"></fundedBy>
</div>
<!-- <hr *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0">-->
<!-- <hr *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0">-->
<!-- Communities -->
<div *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0 && !noCommunities && (!viewAll || viewAll=='relatedTo')">
<relatedTo [contexts]="resultLandingInfo.contexts" [viewAll]="viewAll=='relatedTo'"
(viewAllClicked)="viewAll=$event" (noCommunities)="noCommunities = true"></relatedTo>
</div>
<!-- <hr *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0"-->
<!-- <hr *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0"-->
<!-- Download From -->
<div *ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0 && (!viewAll || viewAll=='availableOn')">
<!-- <div class="uk-inline">-->
<!-- <button class="uk-button uk-button-default" type="button">Click</button>-->
<!-- <div uk-dropdown="mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>-->
<!-- </div>-->
<!-- <div class="uk-inline">-->
<!-- <button class="uk-button uk-button-default" type="button">Click</button>-->
<!-- <div uk-dropdown="mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>-->
<!-- </div>-->
<!-- <div class="uk-button uk-button-default button-drop uk-width-1-1">Select a source...</div>-->
<!-- <div class="uk-button uk-button-default button-drop uk-width-1-1">Select a source...</div>-->
<availableOn [availableOn]="resultLandingInfo.hostedBy_collectedFrom" (viewAllClicked)="viewAll=$event"></availableOn>
</div>
<!-- style="border: 1px solid red">-->
<!-- <div *ngFor="let item of fakeArray.slice(0, 50); let i=index">test3.{{i}}</div>-->
<!-- style="border: 1px solid red">-->
<!-- <div *ngFor="let item of fakeArray.slice(0, 50); let i=index">test3.{{i}}</div>-->
</div>
</div>
</div>
</ng-template>
</ng-container>
</div>
</div>
</div>
<div *ngIf="!showFeedback" class="uk-grid">
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<div class="uk-container uk-container-large uk-margin-medium-top publication">
<div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning uk-margin-large-top"
role="alert">{{warningMessage}}</div>
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-margin-large-top"
role="alert">{{errorMessage}}</div>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
<div *ngIf="resultLandingInfo" class="uk-grid uk-margin-remove">
<div
class="uk-width-2-3@m uk-width-1-1@s uk-padding uk-padding-remove-left uk-padding-remove-vertical uk-margin-bottom">
</div>
<div class="uk-width-1-3@m uk-width-1-1@s uk-padding-remove">
</div>
<!-- *ngIf="numberOfTabs > 0"-->
<!-- <div class="uk-padding-remove-left uk-width-1-1 uk-margin-medium-top">-->
<!-- &lt;!&ndash; B2 Note&ndash;&gt;-->
<!-- <div *ngIf="properties.b2noteAPIURL && resultLandingInfo" class="uk-margin-medium-top">-->
<!-- <b2note #annotation [id]="id" [landingInfo]="resultLandingInfo" (pidEmitter)="pidInit($event)"></b2note>-->
<!-- </div>-->
<!-- </div>-->
</div>
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']"></helper>
</div>
</div>
</div>
<feedback *ngIf="resultLandingInfo && properties.reCaptchaSiteKey" [resultLandingInfo]="resultLandingInfo"
[properties]="properties" [entityType]="getTypeName()" [fields]="feedbackFields"
[showForm]="showFeedback" (show)="showFeedback = $event;"></feedback>
[(showForm)]="showFeedback"></feedback>
</div>
<!-- Other versions -->
<modal-alert *ngIf="resultLandingInfo && resultLandingInfo.deletedByInferenceIds"
#AlertModalDeletedByInference classBody="uk-width-xxlarge uk-padding-remove"
classTitle="landing-modal-header">
#AlertModalDeletedByInference large="true">
<!-- <landing-header [properties]="properties" [title]="resultLandingInfo.title" [modal]="AlertModalDeletedByInference"-->
<!-- [subTitle]="resultLandingInfo.subtitle" [authorLimit]="10" [showAllAuthors]="false"-->
<!-- titleClass="title-grey-background"-->
@ -455,7 +440,6 @@
<!-- [year]="resultLandingInfo.date" [embargoEndDate]="resultLandingInfo.embargoEndDate"-->
<!-- [isTitleH1]="false">-->
<!-- </landing-header>-->
<div class="uk-padding">
<deletedByInference *ngIf="type == 'publication' && deleteByInferenceOpened"
[id]="resultLandingInfo.record['result']['header']['dri:objIdentifier']"
[ids]="resultLandingInfo.deletedByInferenceIds"
@ -476,14 +460,32 @@
[ids]="resultLandingInfo.deletedByInferenceIds"
[modal]="AlertModalDeletedByInference"
[resultType]="'other'" [type]="'other research products'"></deletedByInference>
</div>
</modal-alert>
<modal-alert #citeModal [classTitle]="'landing-modal-header'"
[classBody]="'uk-padding-remove landing-modal'">
<citeThis *ngIf="resultLandingInfo && citeThisClicked" [result]="resultLandingInfo" [id]="id"
<modal-alert *ngIf="resultLandingInfo" #citeModal>
<citeThis *ngIf="citeThisClicked" [result]="resultLandingInfo" [id]="id"
[type]="title.toLowerCase()" [piwikSiteId]="piwikSiteId"></citeThis>
</modal-alert>
<modal-alert *ngIf="resultLandingInfo"
#addThisModal classBody="uk-flex uk-flex-center uk-flex-middle">
<addThis></addThis>
</modal-alert>
<modal-alert *ngIf="resultLandingInfo && resultLandingInfo.organizations" #organizationsModal>
<ng-container *ngTemplateOutlet="organizations_template; context: { threshold: resultLandingInfo.organizations.length}"></ng-container>
</modal-alert>
<ng-template #organizations_template let-threshold="threshold">
<ul class="uk-list organizations uk-margin-remove-top">
<li *ngFor="let organization of resultLandingInfo.organizations.slice(0, threshold)" class="uk-tile uk-tile-default uk-padding-small">
<a [routerLink]="properties.searchLinkToOrganization.split('?')[0]" [queryParams]="{organizationId: organization.id}" class="uk-link-text uk-text-bold">
{{(organization.name ? organization.name : (organization.shortname?organization.shortname:'[No title available]'))}}
<span *ngIf="!organization.name && organization.shortname">({{organization.shortname}})</span>
</a>
<div *ngIf="organization.country && !organization.country.toLowerCase().includes('unknown')" class="uk-text-xsmall uk-text-muted">{{organization.country}}</div>
</li>
</ul>
</ng-template>
<ng-template #relation_in_tab let-researchResults="researchResults" let-header="header" let-relatedClassFilters="relatedClassFilters">
<div
@ -500,12 +502,11 @@
<mat-option *ngFor="let relatedClass of relatedClassFilters" [value]="relatedClass">{{relatedClass}}</mat-option>
</mat-select>
</mat-form-field>
<no-load-paging
<results-and-pages
[type]="'research outcomes'"
(pageChange)="updateRelatedPage($event)"
[page]="relatedPage" [pageSize]="pageSize"
[totalResults]="researchResults.length">
</no-load-paging>
</results-and-pages>
<ul class="uk-list uk-list-divider uk-margin">
<li *ngFor="let item of researchResults.slice((relatedPage-1)*pageSize, relatedPage*pageSize)">
<result-preview [modal]="relationModal" [properties]="properties"
@ -513,11 +514,11 @@
[isCard]="false"></result-preview>
</li>
</ul>
<no-load-paging *ngIf="researchResults.length > pageSize"
[type]="'research outcomes'"
<paging-no-load *ngIf="researchResults.length > pageSize"
class="uk-margin-top"
(pageChange)="updateRelatedPage($event)"
[page]="relatedPage" [pageSize]="pageSize"
[currentPage]="relatedPage" [size]="pageSize"
[totalResults]="researchResults.length">
</no-load-paging>
</paging-no-load>
</div>
</ng-template>

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

@ -38,9 +38,9 @@ export class ResultLandingComponent {
enermapsId;
@ViewChild('linkModal') linkModal;
@ViewChild('citeModal') citeModal;
@ViewChild('addThisModal') addThisModal;
@ViewChild('AlertModalDeletedByInference') alertModalDeletedByInference;
@ViewChild('relationModal') relationModal;
@ViewChild('organizationModal') organizationModal;
public deleteByInferenceOpened: boolean = false;
@Input() public resultFromInput: boolean = false;
@Input() public resultLandingInfo: ResultLandingInfo;
@ -50,7 +50,11 @@ export class ResultLandingComponent {
public title: string;
/*Show all organizations*/
public showAll: boolean = false;
public viewAllOrganizations: boolean = false;
public lessBtnOrganizations: boolean = false;
public thresholdOrganizations: number = 5;
@ViewChild('organizationsModal') organizationsModal;
// Links for SEO
public linkToLandingPage: string = null;
@ -84,7 +88,6 @@ export class ResultLandingComponent {
public relatedResultsNum: number = 0;
// Message variables
public warningMessage = "";
public errorMessage = "";
public showLoading: boolean = true;
@ -120,12 +123,15 @@ export class ResultLandingComponent {
public filteredRelatedResults: RelationResult[];
public offset: number;
@ViewChild("graph_and_feedback") graph_and_feedback;
public viewAll: string = "";
public noCommunities: boolean = false;
public stickyHeader: boolean = false;
public rightSidebarOffcanvasClicked: boolean = false;
constructor(private _resultLandingService: ResultLandingService,
private _vocabulariesService: ISVocabulariesService,
private _piwikService: PiwikService,
@ -209,6 +215,13 @@ export class ResultLandingComponent {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height'));
}
calcGraphOffset() {
if(this.graph_and_feedback && window) {
return window.innerHeight-this.graph_and_feedback.nativeElement.offsetHeight+"px";
}
return 0;
}
private initMetaAndLinks(type: string) {
if (type == "publication") {
this.type = "publication";
@ -311,7 +324,6 @@ export class ResultLandingComponent {
}
private getProvenanceVocabularyAndResultLandingInfo() {
this.warningMessage = '';
this.errorMessage = '';
this.showLoading = true;
@ -331,7 +343,7 @@ export class ResultLandingComponent {
}
private setActiveTab() {
if (this.hasPrimaryInfo || this.hasSecondaryInfo) {
if (this.hasPrimaryInfo) {
this.activeTab = 'summary';
} else if (this.resultLandingInfo.references && this.resultLandingInfo.references.length > 0) {
this.activeTab = 'references';
@ -443,6 +455,8 @@ export class ResultLandingComponent {
this.showLoading = false;
this.setActiveTab();
this.cdr.detectChanges();
},
err => {
this.handleError("Error getting " + this.type + " for " + (this.id ? ("id: " + this.id) : ("pid: " + this.identifier.id + " ("+this.identifier.class+")")), err);
@ -474,13 +488,22 @@ export class ResultLandingComponent {
public get hasPrimaryInfo(): boolean {
return !!this.resultLandingInfo && (
(!!this.resultLandingInfo.description && this.resultLandingInfo.description.length > 0)
|| !!this.resultLandingInfo.identifiers || !!this.resultLandingInfo.subjects
|| !!this.resultLandingInfo.subjects
|| (!!this.resultLandingInfo.organizations && this.resultLandingInfo.organizations.length > 0));
}
public get hasSecondaryInfo(): boolean {
return (this.resultLandingInfo.fundedByProjects && this.resultLandingInfo.fundedByProjects.length > 0) ||
(this.resultLandingInfo.contexts && this.resultLandingInfo.contexts.length > 0) ||
public get hasRightSidebarInfo(): boolean {
return (this.resultLandingInfo.showEgiNotebookButton && properties.adminToolsPortalType == 'explore'
&& (properties.environment == 'beta' || properties.environment == 'development'))
||
(this.resultLandingInfo.sdg && this.resultLandingInfo.sdg.length > 0)
||
(this.resultLandingInfo.fos && this.resultLandingInfo.fos.length > 0)
||
(this.resultLandingInfo.fundedByProjects && this.resultLandingInfo.fundedByProjects.length > 0)
||
(this.resultLandingInfo.contexts && this.resultLandingInfo.contexts.length > 0 && !this.noCommunities)
||
(this.resultLandingInfo.hostedBy_collectedFrom && this.resultLandingInfo.hostedBy_collectedFrom.length > 0);
}
@ -683,6 +706,14 @@ export class ResultLandingComponent {
this.citeModal.alertTitle = "Cite this " + this.getTypeName();
this.citeModal.open();
}
public openAddThisModal() {
this.addThisModal.cancelButton = false;
this.addThisModal.okButton = false;
this.addThisModal.alertTitle = "Share this " + this.getTypeName() + " in your social networks";
this.addThisModal.open();
}
private addNoIndexFilter() {
let allow = this.checkIfAllowed(this.resultLandingInfo);
if(!allow) {
@ -794,4 +825,20 @@ export class ResultLandingComponent {
this.relatedPage = 1;
this.filteredRelatedResults = this.resultLandingInfo.relatedResults.filter(result => !this.relatedClassSelected || result.relationName.toLowerCase() == this.relatedClassSelected.toLowerCase());
}
public viewAllOrganizationsClick() {
this.viewAllOrganizations = true;
if(this.resultLandingInfo.organizations.length <= this.thresholdOrganizations*2) {
this.lessBtnOrganizations = true;
} else {
this.openOrganizationsModal();
}
}
public openOrganizationsModal() {
this.organizationsModal.cancelButton = false;
this.organizationsModal.okButton = false;
this.organizationsModal.alertTitle = "Related Organizations";
this.organizationsModal.open();
}
}

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

@ -33,7 +33,7 @@ import {MatFormFieldModule} from "@angular/material/form-field";
import {MatSelectModule} from "@angular/material/select";
import {IconsModule} from "../../utils/icons/icons.module";
import {IconsService} from "../../utils/icons/icons.service";
import {link, orcid_add, orcid_bin} from "../../utils/icons/icons";
import {graph, link, quotes} from "../../utils/icons/icons";
@NgModule({
imports: [
@ -56,6 +56,6 @@ import {link, orcid_add, orcid_bin} from "../../utils/icons/icons";
})
export class ResultLandingModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([link])
this.iconsService.registerIcons([link, graph, quotes])
}
}

103
orcid/orcid-work.component.ts
View File

@ -63,8 +63,8 @@ declare var UIkit: any;
[class.uk-disabled]="showLoading || !isLoggedIn || !pids"
[class.uk-text-muted]="!isLoggedIn || !pids"
(mouseover)="hoverEvent($event)" (mouseout)="hoverEvent($event)">
<icon *ngIf="!hoverAdd" name="orcid_add" ratio="1.1"></icon>
<icon *ngIf="hoverAdd" name="add"></icon>
<icon *ngIf="!hoverAdd" name="orcid_add" ratio="1.1" visuallyHidden="add"></icon>
<icon *ngIf="hoverAdd" name="add" visuallyHidden="add"></icon>
</a>
<span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading
[top_margin]="false"></loading></span>
@ -78,36 +78,35 @@ declare var UIkit: any;
[class.uk-disabled]="showLoading || !isLoggedIn || !pids"
[class.uk-text-muted]="!isLoggedIn || !pids"
(mouseover)="hoverEvent($event, 'delete')" (mouseout)="hoverEvent($event, 'delete')">
<icon *ngIf="!hoverDelete" name="orcid_bin" ratio="1.1"></icon>
<icon *ngIf="hoverDelete" name="delete_outline" class="uk-text-danger"></icon>
<icon *ngIf="!hoverDelete" name="orcid_bin" ratio="1.1" visuallyHidden="delete"></icon>
<icon *ngIf="hoverDelete" name="delete_outline" class="uk-text-danger" visuallyHidden="delete"></icon>
</a>
<span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading
[top_margin]="false"></loading></span>
</span>
</ng-container>
<modal-alert #grantModal [classTitle]="'landing-modal-header uk-padding-small'"
[classBody]="'landing-modal uk-padding-remove'">
<div class="uk-text-center uk-padding-small">
<modal-alert #grantModal (alertOutput)="openGrantWindow()">
<div class="uk-text-center">
<div>{{requestGrantMessage}}</div>
<div class="uk-margin-medium-top uk-align-right">
<button (click)="closeGrantModal()" type="submit"
class="uk-button uk-padding-small uk-padding-remove-vertical uk-button-default">
<span>Cancel</span>
</button>
<button (click)="openGrantWindow()" type="submit"
class="uk-button uk-padding-small uk-padding-remove-vertical uk-margin-left uk-button-primary">
<span>Grant OpenAIRE</span>
</button>
<!-- <div class="uk-margin-medium-top uk-align-right">-->
<!-- <button (click)="closeGrantModal()" type="submit"-->
<!-- class="uk-button uk-padding-small uk-padding-remove-vertical uk-button-default">-->
<!-- <span>Cancel</span>-->
<!-- </button>-->
<!-- <button (click)="openGrantWindow()" type="submit"-->
<!-- class="uk-button uk-padding-small uk-padding-remove-vertical uk-margin-left orcid-button">-->
<!-- <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}}-->
<!-- <span>Create or Connect your ORCID iD</span>-->
<!-- class="uk-button uk-padding-small uk-padding-remove-vertical uk-margin-left uk-button-primary">-->
<!-- <span>Grant OpenAIRE</span>-->
<!-- </button>-->
</div>
<!--&lt;!&ndash; <button (click)="openGrantWindow()" type="submit"&ndash;&gt;-->
<!--&lt;!&ndash; class="uk-button uk-padding-small uk-padding-remove-vertical uk-margin-left orcid-button">&ndash;&gt;-->
<!--&lt;!&ndash; <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}}&ndash;&gt;-->
<!--&lt;!&ndash; <span>Create or Connect your ORCID iD</span>&ndash;&gt;-->
<!--&lt;!&ndash; </button>&ndash;&gt;-->
<!-- </div>-->
</div>
</modal-alert>
@ -164,9 +163,8 @@ declare var UIkit: any;
</span>
</ng-container>
<modal-alert #workModal [classTitle]="'landing-modal-header uk-padding-small'"
[classBody]="'landing-modal uk-padding-remove'">
<div *ngIf="orcidWorks" class="uk-padding-small">
<modal-alert #workModal>
<div *ngIf="orcidWorks">
<div *ngFor="let work of orcidWorks['bulk']">
<ng-container *ngTemplateOutlet="orcidWorkPreview; context:{work: work['work']}"></ng-container>
</div>
@ -263,33 +261,30 @@ declare var UIkit: any;
</div>
</ng-template>
<modal-alert #propagationModal [classTitle]="'landing-modal-header uk-padding-small'"
[classBody]="'landing-modal uk-padding-remove'">
<div class="uk-padding-small">
<div>
This research outcome is the result of <span class="uk-text-bold"> merged research outcomes in OpenAIRE</span>.
<br><br>
You have already added <span class="uk-text-bold">{{this.putCodes?.length}} works</span> in your ORCID record related to the merged research outcome.
<div *ngIf="currentAction == 'delete'">
If you continue with delete action, <span class="uk-text-bold">all these works will be deleted</span>.
</div>
<div *ngIf="currentAction == 'update'">
If you continue with update action, <span class="uk-text-bold">all these works will be deleted and a new merged work will be added</span> instead.
</div>
<modal-alert #propagationModal (alertOutput)="confirmedPropagation()">
<div>
This research outcome is the result of <span class="uk-text-bold"> merged research outcomes in OpenAIRE</span>.
<br><br>
You have already added <span class="uk-text-bold">{{this.putCodes?.length}} works</span> in your ORCID record related to the merged research outcome.
<div *ngIf="currentAction == 'delete'">
If you continue with delete action, <span class="uk-text-bold">all these works will be deleted</span>.
</div>
<div class="uk-margin-medium-top uk-align-right">
<button (click)="closePropagationModal()" type="submit"
class="uk-button uk-padding-small uk-padding-remove-vertical uk-button-default">
<span>Cancel</span>
</button>
<button (click)="confirmedPropagation()" type="submit"
class="uk-button uk-padding-small uk-padding-remove-vertical uk-margin-left uk-button-primary">
<span>Continue</span>
</button>
<div *ngIf="currentAction == 'update'">
If you continue with update action, <span class="uk-text-bold">all these works will be deleted and a new merged work will be added</span> instead.
</div>
</div>
<!-- <div class="uk-margin-medium-top uk-align-right">-->
<!-- <button (click)="closePropagationModal()" type="submit"-->
<!-- class="uk-button uk-padding-small uk-padding-remove-vertical uk-button-default">-->
<!-- <span>Cancel</span>-->
<!-- </button>-->
<!-- <button (click)="confirmedPropagation()" type="submit"-->
<!-- class="uk-button uk-padding-small uk-padding-remove-vertical uk-margin-left uk-button-primary">-->
<!-- <span>Continue</span>-->
<!-- </button>-->
<!-- </div>-->
</modal-alert>
`
})
@ -690,8 +685,10 @@ export class OrcidWorkComponent {
}
openGrantModal(title: string) {
this.grantModal.cancelButton = false;
this.grantModal.okButton = false;
this.grantModal.cancelButton = true;
this.grantModal.okButton = true;
this.grantModal.okButtonText = "Grant OpenAIRE";
this.grantModal.okButtonLeft = false;
this.grantModal.alertTitle = title;
this.grantModal.open();
}
@ -723,8 +720,10 @@ export class OrcidWorkComponent {
}
openPropagationModal(title: string) {
this.propagationModal.cancelButton = false;
this.propagationModal.okButton = false;
this.propagationModal.cancelButton = true;
this.propagationModal.okButton = true;
this.propagationModal.okButtonText = "Continue";
this.propagationModal.okButtonLeft = false;
this.propagationModal.alertTitle = title;
this.propagationModal.open();
}

14
searchPages/searchUtils/no-load-paging.component.ts
View File

@ -3,18 +3,12 @@ import {Component, Input, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'no-load-paging',
template: `
<div class="paging-hr searchPaging uk-margin-small-bottom">
<div class="uk-panel uk-margin-small-top uk-grid uk-flex uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m" uk-grid>
<h6 *ngIf="type && totalResults">
<span>{{totalResults | number}}</span>
<span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
<span>{{page}}</span>
<span class="uk-text-muted"> of </span>
<span>{{paging.getTotalPages() | number}}</span>
</h6>
<div class="uk-margin-small-bottom">
<div class="uk-panel uk-grid uk-flex uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m" uk-grid>
<results-and-pages [type]="type" [page]="page" [pageSize]="pageSize" [totalResults]="totalResults"></results-and-pages>
<div>
<paging-no-load #paging [currentPage]="page"
customClasses="uk-margin-remove-bottom"
customClasses="uk-margin-remove-bottom uk-flex-right"
[totalResults]="totalResults" [size]="pageSize"
(pageChange)="updatePage($event)">
</paging-no-load>

2
sharedComponents/cookie-law/cookie-law.css
View File

@ -21,7 +21,7 @@
bottom: 0;
left: 0;
width: 100%;
z-index: 100;
z-index: 1000;
font-smooth: always;
-webkit-font-smoothing: antialiased;
text-align: center;

15
utils/authors/showAuthors.component.ts
View File

@ -64,7 +64,7 @@ import {properties} from "../../../../environments/environment";
{{author.fullName}} in OpenAIRE
</div>
<div class="uk-text-center uk-margin-top uk-margin-large-left uk-margin-large-right">
<a class="uk-button uk-button-primary uk-text-bold uk-padding-remove-top uk-padding-remove-bottom"
<a class="uk-button uk-button-primary uk-box-no-shadow uk-text-bold uk-padding-remove-top uk-padding-remove-bottom"
(click)="onClick()"
[queryParams]="routerHelper.createQueryParams(['orcid','oc'],[(author['orcid'] ? author['orcid'] : author['orcid_pending']),'and'])"
routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults">
@ -89,14 +89,11 @@ import {properties} from "../../../../environments/environment";
<a>View less authors</a>
</div>
<modal-alert #authorsModal [classTitle]="'landing-modal-header'"
[classBody]="'landing-modal uk-padding-remove'">
<div class="uk-padding uk-padding-remove-top uk-overflow-auto">
<span *ngFor="let author of authors; let i=index"
class=" uk-text-small uk-text-emphasis">
<ng-container *ngTemplateOutlet="author_template; context: { author: author, i:i}"></ng-container>
</span>
</div>
<modal-alert #authorsModal>
<span *ngFor="let author of authors; let i=index"
class=" uk-text-small uk-text-emphasis">
<ng-container *ngTemplateOutlet="author_template; context: { author: author, i:i}"></ng-container>
</span>
</modal-alert>
`

12
utils/icons/icons.ts
View File

@ -221,3 +221,15 @@ export const link = {
}
/** Add new icon under this line to be sure that it will be added on preview */
export const quotes = {
name: 'quotes',
data: '<svg width="20"\n' +
' height="20"\n' +
' viewBox="0 0 20 20"\n' +
' xmlns="http://www.w3.org/2000/svg"\n' +
' data-svg="quote-right">\n' +
' <path d="M17.27,7.79 C17.27,9.45 16.97,10.43 15.99,12.02 C14.98,13.64 13,15.23 11.56,15.97 L11.1,15.08 C12.34,14.2 13.14,13.51 14.02,11.82 C14.27,11.34 14.41,10.92 14.49,10.54 C14.3,10.58 14.09,10.6 13.88,10.6 C12.06,10.6 10.59,9.12 10.59,7.3 C10.59,5.48 12.06,4 13.88,4 C15.39,4 16.67,5.02 17.05,6.42 C17.19,6.82 17.27,7.27 17.27,7.79 L17.27,7.79 Z"></path>\n' +
' <path d="M8.68,7.79 C8.68,9.45 8.38,10.43 7.4,12.02 C6.39,13.64 4.41,15.23 2.97,15.97 L2.51,15.08 C3.75,14.2 4.55,13.51 5.43,11.82 C5.68,11.34 5.82,10.92 5.9,10.54 C5.71,10.58 5.5,10.6 5.29,10.6 C3.47,10.6 2,9.12 2,7.3 C2,5.48 3.47,4 5.29,4 C6.8,4 8.08,5.02 8.46,6.42 C8.6,6.82 8.68,7.27 8.68,7.79 L8.68,7.79 Z"></path>\n' +
' </svg>'
}

50
utils/modal/alert.ts
View File

@ -7,33 +7,38 @@ declare var UIkit: any;
selector: 'modal-alert',
template: `
<div #element class="uk-modal" [class.uk-modal-container]="large" [id]="id" uk-modal>
<div class="uk-modal-dialog uk-modal-body uk-animation-fast uk-margin-medium-bottom uk-text-left"
[ngClass]="classBody">
<div [ngClass]="classTitle" class="uk-modal-title" [hidden]=!alertHeader>
<button class="uk-close uk-icon uk-modal-close-default uk-float-right" (click)='cancel()'>
<div class="uk-modal-dialog">
<div class="uk-modal-header uk-flex uk-flex-middle uk-flex-between" [ngClass]="classTitle">
<div class="uk-modal-title" [hidden]=!alertHeader>
<h5 class="uk-margin-remove">{{alertTitle}}</h5>
</div>
<button class="uk-close uk-icon uk-margin-left" (click)='cancel()'>
<icon name="close" ratio="1.5"></icon>
</button>
<h5 class="uk-margin-remove">{{alertTitle}}</h5>
</div>
<div class="uk-margin">
<div class="uk-modal-body uk-animation-fast uk-text-left"
[ngClass]="classBody" [attr.uk-overflow-auto]="overflowBody">
<div *ngIf="message" [hidden]=!alertMessage [innerHTML]="message | safeHtml"></div>
<ng-content></ng-content>
</div>
<div class="uk-grid uk-flex uk-flex-middle">
<label *ngIf="choice" class="uk-width-1-2">
<input type="checkbox" [(ngModel)]="select">
<span class="uk-margin-small-left">Don't show this message again</span>
</label>
<div [ngClass]="(choice)?'uk-width-1-2':'uk-width-1-1'">
<div *ngIf="alertFooter" class="uk-flex-right uk-grid uk-grid-small" uk-grid>
<span *ngIf="okButton" [class.uk-flex-last]="!okButtonLeft">
<button class="uk-button uk-button-primary" [disabled]="okDisabled"
[class.uk-disabled]="okDisabled" (click)="ok()">{{okButtonText}}</button>
</span>
<span *ngIf="cancelButton">
<button class="uk-button uk-button-default uk-margin-small-left"
(click)="cancel()">{{cancelButtonText}}</button>
</span>
<div *ngIf="choice || okButton || cancelButton" class="uk-modal-footer">
<div class="uk-grid uk-flex uk-flex-middle">
<label *ngIf="choice" class="uk-width-1-2">
<input type="checkbox" [(ngModel)]="select">
<span class="uk-margin-small-left">Don't show this message again</span>
</label>
<div [ngClass]="(choice)?'uk-width-1-2':'uk-width-1-1'">
<div *ngIf="alertFooter" class="uk-flex-right uk-grid uk-grid-small" uk-grid>
<span *ngIf="okButton" [class.uk-flex-last]="!okButtonLeft">
<button class="uk-button uk-button-primary uk-box-no-shadow" [disabled]="okDisabled"
[class.uk-disabled]="okDisabled" (click)="ok()">{{okButtonText}}</button>
</span>
<span *ngIf="cancelButton">
<button class="uk-button uk-button-default uk-box-no-shadow uk-margin-small-left"
(click)="cancel()">{{cancelButtonText}}</button>
</span>
</div>
</div>
</div>
</div>
@ -47,9 +52,10 @@ declare var UIkit: any;
*/
export class AlertModal {
@Input() id: string = "modal";
@Input() classTitle: string = "";
@Input() classTitle: string = "uk-background-primary-opacity";
@Input() classBody: string = "";
@Input() large: boolean = false;
@Input() overflowBody: boolean = true;
/**
* Caption for the title.
*/

3
utils/paging.module.ts
View File

@ -7,6 +7,7 @@ import {pagingFormatterNoLoad} from './pagingFormatterNoLoad.component';
import {PagingFormatter} from './pagingFormatter.component';
import {IconsModule} from "./icons/icons.module";
import {ResultsAndPagesNumComponent} from "./resultsAndPagesNum.component";
@NgModule({
@ -14,10 +15,12 @@ import {IconsModule} from "./icons/icons.module";
CommonModule, FormsModule, RouterModule, IconsModule
],
declarations: [
ResultsAndPagesNumComponent,
pagingFormatterNoLoad,
PagingFormatter,
],
exports: [
ResultsAndPagesNumComponent,
pagingFormatterNoLoad,
PagingFormatter,
]

4
utils/pagingFormatter.component.ts
View File

@ -8,7 +8,7 @@ import {properties} from "../../../environments/environment";
template: `
<ul *ngIf=" (getTotalPages() > 0 ) && (getTotalPages() > 1) && (currentPage > 0 && currentPage <= getTotalPages()) "
[class.uk-disabled]="isDisabled" class="uk-pagination uk-margin-remove" [ngClass]="'uk-flex-' + position">
<li *ngIf="currentPage > 1">
<li [class.uk-invisible]="currentPage <= 1">
<a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page', (currentPage - 1))"
[routerLink]=baseUrl aria-label="Previous">
<icon name="chevron_left" [flex]="true" customClass="uk-pagination-previous"></icon>
@ -33,7 +33,7 @@ import {properties} from "../../../environments/environment";
<li *ngIf=" (currentPage -1 <= 0)&&(currentPage +4 <= getTotalPages()) "><a
[queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +4))"
[routerLink]=baseUrl>{{(currentPage + 4) | number}}</a></li>
<li *ngIf="getTotalPages() > currentPage">
<li [class.uk-invisible]="getTotalPages() <= currentPage">
<a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage + 1))"
[routerLink]=baseUrl aria-label="Next">
<icon name="chevron_right" [flex]="true" customClass="uk-pagination-next"></icon>

8
utils/pagingFormatterNoLoad.component.ts
View File

@ -9,9 +9,9 @@ import {properties} from "../../../environments/environment";
selector: 'paging-no-load',
template: `
<ul disabled *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage && currentPage <= getTotalPages() ) " [ngClass]="customClasses"
class="uk-pagination uk-flex uk-flex-middle uk-flex-right">
class="uk-pagination uk-flex uk-flex-middle ">
<li *ngIf=" currentPage > 1" ><a (click)="onPage((currentPage -1))" aria-label="Previous">
<li [class.uk-invisible]="currentPage <= 1" ><a (click)="onPage((currentPage -1))" aria-label="Previous">
<span><span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-left" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline></svg></span></span></a></li>
<li *ngIf=" currentPage -2 > 0"><a (click)="onPage((currentPage -2))">{{(currentPage -2) | number}}</a></li>
<li *ngIf=" currentPage -1 > 0 "><a (click)="onPage((currentPage -1))">{{(currentPage -1) | number}}</a></li>
@ -20,7 +20,7 @@ import {properties} from "../../../environments/environment";
<li *ngIf=" currentPage +2 <= getTotalPages() "><a (click)="onPage((currentPage +2))">{{(currentPage +2) | number}}</a></li>
<li *ngIf=" (currentPage -2 <= 0)&&(currentPage +3 <= getTotalPages()) "><a (click)="onPage((currentPage +3))">{{(currentPage +3) | number}}</a></li>
<li *ngIf=" (currentPage -1 <= 0)&&(currentPage +4 <= getTotalPages()) "><a (click)="onPage((currentPage +4))">{{(currentPage +4) | number}}</a></li>
<li *ngIf="getTotalPages() > currentPage">
<li [class.uk-invisible]="getTotalPages() <= currentPage">
<a (click)="onPage(currentPage +1)" aria-label="Next">
<span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
@ -36,7 +36,7 @@ import {properties} from "../../../environments/environment";
export class pagingFormatterNoLoad {
@Input() public currentPage: number = 1;
@Input() public customClasses: string = '';
@Input() public customClasses: string = 'uk-flex-center';
// @Input() public navigateTo: string;
@Input() public term: string='';
@Input() public size: number=10;

33
utils/resultsAndPagesNum.component.ts Normal file
View File

@ -0,0 +1,33 @@
import {Component, Input} from "@angular/core";
@Component({
selector: 'results-and-pages',
template: `
<h6 *ngIf="type && totalResults" [ngClass]="customClasses">
<span>{{totalResults | number}}</span>
<span class="uk-text-meta uk-text-capitalize"> {{type}}, page </span>
<span>{{page}}</span>
<span class="uk-text-meta"> of </span>
<span>{{getTotalPages() | number}}</span>
</h6>
`
})
export class ResultsAndPagesNumComponent {
@Input() type: string;
@Input() page: number = 1;
@Input() pageSize: number = 10;
@Input() totalResults: number;
@Input() customClasses: string = "";
constructor() {}
getTotalPages(){
let total: number;
let i= this.totalResults/this.pageSize;
let integerI=parseInt(''+i);
total = parseInt(''+((i==integerI)?i:i+1));
return total;
}
}

7
utils/tabs/tabs.component.ts
View File

@ -17,7 +17,7 @@ import {TabComponent} from './tab.component';
selector: 'my-tabs',
template: `
<div id="mytabs" class="uk-grid uk-margin-remove-left">
<div class="uk-margin-medium-right uk-padding-small uk-width-expand uk-padding-remove-bottom" >
<div class="uk-margin-medium-right uk-margin-top uk uk-padding-remove uk-width-expand" >
<div class=" uk-width-1-1" uk-slider="finite: true">
<div class="uk-position-relative " >
<div class="uk-slider-container ">
@ -92,6 +92,7 @@ export class TabsComponent implements AfterContentInit {
public customClass: string;
@ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
@Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter();
@Input() offsetForSticky:number=0;
@Input() isSticky:boolean;
@Output() isStickyChange :EventEmitter<boolean> = new EventEmitter();
public selected: string;
@ -128,10 +129,10 @@ export class TabsComponent implements AfterContentInit {
}
scroll(){
let tabDistanceFromCurrentViewTop = document.getElementById("main-tabs-div") ? document.getElementById("main-tabs-div").getBoundingClientRect().top : null;
if((tabDistanceFromCurrentViewTop <= 0)){
if((tabDistanceFromCurrentViewTop <= this.offsetForSticky)){
this.isStickyChange.emit(true);
this.isSticky =true;
}else if(!(tabDistanceFromCurrentViewTop <= 0)){
}else if(!(tabDistanceFromCurrentViewTop <= this.offsetForSticky)){
this.isStickyChange.emit(false);
this.isSticky =false;
}