Merge pull request #2043 from ORCID/leo/aug-16-batch-of-fixes

ORCID · Aug 16, 2023 · deddda0 · deddda0
2 parents d0c3c92 + ecb5c02
commit deddda0
Show file tree

Hide file tree

Showing 14 changed files with 120 additions and 31 deletions.
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
@@ -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
@@ -94,7 +94,9 @@
           </ng-container>
         </caption>
         <div class="orc-font-small-print">{{ activity.role }}</div>
-        <div class="orc-font-small-print">{{ activity.type }}</div>
+        <div class="orc-font-small-print">
+          {{ activity.type | affiliationTypeLabel | lowercase }}
+        </div>
       </div>
     </div>
   </ng-container>
@@ -105,7 +107,10 @@
       target="_blank"
       rel="noopener noreferrer"
       >+ {{ count - 3 }}
-      <ng-container i18n="@@share.more">more</ng-container></a
-    >
+      <ng-container *ngIf="count - 3 === 1">{{
+        moreLabelSingular
+      }}</ng-container>
+      <ng-container *ngIf="count - 3 > 1">{{ moreLabel }}</ng-container>
+    </a>
   </div>
 </div>
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
@@ -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
@@ -9,13 +9,16 @@ 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`
   selftAssertedSource = $localize`:@@summary.selfAssertedSource:Self-asserted source`
   @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
@@ -22,7 +22,7 @@
             ><img src="./assets/vectors/profile-not-verified.svg" />
           </mat-icon>
 
-          <div class="orc-font-body-small">
+          <div class="orc-font-body-small text-container">
             <ng-container *ngIf="element.url">
               <a
                 class="underline orc-font-body-small"
@@ -91,7 +91,11 @@
       class="underline orc-font-body-small"
       target="_blank"
       rel="noopener noreferrer"
-      >+ {{ count - 3 }} <ng-container>more Affiliations</ng-container></a
+      >+ {{ count - 3 }}
+      <ng-container *ngIf="count - 3 > 1">{{ moreLabel }}</ng-container>
+      <ng-container *ngIf="count - 3 === 1">{{
+        moreLabelSingular
+      }}</ng-container></a
     >
   </div>
 </div>
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
@@ -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
@@ -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
@@ -4,6 +4,7 @@
   [ngClass]="{
     mobile: mobile
   }"
+  [ngClass]="insideIframe ? 'inside-iframe' : ''"
 >
   <header class="panel-header">
     <!-- orcid logo -->
@@ -63,9 +64,8 @@ <h1 class="orc-font-body-large">
   <div
     class="panel-body"
     [ngClass]="{
-      'panel-body-1-cols': mobile || oneColumn,
-      'panel-body-2-cols': !mobile && twoColumns,
-      'panel-body-3-cols': !mobile && threeColumns
+      'panel-body-1-cols': mobile,
+      'panel-body-3-cols': !mobile
     }"
   >
     <div
@@ -83,9 +83,11 @@ <h2 class="orc-font-small-print" i18n="@@summary.affiliations">
           </h2>
         </a>
         <app-summary-panel
-          [url]="trustedSummary?.orcid"
+          [url]="trustedSummary?.orcid + '#affiliations'"
           [activitySummary]="trustedSummary.employmentAffiliations"
           [count]="trustedSummary.employmentAffiliationsCount"
+          [moreLabel]="labelMoreAffiliations"
+          [moreLabelSingular]="labelMoreAffiliation"
         ></app-summary-panel>
       </ng-container>
 
@@ -137,7 +139,7 @@ <h2 class="orc-font-small-print" i18n="@@summary.keyDates">KEY DATES</h2>
       </div>
     </div>
     <div
-      class="column column-border"
+      class="column"
       [ngClass]="{ 'column-border': !mobile && threeColumns }"
       *ngIf="peerReviews?.length || works?.length || funds?.length"
     >
@@ -202,9 +204,11 @@ <h2 class="orc-font-small-print" i18n="@@summary.funding">FUNDING</h2>
           </h2>
         </a>
         <app-summary-panel
-          [url]="trustedSummary?.orcid"
+          [url]="trustedSummary?.orcid + '#professional-activities'"
           [activitySummary]="trustedSummary.professionalActivities"
           [count]="trustedSummary.professionalActivitiesCount"
+          [moreLabel]="labelMoreProfessionalActivities"
+          moreLabelSingular="labelMoreProfessionalActivitie"
         ></app-summary-panel>
       </ng-container>
       <ng-container *ngIf="externalIdentifiers?.length">
@@ -220,7 +224,9 @@ <h2 class="orc-font-small-print" i18n="@@summary.otherids">
         <app-summary-simple-panel
           [simpleActivities]="externalIdentifiers"
           [count]="externalIdentifiers?.length"
-          [overflowUrl]="trustedSummary?.orcid"
+          [overflowUrl]="trustedSummary?.orcid + '#other-identifiers'"
+          [moreLabel]="labelMoreOtherIdentifiers"
+          [moreLabelSingular]="labelMoreOtherIdentifier"
         ></app-summary-simple-panel>
       </ng-container>
     </div>

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
@@ -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,15 +60,16 @@
 }
 
 .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 {
   grid-template-columns: 1fr 1fr;
 }
 
 .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
@@ -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
@@ -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()