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

progress for landing pages redesign

This commit is contained in:
Alex Martzios 2023-02-08 11:21:16 +02:00
parent 57eac1b08b
commit beebd6c6d7
8 changed files with 1244 additions and 1210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
landingPages/dataProvider/dataProvider.component.html
View File

@ -34,19 +34,10 @@
</div> -->
<!-- center box-->
<div class="uk-width-expand uk-padding-remove uk-background-default">
<!-- uk-container uk-container-large -->
<div class="">
<div *ngIf="errorMessage.length > 0 || showLoading" class="uk-container uk-flex uk-flex-center uk-height-viewport uk-position-relative">
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-width-2-3 uk-margin-xlarge-top"
role="alert">{{errorMessage}}</div>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
</div>
<div id="landing-center-content" class="uk-width-expand uk-padding-remove uk-background-default">
<ng-template #graph_and_feedback_template>
<div class="uk-flex uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!dataProviderInfo">
<div class="uk-container uk-container-xlarge uk-flex uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!dataProviderInfo">
<!-- Last Index Info-->
<div class="uk-width-2-3@m uk-width-1-2">
<icon name="graph" customClass="text-graph"></icon>
@ -66,12 +57,22 @@
</div>
</ng-template>
<div #graph_and_feedback id="graph_and_feedback" class="uk-padding uk-padding-remove-vertical uk-blur-background uk-text-xsmall uk-visible@m"
<div #graph_and_feedback id="graph_and_feedback" class="uk-blur-background uk-text-xsmall uk-visible@m"
uk-sticky="bottom: true;" [attr.offset]="graph_offset">
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div>
<div class="uk-margin-top uk-margin-bottom">
<div class="uk-container uk-container-xlarge">
<div *ngIf="errorMessage.length > 0 || showLoading" class="uk-container uk-flex uk-flex-center uk-height-viewport uk-position-relative">
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-width-2-3 uk-margin-xlarge-top"
role="alert">{{errorMessage}}</div>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
</div>
<div *ngIf="!showLoading" class="uk-margin-top uk-margin-bottom">
<div class="uk-flex uk-flex-middle uk-flex-center">
<div class="landing-action-bar uk-box-shadow-small uk-margin-bottom">
<div class="uk-flex uk-text-xsmall" style="grid-gap: 20px;">
@ -86,7 +87,7 @@
</div>
</div>
<div class="uk-margin-large-left uk-margin-large-right" [style]="'margin-bottom: '+graph_height+'px'">
<div class="uk-margin-left uk-margin-right" [style]="'margin-bottom: '+graph_height+'px'">
<ng-container *ngIf="dataProviderInfo">
<div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
<!-- schema.org-->
@ -184,8 +185,7 @@
<div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
<landing-header *ngIf="stickyHeader" class="uk-visible@m"
[properties]="properties" [title]="dataProviderInfo.title.name"
[subTitle]="(dataProviderInfo.officialName
&& dataProviderInfo.title.name !== dataProviderInfo.officialName)?dataProviderInfo.officialName:null"
[entityType]="getTypeName()"
[types]="dataProviderInfo.type ? [dataProviderInfo.type] : null"
isSticky="true">
</landing-header>

31
landingPages/organization/organization.component.html
View File

