[Library | explore-redesign]: Mobile redesign for the 3 buttons at the bottom (main info, metrics, actions) and their contents.
1. availableOn.component.ts: Mobile redesign - open in full screen modal instead of drop | icons updated.
2. fos.component.ts: In mobile show {{title}} instead of hardcoded title.
3. resultLandingUtils.module.ts: Imported FullScreenModalModule.
4. deletedByInference.component.ts: Removed class "uk-list-divider" for <result-preview> - after redesign each result has its own bottom border.
5. orcid.module.ts: Imported FullScreenModalModule.
6. orcid-work.component.ts: Mobile redesign - Added full screen modals propagationFsModal and grantFsModal.
7. resultLanding.component.ts: Added citeFsModal, addThisFsModal, alertModalDeletedByInferenceFS and property public mobileContent: "info" | "metrics" | "actions" = "info".
8. resultLanding.component.html: Mobile redesign for the 3 buttons at the bottom (main info, metrics, actions).
This commit is contained in:
parent
256f8162e6
commit
f9ff62f188
|
|
@ -2,6 +2,7 @@ import {Component, ElementRef, EventEmitter, Input, Output, ViewChild} from '@an
|
|||
import {HostedByCollectedFrom} from "../../utils/result-preview/result-preview";
|
||||
import {properties} from "../../../../environments/environment";
|
||||
import {StringUtils} from '../../utils/string-utils.class';
|
||||
import {FullScreenModalComponent} from "../../utils/modal/full-screen-modal/full-screen-modal.component";
|
||||
|
||||
declare var UIkit;
|
||||
|
||||
|
|
@ -15,66 +16,89 @@ declare var UIkit;
|
|||
uk-tooltip [title]="availableOn[0].accessRight ? availableOn[0].accessRight : 'Not available'">
|
||||
<icon [name]="availableOn[0].accessRightIcon" [flex]="true" [ratio]="0.8"></icon>
|
||||
</span>
|
||||
<a uk-tooltip="Source" target="_blank"
|
||||
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
|
||||
<span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
|
||||
<span>
|
||||
<icon [flex]="true" [name]="'expand_' + (isOpen?'less':'more')"></icon>
|
||||
</span>
|
||||
</a>
|
||||
<div #dropElement uk-drop="mode: click; pos: bottom-left;"
|
||||
class="download-drop uk-card uk-card-default uk-padding-small uk-padding-remove-horizontal uk-text-small">
|
||||
<div *ngFor="let instance of availableOn let i=index" class="download-drop-item uk-flex uk-flex-top">
|
||||
<span
|
||||
[class]="'uk-margin-small-right ' + (instance.accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')"
|
||||
uk-tooltip [title]="instance.accessRight ? instance.accessRight : 'Not available'">
|
||||
<icon [name]="instance.accessRightIcon" [flex]="true"></icon>
|
||||
</span>
|
||||
<div class="uk-width-expand uk-padding-small uk-padding-remove-left uk-padding-remove-vertical">
|
||||
<span class="uk-text-emphasis">
|
||||
<a *ngIf="instance.downloadUrl" [href]="instance.downloadUrl" target="_blank"
|
||||
class="title uk-link-text uk-text-bold custom-external uk-display-inline-block">
|
||||
{{instance.downloadNames.join("; ")}}
|
||||
</a>
|
||||
</span>
|
||||
<div *ngIf="instance.types?.length > 0 || instance.years?.length > 0" class="uk-text-meta">
|
||||
<span *ngIf="instance.types?.length > 0"
|
||||
class="uk-text-capitalize">{{instance.types.join(" . ")}}</span>
|
||||
<span *ngIf="instance.types?.length > 0 && instance.years?.length > 0"> . </span>
|
||||
<span *ngIf="instance.years?.length > 0">{{instance.years.join(" . ")}}</span>
|
||||
</div>
|
||||
<div *ngIf="instance.license" class="uk-text-meta uk-text-truncate" uk-tooltip [title]="instance.license">
|
||||
License:
|
||||
<a *ngIf="isUrl(instance.license); else elseBlock"
|
||||
[href]="instance.license" target="_blank" class="custom-external uk-link-text">
|
||||
{{instance.license}}
|
||||
</a>
|
||||
<ng-template #elseBlock> {{instance.license}}</ng-template>
|
||||
</div>
|
||||
<div *ngIf="instance.collectedNamesAndIds?.size > 0" class="uk-text-meta">
|
||||
<span>Providers: </span>
|
||||
<a *ngFor="let collectedName of getKeys(instance.collectedNamesAndIds); let i=index"
|
||||
[routerLink]="dataProviderUrl"
|
||||
[queryParams]="{datasourceId: instance.collectedNamesAndIds.get(collectedName)}"
|
||||
class="uk-link-text">
|
||||
{{collectedName}}
|
||||
<ng-container *ngIf="(i !== (instance.collectedNamesAndIds.size - 1))">;</ng-container>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!(isMobile && usedBy == 'landing')">
|
||||
<a uk-tooltip="Source" target="_blank"
|
||||
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
|
||||
<span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
|
||||
<span>
|
||||
<!-- <icon [flex]="true" [name]="'expand_' + (isOpen?'less':'more')"></icon>-->
|
||||
<icon [flex]="true" [name]="(isOpen?'arrow_drop_up':'arrow_drop_down')"></icon>
|
||||
</span>
|
||||
</a>
|
||||
<div #dropElement uk-drop="mode: click; pos: bottom-left;"
|
||||
class="download-drop uk-card uk-card-default uk-padding-small uk-padding-remove-horizontal uk-text-small">
|
||||
<ng-container *ngTemplateOutlet="availableOnList"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="(isMobile && usedBy == 'landing')">
|
||||
<a class="uk-flex uk-flex-between uk-flex-middle uk-flex-center uk-width-expand uk-button-link" (click)="openAvailableListFsModal()">
|
||||
<span uk-tooltip="Source">{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
|
||||
<span>
|
||||
<icon [flex]="true" name="arrow_right"></icon>
|
||||
</span>
|
||||
</a>
|
||||
<fs-modal #availableListFsModal classTitle="uk-tile-default uk-border-bottom">
|
||||
<div class="uk-text-small download-drop">
|
||||
<ng-container *ngTemplateOutlet="availableOnList"></ng-container>
|
||||
</div>
|
||||
</fs-modal>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-template #availableOnList>
|
||||
<div *ngFor="let instance of availableOn let i=index" class="download-drop-item uk-flex uk-flex-top">
|
||||
<span
|
||||
[class]="'uk-margin-small-right ' + (instance.accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')"
|
||||
uk-tooltip [title]="instance.accessRight ? instance.accessRight : 'Not available'">
|
||||
<icon [name]="instance.accessRightIcon" [flex]="true"></icon>
|
||||
</span>
|
||||
<div class="uk-width-expand uk-padding-small uk-padding-remove-left uk-padding-remove-vertical">
|
||||
<span class="uk-text-emphasis">
|
||||
<a *ngIf="instance.downloadUrl" [href]="instance.downloadUrl" target="_blank"
|
||||
class="title uk-link-text uk-text-bold custom-external uk-display-inline-block">
|
||||
{{instance.downloadNames.join("; ")}}
|
||||
</a>
|
||||
</span>
|
||||
<div *ngIf="instance.types?.length > 0 || instance.years?.length > 0" class="uk-text-meta">
|
||||
<span *ngIf="instance.types?.length > 0" class="uk-text-capitalize">{{instance.types.join(" . ")}}</span>
|
||||
<span *ngIf="instance.types?.length > 0 && instance.years?.length > 0"> . </span>
|
||||
<span *ngIf="instance.years?.length > 0">{{instance.years.join(" . ")}}</span>
|
||||
</div>
|
||||
<div *ngIf="instance.license" class="uk-text-meta uk-text-truncate" uk-tooltip [title]="instance.license">
|
||||
License:
|
||||
<a *ngIf="isUrl(instance.license); else elseBlock"
|
||||
[href]="instance.license" target="_blank" class="custom-external uk-link-text">
|
||||
{{instance.license}}
|
||||
</a>
|
||||
<ng-template #elseBlock> {{instance.license}}</ng-template>
|
||||
</div>
|
||||
<div *ngIf="instance.collectedNamesAndIds?.size > 0" class="uk-text-meta">
|
||||
<span>Providers: </span>
|
||||
<a *ngFor="let collectedName of getKeys(instance.collectedNamesAndIds); let i=index"
|
||||
[routerLink]="dataProviderUrl"
|
||||
[queryParams]="{datasourceId: instance.collectedNamesAndIds.get(collectedName)}"
|
||||
class="uk-link-text">
|
||||
{{collectedName}}
|
||||
<ng-container *ngIf="(i !== (instance.collectedNamesAndIds.size - 1))">;</ng-container>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
`
|
||||
})
|
||||
|
||||
export class AvailableOnComponent {
|
||||
@Input() isMobile: boolean = false;
|
||||
@Input() usedBy: "search" | "landing" = "search";
|
||||
@Input() availableOn: HostedByCollectedFrom[];
|
||||
/** @deprecated */
|
||||
@Output() viewAllClicked = new EventEmitter();
|
||||
@ViewChild("dropElement") dropElement: ElementRef;
|
||||
@ViewChild("availableListFsModal") availableListFsModal: FullScreenModalComponent;
|
||||
public threshold: number = 1;
|
||||
public dataProviderUrl = properties.searchLinkToDataProvider.split('?')[0];
|
||||
public title: string = "Download from";
|
||||
|
|
@ -100,4 +124,10 @@ export class AvailableOnComponent {
|
|||
public sliceString(str: string, size: number) {
|
||||
return StringUtils.sliceString(str, size)
|
||||
}
|
||||
|
||||
public openAvailableListFsModal() {
|
||||
this.availableListFsModal.title = "Sources";
|
||||
this.availableListFsModal.okButton = false;
|
||||
this.availableListFsModal.open();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ import {StringUtils} from "../../utils/string-utils.class";
|
|||
<div class="uk-grid uk-grid-small uk-grid-divider" uk-grid>
|
||||
<div class="uk-width-1-4 uk-text-meta">
|
||||
<div class="uk-text-xsmall" style="color: #EEB204">Beta</div>
|
||||
Fields of Science (FoS)
|
||||
{{title}}
|
||||
</div>
|
||||
<div class="uk-width-expand">
|
||||
<div *ngFor="let subject of subjects.slice(0, viewAll?subjects.length:threshold); let i=index" class="uk-text-truncate">
|
||||
|
|
|
|||
|
|
@ -20,12 +20,13 @@ import { SearchInputModule } from '../../sharedComponents/search-input/search-in
|
|||
import {EntityMetadataComponent} from "./entity-metadata.component";
|
||||
import {IconsService} from "../../utils/icons/icons.service";
|
||||
import {closed_access, open_access} from "../../utils/icons/icons";
|
||||
import {FullScreenModalModule} from "../../utils/modal/full-screen-modal/full-screen-modal.module";
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule, RouterModule, PagingModule, ShowPublisherModule, IconsModule, AlertModalModule,
|
||||
SearchInputModule
|
||||
SearchInputModule, FullScreenModalModule
|
||||
],
|
||||
declarations: [
|
||||
ShowIdentifiersComponent,ShowSubjectsComponent,
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ import {HelperFunctions} from "../../../utils/HelperFunctions.class";
|
|||
[page]="page" [pageSize]="pageSize"
|
||||
[totalResults]="results.length">
|
||||
</no-load-paging>
|
||||
<ul class="uk-list uk-list-divider uk-margin">
|
||||
<ul class="uk-list uk-margin">
|
||||
<li *ngFor="let result of results.slice((page-1)*pageSize, page*pageSize)">
|
||||
<result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [showOrcid]="false" [isCard]="false"></result-preview>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -324,241 +324,8 @@
|
|||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="resultLandingInfo && (resultLandingInfo.measure || hasAltMetrics)">
|
||||
<div id="metrics" class="landing-section uk-padding uk-padding-remove-horizontal">
|
||||
<ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher>
|
||||
<li>
|
||||
<a href="#">Overview</a>
|
||||
</li>
|
||||
<li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.citations || resultLandingInfo.measure.popularity || resultLandingInfo.measure.influence || resultLandingInfo.measure.impulse)">
|
||||
<a href="#">Impact</a>
|
||||
</li>
|
||||
<li *ngIf="hasAltMetrics">
|
||||
<a href="#">Social</a>
|
||||
</li>
|
||||
<li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.downloads || resultLandingInfo.measure.views)">
|
||||
<a href="#" (click)="clickedUsageMetrics()">Usage</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="uk-switcher uk-margin-large-top">
|
||||
<!-- overview -->
|
||||
<li>
|
||||
<div class="uk-flex uk-flex-wrap landing-metrics-overview">
|
||||
<div *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.citations || resultLandingInfo.measure.popularity || resultLandingInfo.measure.influence || resultLandingInfo.measure.impulse)">
|
||||
<div class="uk-grid-divider" uk-grid>
|
||||
<div>
|
||||
<div class="uk-text-center uk-margin-small-bottom">
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<table class="uk-table uk-table-small">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="uk-padding-remove-top">
|
||||
<icon name="cite" [flex]="true" [customClass]="'bip-icon'"></icon>
|
||||
</td>
|
||||
<td class="uk-padding-remove-top">
|
||||
Citations
|
||||
</td>
|
||||
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
|
||||
{{resultLandingInfo.measure.citations | number}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<icon name="fire" [flex]="true" [customClass]="'bip-icon'"></icon>
|
||||
</td>
|
||||
<td>
|
||||
Popularity
|
||||
</td>
|
||||
<td class="uk-text-uppercase uk-text-bolder">
|
||||
{{resultLandingInfo.measure.popularity}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<icon name="landmark" [flex]="true" [customClass]="'bip-icon'"></icon>
|
||||
</td>
|
||||
<td>
|
||||
Influence
|
||||
</td>
|
||||
<td class="uk-text-uppercase uk-text-bolder">
|
||||
{{resultLandingInfo.measure.influence}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="uk-padding-remove-bottom">
|
||||
<icon name="rocket" [flex]="true" [customClass]="'bip-icon'"></icon>
|
||||
</td>
|
||||
<td class="uk-padding-remove-bottom">
|
||||
Impulse
|
||||
</td>
|
||||
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">
|
||||
{{resultLandingInfo.measure.impulse}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="hasAltMetrics">
|
||||
<altmetrics id="{{resultLandingInfo.identifiers?.get('doi')[0]}}" type="doi" size="donut"></altmetrics>
|
||||
</div>
|
||||
<div *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.downloads || resultLandingInfo.measure.views)">
|
||||
<div class="uk-grid-divider" uk-grid>
|
||||
<div>
|
||||
<div class="uk-text-center uk-margin-small-bottom">
|
||||
<img src="assets/common-assets/logo-small-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
|
||||
</div>
|
||||
<span class="uk-text-uppercase uk-text-xsmall">Usage by</span>
|
||||
<span class="uk-display-block uk-text-bolder">UsageCounts</span>
|
||||
</div>
|
||||
<div>
|
||||
<table class="uk-table uk-table-small">
|
||||
<tbody>
|
||||
<tr *ngIf="resultLandingInfo.measure.downloads">
|
||||
<td class="uk-padding-remove-top">
|
||||
<icon name="download" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
|
||||
</td>
|
||||
<td class="uk-padding-remove-top">
|
||||
Downloads
|
||||
</td>
|
||||
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder"
|
||||
[attr.uk-tooltip]="resultLandingInfo.measure.downloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{resultLandingInfo.measure.downloads | number}}">
|
||||
{{formatNumber(resultLandingInfo.measure.downloads)}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr *ngIf="resultLandingInfo.measure.views">
|
||||
<td class="uk-padding-remove-bottom">
|
||||
<icon name="visibility" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
|
||||
</td>
|
||||
<td class="uk-padding-remove-bottom">
|
||||
Views
|
||||
</td>
|
||||
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder"
|
||||
[attr.uk-tooltip]="resultLandingInfo.measure.views >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{resultLandingInfo.measure.views | number}}">
|
||||
{{formatNumber(resultLandingInfo.measure.views)}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- impact -->
|
||||
<li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.citations || resultLandingInfo.measure.popularity || resultLandingInfo.measure.influence || resultLandingInfo.measure.impulse)">
|
||||
<div class="uk-flex uk-flex-center uk-flex-middle">
|
||||
<div class="uk-card uk-card-default uk-padding-small">
|
||||
<table class="uk-table uk-table-small uk-margin-remove">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="uk-padding-remove-top">
|
||||
<icon name="cite" [flex]="true" [customClass]="'bip-icon'"></icon>
|
||||
</td>
|
||||
<td class="uk-padding-remove-top">
|
||||
Citations
|
||||
</td>
|
||||
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
|
||||
{{resultLandingInfo.measure.citations}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<icon name="fire" [flex]="true" [customClass]="'bip-icon'"></icon>
|
||||
</td>
|
||||
<td>
|
||||
Popularity
|
||||
</td>
|
||||
<td class="uk-text-uppercase uk-text-bolder">
|
||||
{{resultLandingInfo.measure.popularity}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<icon name="landmark" [flex]="true" [customClass]="'bip-icon'"></icon>
|
||||
</td>
|
||||
<td>
|
||||
Influence
|
||||
</td>
|
||||
<td class="uk-text-uppercase uk-text-bolder">
|
||||
{{resultLandingInfo.measure.influence}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="uk-padding-remove-bottom">
|
||||
<icon name="rocket" [flex]="true" [customClass]="'bip-icon'"></icon>
|
||||
</td>
|
||||
<td class="uk-padding-remove-bottom">
|
||||
Impulse
|
||||
</td>
|
||||
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">
|
||||
{{resultLandingInfo.measure.impulse}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div *ngIf="bipFrameUrl" class="uk-margin-large-left">
|
||||
<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" [ngClass]="bipFrameUrl ? 'uk-margin-top' : 'uk-margin-large-top'">
|
||||
<span class="uk-text-meta">Powered by</span>
|
||||
<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>
|
||||
<!-- social -->
|
||||
<li *ngIf="hasAltMetrics">
|
||||
<altmetrics id="{{resultLandingInfo.identifiers?.get('doi')[0]}}" type="doi" size="medium-donut"></altmetrics>
|
||||
</li>
|
||||
<!-- usage -->
|
||||
<li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.downloads || resultLandingInfo.measure.views)">
|
||||
<div class="uk-flex uk-flex-center uk-flex-middle">
|
||||
<div class="uk-margin-large-right">
|
||||
<div *ngIf="resultLandingInfo.measure.downloads" class="uk-text-center uk-margin-medium-bottom">
|
||||
<div class="uk-text-background uk-text-bold number metrics-number"
|
||||
[attr.uk-tooltip]="resultLandingInfo.measure.downloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{resultLandingInfo.measure.downloads | number}}">{{formatNumber(resultLandingInfo.measure.downloads)}}</div>
|
||||
<div class="uk-text-bold">Downloads</div>
|
||||
</div>
|
||||
<div *ngIf="resultLandingInfo.measure.views" class="uk-text-center uk-margin-medium-bottom">
|
||||
<div class="uk-text-background uk-text-bold number metrics-number"
|
||||
[attr.uk-tooltip]="resultLandingInfo.measure.views >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{resultLandingInfo.measure.views | number}}">{{formatNumber(resultLandingInfo.measure.views)}}</div>
|
||||
<div class="uk-text-bold">Views</div>
|
||||
</div>
|
||||
</div>
|
||||
<ng-container *ngIf="viewsFrameUrl || downloadsFrameUrl">
|
||||
<div *ngIf="metricsClicked && downloadsFrameUrl && resultLandingInfo.measure.downloads" class="uk-margin-large-right">
|
||||
<i-frame [height]="300" [url]="downloadsFrameUrl" [addClass]="false"
|
||||
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1"></i-frame>
|
||||
</div>
|
||||
<div *ngIf="metricsClicked && viewsFrameUrl && resultLandingInfo.measure.views" class="uk-margin-large-right">
|
||||
<i-frame [height]="300" [url]="viewsFrameUrl" [addClass]="false"
|
||||
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1">
|
||||
</i-frame>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="uk-text-center uk-margin-large-top">
|
||||
<span class="uk-text-meta">Powered by</span>
|
||||
<img class="uk-margin-small-left uk-margin-small-right uk-width-small" src="assets/common-assets/logo-large-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngTemplateOutlet="metricsContent"></ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="uk-text-xsmall uk-hidden@m"><ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container></div>
|
||||
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
|
||||
|
|
@ -691,7 +458,7 @@
|
|||
<!-- Mobile view -->
|
||||
<div *ngIf="isMobile" class="uk-hidden@m uk-position-relative landing">
|
||||
<ng-container *ngIf="resultLandingInfo">
|
||||
<div class="uk-container uk-section">
|
||||
<div *ngIf="mobileContent == 'info'" class="uk-container uk-section">
|
||||
<div *ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0"
|
||||
class="uk-margin-small-bottom uk-flex uk-flex-middle"
|
||||
[ngClass]="(resultLandingInfo.hostedBy_collectedFrom[0].accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')">
|
||||
|
|
@ -783,10 +550,82 @@
|
|||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing-action-bar-mobile uk-background-default">
|
||||
<div class="uk-container uk-flex uk-flex-middle uk-flex-between uk-text-xsmall uk-text-meta">
|
||||
<div *ngIf="mobileContent == 'metrics'" class="uk-container uk-section">
|
||||
<ng-container *ngTemplateOutlet="metricsContent"></ng-container>
|
||||
</div>
|
||||
<div *ngIf="mobileContent == 'actions'" class="uk-container uk-section">
|
||||
<ng-container *ngIf="resultLandingInfo?.hostedBy_collectedFrom">
|
||||
<div class="clickable uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal"
|
||||
(click)=" onSelectActiveTab('availableOn')">
|
||||
<availableOn [availableOn]="resultLandingInfo.hostedBy_collectedFrom" (viewAllClicked)="viewAll=$event"
|
||||
[isMobile]="true" [usedBy]="'landing'" class="uk-width-1-1"></availableOn>
|
||||
</div>
|
||||
<hr class="uk-margin-remove">
|
||||
</ng-container>
|
||||
<ng-container *ngIf="resultLandingInfo?.deletedByInferenceIds">
|
||||
<div class="clickable uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal"
|
||||
(click)="deleteByInferenceOpened = true; openFsModal(alertModalDeletedByInferenceFS, 'Other versions')">
|
||||
<icon [flex]="true" [ratio]="0.8" name="versions" visuallyHidden="versions"></icon>
|
||||
<span class="uk-margin-small-left">
|
||||
View all {{resultLandingInfo.deletedByInferenceIds.length}} versions
|
||||
</span>
|
||||
</div>
|
||||
<hr class="uk-margin-remove">
|
||||
</ng-container>
|
||||
<ng-container>
|
||||
<div class="clickable uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal"
|
||||
(click)="openFsModal(addThisFsModal, 'Share this '+getTypeName()+' in your social networks')">
|
||||
<icon [flex]="true" [ratio]="0.8" name="share" visuallyHidden="share"></icon>
|
||||
<span class="uk-margin-small-left">Share</span>
|
||||
</div>
|
||||
<hr class="uk-margin-remove">
|
||||
</ng-container>
|
||||
<ng-container>
|
||||
<div class="clickable uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal"
|
||||
(click)="citeThisClicked=true; openFsModal(citeFsModal, 'Cite this '+getTypeName())">
|
||||
<icon [flex]="true" [ratio]="0.7" name="cite" visuallyHidden="cite"></icon>
|
||||
<span class="uk-margin-small-left">Cite</span>
|
||||
</div>
|
||||
<hr class="uk-margin-remove">
|
||||
</ng-container>
|
||||
<ng-container *ngIf="properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community' || properties.adminToolsPortalType == 'aggregator'" >
|
||||
<div class="clickable uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal">
|
||||
<orcid-work [resultId]="id" [resultTitle]="resultLandingInfo?.title" [resultLandingInfo]="resultLandingInfo"
|
||||
[pids]="pidsArrayString" [pageType]="'landing'" [isMobile]="true">
|
||||
</orcid-work>
|
||||
</div>
|
||||
<hr class="uk-margin-remove">
|
||||
</ng-container>
|
||||
<!-- <ng-container *ngIf="resultLandingInfo?.deletedByInferenceIds">-->
|
||||
<!-- <div class="clickable uk-button-link uk-flex uk-flex-middle uk-h6" (click)="onSelectActiveTab('orcid')">-->
|
||||
<!-- <icon [flex]="true" [ratio]="0.8" name="versions" visuallyHidden="versions"></icon>-->
|
||||
<!-- <span class="uk-margin-small-left">-->
|
||||
<!-- ORCID-->
|
||||
<!-- </span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <hr>-->
|
||||
<!-- </ng-container>-->
|
||||
<ng-container *ngIf="isRouteAvailable('participate/direct-claim')">
|
||||
<a class="uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal"
|
||||
[queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'project'])"
|
||||
routerLinkActive="router-link-active" routerLink="/participate/direct-claim">
|
||||
<icon [flex]="true" [ratio]="0.7" name="link_to" visuallyHidden="link"></icon>
|
||||
<span class="uk-margin-small-left"
|
||||
[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: bottom-left; cls: uk-active uk-text-small uk-padding-small'">
|
||||
Link to
|
||||
</span>
|
||||
</a>
|
||||
<hr class="uk-margin-remove">
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="landing-action-bar-mobile uk-background-default">
|
||||
<div class="uk-container uk-flex-middle uk-grid uk-text-xsmall uk-text-meta" [ngClass]="(resultLandingInfo.measure || hasAltMetrics) ? 'uk-child-width-1-3' : 'uk-child-width-1-2'">
|
||||
<div>
|
||||
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset">
|
||||
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'info'">
|
||||
<span [ngClass]="mobileContent == 'info' ? 'uk-text-primary': ''">
|
||||
<icon *ngIf="getTypeName().toLowerCase() == 'publication'" name="description" type="outlined" [flex]="true" [ratio]="2"></icon>
|
||||
<icon *ngIf="getTypeName().toLowerCase() == 'research data'" name="database" type="outlined" [flex]="true" [ratio]="2"></icon>
|
||||
<icon *ngIf="getTypeName().toLowerCase() == 'research software'" name="integration_instructions" type="outlined" [flex]="true" [ratio]="2"></icon>
|
||||
|
|
@ -794,61 +633,62 @@
|
|||
<icon *ngIf="getTypeName().toLowerCase() == 'project'" name="assignment_turned_in" type="outlined" [flex]="true" [ratio]="2"></icon>
|
||||
<icon *ngIf="getTypeName().toLowerCase() == 'data source'" name="note_add" type="outlined" [flex]="true" [ratio]="2"></icon>
|
||||
<icon *ngIf="getTypeName().toLowerCase() == 'organization'" name="corporate_fare" type="outlined" [flex]="true" [ratio]="2"></icon>
|
||||
</span>
|
||||
<span>{{getTypeName()}}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div *ngIf="resultLandingInfo && (resultLandingInfo.measure || hasAltMetrics)">
|
||||
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset">
|
||||
<icon name="bar_chart" type="outlined" [flex]="true" [ratio]="2"></icon>
|
||||
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'metrics'">
|
||||
<icon name="bar_chart" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'metrics' ? 'uk-text-primary': ''"></icon>
|
||||
<span>Metrics</span>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset">
|
||||
<icon name="pending" type="outlined" [flex]="true" [ratio]="2"></icon>
|
||||
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'actions'">
|
||||
<icon name="pending" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'actions' ? 'uk-text-primary': ''"></icon>
|
||||
<span>Actions</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<fs-modal #summaryFsModal [classTitle]="'uk-background-primary-opacity'" (cancelEmitter)="cancelSummaryClicked()">
|
||||
<fs-modal #summaryFsModal classTitle="uk-tile-default uk-border-bottom" (cancelEmitter)="cancelSummaryClicked()">
|
||||
<ng-container *ngTemplateOutlet="summary_content"></ng-container>
|
||||
</fs-modal>
|
||||
|
||||
<fs-modal #referencesFsModal [classTitle]="'uk-background-primary-opacity'"
|
||||
<fs-modal #referencesFsModal classTitle="uk-tile-default uk-border-bottom"
|
||||
*ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0">
|
||||
<ng-container *ngTemplateOutlet="references_content"></ng-container>
|
||||
</fs-modal>
|
||||
|
||||
<fs-modal #relatedResearchFsModal [classTitle]="'uk-background-primary-opacity'"
|
||||
<fs-modal #relatedResearchFsModal classTitle="uk-tile-default uk-border-bottom"
|
||||
*ngIf="resultLandingInfo.relatedResults?.length > 0">
|
||||
<div class="landing-section uk-padding uk-padding-remove-horizontal">
|
||||
<ng-container *ngTemplateOutlet="relation_in_tab; context: { researchResults: filteredRelatedResults, header: ''}"></ng-container>
|
||||
</div>
|
||||
</fs-modal>
|
||||
|
||||
<fs-modal #bioentitiesFsModal [classTitle]="'uk-background-primary-opacity'"
|
||||
<fs-modal #bioentitiesFsModal classTitle="uk-tile-default uk-border-bottom"
|
||||
*ngIf="resultLandingInfo.bioentities && bioentitiesNum> 0">
|
||||
<div class="landing-section uk-padding uk-padding-remove-horizontal">
|
||||
<ng-container *ngTemplateOutlet="bioentities_content"></ng-container>
|
||||
</div>
|
||||
</fs-modal>
|
||||
|
||||
<fs-modal #compatibleEOSCFsModal [classTitle]="'uk-background-primary-opacity'">
|
||||
<fs-modal #compatibleEOSCFsModal classTitle="uk-tile-default uk-border-bottom">
|
||||
<ng-container *ngIf="resultLandingInfo.eoscSubjects?.length > 0 && properties.adminToolsPortalType == 'eosc' && (!viewAll || viewAll=='egiNotebook')">
|
||||
<ng-container *ngTemplateOutlet="compatibleEOSC_content"></ng-container>
|
||||
</ng-container>
|
||||
</fs-modal>
|
||||
|
||||
<fs-modal #fundedByFsModal [classTitle]="'uk-background-primary-opacity'">
|
||||
<fs-modal #fundedByFsModal classTitle="uk-tile-default uk-border-bottom">
|
||||
<ng-container *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0 && (!viewAll || viewAll=='fundedBy')">
|
||||
<fundedBy [fundedByProjects]="resultLandingInfo.fundedByProjects" [provenanceActionVocabulary]="provenanceActionVocabulary" (viewAllClicked)="viewAll=$event"
|
||||
[isMobile]="true" [viewAll]="true"></fundedBy>
|
||||
</ng-container>
|
||||
</fs-modal>
|
||||
|
||||
<fs-modal #relatedCommunitiesFsModal [classTitle]="'uk-background-primary-opacity'">
|
||||
<fs-modal #relatedCommunitiesFsModal classTitle="uk-tile-default uk-border-bottom">
|
||||
<ng-container *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0 && !noCommunities && (!viewAll || viewAll=='relatedTo')">
|
||||
<relatedTo [contexts]="resultLandingInfo.contexts" [viewAll]="viewAll=='relatedTo'"
|
||||
(viewAllClicked)="viewAll=$event" (noCommunities)="noCommunities = true"
|
||||
|
|
@ -856,20 +696,20 @@
|
|||
</ng-container>
|
||||
</fs-modal>
|
||||
|
||||
<fs-modal #enermapsToolFsModal [classTitle]="'uk-background-primary-opacity'">
|
||||
<fs-modal #enermapsToolFsModal classTitle="uk-tile-default uk-border-bottom">
|
||||
<div *ngIf="enermapsId && properties.enermapsURL" class="landing-section uk-padding uk-padding-remove-horizontal">
|
||||
<ng-container *ngTemplateOutlet="enermapsTool_content"></ng-container>
|
||||
</div>
|
||||
</fs-modal>
|
||||
|
||||
<fs-modal #sdgsFsModal *ngIf="isMobile" [classTitle]="'uk-background-primary-opacity'" (cancelEmitter)="sdgsFsModalCancelled()">
|
||||
<fs-modal #sdgsFsModal *ngIf="isMobile" classTitle="uk-tile-default uk-border-bottom" (cancelEmitter)="sdgsFsModalCancelled()">
|
||||
<ng-container *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0">
|
||||
<sdg *ngIf="viewAllMobile=='sdg'" [subjects]="resultLandingInfo.sdg" [viewAll]="true" (suggestClicked)="suggestMobileClicked($event)"></sdg>
|
||||
<sdg-fos-suggest *ngIf="viewAllMobile=='sdgSuggest'" #sdgFosSuggest [title]="resultLandingInfo.title" [entityType]="resultLandingInfo.resultType"></sdg-fos-suggest>
|
||||
</ng-container>
|
||||
</fs-modal>
|
||||
|
||||
<fs-modal #fosFsModal *ngIf="isMobile" [classTitle]="'uk-background-primary-opacity'" (cancelEmitter)="fosFsModalCancelled()">
|
||||
<fs-modal #fosFsModal *ngIf="isMobile" classTitle="uk-tile-default uk-border-bottom" (cancelEmitter)="fosFsModalCancelled()">
|
||||
<ng-container *ngIf="resultLandingInfo.fos && resultLandingInfo.fos.length > 0">
|
||||
<fos *ngIf="viewAllMobile=='fos'" [subjects]="resultLandingInfo.fos" [viewAll]="true" (suggestClicked)="suggestMobileClicked($event)"></fos>
|
||||
<sdg-fos-suggest *ngIf="viewAllMobile=='fosSuggest'" #sdgFosSuggest [title]="resultLandingInfo.title" [entityType]="resultLandingInfo.resultType"></sdg-fos-suggest>
|
||||
|
|
@ -908,8 +748,7 @@
|
|||
[type]="title.toLowerCase()" [piwikSiteId]="piwikSiteId"></citeThis>
|
||||
</modal-alert>
|
||||
|
||||
<modal-alert *ngIf="resultLandingInfo"
|
||||
#addThisModal classBody="uk-flex uk-flex-center uk-flex-middle">
|
||||
<modal-alert *ngIf="resultLandingInfo" #addThisModal classBody="uk-flex uk-flex-center uk-flex-middle">
|
||||
<addThis></addThis>
|
||||
</modal-alert>
|
||||
|
||||
|
|
@ -1150,3 +989,268 @@
|
|||
</ng-container>
|
||||
</ul>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #metricsContent>
|
||||
<div id="metrics" class="landing-section uk-padding uk-padding-remove-horizontal">
|
||||
<ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher>
|
||||
<li>
|
||||
<a href="#">Overview</a>
|
||||
</li>
|
||||
<li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.citations || resultLandingInfo.measure.popularity || resultLandingInfo.measure.influence || resultLandingInfo.measure.impulse)">
|
||||
<a href="#">Impact</a>
|
||||
</li>
|
||||
<li *ngIf="hasAltMetrics">
|
||||
<a href="#">Social</a>
|
||||
</li>
|
||||
<li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.downloads || resultLandingInfo.measure.views)">
|
||||
<a href="#" (click)="clickedUsageMetrics()">Usage</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="uk-switcher uk-margin-large-top">
|
||||
<!-- overview -->
|
||||
<li>
|
||||
<div class="uk-flex uk-flex-wrap landing-metrics-overview">
|
||||
<div *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.citations || resultLandingInfo.measure.popularity || resultLandingInfo.measure.influence || resultLandingInfo.measure.impulse)">
|
||||
<div class="uk-grid-divider" uk-grid>
|
||||
<div>
|
||||
<div class="uk-text-center uk-margin-small-bottom">
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<table class="uk-table uk-table-small">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="uk-padding-remove-top">
|
||||
<icon name="cite" [flex]="true" [customClass]="'bip-icon'"></icon>
|
||||
</td>
|
||||
<td class="uk-padding-remove-top">
|
||||
Citations
|
||||
</td>
|
||||
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
|
||||
{{resultLandingInfo.measure.citations | number}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<icon name="fire" [flex]="true" [customClass]="'bip-icon'"></icon>
|
||||
</td>
|
||||
<td>
|
||||
Popularity
|
||||
</td>
|
||||
<td class="uk-text-uppercase uk-text-bolder">
|
||||
{{resultLandingInfo.measure.popularity}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<icon name="landmark" [flex]="true" [customClass]="'bip-icon'"></icon>
|
||||
</td>
|
||||
<td>
|
||||
Influence
|
||||
</td>
|
||||
<td class="uk-text-uppercase uk-text-bolder">
|
||||
{{resultLandingInfo.measure.influence}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="uk-padding-remove-bottom">
|
||||
<icon name="rocket" [flex]="true" [customClass]="'bip-icon'"></icon>
|
||||
</td>
|
||||
<td class="uk-padding-remove-bottom">
|
||||
Impulse
|
||||
</td>
|
||||
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">
|
||||
{{resultLandingInfo.measure.impulse}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="hasAltMetrics">
|
||||
<altmetrics id="{{resultLandingInfo.identifiers?.get('doi')[0]}}" type="doi" size="donut"></altmetrics>
|
||||
</div>
|
||||
<div *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.downloads || resultLandingInfo.measure.views)">
|
||||
<div class="uk-grid-divider" uk-grid>
|
||||
<div>
|
||||
<div class="uk-text-center uk-margin-small-bottom">
|
||||
<img src="assets/common-assets/logo-small-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
|
||||
</div>
|
||||
<span class="uk-text-uppercase uk-text-xsmall">Usage by</span>
|
||||
<span class="uk-display-block uk-text-bolder">UsageCounts</span>
|
||||
</div>
|
||||
<div>
|
||||
<table class="uk-table uk-table-small">
|
||||
<tbody>
|
||||
<tr *ngIf="resultLandingInfo.measure.downloads">
|
||||
<td class="uk-padding-remove-top">
|
||||
<icon name="download" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
|
||||
</td>
|
||||
<td class="uk-padding-remove-top">
|
||||
Downloads
|
||||
</td>
|
||||
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder"
|
||||
[attr.uk-tooltip]="resultLandingInfo.measure.downloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{resultLandingInfo.measure.downloads | number}}">
|
||||
{{formatNumber(resultLandingInfo.measure.downloads)}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr *ngIf="resultLandingInfo.measure.views">
|
||||
<td class="uk-padding-remove-bottom">
|
||||
<icon name="visibility" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
|
||||
</td>
|
||||
<td class="uk-padding-remove-bottom">
|
||||
Views
|
||||
</td>
|
||||
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder"
|
||||
[attr.uk-tooltip]="resultLandingInfo.measure.views >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{resultLandingInfo.measure.views | number}}">
|
||||
{{formatNumber(resultLandingInfo.measure.views)}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- impact -->
|
||||
<li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.citations || resultLandingInfo.measure.popularity || resultLandingInfo.measure.influence || resultLandingInfo.measure.impulse)">
|
||||
<div class="uk-flex uk-flex-center uk-flex-middle">
|
||||
<div class="uk-card uk-card-default uk-padding-small">
|
||||
<table class="uk-table uk-table-small uk-margin-remove">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="uk-padding-remove-top">
|
||||
<icon name="cite" [flex]="true" [customClass]="'bip-icon'"></icon>
|
||||
</td>
|
||||
<td class="uk-padding-remove-top">
|
||||
Citations
|
||||
</td>
|
||||
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
|
||||
{{resultLandingInfo.measure.citations}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<icon name="fire" [flex]="true" [customClass]="'bip-icon'"></icon>
|
||||
</td>
|
||||
<td>
|
||||
Popularity
|
||||
</td>
|
||||
<td class="uk-text-uppercase uk-text-bolder">
|
||||
{{resultLandingInfo.measure.popularity}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<icon name="landmark" [flex]="true" [customClass]="'bip-icon'"></icon>
|
||||
</td>
|
||||
<td>
|
||||
Influence
|
||||
</td>
|
||||
<td class="uk-text-uppercase uk-text-bolder">
|
||||
{{resultLandingInfo.measure.influence}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="uk-padding-remove-bottom">
|
||||
<icon name="rocket" [flex]="true" [customClass]="'bip-icon'"></icon>
|
||||
</td>
|
||||
<td class="uk-padding-remove-bottom">
|
||||
Impulse
|
||||
</td>
|
||||
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">
|
||||
{{resultLandingInfo.measure.impulse}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div *ngIf="bipFrameUrl" class="uk-margin-large-left">
|
||||
<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" [ngClass]="bipFrameUrl ? 'uk-margin-top' : 'uk-margin-large-top'">
|
||||
<span class="uk-text-meta">Powered by</span>
|
||||
<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>
|
||||
<!-- social -->
|
||||
<li *ngIf="hasAltMetrics">
|
||||
<altmetrics id="{{resultLandingInfo.identifiers?.get('doi')[0]}}" type="doi" size="medium-donut"></altmetrics>
|
||||
</li>
|
||||
<!-- usage -->
|
||||
<li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.downloads || resultLandingInfo.measure.views)">
|
||||
<div class="uk-flex uk-flex-center uk-flex-middle">
|
||||
<div class="uk-margin-large-right">
|
||||
<div *ngIf="resultLandingInfo.measure.downloads" class="uk-text-center uk-margin-medium-bottom">
|
||||
<div class="uk-text-background uk-text-bold number metrics-number"
|
||||
[attr.uk-tooltip]="resultLandingInfo.measure.downloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{resultLandingInfo.measure.downloads | number}}">{{formatNumber(resultLandingInfo.measure.downloads)}}</div>
|
||||
<div class="uk-text-bold">Downloads</div>
|
||||
</div>
|
||||
<div *ngIf="resultLandingInfo.measure.views" class="uk-text-center uk-margin-medium-bottom">
|
||||
<div class="uk-text-background uk-text-bold number metrics-number"
|
||||
[attr.uk-tooltip]="resultLandingInfo.measure.views >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{resultLandingInfo.measure.views | number}}">{{formatNumber(resultLandingInfo.measure.views)}}</div>
|
||||
<div class="uk-text-bold">Views</div>
|
||||
</div>
|
||||
</div>
|
||||
<ng-container *ngIf="viewsFrameUrl || downloadsFrameUrl">
|
||||
<div *ngIf="metricsClicked && downloadsFrameUrl && resultLandingInfo.measure.downloads" class="uk-margin-large-right">
|
||||
<i-frame [height]="300" [url]="downloadsFrameUrl" [addClass]="false"
|
||||
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1"></i-frame>
|
||||
</div>
|
||||
<div *ngIf="metricsClicked && viewsFrameUrl && resultLandingInfo.measure.views" class="uk-margin-large-right">
|
||||
<i-frame [height]="300" [url]="viewsFrameUrl" [addClass]="false"
|
||||
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1">
|
||||
</i-frame>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="uk-text-center uk-margin-large-top">
|
||||
<span class="uk-text-meta">Powered by</span>
|
||||
<img class="uk-margin-small-left uk-margin-small-right uk-width-small" src="assets/common-assets/logo-large-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<fs-modal *ngIf="resultLandingInfo && resultLandingInfo.deletedByInferenceIds" #AlertModalDeletedByInferenceFS classTitle="uk-tile-default uk-border-bottom">
|
||||
<deletedByInference *ngIf="type == 'publication' && deleteByInferenceOpened"
|
||||
[id]="resultLandingInfo.record['result']['header']['dri:objIdentifier']"
|
||||
[ids]="resultLandingInfo.deletedByInferenceIds"
|
||||
[resultType]="type" [type]="openaireEntities.PUBLICATIONS"></deletedByInference>
|
||||
<deletedByInference *ngIf="type == 'dataset' && deleteByInferenceOpened"
|
||||
[id]="resultLandingInfo.record['result']['header']['dri:objIdentifier']"
|
||||
[ids]="resultLandingInfo.deletedByInferenceIds"
|
||||
[resultType]="'dataset'" [type]="openaireEntities.DATASETS"></deletedByInference>
|
||||
<deletedByInference *ngIf="type == 'software' && deleteByInferenceOpened"
|
||||
[id]="resultLandingInfo.record['result']['header']['dri:objIdentifier']"
|
||||
[ids]="resultLandingInfo.deletedByInferenceIds"
|
||||
[resultType]="type" [type]="openaireEntities.SOFTWARE"></deletedByInference>
|
||||
<deletedByInference *ngIf="type == 'orp' && deleteByInferenceOpened"
|
||||
[id]="resultLandingInfo.record['result']['header']['dri:objIdentifier']"
|
||||
[ids]="resultLandingInfo.deletedByInferenceIds"
|
||||
[resultType]="'other'" [type]="openaireEntities.OTHER"></deletedByInference>
|
||||
</fs-modal>
|
||||
|
||||
<fs-modal *ngIf="resultLandingInfo" #citeFsModal classTitle="uk-tile-default uk-border-bottom">
|
||||
<citeThis *ngIf="citeThisClicked" [result]="resultLandingInfo" [id]="id"
|
||||
[type]="title.toLowerCase()" [piwikSiteId]="piwikSiteId"></citeThis>
|
||||
</fs-modal>
|
||||
|
||||
<fs-modal *ngIf="resultLandingInfo" #addThisFsModal classTitle="uk-tile-default uk-border-bottom" classBody="uk-flex uk-flex-center uk-flex-middle">
|
||||
<addThis></addThis>
|
||||
</fs-modal>
|
||||
|
|
@ -43,8 +43,11 @@ export class ResultLandingComponent {
|
|||
enermapsId;
|
||||
// @ViewChild('linkModal') linkModal;
|
||||
@ViewChild('citeModal') citeModal;
|
||||
@ViewChild('citeFsModal') citeFsModal;
|
||||
@ViewChild('addThisModal') addThisModal;
|
||||
@ViewChild('addThisFsModal') addThisFsModal;
|
||||
@ViewChild('AlertModalDeletedByInference') alertModalDeletedByInference;
|
||||
@ViewChild('AlertModalDeletedByInferenceFS') alertModalDeletedByInferenceFS;
|
||||
// @ViewChild('relationModal') relationModal;
|
||||
public deleteByInferenceOpened: boolean = false;
|
||||
@Input() public resultFromInput: boolean = false;
|
||||
|
|
@ -144,6 +147,7 @@ export class ResultLandingComponent {
|
|||
|
||||
// public shouldSticky: boolean = true;
|
||||
|
||||
public mobileContent: "info" | "metrics" | "actions" = "info";
|
||||
public tabMobile: string = "";
|
||||
public viewAllMobile: string = "";
|
||||
public viewAll: string = "";
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import {ExternalIDV3_0, WorkV3_0} from "./orcidWork";
|
|||
import {EnvProperties} from "../utils/properties/env-properties";
|
||||
import {UserManagementService} from "../services/user-management.service";
|
||||
import {OpenaireEntities} from "../utils/properties/searchFields";
|
||||
import {FullScreenModalComponent} from "../utils/modal/full-screen-modal/full-screen-modal.component";
|
||||
|
||||
declare var UIkit: any;
|
||||
|
||||
|
|
@ -22,7 +23,8 @@ declare var UIkit: any;
|
|||
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
|
||||
[title]="(!pids || !isLoggedIn) ? (!pids ? tooltipNoPid : tooltipNoLoggedInUser) : tooltipAdd">
|
||||
<a *ngIf="!showLoading" (click)="currentAction='add'; saveWorkPreparation();"
|
||||
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder"
|
||||
class="uk-flex uk-flex-middle uk-flex-center uk-button-link"
|
||||
[class.uk-text-bolder]="!(isMobile && pageType == 'landing')"
|
||||
[class.uk-disabled]="showLoading || !isLoggedIn || !pids"
|
||||
[class.uk-text-muted]="showLoading || !isLoggedIn || !pids"
|
||||
(mouseover)="hoverEvent($event)" (mouseout)="hoverEvent($event)">
|
||||
|
|
@ -39,7 +41,8 @@ declare var UIkit: any;
|
|||
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
|
||||
[title]="(!pids || !isLoggedIn) ? (!pids ? tooltipNoPid : tooltipNoLoggedInUser) : tooltipDelete">
|
||||
<a *ngIf="!showLoading" (click)="currentAction='delete'; deleteWorks();"
|
||||
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder"
|
||||
class="uk-flex uk-flex-middle uk-flex-center uk-button-link"
|
||||
[class.uk-text-bolder]="!(isMobile && pageType == 'landing')"
|
||||
[class.uk-disabled]="showLoading || !isLoggedIn || !pids"
|
||||
[class.uk-text-muted]="showLoading || !isLoggedIn || !pids"
|
||||
(mouseover)="hoverEvent($event, 'delete')" (mouseout)="hoverEvent($event, 'delete')">
|
||||
|
|
@ -68,7 +71,7 @@ declare var UIkit: any;
|
|||
</span> -->
|
||||
</ng-container>
|
||||
|
||||
<modal-alert #grantModal [overflowBody]=false (alertOutput)="openGrantWindow()">
|
||||
<modal-alert *ngIf="!isMobile" #grantModal [overflowBody]=false (alertOutput)="openGrantWindow()">
|
||||
<div>
|
||||
<div>{{requestGrantMessage}}</div>
|
||||
|
||||
|
|
@ -92,6 +95,13 @@ declare var UIkit: any;
|
|||
</div>
|
||||
</modal-alert>
|
||||
|
||||
<fs-modal *ngIf="isMobile" #grantFsModal classTitle="uk-tile-default uk-border-bottom">
|
||||
<div>{{requestGrantMessage}}</div>
|
||||
<button class="uk-margin-medium-top uk-button uk-button-primary uk-align-center" (click)="openGrantWindow()">
|
||||
Grant OpenAIRE
|
||||
</button>
|
||||
</fs-modal>
|
||||
|
||||
|
||||
<ng-container *ngIf="pageType == 'my_search'">
|
||||
<span class="uk-margin-bottom uk-flex uk-flex-middle uk-flex-center">
|
||||
|
|
@ -279,10 +289,32 @@ declare var UIkit: any;
|
|||
<!-- </button>-->
|
||||
<!-- </div>-->
|
||||
</modal-alert>
|
||||
|
||||
<fs-modal #propagationFsModal classTitle="uk-tile-default uk-border-bottom">
|
||||
<div>
|
||||
This {{openaireEntities.RESULT}} is the result of <span
|
||||
class="uk-text-bold"> merged {{openaireEntities.RESULTS}} 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 {{openaireEntities.RESULT}}.
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<button class="uk-margin-medium-top uk-button uk-button-primary uk-align-center" (click)="confirmedPropagation()">
|
||||
Continue
|
||||
</button>
|
||||
</fs-modal>
|
||||
`
|
||||
})
|
||||
|
||||
export class OrcidWorkComponent {
|
||||
@Input() isMobile: boolean = false;
|
||||
@Input() resultId: string = "";
|
||||
@Input() resultTitle: string = "";
|
||||
@Input() resultLandingInfo: ResultLandingInfo;
|
||||
|
|
@ -299,8 +331,10 @@ export class OrcidWorkComponent {
|
|||
@ViewChild('workModal') workModal;
|
||||
// @ViewChild('saveWorkModal') saveWorkModal;
|
||||
@ViewChild('grantModal') grantModal;
|
||||
@ViewChild('grantFsModal') grantFsModal: FullScreenModalComponent;
|
||||
// @ViewChild('messageModal') messageModal;
|
||||
@ViewChild('propagationModal') propagationModal;
|
||||
@ViewChild('propagationFsModal') propagationFsModal;
|
||||
|
||||
public requestGrant: boolean = false;
|
||||
public requestGrantMessage: string = "Please grant OpenAIRE to access and update your ORCID works.";
|
||||
|
|
@ -720,12 +754,18 @@ export class OrcidWorkComponent {
|
|||
}
|
||||
|
||||
openGrantModal(title: string) {
|
||||
this.grantModal.cancelButton = true;
|
||||
this.grantModal.okButton = true;
|
||||
this.grantModal.okButtonText = "Grant OpenAIRE";
|
||||
this.grantModal.okButtonLeft = false;
|
||||
this.grantModal.alertTitle = title;
|
||||
this.grantModal.open();
|
||||
if(this.isMobile) {
|
||||
this.grantFsModal.okButton = false;
|
||||
this.grantFsModal.title = title;
|
||||
this.grantFsModal.open();
|
||||
} else {
|
||||
this.grantModal.cancelButton = true;
|
||||
this.grantModal.okButton = true;
|
||||
this.grantModal.okButtonText = "Grant OpenAIRE";
|
||||
this.grantModal.okButtonLeft = false;
|
||||
this.grantModal.alertTitle = title;
|
||||
this.grantModal.open();
|
||||
}
|
||||
}
|
||||
|
||||
closeGrantModal() {
|
||||
|
|
@ -755,12 +795,18 @@ export class OrcidWorkComponent {
|
|||
// }
|
||||
|
||||
openPropagationModal(title: string) {
|
||||
this.propagationModal.cancelButton = true;
|
||||
this.propagationModal.okButton = true;
|
||||
this.propagationModal.okButtonText = "Continue";
|
||||
this.propagationModal.okButtonLeft = false;
|
||||
this.propagationModal.alertTitle = title;
|
||||
this.propagationModal.open();
|
||||
if(this.isMobile) {
|
||||
this.propagationFsModal.okButton = false;
|
||||
this.propagationFsModal.title = title;
|
||||
this.propagationFsModal.open();
|
||||
} else {
|
||||
this.propagationModal.cancelButton = true;
|
||||
this.propagationModal.okButton = true;
|
||||
this.propagationModal.okButtonText = "Continue";
|
||||
this.propagationModal.okButtonLeft = false;
|
||||
this.propagationModal.alertTitle = title;
|
||||
this.propagationModal.open();
|
||||
}
|
||||
}
|
||||
|
||||
closePropagationModal() {
|
||||
|
|
|
|||
|
|
@ -15,11 +15,12 @@ import {ResultLandingUtilsModule} from '../landingPages/landing-utils/resultLand
|
|||
import {IconsModule} from '../utils/icons/icons.module';
|
||||
import {IconsService} from "../utils/icons/icons.service";
|
||||
import {orcid_add, orcid_bin} from "../utils/icons/icons";
|
||||
import {FullScreenModalModule} from "../utils/modal/full-screen-modal/full-screen-modal.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, RouterModule, AlertModalModule, LoadingModule, ResultLandingUtilsModule,
|
||||
IconsModule
|
||||
IconsModule, FullScreenModalModule
|
||||
],
|
||||
declarations: [
|
||||
OrcidComponent,
|
||||
|
|
|
|||
Loading…
Reference in New Issue