From 67714f6ac41a936798b2b2caa0b9047db9111a08 Mon Sep 17 00:00:00 2001 From: Alex Martzios Date: Thu, 23 Feb 2023 13:09:42 +0200 Subject: [PATCH] redesign project landing for mobile view, add embed tooltip for entity-actions component and project landing, minor fix for resultLanding metrics tab --- landingPages/project/project.component.html | 781 ++++++++++++------ landingPages/project/project.component.ts | 85 +- landingPages/project/project.module.ts | 4 +- .../result/resultLanding.component.html | 2 +- .../entity-actions.component.ts | 5 +- 5 files changed, 584 insertions(+), 293 deletions(-) diff --git a/landingPages/project/project.component.html b/landingPages/project/project.component.html index cb8a009f..cea6bcf0 100644 --- a/landingPages/project/project.component.html +++ b/landingPages/project/project.component.html @@ -1,5 +1,6 @@ -
-
+ +
+
@@ -138,8 +139,10 @@ Deposit - + Embed - +
@@ -393,7 +396,7 @@ - + @@ -405,245 +408,30 @@
-
-
-
-
-
-
- No summary information available -
-
-
- -
-
-
Description
-
-
-
-
- - View more - -
-
-
-
-
-
- -
Partners
-
- -
- - View all - -
-
- View less -
-
-
-
-
-
-
-
- - -
- - -
+ + + + + - -
- - -
+ -
- - -
+ -
- - -
+ - + -
- -
    - -
  • -
    -
    -
    -
    - OpenAIRE UsageCounts -
    - Usage by - UsageCounts -
    -
    - - - - - - - - - - - - - -
    - - - Downloads - - {{formatNumber(totalDownloads)}} -
    - - - Views - - {{formatNumber(totalViews)}} -
    -
    -
    -
    -
    • - -
  • -
    -
    -
    -
    {{formatNumber(totalDownloads)}}
    -
    Downloads
    -
    -
    -
    {{formatNumber(totalViews)}}
    -
    Views
    -
    -
    - -
    - -
    -
    - - -
    -     -
    -
    - Powered by - OpenAIRE UsageCounts -
    -
    • -
-
+ -
-
Statistics
- -
-
-
-
Produced - {{openaireEntities.RESULTS}} per year -
- -
-
-
-
-
Access mode of - {{openaireEntities.RESULTS}} -
- -
-
-
-
-
- {{openaireEntities.RESULTS}} per datasource -
- -
-
-
-
+
@@ -661,6 +449,183 @@
+ +
+ +
+ + +
+
+ +
+ Summary + +
+
+ + +
+ {{openaireEntities.PUBLICATIONS}} + +
+
+ + +
+ {{openaireEntities.DATASETS}} + +
+
+ + +
+ {{openaireEntities.SOFTWARE}} + +
+
+ + +
+ {{openaireEntities.OTHER}} + +
+
+ + +
+ DMPs + +
+
+ + +
+ Statistics + +
+
+ +
+
+
+ +
+
+ +
+ + Share +
+
+ + + + + + Deposit + + +
+ + +
+ + Embed +
+
+ + +
+ + Download +
+
+ + + + + + Link to + + +
+ +
+ +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ @@ -673,51 +638,11 @@ -
-
-
-
- 
{{getDynamicContent(embed_research_results_type)}}
-
- - COPY SCRIPT - -
-
- -
- For further information contact us at - {{properties.helpdeskEmail}} -
-
-
+ -
-
-
-
- - -
- -
- No reports available -
-
-
+ ... + + +
+
+
+
+
+
+ No summary information available +
+
+
+ +
+
+
Description
+
+
+
+
+ + View more + +
+
+
+
+
+
+ +
Partners
+
+ +
+ + View all + + + View all + +
+
+ View less +
+
+
+
+
+
+
+
+ + + +
+ + +
+ + + +
+ + +
+ + + +
+ + +
+ + + +
+ + +
+ + + + + + + +
+
Statistics
+ +
+
+
+
Produced + {{openaireEntities.RESULTS}} per year +
+ +
+
+
+
+
Access mode of + {{openaireEntities.RESULTS}} +
+ +
+
+
+
+
+ {{openaireEntities.RESULTS}} per datasource +
+ +
+
+
+
+ + + +
+ +
    + +
  • +
    +
    +
    +
    + OpenAIRE UsageCounts +
    + Usage by + UsageCounts +
    +
    + + + + + + + + + + + + + +
    + + + Downloads + + {{formatNumber(totalDownloads)}} +
    + + + Views + + {{formatNumber(totalViews)}} +
    +
    +
    +
    +
    • + +
  • +
    +
    +
    +
    {{formatNumber(totalDownloads)}}
    +
    Downloads
    +
    +
    +
    {{formatNumber(totalViews)}}
    +
    Views
    +
    +
    + +
    + +
    +
    + + +
    +     +
    +
    + Powered by + OpenAIRE UsageCounts +
    +
    • +