@ -32,18 +32,11 @@
</div> -->
<!-- center/right column -->
<div class="uk-width-expand uk-padding-remove uk-background-default">
<div *ngIf="errorMessage.length > 0 || showLoading" class="uk-container uk-flex uk-flex-center uk-height-viewport uk-position-relative">
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-width-2-3 uk-margin-xlarge-top"
role="alert">{{errorMessage}}</div>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
</div>
<div id="landing-center-content" class="uk-width-expand uk-padding-remove uk-background-default">
<!-- Graph and feedback -->
<ng-template #graph_and_feedback_template>
<div class="uk-flex uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!organizationInfo">
<div class="uk-container uk-container-xlarge uk-flex uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!organizationInfo">
<!-- Last Index Info-->
<div class="uk-width-2-3@m uk-width-1-2">
<icon name="graph" customClass="text-graph"></icon>
@ -63,13 +56,23 @@
</div>
</ng-template>
<div #graph_and_feedback id="graph_and_feedback" class="uk-padding uk-padding-remove-vertical uk-blur-background uk-text-xsmall uk-visible@m"
<div #graph_and_feedback id="graph_and_feedback" class="uk-blur-background uk-text-xsmall uk-visible@m"
uk-sticky="bottom: true;" [attr.offset]="graph_offset">
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div>
<div class="uk-container uk-container-xlarge">
<div *ngIf="errorMessage.length > 0 || showLoading" class="uk-container uk-flex uk-flex-center uk-height-viewport uk-position-relative">
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-width-2-3 uk-margin-xlarge-top"
role="alert">{{errorMessage}}</div>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
</div>
<!-- new action bar -->
<div class="uk-margin-top uk-margin-bottom">
<div *ngIf="!showLoading" class="uk-margin-top uk-margin-bottom">
<div class="uk-flex uk-flex-middle uk-flex-center">
<div class="landing-action-bar uk-box-shadow-small uk-margin-bottom">
<div class="uk-flex uk-text-xsmall" style="grid-gap: 20px;">
@ -99,7 +102,7 @@
</div>
</div>
<div class="uk-margin-large-left uk-margin-large-right" [style]="'margin-bottom: '+graph_height+'px'">
<div class="uk-margin-left uk-margin-right" [style]="'margin-bottom: '+graph_height+'px'">
<ng-container *ngIf="organizationInfo">
<!-- Main content -->
<div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
@ -165,8 +168,6 @@
<!-- <showTitle *ngIf="stickyHeader" [titleName]="organizationInfo.title.name" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>-->
<landing-header *ngIf="stickyHeader" class="uk-visible@m"
[properties]="properties" [title]="organizationInfo.title.name"
[subTitle]="(organizationInfo.name
&& organizationInfo.title.name !== organizationInfo.name)?organizationInfo.name:null"
[entityType]="'organization'" isSticky="true">
</landing-header>
<my-tabs (selectedActiveTab)="onSelectActiveTab($event)" [offsetForSticky]="offset" [(isSticky)]="stickyHeader">
@ -254,6 +255,8 @@
</ng-container>
</div>
</div>
</div>
</div>
</div>
</div>

59
landingPages/project/project.component.html
View File

