style: Align text and remove bold count (#1968)

ORCID · May 30, 2023 · a51dfb7 · a51dfb7
1 parent 78f799b
commit a51dfb7
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 30 deletions.
diff --git a/src/app/cdk/panel/panels/panels.component.html b/src/app/cdk/panel/panels/panels.component.html
@@ -19,7 +19,7 @@
 
       <div class="text-container clickable" (click)="collapse()">
         <h3 class="activity-header orc-font-body-large">
-          <strong> {{ title }} </strong>
+          {{ title }}
           <ng-container *ngIf="type !== 'peer-review'">
             <span
               *ngIf="currentAmount && total && currentAmount !== total"
@@ -47,34 +47,33 @@ <h3 class="activity-header orc-font-body-large">
             >
             <span *ngIf="!currentAmount && currentAmount !== 0"></span>
           </ng-container>
-        </h3>
-        <ng-container *ngIf="type === 'peer-review' && currentAmount !== 0">
-          <span>
-            ({{ reviewsNumber }}
-            <ng-container *ngIf="reviewsNumber > 1" i18n="@@peerReview.reviews">
-              reviews
-            </ng-container>
-            <ng-container
-              *ngIf="reviewsNumber === 1"
-              i18n="@@peerReview.review"
-            >
-              review
-            </ng-container>
-            <ng-container i18n="@@peerReview.for"> for </ng-container>
-            {{ currentAmount }}
-            <ng-container
-              *ngIf="currentAmount > 1"
-              i18n="@@peerReview.publicationsGrants"
+          <ng-container *ngIf="type === 'peer-review' && currentAmount !== 0">
+            <span>
+              ({{ reviewsNumber }}
+              <ng-container *ngIf="reviewsNumber > 1" i18n="@@peerReview.reviews">
+                reviews
+              </ng-container>
+              <ng-container
+                *ngIf="reviewsNumber === 1"
+                i18n="@@peerReview.review"
+              >
+                review
+              </ng-container>
+              <ng-container i18n="@@peerReview.for"> for </ng-container>
+              {{ currentAmount }}
+              <ng-container
+                *ngIf="currentAmount > 1"
+                i18n="@@peerReview.publicationsGrants"
               >publications/grants</ng-container
-            >
-            <ng-container
-              *ngIf="currentAmount === 1"
-              i18n="@@peerReview.publicationGrant"
+              >
+              <ng-container
+                *ngIf="currentAmount === 1"
+                i18n="@@peerReview.publicationGrant"
               >publication/grant</ng-container
-            >)
-          </span>
-        </ng-container>
-        <ng-container> </ng-container>
+              >)
+            </span>
+          </ng-container>
+        </h3>
       </div>
     </div>
 
@@ -90,7 +89,7 @@ <h3 class="activity-header orc-font-body-large">
         <mat-icon class="large-material-icon" id="add-button">
           add_circle_outline
         </mat-icon>
-        <ng-container i18n="@@shared.add"> Add </ng-container>
+        <ng-container *ngIf="!isMobile" i18n="@@shared.add"> Add </ng-container>
       </button>
       <button
         *ngIf="
@@ -107,7 +106,7 @@ <h3 class="activity-header orc-font-body-large">
         <mat-icon class="large-material-icon add-button-multiple">
           add_circle_outline
         </mat-icon>
-        <ng-container i18n="@@shared.add"> Add </ng-container>
+        <ng-container *ngIf="!isMobile" i18n="@@shared.add"> Add </ng-container>
       </button>
       <mat-menu #menuAdd="matMenu">
         <ng-container *ngIf="type === 'education' || type === 'qualification'">
@@ -186,7 +185,7 @@ <h3 class="activity-header orc-font-body-large">
         [disabled]="!currentAmount && !total"
       >
         <mat-icon class="large-material-icon"> sort </mat-icon>
-        <ng-container i18n="@@shared.sort"> Sort </ng-container>
+        <ng-container *ngIf="!isMobile" i18n="@@shared.sort"> Sort </ng-container>
       </button>
       <mat-menu #menu="matMenu">
         <button

diff --git a/src/app/cdk/panel/panels/panels.component.scss b/src/app/cdk/panel/panels/panels.component.scss
@@ -27,16 +27,25 @@
     .text-container {
       margin-bottom: 5px;
       margin-top: 5px;
+      h3 {
+        span {
+          font-weight: normal;
+        }
+      }
     }
   }
   .controls {
     display: flex;
 
     button {
+      min-width: 40px;
       font-weight: normal;
       padding: 0 6px;
 
       mat-icon {
+        font-size: 32px;
+        height: 32px;
+        width: 32px;
         margin-right: 8px;
         margin-bottom: 2px;
       }

diff --git a/src/app/cdk/panel/panels/panels.component.ts b/src/app/cdk/panel/panels/panels.component.ts
@@ -69,6 +69,7 @@ export class PanelsComponent implements OnInit {
   @Input() labelExportButton = $localize`:@@shared.exportItems:Export Items`
   @Input() labelSortButton = $localize`:@@shared.addItem:Add Item`
   IS_QA: boolean
+  isMobile: boolean
 
   ariaLabelAscending = $localize`:@@shared.ariaLabelAscending:Ascending`
   ariaLabelDescending = $localize`:@@shared.ariaLabelDescending:Descending`
@@ -178,6 +179,9 @@ export class PanelsComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this._platform.get().subscribe((platform) => {
+      this.isMobile = platform.columns4 || platform.columns8
+    })
     this.IS_QA = isQA()
   }
 }