PD-3704

Author: cryptalith

projects/orcid-ui/src/lib/components/record-header/record-header.component.html

@@ -87,7 +87,6 @@
         width="48px"
         height="48px"
         [shimmerPercentage]="60"
-
       ></orcid-skeleton-placeholder>
     </div>
   </section>
@@ -185,7 +184,6 @@
         width="48px"
         height="48px"
         [shimmerPercentage]="60"
-
       ></orcid-skeleton-placeholder>
       <orcid-skeleton-placeholder
         shape="circle"

src/app/cdk/panel/panel/panel.component.html

@@ -226,4 +226,4 @@
 
 <ng-template #tempHeader>
   <ng-content select="[header]"></ng-content>
-</ng-template>
+</ng-template>

src/app/cdk/panel/panel/panel.component.scss

@@ -142,4 +142,4 @@
       margin-left: 8px;
     }
   }
-}
+}

src/app/core/record-affiliations/record-affiliations.service.ts

@@ -1,7 +1,14 @@
 import { HttpClient, HttpHeaders } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { BehaviorSubject, Observable, of, ReplaySubject } from 'rxjs'
-import { catchError, finalize, map, retry, switchMap, tap } from 'rxjs/operators'
+import {
+  catchError,
+  finalize,
+  map,
+  retry,
+  switchMap,
+  tap,
+} from 'rxjs/operators'
 import {
   AffiliationUIGroup,
   AffiliationsEndpoint,

src/app/layout/header/header.component.html

@@ -66,11 +66,7 @@
 <!-- Mobile/tablet spacer to offset fixed compact record header -->
 <div
   class="compact-record-header-spacer"
-  *ngIf="
-    !platform.columns12 &&
-    isCompactActive &&
-    (isPublicRecord$ | async)
-  "
+  *ngIf="!platform.columns12 && isCompactActive && (isPublicRecord$ | async)"
 ></div>
 
 <mat-divider></mat-divider>

src/app/record/components/affiliation-stack/affiliation-stack.component.ts

@@ -1,4 +1,12 @@
-import { Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+} from '@angular/core'
 import { combineLatest, Observable, of, Subject } from 'rxjs'
 import { first, takeUntil, finalize } from 'rxjs/operators'
 import { OrganizationsService } from 'src/app/core'
@@ -253,7 +261,10 @@ export class AffiliationStackComponent implements OnInit, OnDestroy {
   }
 
   loadingFeatured: { [key: string]: boolean } = {}
-  @Output() featuredToggled = new EventEmitter<{ affiliationName: string; featured: boolean }>()
+  @Output() featuredToggled = new EventEmitter<{
+    affiliationName: string
+    featured: boolean
+  }>()
 
   toggleFeatured(affiliation: Affiliation) {
     const putCode = affiliation.featured ? '' : affiliation.putCode.value

src/app/record/components/affiliation-stacks-groups/affiliation-stacks-groups.component.html

@@ -33,23 +33,30 @@
         role="alert"
         class="featured-success-alert"
       >
-       
         <span content class="orc-font-body-small">
           <span class="orc-font-body-small">
-            <ng-container i18n="@@shared.featuredAffiliationSuccessMessageBefore">Your affiliation</ng-container>
+            <ng-container
+              i18n="@@shared.featuredAffiliationSuccessMessageBefore"
+              >Your affiliation</ng-container
+            >
             <strong>{{ featuredAffiliationName }}</strong>
-            <ng-container i18n="@@shared.featuredAffiliationSuccessMessageAfter">has been highlighted and will be shown at the top of your public record. To remove this highlight click the star icon next to the affiliation name.</ng-container>
+            <ng-container i18n="@@shared.featuredAffiliationSuccessMessageAfter"
+              >has been highlighted and will be shown at the top of your public
+              record. To remove this highlight click the star icon next to the
+              affiliation name.</ng-container
+            >
           </span>
-          <p><a
-            class="underline brand-primary-darkest-link"
-            rel="noopener noreferrer"
-            target="_blank"
-            href="https://support.orcid.org/hc/en-us/articles/360006894834-Add-employment-information-to-your-ORCID-record"
-            i18n="@@shared.featuredAffiliationLearnMore"
-          >
-            Find out more about highlighting affiliations in your ORCID record
+          <p>
+            <a
+              class="underline brand-primary-darkest-link"
+              rel="noopener noreferrer"
+              target="_blank"
+              href="https://support.orcid.org/hc/en-us/articles/360006894834-Add-employment-information-to-your-ORCID-record"
+              i18n="@@shared.featuredAffiliationLearnMore"
+            >
+              Find out more about highlighting affiliations in your ORCID record
             </a>
-        </p>
+          </p>
         </span>
       </app-alert-message>
       <app-alert-message
@@ -58,14 +65,30 @@
         role="alert"
         class="featured-notice-alert"
       >
-        <span title i18n="@@shared.highlightYourAffiliations">Highlight your affiliations</span>
+        <span title i18n="@@shared.highlightYourAffiliations"
+          >Highlight your affiliations</span
+        >
         <span content class="orc-font-body-small">
           <span class="orc-font-body-small">
-            <ng-container i18n="@@shared.featuredAffiliationNoticeMessagePart1">Highlighted affiliations are shown at the top of your public record.</ng-container>
-            <ng-container i18n="@@shared.featuredAffiliationNoticeMessagePart2Before">To highlight an affiliation click the</ng-container>
+            <ng-container i18n="@@shared.featuredAffiliationNoticeMessagePart1"
+              >Highlighted affiliations are shown at the top of your public
+              record.</ng-container
+            >
+            <ng-container
+              i18n="@@shared.featuredAffiliationNoticeMessagePart2Before"
+              >To highlight an affiliation click the</ng-container
+            >
             <strong>star</strong>
-            <ng-container i18n="@@shared.featuredAffiliationNoticeMessagePart2After">icon next to the affiliation name.</ng-container>
-            <em><ng-container i18n="@@shared.featuredAffiliationNoticeMessagePart3">You can only highlight one affiliation at a time.</ng-container></em>
+            <ng-container
+              i18n="@@shared.featuredAffiliationNoticeMessagePart2After"
+              >icon next to the affiliation name.</ng-container
+            >
+            <em
+              ><ng-container
+                i18n="@@shared.featuredAffiliationNoticeMessagePart3"
+                >You can only highlight one affiliation at a time.</ng-container
+              ></em
+            >
           </span>
           <p>
             <a

src/app/record/components/affiliation-stacks-groups/affiliation-stacks-groups.component.ts

@@ -133,7 +133,7 @@ export class AffiliationStacksGroupsComponent implements OnInit {
               'PROFESSIONAL_ACTIVITIES'
             )
           }
-          
+
           // Check for featured affiliation after affiliations are loaded
           this.checkForFeaturedAffiliationOnRegistration()
           // Check if notice alert should be shown (no featured affiliation)
@@ -224,7 +224,8 @@ export class AffiliationStacksGroupsComponent implements OnInit {
         if (platform.queryParameters.hasOwnProperty('justRegistered')) {
           const featuredAffiliation = this.findFeaturedAffiliation()
           if (featuredAffiliation) {
-            this.featuredAffiliationName = featuredAffiliation.affiliationName?.value || ''
+            this.featuredAffiliationName =
+              featuredAffiliation.affiliationName?.value || ''
             this.showFeaturedSuccessAlert = true
           }
         }
@@ -271,7 +272,11 @@ export class AffiliationStacksGroupsComponent implements OnInit {
     // 2. There are employment affiliations
     // 3. No featured affiliation exists
     // 4. Not a public record (users can only highlight on their own record)
-    if (this.showFeaturedSuccessAlert || !this.userRecord?.affiliations || this.isPublicRecord) {
+    if (
+      this.showFeaturedSuccessAlert ||
+      !this.userRecord?.affiliations ||
+      this.isPublicRecord
+    ) {
       this.showFeaturedNoticeAlert = false
       return
     }

src/app/record/components/record-header/record-header.component.ts

@@ -1,4 +1,11 @@
-import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Inject,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core'
 import { CommonModule, NgIf } from '@angular/common'
 import { Router } from '@angular/router'
 import { RecordHeaderStateService } from 'src/app/core/record-header-state/record-header-state.service'
@@ -164,7 +171,11 @@ export class RecordHeaderComponent implements OnInit {
     // Compact state
     this._compact.compactActive$
       .pipe(takeUntil(this.$destroy))
-      .subscribe((active) => (this.disableCompactMode ? this.compactMode = false : this.compactMode = !!active))
+      .subscribe((active) =>
+        this.disableCompactMode
+          ? (this.compactMode = false)
+          : (this.compactMode = !!active)
+      )
 
     // Subscribe to shared state for inputs
     this._state.loadingUserRecord$

src/app/record/pages/my-orcid/my-orcid.component.html

@@ -4,7 +4,6 @@
       [isPublicRecord]="publicOrcid"
     ></app-top-bar-my-public-record-preview>
 
-
     <!-- 
     The following record is always display, even in compact mode it works as a hidden placeholder while the user scrolls the page
     During compact mode the record header visible is displayed from header.component