From 6947890c20b956ff59d1be80e1c639eb8584daff Mon Sep 17 00:00:00 2001 From: "konstantina.galouni" Date: Mon, 20 Feb 2023 17:56:02 +0200 Subject: [PATCH] [Library | explore-redesign]: Result landing redesign for small screens (mobile) - main info & tabs of main info. 1. fos.component.ts & sdg.component.ts: Added Beta badge and "View all" link. 2. fundedBy.component.ts: Added @Input isMobile and relative checks in html | Updated how projects appear in mobile | Added ng-template for #funder and #dropInfo. 3. relatedTo.component.ts: Added @Input isMobile and relative checks in html | Added uk-margin-small-bottom between communities in mobile. 4. showSubjects.component.ts: a. Added @Input isMobile and relative checks in html. b. Added @Input() viewAllSubjects: boolean = false, @Input() viewAllClassifiedSubjects: boolean = false, @Output() viewAllClicked = new EventEmitter(); and methods "viewAllSubjectsClicked()", "viewAllSubjectsByVocabularyClicked()" to show subjects properly in mobile. 5. full-screen-modal.component.ts: Added method "backClicked()" and field public stayOpenInBack: boolean = false. 6. resultLanding.module.ts: Imported FullScreenModalModule. 7. resultLanding.component.ts & resultLanding.component.html: Redesign for small screens (mobile) for main info and its tabs (Summary, References, etc..). --- landingPages/landing-utils/fos.component.ts | 12 +- .../landing-utils/fundedBy.component.ts | 120 +++-- .../landing-utils/relatedTo.component.ts | 6 +- landingPages/landing-utils/sdg.component.ts | 16 +- .../landing-utils/showSubjects.component.ts | 56 ++- .../result/resultLanding.component.html | 463 +++++++++++------- .../result/resultLanding.component.ts | 97 +++- landingPages/result/resultLanding.module.ts | 3 +- .../full-screen-modal.component.ts | 17 +- 9 files changed, 531 insertions(+), 259 deletions(-) diff --git a/landingPages/landing-utils/fos.component.ts b/landingPages/landing-utils/fos.component.ts index 3f06ebc5..22734738 100644 --- a/landingPages/landing-utils/fos.component.ts +++ b/landingPages/landing-utils/fos.component.ts @@ -37,6 +37,7 @@ import {StringUtils} from "../../utils/string-utils.class";
+
Beta
Fields of Science (FOS)
@@ -48,6 +49,15 @@ import {StringUtils} from "../../utils/string-utils.class";
+
+ + View all + + + + +
` }) @@ -58,7 +68,7 @@ export class FosComponent { @Output() viewAllClicked = new EventEmitter(); @Output() suggestClicked = new EventEmitter(); public lessBtn: boolean = false; - public threshold: number = 3; // was 2 + public threshold: number = 2; public routerHelper: RouterHelper = new RouterHelper(); public properties = properties; public title: string = "Fields of Science"; diff --git a/landingPages/landing-utils/fundedBy.component.ts b/landingPages/landing-utils/fundedBy.component.ts index 2d82a151..4355168b 100644 --- a/landingPages/landing-utils/fundedBy.component.ts +++ b/landingPages/landing-utils/fundedBy.component.ts @@ -6,72 +6,94 @@ import {HelperFunctions} from '../../utils/HelperFunctions.class'; @Component({ selector: 'fundedBy', template: ` -
+
{{title}} {{title}} - View less + View less View all
-
+
- - - {{item['funderShortname'] ? item['funderShortname'] : item['funderName']}} - [no funder available] - | {{ item['acronym'] ? item['acronym'] : item['title']}} - - -
-
- Project -
- - {{item['acronym'] ? item['acronym'] : item['title']}} - - + + + + + +
+ +
+ , + +
+
+
+ + + + +
+ +
+
+
+ + + {{item['funderShortname'] ? item['funderShortname'] : item['funderName']}} + [no funder available] + | {{ item['acronym'] ? item['acronym'] : item['title']}} + + + +
+ Project +
+ + {{item['acronym'] ? item['acronym'] : item['title']}} + + {{item['acronym'] ? item['acronym'] : item['title']}} -
- {{item.title}} -
-
-
    -
  • - Funder: - {{item.funderName ? item.funderName : item.funderShortname}} - +
    + {{item.title}} +
    +
+
    +
  • + Funder: + {{item.funderName ? item.funderName : item.funderShortname}} + ({{item.funderShortname}}) -
    • -
  • - Project Code: {{item.code}} -
    • -
  • - Funding stream: {{item.funding}} -
    • -