@ -71,17 +71,10 @@
</div> -->
<!-- center box-->
<div class="uk-width-expand uk-padding-remove uk-background-default">
<div *ngIf="errorMessage.length > 0 || showLoading" class="uk-container uk-flex uk-flex-center uk-height-viewport uk-position-relative">
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-width-2-3 uk-margin-xlarge-top"
role="alert">{{errorMessage}}</div>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
</div>
<div id="landing-center-content" class="uk-width-expand uk-padding-remove uk-background-default">
<ng-template #graph_and_feedback_template>
<div class="uk-flex uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!projectInfo">
<div class="uk-container uk-container-xlarge uk-flex uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!projectInfo">
<!-- Last Index Info-->
<div class="uk-width-2-3@m uk-width-1-2">
<icon name="graph" customClass="text-graph"></icon>
@ -101,13 +94,23 @@
</div>
</ng-template>
<div #graph_and_feedback id="graph_and_feedback" class="uk-padding uk-padding-remove-vertical uk-blur-background uk-text-xsmall uk-visible@m"
<div #graph_and_feedback id="graph_and_feedback" class="uk-blur-background uk-text-xsmall uk-visible@m"
uk-sticky="bottom: true;" [attr.offset]="graph_offset">
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div>
<div class="uk-container uk-container-xlarge">
<div *ngIf="errorMessage.length > 0 || showLoading" class="uk-container uk-flex uk-flex-center uk-height-viewport uk-position-relative">
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-width-2-3 uk-margin-xlarge-top"
role="alert">{{errorMessage}}</div>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
</div>
<!-- new action bar -->
<div class="uk-margin-top uk-margin-bottom">
<div *ngIf="!showLoading" class="uk-margin-top uk-margin-bottom">
<div class="uk-flex uk-flex-middle uk-flex-center">
<div class="landing-action-bar uk-box-shadow-small uk-margin-bottom">
<div class="uk-flex uk-text-xsmall" style="grid-gap: 20px;">
@ -145,9 +148,11 @@
</div>
</div>
<div class="uk-margin-large-left uk-margin-large-right" [style]="'margin-bottom: '+graph_height+'px'">
<div class="uk-margin-left uk-margin-right" [style]="'margin-bottom: '+graph_height+'px'">
<ng-container *ngIf="projectInfo">
<div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
<div class="uk-grid" uk-grid>
<div class="info uk-width-expand">
<!-- schema.org-->
<schema2jsonld [data]=projectInfo
[URL]="properties.domain+properties.baseLink+properties.searchLinkToProject+projectId"
@ -326,6 +331,33 @@
</div>
</div>
</div>
<div class="metrics-box">
<!-- <div *ngIf="projectInfo">
<div class="uk-card uk-card-secondary uk-flex uk-padding-small metrics-background">
<div class="uk-width-expand">
<div class="uk-grid uk-grid-small" uk-grid uk-height-match="target: > div > .cell">
<div>
<div class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="download" ratio="0.8" [flex]="true"></icon></div>
<div class="cell uk-flex uk-flex-middle"><icon name="visibility" ratio="0.8" [flex]="true"></icon></div>
</div>
<div>
<div class="cell uk-margin-xsmall-bottom">Downloads</div>
<div class="cell">Views</div>
</div>
<div class="uk-text-uppercase uk-text-bolder">
<div class="cell uk-margin-xsmall-bottom"> - </div>
<div class="cell"> - </div>
</div>
</div>
</div>
<div class="uk-width-1-5 uk-flex uk-flex-bottom">
<img src="assets/common-assets/metrics-badge.svg" loading="lazy" alt="Metrics badge">
</div>
</div>
</div> -->
</div>
</div>
</div>
<div id="main-tabs-div" class="uk-sticky uk-blur-background"
uk-sticky="bottom: true; media: @m" [attr.offset]="offset">
@ -333,7 +365,6 @@
<!-- <showTitle *ngIf="stickyHeader" [titleName]="projectName" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>-->
<landing-header *ngIf="stickyHeader" class="uk-visible@m"
[properties]="properties" [title]="projectName"
[subTitle]="projectInfo.acronym ? projectInfo.title : ''"
[entityType]="'project'"
[startDate]="projectInfo.startDate"
[endDate]="projectInfo.endDate"
@ -521,6 +552,8 @@
</div>
</div>
</div>
</div>
</div>
</div>

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

