diff --git a/src/app/link-account/pages/link-account/link-account.component.ts b/src/app/link-account/pages/link-account/link-account.component.ts index 1df92b9f3f..91cd6d6199 100644 --- a/src/app/link-account/pages/link-account/link-account.component.ts +++ b/src/app/link-account/pages/link-account/link-account.component.ts @@ -42,7 +42,7 @@ export class LinkAccountComponent implements OnInit { this.signInData = session.thirdPartyAuthData.signinData this.entityDisplayName = session.thirdPartyAuthData.entityDisplayName if (!this.entityDisplayName) { - this.entityDisplayName = this.signInData.providerId; + this.entityDisplayName = this.signInData.providerId } this.loading = false }) diff --git a/src/app/trusted-summary/component/summary-panel/summary-panel.component.html b/src/app/trusted-summary/component/summary-panel/summary-panel.component.html index 7b85790e68..e1b04b470b 100644 --- a/src/app/trusted-summary/component/summary-panel/summary-panel.component.html +++ b/src/app/trusted-summary/component/summary-panel/summary-panel.component.html @@ -94,7 +94,9 @@
{{ activity.role }}
-
{{ activity.type }}
+
+ {{ activity.type | affiliationTypeLabel | lowercase }} +
@@ -105,7 +107,10 @@ target="_blank" rel="noopener noreferrer" >+ {{ count - 3 }} - more + {{ + moreLabelSingular + }} + {{ moreLabel }} + diff --git a/src/app/trusted-summary/component/summary-panel/summary-panel.component.scss b/src/app/trusted-summary/component/summary-panel/summary-panel.component.scss index 36be12373c..8d5f53b2e1 100644 --- a/src/app/trusted-summary/component/summary-panel/summary-panel.component.scss +++ b/src/app/trusted-summary/component/summary-panel/summary-panel.component.scss @@ -30,14 +30,17 @@ .header { display: flex; flex-direction: row; - align-items: center; + align-items: initial; justify-content: space-between; .header-title { display: flex; - align-items: center; + align-items: initial; + max-width: 100%; h3 { + overflow: hidden; + word-wrap: break-word; font-weight: 400; margin: 0; @@ -69,8 +72,14 @@ mat-icon.margin-compensation { } mat-icon { - min-width: 22px; + min-width: 25px; margin-inline-end: 3px; + margin-top: -3px; + + img { + margin-top: 2px; + display: block; + } } a { diff --git a/src/app/trusted-summary/component/summary-panel/summary-panel.component.ts b/src/app/trusted-summary/component/summary-panel/summary-panel.component.ts index 93e0381bb3..8e61e8aa29 100644 --- a/src/app/trusted-summary/component/summary-panel/summary-panel.component.ts +++ b/src/app/trusted-summary/component/summary-panel/summary-panel.component.ts @@ -9,6 +9,7 @@ import { ActivitySummary } from 'src/app/types/trust-summary' './summary-panel.component.scss', './summary-panel.component.scss-theme.scss', ], + preserveWhitespaces: true, }) export class SummaryPanelComponent implements OnInit { validatedSourceAriaLabel = $localize`:@@summary.validatedSource:Validated source` @@ -16,6 +17,8 @@ export class SummaryPanelComponent implements OnInit { @Input() activitySummary: ActivitySummary[] @Input() url: string = '' @Input() count: number = 0 + @Input() moreLabel: string = '' + @Input() moreLabelSingular: string = '' activitiesToDisplay: ActivitySummary[] acitivityCountOverflow: boolean unsubscribe = new Subject() @@ -27,7 +30,7 @@ export class SummaryPanelComponent implements OnInit { ngOnInit(): void { if (this.activitySummary) { - this.activitySummary = [...this.activitySummary, ...this.activitySummary] + this.activitySummary = [...this.activitySummary] this.activitiesToDisplay = this.activitySummary.slice(0, 3) this.acitivityCountOverflow = this.count > 3 diff --git a/src/app/trusted-summary/component/summary-simple-panel/summary-simple-panel.component.html b/src/app/trusted-summary/component/summary-simple-panel/summary-simple-panel.component.html index 10b578f25c..c1359a04fe 100644 --- a/src/app/trusted-summary/component/summary-simple-panel/summary-simple-panel.component.html +++ b/src/app/trusted-summary/component/summary-simple-panel/summary-simple-panel.component.html @@ -22,7 +22,7 @@ > -
+
+ {{ count - 3 }} more Affiliations+ {{ count - 3 }} + {{ moreLabel }} + {{ + moreLabelSingular + }}
diff --git a/src/app/trusted-summary/component/summary-simple-panel/summary-simple-panel.component.scss b/src/app/trusted-summary/component/summary-simple-panel/summary-simple-panel.component.scss index 607ba86870..8042ae930f 100644 --- a/src/app/trusted-summary/component/summary-simple-panel/summary-simple-panel.component.scss +++ b/src/app/trusted-summary/component/summary-simple-panel/summary-simple-panel.component.scss @@ -24,13 +24,16 @@ flex-direction: row; align-items: center; justify-content: space-between; + max-width: 100%; .header-title { + max-width: 100%; display: flex; - align-items: center; + align-items: initial; h3 { margin: 0; + overflow: hidden; } } @@ -59,9 +62,22 @@ mat-icon.margin-compensation { mat-icon { min-width: 25px; - margin-inline-end: 8px; + margin-inline-end: 3px; + margin-top: -3px; + + img { + margin-top: 2px; + display: block; + } } a { font-weight: 400; + max-width: 100%; +} + +.text-container { + max-width: 210px; + overflow: hidden; + word-wrap: break-word; } diff --git a/src/app/trusted-summary/component/summary-simple-panel/summary-simple-panel.component.ts b/src/app/trusted-summary/component/summary-simple-panel/summary-simple-panel.component.ts index 9cd5442836..93203cc209 100644 --- a/src/app/trusted-summary/component/summary-simple-panel/summary-simple-panel.component.ts +++ b/src/app/trusted-summary/component/summary-simple-panel/summary-simple-panel.component.ts @@ -26,6 +26,9 @@ export class SummarySimplePanelComponent implements OnInit { selftAssertedSource = $localize`:@@summary.selfAssertedSource:Self-asserted source` @Input() simpleActivities: SimpleActivityModel[] = [] @Input() count: number = 0 + @Input() moreLabel: string = '' + @Input() moreLabelSingular: string = '' + @Input() overflowUrl: string = '' unsubscribe = new Subject() mobile: boolean diff --git a/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.html b/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.html index 18675e8b3b..13484aeeda 100644 --- a/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.html +++ b/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.html @@ -4,6 +4,7 @@ [ngClass]="{ mobile: mobile }" + [ngClass]="insideIframe ? 'inside-iframe' : ''" >
@@ -63,9 +64,8 @@

@@ -137,7 +139,7 @@

KEY DATES

@@ -202,9 +204,11 @@

FUNDING

@@ -220,7 +224,9 @@

diff --git a/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.scss b/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.scss index f3f2afdcd7..b51ebfb070 100644 --- a/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.scss +++ b/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.scss @@ -1,8 +1,14 @@ :host { display: flex; - align-items: center; justify-content: center; - min-height: 100vh; +} + +main { + margin-top: 32px; +} + +main.inside-iframe { + margin-top: 0px; } .panel { @@ -54,7 +60,8 @@ } .panel-body-3-cols { - grid-template-columns: 1fr 1fr 1fr; + // 3 columns with a max with of 320px each + grid-template-columns: repeat(3, minmax(auto, 340px)); } .panel-body-2-cols { @@ -62,7 +69,7 @@ } .panel-body-1-cols { - grid-template-columns: 1fr; + grid-template-columns: 340px; } .column-border { @@ -79,6 +86,10 @@ main { overflow: hidden; } +main.panel.mobile { + max-width: 340px; +} + .date-item { display: flex; flex-direction: column; @@ -95,7 +106,11 @@ main { } ul { + list-style-type: none; + margin: 0; + margin: 0; + padding-inline-start: 29px; } ul li { @@ -106,8 +121,8 @@ ul li { ul li:after { content: url('/assets/vectors/bullet-point.svg'); position: absolute; - left: -26px; - top: 0px; + left: -29px; + top: 5px; } ul li:before { @@ -117,6 +132,8 @@ ul li:before { border-left: 1px dashed; height: 100%; width: 1px; + left: -19px; + top: 6px; } ul li:first-child:before { @@ -154,7 +171,7 @@ a { } display: flex; - align-items: centerf; + align-items: center; gap: 8px; } diff --git a/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.scss-theme.scss b/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.scss-theme.scss index 16c1a12257..cce5c3a612 100644 --- a/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.scss-theme.scss +++ b/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.scss-theme.scss @@ -8,6 +8,10 @@ $foreground: map-get($theme, foreground); $background: map-get($theme, background); + :host { + background-color: map-get($background, 'ui-background-lightest'); + } + .verified { color: mat.get-color-from-palette($accent, 400); } diff --git a/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.spec.ts b/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.spec.ts index ec4daff961..23b3359929 100644 --- a/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.spec.ts +++ b/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.spec.ts @@ -7,6 +7,7 @@ import { HttpClientTestingModule } from '@angular/common/http/testing' import { PlatformInfoService } from 'src/app/cdk/platform-info' import { of } from 'rxjs' import { ZendeskService } from 'src/app/core/zendesk/zendesk.service' +import { WINDOW } from 'src/app/cdk/window' describe('TrustedSummaryComponent', () => { let component: TrustedSummaryComponent @@ -26,6 +27,8 @@ describe('TrustedSummaryComponent', () => { provide: ZendeskService, useValue: { hide: () => of() }, }, + { provide: WINDOW, useValue: {} }, + ], imports: [HttpClientTestingModule], }).compileComponents() diff --git a/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.ts b/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.ts index a951ef3fbc..a81730dc80 100644 --- a/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.ts +++ b/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy, OnInit } from '@angular/core' +import { Component, Inject, OnDestroy, OnInit } from '@angular/core' import { Router } from '@angular/router' import { TrustedSummaryService } from 'src/app/core/trusted-summary/trusted-summary.service' import { TrustedSummary } from 'src/app/types/trust-summary' @@ -8,6 +8,7 @@ import { takeUntil } from 'rxjs/operators' import { Subject } from 'rxjs' import { RobotsMetaTagsService } from 'src/app/core/robots-meta-tags/robots-meta-tags.service' import { ZendeskService } from 'src/app/core/zendesk/zendesk.service' +import { WINDOW } from 'src/app/cdk/window' @Component({ selector: 'app-trusted-summary', @@ -33,8 +34,15 @@ export class TrustedSummaryComponent implements OnInit, OnDestroy { labelSelfAssertedFundings = $localize`:@@summary.selfAssertedFundings:Self-asserted fundings` labelReviesFor = $localize`:@@summary.reviewsFor:reviews for` labelReviewFor = $localize`:@@summary.reviewFor:review for` - labelpublicationgrants = $localize`:@@summary.publicationgrantes:publication/grants` + labelpublicationgrants = $localize`:@@summary.publicationgrantes:publications/grants` labelpublicationgrant = $localize`:@@summary.publicationgrant:publication/grant` + labelMoreAffiliations = $localize`:@@summary.moreAffiliations:more Affiliations` + labelMoreProfessionalActivities = $localize`:@@summary.moreProfessionalActivities:more Professional activities` + labelMoreOtherIdentifiers = $localize`:@@summary.moreOtherIdentifiers:more Other Identifiers` + insideIframe: boolean + labelMoreAffiliation = $localize`:@@summary.moreAffiliation:more Affiliation` + labelMoreProfessionalActivitie = $localize`:@@summary.moreProfessionalActivitie:more Professional activity` + labelMoreOtherIdentifier = $localize`:@@summary.moreOtherIdentifier:more Other Identifier` funds: SimpleActivityModel[] = [] peerReviews: SimpleActivityModel[] = [] @@ -53,7 +61,9 @@ export class TrustedSummaryComponent implements OnInit, OnDestroy { private _router: Router, private _platform: PlatformInfoService, private _robotsMetaTags: RobotsMetaTagsService, - private _zendeskService: ZendeskService + private _zendeskService: ZendeskService, + // import window + @Inject(WINDOW) private _window: Window ) {} ngOnDestroy(): void { this.unsubscribe.next() @@ -62,6 +72,7 @@ export class TrustedSummaryComponent implements OnInit, OnDestroy { } ngOnInit(): void { + this.insideIframe = this._window.self !== this._window.top this._zendeskService.hide() this._robotsMetaTags.disallowRobots() this._platform diff --git a/src/app/types/trust-summary.ts b/src/app/types/trust-summary.ts index b9d17151e4..d44b59f0c8 100644 --- a/src/app/types/trust-summary.ts +++ b/src/app/types/trust-summary.ts @@ -1,3 +1,5 @@ +import { AffiliationType } from './record-affiliation.endpoint' + export interface TrustedSummary { name: string orcid: string @@ -23,6 +25,6 @@ export interface ActivitySummary { endDate?: string role?: string title: any - type: string + type: AffiliationType validated: boolean } diff --git a/src/locale/properties/summary/summary.en.properties b/src/locale/properties/summary/summary.en.properties index 929a3195f9..25c2d98442 100644 --- a/src/locale/properties/summary/summary.en.properties +++ b/src/locale/properties/summary/summary.en.properties @@ -21,6 +21,12 @@ summary.selfAssertedFunding=Self-asserted funding summary.selfAssertedFundings=Self-asserted fundings summary.reviewsFor=reviews for summary.reviewFor=review for -summary.publicationgrantes=publication/grants +summary.publicationgrantes=publications/grants summary.publicationgrant=publication/grant summary.nameIsPrivateOrLimited=Name is private or limited +summary.moreAffiliations=more Affiliations +summary.moreProfessionalActivities=more Professional activities +summary.moreOtherIdentifiers=more Other Identifiers + summary.moreAffiliation=more Affiliation +summary.moreProfessionalActivitie=more Professional activity +summary.moreOtherIdentifier=more Other Identifier \ No newline at end of file