centered items on Achievements page (fixes #7782)

open-learning-exchange · Nov 14, 2024 · 806db76 · 806db76
1 parent d9c3f55
commit 806db76
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/app/users/users-achievements/users-achievements.component.html b/src/app/users/users-achievements/users-achievements.component.html
@@ -39,7 +39,7 @@ <h3 i18n>My Goals</h3>
       <ng-container *planetBeta>
         <div *ngIf="certifications.length > 0">
           <h3 i18n>My Certifications</h3>
-          <mat-list>
+          <mat-list class="certs-list">
             <mat-list-item *ngFor="let certification of certifications">
               {{certification.name}}
             </mat-list-item>
@@ -79,7 +79,7 @@ <h3 i18n>My Achievements</h3>
       </div>
       <div *ngIf="achievements.references.length > 0">
         <h3 i18n>My References</h3>
-        <mat-list>
+        <mat-list class="references-list">
           <mat-list-item class="mat-list-item-word-wrap" *ngFor="let reference of achievements.references">
             <h4 mat-line>{{reference.name}}</h4>
             <p mat-line *ngIf="reference?.relationship"><ng-container i18n>Relationship:</ng-container> {{reference.relationship}}</p>

diff --git a/src/app/users/users-achievements/users-achievements.scss b/src/app/users/users-achievements/users-achievements.scss
@@ -5,6 +5,18 @@
   margin: 0 auto;
   text-align: center;
 
+  .references-list {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .certs-list .mat-list-item{
+    display: flex;
+    justify-content: center;
+    text-align: center;
+  }
+
   & mat-list, & ul, & ol {
     text-align: left;
   }
@@ -73,6 +85,7 @@
   margin-right: 1rem
 }
 
+
 @media (max-width: $screen-sm) {
   .responsive-toolbar {
     display: flex;