Merge pull request #2196 from ORCID/fix/9137-qa-batch-of-fixes-requir…

…ed-for-oauth style: Fix mobile version margins
ORCID · Mar 14, 2024 · 124f1dd · 124f1dd
2 parents bc79dbb + 9e07500
commit 124f1dd
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/src/app/authorize/components/form-authorize/form-authorize.component.html b/src/app/authorize/components/form-authorize/form-authorize.component.html
@@ -174,8 +174,11 @@ <h1 class="orc-font-heading-small" i18n="@@authorize.authorize">
         You are currently signed in as:
       </p>
       <mat-divider class="orcid-divider"></mat-divider>
-      <div class="row">
-        <div class="col l3 profile-icon-wrapper">
+      <div
+        class="row"
+        [ngClass]="{ 'center-content': platformInfo.columns4 }"
+      >
+        <div class="col l2 profile-icon-wrapper">
           <div class="icon">
             <mat-icon
               class="profile-icon"
@@ -186,7 +189,10 @@ <h1 class="orc-font-heading-small" i18n="@@authorize.authorize">
           </div>
         </div>
         <div class="col l9 user-wrapper">
-          <div class="row">
+          <div
+            class="row"
+            [ngClass]="{ 'center-content': platformInfo.columns4 }"
+          >
             <div class="m-b-8">
               <div class="mat-body-2">
                 <strong id="user-name">{{ userName }}</strong>

diff --git a/src/app/authorize/components/form-authorize/form-authorize.component.scss b/src/app/authorize/components/form-authorize/form-authorize.component.scss
@@ -93,6 +93,7 @@ mat-card-content.authorize-content {
 
   div.profile-icon-wrapper {
     padding: 0 !important;
+    margin-right: 16px;
   }
 
   div.user-wrapper {
@@ -118,4 +119,8 @@ mat-card-content.authorize-content {
   .user-links {
     width: 100%;
   }
+
+  .center-content {
+    justify-content: center;
+  }
 }
diff --git a/src/app/authorize/components/form-authorize/form-authorize.component.ts b/src/app/authorize/components/form-authorize/form-authorize.component.ts
@@ -2,7 +2,7 @@ import { Component, Inject, Input, OnDestroy, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
 import { forkJoin, Observable, Subject } from 'rxjs'
 import { catchError, map, take, takeUntil } from 'rxjs/operators'
-import { PlatformInfoService } from 'src/app/cdk/platform-info'
+import { PlatformInfo, PlatformInfoService } from 'src/app/cdk/platform-info'
 import { WINDOW } from 'src/app/cdk/window'
 import { ApplicationRoutes } from 'src/app/constants'
 import { UserService } from 'src/app/core'
@@ -42,6 +42,7 @@ export class FormAuthorizeComponent implements OnInit, OnDestroy {
 
   oauthRequest: RequestInfoForm
   trustedIndividuals: TrustedIndividuals
+  platformInfo: PlatformInfo
 
   authorizeAccessFor = $localize`:@@authorize.authorizeAccessFor:Authorize access for`
   orcid = $localize`:@@authorize.dashOrcid:- ORCID`
@@ -58,6 +59,11 @@ export class FormAuthorizeComponent implements OnInit, OnDestroy {
     private _trustedIndividuals: TrustedIndividualsService,
     private _titleService: Title
   ) {
+    this._platformInfo
+    .get()
+    .pipe(take(1))
+    .subscribe((platform) => this.platformInfo = platform)
+
     this._user
       .getUserSession()
       .pipe(

diff --git a/src/app/authorize/pages/authorize/authorize.component.html b/src/app/authorize/pages/authorize/authorize.component.html
@@ -13,7 +13,7 @@
             'orcid-wizard-2': !signInUpdatesV1Togglz,
             'orcid-wizard': signInUpdatesV1Togglz,
             'authorize-wrapper': signInUpdatesV1Togglz,
-            mobile: !platform.columns12
+            mobile: platform.columns4
           }"
         >
           <app-form-authorize