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

progress on explore landing page

This commit is contained in:
Alex Martzios 2022-12-20 15:27:18 +02:00
parent 06f2f586a8
commit 9ead7fee7d
2 changed files with 74 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
landingPages/landing-utils/landing-header/landing-header.component.ts
View File

@ -7,14 +7,20 @@ import {AlertModal} from "../../../utils/modal/alert";
selector: 'landing-header',
template: `
<div class="title-section" [class.uk-margin-bottom]="!isSticky" [ngClass]="titleClass">
<div class="uk-text-small">
<span *ngIf="entityType" class="uk-text-capitalize uk-text-small">
<div class="uk-margin-xsmall-bottom">
<showTitle [titleName]="title" classNames="uk-margin-remove-bottom"></showTitle>
<div *ngIf="subTitle">
<span class="uk-text-meta uk-text-small" [innerHTML]="subTitle"></span>
</div>
</div>
<div class="uk-margin-small-bottom uk-text-xsmall">
<span *ngIf="entityType" class="uk-text-capitalize uk-text-bolder" style="text-decoration: underline;">
{{entityType}}
</span>
<span *ngIf="types && removeUnknown(types, true).length > 0">
{{(entityType?' . ':'') + removeUnknown(types, true).join(' . ')}}
</span>
<span>
<span *ngIf="types && removeUnknown(types, true).length > 0" class="uk-text-italic">
{{(entityType?' >> ':'') + removeUnknown(types, true).join(' . ')}}
</span>
<span>
<span *ngIf="startDate || endDate">
{{' . '}}
</span>
@ -41,20 +47,14 @@ import {AlertModal} from "../../../utils/modal/alert";
{{' . ' + year}}
</span>
<span *ngIf="embargoEndDate">
. Embargo end date: {{embargoEndDate | date: 'dd MMM yyyy'}}
. Embargo end date: {{embargoEndDate | date: 'dd MMM yyyy'}}
</span>
<span *ngIf="underCuration">
. <span title="{{buildCurationTooltip()}}"
uk-tooltip="pos:bottom-right; delay:10;"
class="uk-text-primary">Under curation</span>
</span>
</div>
<div [class]="isSticky ? 'uk-margon-bottom' : 'uk-margin-medium-bottom'">
<showTitle [titleName]="title" classNames="uk-margin-remove-bottom"></showTitle>
<div *ngIf="subTitle">
<span class="uk-text-meta uk-text-small" [innerHTML]="subTitle"></span>
</div>
</div>
</div>
<div *ngIf="authors">
<showAuthors [authorsLimit]="authorLimit" [modal]="modal" [showAll]="showAllAuthors" [authors]="authors" [isSticky]="isSticky"></showAuthors>
</div>

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

@ -4,7 +4,7 @@
<div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid>
<!-- left box/sidebar - actions -->
<div id="landing-left-sidebar" *ngIf="resultLandingInfo" class="uk-visible@s uk-padding-remove-horizontal">
<!-- <div id="landing-left-sidebar" *ngIf="resultLandingInfo" class="uk-visible@s uk-padding-remove-horizontal">
<div class="uk-flex uk-flex-column uk-flex-between uk-flex-center uk-sticky"
uk-sticky="bottom: true" [attr.offset]="offset">
<div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between">
@ -21,7 +21,6 @@
<div class="uk-margin-large-bottom uk-align-center">
<div class="uk-text-meta uk-text-uppercase">Actions</div>
<ul class="uk-list">
<!-- Share -->
<li class="uk-text-center">
<a (click)="openAddThisModal()"
[title]="'Share this '+getTypeName() + ' in your social networks'"
@ -31,7 +30,6 @@
</span>
</a>
</li>
<!-- Link to -->
<li *ngIf="isRouteAvailable('participate/direct-claim')" class="uk-text-center"
[title]="'<span class=\'uk-flex uk-flex-middle\'>Link this '+getTypeName()+' to ...<span class=\'material-icons uk-margin-small-left\'>east</span></span>'"
[attr.uk-tooltip]="'pos: right; cls: uk-active uk-text-small uk-padding-small'">
@ -42,7 +40,6 @@
</span>
</a>
</li>
<!-- Cite this -->
<li class="uk-text-center">
<a (click)="openCiteModal()"
[title]="'Cite this '+getTypeName()"
@ -52,7 +49,6 @@
</span>
</a>
</li>
<!-- ORCID -->
<li *ngIf="properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community' || properties.adminToolsPortalType == 'aggregator'"
class="uk-text-center">
<orcid-work [resultId]="id" [resultTitle]="resultLandingInfo.title" [resultLandingInfo]="resultLandingInfo"
@ -68,7 +64,7 @@
</ul>
</div>
</div>
</div>
</div> -->
<!-- center box-->
<div class="uk-width-expand uk-padding-remove uk-background-default">
@ -106,6 +102,45 @@
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div>
<!-- new action bar -->
<div class="uk-margin-top uk-margin-bottom">
<div class="uk-flex uk-flex-middle uk-flex-center">
<div style="padding: 10px 30px; border-radius: 4px; border: #E96439 solid 1px; box-shadow: 3px 3px 15px #0000001A;">
<div class="uk-flex uk-text-xsmall" style="grid-gap: 20px;">
<!-- TODO -->
<!-- Dropdown -->
<!-- Versions -->
<a *ngIf="resultLandingInfo.deletedByInferenceIds" (click)="openDeletedByInference()"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.8" name="auto_awesome_motion" visuallyHidden="versions"></icon>
<span class="uk-margin-xsmall-left">
View all {{resultLandingInfo.deletedByInferenceIds.length}} versions
</span>
</a>
<!-- Divider -->
<span style="background: #B3B3B3; width: 1px;"></span>
<!-- Actions -->
<a href="" class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="1" name="link" visuallyHidden="link"></icon>
<span class="uk-margin-xsmall-left">Link to</span>
</a>
<a href="" class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.8" name="share" visuallyHidden="share"></icon>
<span class="uk-margin-xsmall-left">Share</span>
</a>
<a href="" class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.8" name="quotes" visuallyHidden="cite"></icon>
<span class="uk-margin-xsmall-left">Cite</span>
</a>
<a href="" class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.8" name="orcid_add" visuallyHidden="orcid_add"></icon>
<span class="uk-margin-xsmall-left">Claim</span>
</a>
</div>
</div>
</div>
</div>
<div class="uk-margin-large-left uk-margin-large-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) -->
@ -166,12 +201,6 @@
<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">
View all {{resultLandingInfo.deletedByInferenceIds.length}} versions
</a>
</span>
<landing-header [properties]="properties" [title]="resultLandingInfo.title"
[subTitle]="resultLandingInfo.subtitle"
[authors]="resultLandingInfo.authors"
@ -214,13 +243,6 @@
<div showPublisher [publisher]="resultLandingInfo.publisher"
[publishDate]="resultLandingInfo.dateofacceptance"
[journal]="resultLandingInfo.journal" [properties]="properties" class="uk-margin-small-top"></div>
<!-- Countries -->
<div *ngIf="resultLandingInfo.countries && resultLandingInfo.countries.length > 0" class="uk-margin-small-top">
<span class="uk-text-meta">
{{(resultLandingInfo.countries.length === 1) ? 'Country: ' : 'Countries: '}}
</span>
{{resultLandingInfo.countries.join(", ")}}
</div>
</div>
</div>
@ -282,6 +304,14 @@
</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"
@ -446,6 +476,17 @@
</ng-container>
<ng-template #right_column>
<!-- new metrics box -->
<div class="uk-margin-medium-top uk-padding uk-padding-remove-vertical">
<div class="uk-card uk-card-secondary uk-flex uk-padding-small">
<div class="uk-width-3-5">
left
</div>
<div class="uk-width-2-5">
right
</div>
</div>
</div>
<div class="uk-margin-medium-top uk-list uk-list-large uk-padding uk-padding-remove-vertical" [class.uk-list-divider]="!viewAll">
<!-- EOSC Services-->
<div *ngIf="resultLandingInfo.eoscSubjects?.length > 0 && properties.adminToolsPortalType == 'eosc'