-
- Validated by funder - | - {{item.provenanceAction}} -
-
-
- , - -
+ +
  • + Project Code: {{item.code}} +
    • +
  • + Funding stream: {{item.funding}} +
    • + +
    + Validated by funder + | + {{item.provenanceAction}} +
    +
    + ` }) export class FundedByComponent { + @Input() isMobile: boolean = false; @Input() fundedByProjects: Project[]; @Input() viewAll: boolean = false; @Output() viewAllClicked = new EventEmitter(); diff --git a/landingPages/landing-utils/relatedTo.component.ts b/landingPages/landing-utils/relatedTo.component.ts index 61929ab4..00b19af9 100644 --- a/landingPages/landing-utils/relatedTo.component.ts +++ b/landingPages/landing-utils/relatedTo.component.ts @@ -13,7 +13,7 @@ import {OpenaireEntities} from "../../utils/properties/searchFields"; selector: 'relatedTo, [relatedTo]', template: ` -
    +
    {{title}} @@ -23,7 +23,8 @@ import {OpenaireEntities} from "../../utils/properties/searchFields"; View all
    -
    +
    {{community.labelContext}} @@ -44,6 +45,7 @@ import {OpenaireEntities} from "../../utils/properties/searchFields"; }) export class RelatedToComponent implements OnInit { + @Input() mobileView: boolean = false; @Input() contexts: Context[]; @Input() viewAll: boolean = false; @Output() viewAllClicked = new EventEmitter(); diff --git a/landingPages/landing-utils/sdg.component.ts b/landingPages/landing-utils/sdg.component.ts index d5f954ea..01905690 100644 --- a/landingPages/landing-utils/sdg.component.ts +++ b/landingPages/landing-utils/sdg.component.ts @@ -39,21 +39,27 @@ import {StringUtils} from "../../utils/string-utils.class";
    +
    Beta
    sdg_colors SDGs:
    - - {{subject}} - - ,   + {{subject}} + ,  
    +
    + + View all + + + +
    ` }) diff --git a/landingPages/landing-utils/showSubjects.component.ts b/landingPages/landing-utils/showSubjects.component.ts index 2eab7611..8d38de9a 100644 --- a/landingPages/landing-utils/showSubjects.component.ts +++ b/landingPages/landing-utils/showSubjects.component.ts @@ -1,9 +1,9 @@ import { ChangeDetectorRef, Component, - ElementRef, + ElementRef, EventEmitter, HostListener, - Input, + Input, Output, QueryList, ViewChild, ViewChildren @@ -13,24 +13,24 @@ import {properties} from "../../../../environments/environment"; @Component({ selector: 'showSubjects', template: ` - -
    + +
    Subjects by Vocabulary
    - + -
    - View all +
    + View all
    - -
    + +
    Subjects
    - -
    - View all + +
    + View all
    @@ -49,7 +49,7 @@ import {properties} from "../../../../environments/environment";
    - +
    @@ -94,7 +94,7 @@ import {properties} from "../../../../environments/environment";
    - +
    @@ -104,12 +104,16 @@ import {properties} from "../../../../environments/environment"; }) export class ShowSubjectsComponent { + @Input() isMobile: boolean = false; @Input() subjects: string[]; @Input() otherSubjects: Map; @Input() classifiedSubjects: Map; @Input() eoscSubjects: any[]; isLarge: boolean = false; isClassifiedLarge: boolean = false; + @Input() viewAllSubjects: boolean = false; + @Input() viewAllClassifiedSubjects: boolean = false; + @Output() viewAllClicked = new EventEmitter(); properties = properties; specialSubjects = []; @ViewChildren("content", { read: ElementRef }) content: QueryList; @@ -206,4 +210,28 @@ export class ShowSubjectsComponent { this.subjectsByVocabularyModal.alertTitle = "Subjects by Vocabulary"; this.subjectsByVocabularyModal.open(); } + + public viewAllSubjectsClicked() { + if(this.isMobile) { + this.viewAllSubjects = true; + this.viewAllClicked.emit({ + subtitle: 'Subjects', + id: 'subjects' + }); + } else { + this.openSubjectsModal(); + } + } + + public viewAllSubjectsByVocabularyClicked() { + if(this.isMobile) { + this.viewAllClassifiedSubjects = true; + this.viewAllClicked.emit({ + subtitle: 'Subjects by Vocabulary', + id: 'classifiedSubjects' + }); + } else { + this.openSubjectsByVocabularyModal(); + } + } } diff --git a/landingPages/result/resultLanding.component.html b/landingPages/result/resultLanding.component.html index d79b1cf8..7c8a76f2 100644 --- a/landingPages/result/resultLanding.component.html +++ b/landingPages/result/resultLanding.component.html @@ -1,6 +1,6 @@
    -
    +
    @@ -303,89 +303,10 @@
    -
    -
    -
    - No summary information available -
    -
    -
    - -
    -
    -
    Abstract
    -
    -
    -
    -
    - - View more - -
    -
    -
    -
    -
    - {{(resultLandingInfo.countries.length === 1) ? 'Country ' : 'Countries '}} -
    -
    - {{resultLandingInfo.countries.join(", ")}} -
    -
    -
    - - -
    - -
    -
    Related {{openaireEntities.ORGANIZATIONS}}
    - -
    - - View all - -
    -
    - View less -
    -
    -
    -
    +     -
    - - -
    -

    - {{item.name}} - - - [{{getReferenceIdName(id)}} - OpenAIRE] - - -

    -
    - - -
    +