+
+ + + + + + + + + + + + + + + +
+
+
+
+ 
{{getDynamicContent(embed_research_results_type)}}
+
+ + COPY SCRIPT + +
+
+ +
+ For further information contact us at + {{properties.helpdeskEmail}} +
+
+
+ + + +
+
+
+
+ + +
+ +
+ No reports available +
+
+
+ diff --git a/landingPages/project/project.component.ts b/landingPages/project/project.component.ts index a90cab4f..b94eafa8 100644 --- a/landingPages/project/project.component.ts +++ b/landingPages/project/project.component.ts @@ -31,6 +31,8 @@ import {Option} from "../../sharedComponents/input/input.component"; import {OpenaireEntities} from "../../utils/properties/searchFields"; import {MetricsService} from '../../services/metrics.service'; import {NumberUtils} from '../../utils/number-utils.class'; +import {LayoutService} from '../../dashboard/sharedComponents/sidebar/layout.service'; +import {FullScreenModalComponent} from '../../utils/modal/full-screen-modal/full-screen-modal.component'; declare var ResizeObserver; @@ -85,8 +87,11 @@ export class ProjectComponent { // @ViewChild('statisticsModal') statisticsModal; // @ViewChild('linkProjectModal') linkProjectModal; @ViewChild('embedResultsModal') embedResultsModal; + @ViewChild('embedResultsFsModal') embedResultsFsModal: FullScreenModalComponent; @ViewChild('downloadReportModal') downloadReportModal; - @ViewChild('addThisModal') addThisModal + @ViewChild('downloadReportFsModal') downloadReportFsModal: FullScreenModalComponent; + @ViewChild('addThisModal') addThisModal; + @ViewChild('addThisFsModal') addThisFsModal: FullScreenModalComponent; // Request results for publications, research data and software only the one time (first time tab is clicked) private reloadPublications: boolean = true; @@ -166,6 +171,19 @@ export class ProjectComponent { properties: EnvProperties; public openaireEntities = OpenaireEntities; + public isMobile: boolean = false; + public mobileContent: "info" | "metrics" | "actions" = "info"; + public tabMobile: string = ""; + public viewAllMobile: string = ""; + // Full screen modals for small screens (mobile) + @ViewChild('summaryFsModal') summaryFsModal: FullScreenModalComponent; + @ViewChild('publicationsFsModal') publicationsFsModal: FullScreenModalComponent; + @ViewChild('datasetsFsModal') datasetsFsModal: FullScreenModalComponent; + @ViewChild('softwareFsModal') softwareFsModal: FullScreenModalComponent; + @ViewChild('otherFsModal') otherFsModal: FullScreenModalComponent; + @ViewChild('dmpsFsModal') dmpsFsModal: FullScreenModalComponent; + @ViewChild('statisticsFsModal') statisticsFsModal: FullScreenModalComponent; + constructor(private route: ActivatedRoute, private _router: Router, private _location: Location, @@ -180,24 +198,25 @@ export class ProjectComponent { private htmlService: HtmlProjectReportService, private indexInfoService: IndexInfoService, private metricsService: MetricsService, - private cdr: ChangeDetectorRef) {} + private cdr: ChangeDetectorRef, + private layoutService: LayoutService) {} ngOnInit() { - - this.properties = properties; - if (typeof document !== 'undefined') { - this.subscriptions.push(this.indexInfoService.getLastIndexDate(this.properties).subscribe(lastIndexUpdate => { - if (lastIndexUpdate) { - this.indexUpdateDate = new Date(lastIndexUpdate); - } - })); - } - //this.getDivContents(); - this.getPageContents(); - this.updateUrl(this.properties.domain + this.properties.baseLink + this._router.url); - this.seoService.createLinkForCanonicalURL(this.properties.domain +this.properties.baseLink + this._router.url); - - + this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => { + this.isMobile = isMobile; + })); + this.properties = properties; + if (typeof document !== 'undefined') { + this.subscriptions.push(this.indexInfoService.getLastIndexDate(this.properties).subscribe(lastIndexUpdate => { + if (lastIndexUpdate) { + this.indexUpdateDate = new Date(lastIndexUpdate); + } + })); + } + //this.getDivContents(); + this.getPageContents(); + this.updateUrl(this.properties.domain + this.properties.baseLink + this._router.url); + this.seoService.createLinkForCanonicalURL(this.properties.domain +this.properties.baseLink + this._router.url); this.subscriptions.push(this.route.queryParams.subscribe(params => { this.stickyHeader = false; this.metricsClicked = false; @@ -585,6 +604,13 @@ export class ProjectComponent { } } + public viewAllOrganizationsMobileClicked() { + this.summaryFsModal.title += " - Partners"; + this.summaryFsModal.back = true; + this.lessBtnOrganizations = true; + this.viewAllMobile = "organizations"; + } + public openOrganizationsModal() { this.organizationsModal.cancelButton = false; this.organizationsModal.okButton = false; @@ -973,6 +999,16 @@ export class ProjectComponent { ]; } + public viewAllDescriptionClicked() { + if(this.isMobile) { + this.summaryFsModal.title += " - Description"; + this.summaryFsModal.back = true; + this.viewAllMobile = "description"; + } else { + this.openDescriptionModal(); + } + } + public openDescriptionModal() { this.descriptionModal.alertFooter = false; this.descriptionModal.alertTitle = "Description"; @@ -990,6 +1026,21 @@ export class ProjectComponent { return formatted.number + formatted.size; } + public cancelSummaryClicked() { + this.summaryFsModal.title = "Summary"; + this.summaryFsModal.back = false; + this.lessBtnOrganizations = false; + this.viewAllMobile = ""; + } + + public openFsModal(fsModal: FullScreenModalComponent, title: string) { + fsModal.title = title; + fsModal.okButton = false; + fsModal.stayOpenInBack = true; + fsModal.open(); + this.tabMobile = title; + } + public getMetricsTooltip(value: string) { if (value == 'downloads') { return "
OpenAIRE UsageCountsDownloads provided by UsageCounts
"; diff --git a/landingPages/project/project.module.ts b/landingPages/project/project.module.ts index 5e4c6762..18f201ea 100644 --- a/landingPages/project/project.module.ts +++ b/landingPages/project/project.module.ts @@ -32,6 +32,7 @@ import {IconsModule} from "../../utils/icons/icons.module"; import {InputModule} from "../../sharedComponents/input/input.module"; import {IconsService} from "../../utils/icons/icons.service"; import {graph, link, link_to, open_access} from "../../utils/icons/icons"; +import {FullScreenModalModule} from '../../utils/modal/full-screen-modal/full-screen-modal.module'; @NgModule({ imports: [ @@ -41,7 +42,8 @@ import {graph, link, link_to, open_access} from "../../utils/icons/icons"; SearchResearchResultsServiceModule, ProjectServiceModule, Schema2jsonldModule, SEOServiceModule, HelperModule, LandingHeaderModule, MatSelectModule, FeedbackModule, AltMetricsModule, - TabsModule, SearchTabModule, LoadingModule, IconsModule, InputModule + TabsModule, SearchTabModule, LoadingModule, IconsModule, InputModule, + FullScreenModalModule ], declarations: [ ProjectComponent diff --git a/landingPages/result/resultLanding.component.html b/landingPages/result/resultLanding.component.html index 17d260e6..91953893 100644 --- a/landingPages/result/resultLanding.component.html +++ b/landingPages/result/resultLanding.component.html @@ -1193,7 +1193,7 @@
  • -
    +
    {{formatNumber(resultLandingInfo.measure.downloads)}}
    diff --git a/utils/entity-actions/entity-actions.component.ts b/utils/entity-actions/entity-actions.component.ts index d5ac6736..d80daab1 100644 --- a/utils/entity-actions/entity-actions.component.ts +++ b/utils/entity-actions/entity-actions.component.ts @@ -38,8 +38,10 @@ import {EnvProperties} from "../properties/env-properties"; Deposit - + Embed @@ -92,6 +94,7 @@ export class EntityActionsComponent implements OnInit { @ViewChild('downloadReportModal') downloadReportModal; @ViewChild('addThisModal') addThisModal; properties: EnvProperties = properties; + openaireEntities = OpenaireEntities; /* Embed */