@ -68,17 +68,10 @@
</div> -->
<!-- center box-->
<div class="uk-width-expand uk-padding-remove uk-background-default">
<div *ngIf="errorMessage.length > 0 || showLoading" class="uk-container uk-flex uk-flex-center uk-height-viewport uk-position-relative">
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-width-2-3 uk-margin-xlarge-top"
role="alert">{{errorMessage}}</div>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
</div>
<div id="landing-center-content" class="uk-width-expand uk-padding-remove uk-background-default">
<ng-template #graph_and_feedback_template>
<div class="uk-flex uk-margin-small-bottom uk-margin-small-top" [class.uk-invisible]="!resultLandingInfo">
<div class="uk-container uk-container-xlarge uk-flex uk-margin-small-bottom uk-margin-small-top" [class.uk-invisible]="!resultLandingInfo">
<!-- Last Index Info-->
<div class="uk-width-2-3@m uk-width-1-2">
<icon name="graph" customClass="text-graph"></icon>
@ -98,13 +91,22 @@
</div>
</ng-template>
<div #graph_and_feedback id="graph_and_feedback" class="uk-padding uk-padding-remove-vertical uk-blur-background uk-text-xsmall uk-visible@m"
<div #graph_and_feedback id="graph_and_feedback" class="uk-blur-background uk-text-xsmall uk-visible@m"
uk-sticky="bottom: true;" [attr.offset]="graph_offset">
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div>
<!-- new action bar -->
<div class="uk-margin-top uk-margin-bottom">
<div class="uk-container uk-container-xlarge">
<div *ngIf="errorMessage.length > 0 || showLoading" class="uk-container uk-flex uk-flex-center uk-height-viewport uk-position-relative">
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-width-2-3 uk-margin-xlarge-top"
role="alert">{{errorMessage}}</div>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
</div>
<div *ngIf="!showLoading" class="uk-margin-top uk-margin-bottom">
<div class="uk-flex uk-flex-middle uk-flex-center">
<div class="landing-action-bar uk-box-shadow-small uk-margin-bottom">
<div class="uk-flex uk-text-xsmall" style="grid-gap: 20px;">
@ -153,7 +155,7 @@
</div>
</div>
<div class="uk-margin-large-left uk-margin-large-right" [style]="'margin-bottom: '+graph_height+'px'">
<div class="uk-margin-left uk-margin-right" [style]="'margin-bottom: '+graph_height+'px'">
<ng-container *ngIf="resultLandingInfo">
<!-- in small screens there is no sticky #graph_and_feedback so margin-top is medium (40px) -->
<!-- else margin is medium (40px) - the actual height of uk-sticky-placeholder (graph_height - 20px -> margins of #graph_and_feedback) -->
@ -267,8 +269,6 @@
<div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
<landing-header *ngIf="stickyHeader" class="uk-visible@m"
[properties]="properties" [title]="resultLandingInfo.title"
[subTitle]="resultLandingInfo.subtitle"
[authors]="resultLandingInfo.authors"
[underCuration]="resultLandingInfo.underCurationMessage"
[entityType]="getTypeName()" [types]="resultLandingInfo.types"
[date]="resultLandingInfo.dateofacceptance" [embargoEndDate]="resultLandingInfo.embargoEndDate"
@ -475,7 +475,8 @@
<div class="uk-grid-divider" uk-grid>
<div>
<div class="uk-text-center uk-margin-small-bottom">
<img src="assets/common-assets/logo-bip.png" loading="lazy" alt="BIP!">
<img src="assets/common-assets/bip-minimal.svg" loading="lazy" alt="BIP!"
style="width: 61px; height: 43px;">
</div>
<span class="uk-text-uppercase uk-text-xsmall">Impact by</span>
<span class="uk-display-block uk-text-bolder">BIP!</span>
@ -630,12 +631,14 @@
</table>
</div>
<div class="uk-margin-large-left">
Chart
<i-frame [height]="300" [url]=bipFrameUrl [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1"></i-frame>
</div>
</div>
<div class="uk-text-center uk-margin-medium-top">
<div class="uk-text-center uk-margin-top">
<span class="uk-text-meta">Powered by</span>
<img class="uk-margin-small-left uk-margin-small-right" src="assets/common-assets/logo-bip.png" loading="lazy" alt="BIP!">
<img class="uk-margin-small-left uk-margin-small-right" src="assets/common-assets/bip-minimal.svg" loading="lazy" alt="BIP!"
style="width: 61px; height: 43px;">
<span class="uk-text-bolder">BIP!</span>
</div>
</li>
@ -677,6 +680,8 @@
</div>
</div>
</div>
<!-- right box/ sidebar-->
<ng-container *ngIf="resultLandingInfo && hasRightSidebarInfo">

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

@ -72,6 +72,7 @@ export class ResultLandingComponent {
public totalViews: number = null;
public totalDownloads: number = null;
public pageViews: number = null;
public bipFrameUrl: string;
// Custom tab paging variables
public referencesPage: number = 1;
@ -456,6 +457,7 @@ export class ResultLandingComponent {
this.viewsFrameUrl = this.properties.statisticsFrameNewAPIURL + 'chart?json=' + encodeURIComponent('{"library":"HighCharts","chartDescription":{"queries":[{"name":"Monthly views","type":"column","query":{"name":"usagestats.results.views.monthly", "parameters":["' + this.id + '"], "profile":"OpenAIRE All-inclusive" }}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Monthly views"},"subtitle":{},"yAxis":{"title":{"text":""}},"xAxis":{"title":{}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":false},"plotOptions":{"series":{"dataLabels":{"enabled":false}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":true,"text":""}}}');
this.downloadsFrameUrl = this.properties.statisticsFrameNewAPIURL + 'chart?json=' +
encodeURIComponent('{"library":"HighCharts","chartDescription":{"queries":[{"name":"Monthly downloads","type":"column","query":{"name":"usagestats.results.downloads.monthly", "parameters":["' + this.id + '"], "profile":"OpenAIRE All-inclusive" }}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Monthly downloads"},"subtitle":{},"yAxis":{"title":{"text":""}},"xAxis":{"title":{}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":false},"plotOptions":{"series":{"dataLabels":{"enabled":false}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":true,"text":""}}}');
this.bipFrameUrl = this.properties.bipFrameAPIURL + this.id;
let pid:Identifier = Identifier.getPIDFromIdentifiers(this.resultLandingInfo.identifiers);
if (this.type == "result") { // no type was specified - update URL based this.resultLandingInfo.resultType
this.updateUrlWithType(pid);

6
landingPages/result/resultLanding.service.ts
View File

@ -428,8 +428,6 @@ export class ResultLandingService {
this.resultLandingInfo.measure['influence'] = 'Top 1%';
} else if (data[0].measure[i].class == 'C4') {
this.resultLandingInfo.measure['influence'] = 'Top 10%';
} else if (data[0].measure[i].class == 'C5') {
this.resultLandingInfo.measure['influence'] = 'Average/low';
} else if (data[0].measure[i].class == 'A') {
this.resultLandingInfo.measure['influence'] = 'Exceptional';
} else if (data[0].measure[i].class == 'B') {
@ -447,8 +445,6 @@ export class ResultLandingService {
this.resultLandingInfo.measure['popularity'] = 'Top 1%';
} else if (data[0].measure[i].class == 'C4') {
this.resultLandingInfo.measure['popularity'] = 'Top 10%';
} else if (data[0].measure[i].class == 'C5') {
this.resultLandingInfo.measure['popularity'] = 'Average/low';
} else if (data[0].measure[i].class == 'A') {
this.resultLandingInfo.measure['popularity'] = 'Exceptional';
} else if (data[0].measure[i].class == 'B') {
@ -469,8 +465,6 @@ export class ResultLandingService {
this.resultLandingInfo.measure['impulse'] = 'Top 1%';
} else if (data[0].measure[i].class == 'C4') {
this.resultLandingInfo.measure['impulse'] = 'Top 10%';
} else if (data[0].measure[i].class == 'C5') {
this.resultLandingInfo.measure['impulse'] = 'Average/low';
} else if (data[0].measure[i].class == 'A') {
this.resultLandingInfo.measure['impulse'] = 'Exceptional';
} else if (data[0].measure[i].class == 'B') {

4
services/searchResearchResults.service.ts
View File

@ -213,8 +213,6 @@ export class SearchResearchResultsService {
result.measure[3] = 'Top 1% in';
} else if (resData['measure'][i].class == 'C4') {
result.measure[3] = 'Top 10% in';
} else if (resData['measure'][i].class == 'C5') {
result.measure[3] = 'Average/low';
} else if (resData['measure'][i].class == 'A') {
result.measure[3] = 'Exceptional';
} else if (resData['measure'][i].class == 'B') {
@ -233,8 +231,6 @@ export class SearchResearchResultsService {
result.measure[2] = 'Top 1% in';
} else if (resData['measure'][i].class == 'C4') {
result.measure[2] = 'Top 10% in';
} else if (resData['measure'][i].class == 'C5') {
result.measure[2] = 'Average/low';
} else if (resData['measure'][i].class == 'A') {
result.measure[2] = 'Exceptional';
} else if (resData['measure'][i].class == 'B') {

1
utils/properties/env-properties.ts
View File

@ -17,6 +17,7 @@ export interface EnvProperties {
framesAPIURL?: string;
statisticsFrameAPIURL?: string;
statisticsFrameNewAPIURL?: string;
bipFrameAPIURL?: string;
useNewStatistisTool?: boolean;
useOldStatisticsSchema?: boolean;
monitorStatsFrameUrl?:string;