dashboard: smoother avatar linking (fixes #4532) (#7792)

Co-authored-by: mutugiii <[email protected]> Co-authored-by: dogi <[email protected]>
open-learning-exchange · Nov 21, 2024 · 4770eaa · 4770eaa
1 parent a8da2c7
commit 4770eaa
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.15.59",
+  "version": "0.15.60",
   "myplanet": {
     "latest": "v0.21.4",
     "min": "v0.20.4"

diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
@@ -4,28 +4,38 @@
   </a>
   <span class="closebtn" (click)="closeBanner()">&times;</span>
 </div>
-<mat-card class="horizontal">
-  <img [src]="profileImg">
-  <div class="dashboard-name">
-    <h1 class="mat-title">{{displayName}}  ({{visits | number}})</h1>
-    <h1 class="mat-title">
-      <span class="mat-subheading-2"><ng-container *ngFor="let role of roles; last as last">
-        <planet-role [role]="role"></planet-role><span *ngIf="!last">, </span>
-      </ng-container></span>
-    </h1>
-  </div>
-  <div class="date">
-    <p>{{dateNow | date:'longDate'}}</p>
+<mat-card class="horizontal" style="display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start;">
+  <div style="display: flex; align-items: flex-start;">
+    <a [routerLink]="['/users/profile', user.name]" class="profile-link">
+      <img [src]="profileImg" class="profile-avatar">
+    </a>
+    <div class="dashboard-name" style="margin-left: 16px;">
+      <a [routerLink]="['/users/profile', user.name]" class="profile-link">
+        <h1 class="mat-title">{{displayName}} ({{visits | number}})</h1>
+      </a>
+      <h1 class="mat-title">
+        <span class="mat-subheading-2">
+          <ng-container *ngFor="let role of roles; last as last">
+            <planet-role [role]="role"></planet-role><span *ngIf="!last">, </span>
+          </ng-container>
+        </span>
+      </h1>
+    </div>
   </div>
-  <div class="badges">
-    <div *ngFor="let badgeGroup of badgeGroups">
-      <span *ngFor="let course of badgesCourses[badgeGroup]" class="cursor-pointer" (click)="openCourseView(course)" [matTooltip]="course.doc.courseTitle">
-        <mat-icon
-          [ngClass]="{ 'primary-text-color': course.inCertification, 'grey-text-color': !course.inCertification }"
-          fontSet="fa"
-          [fontIcon]="badgeIcons[badgeGroup]">
-        </mat-icon>
-      </span>
+  <div style="display: flex; flex-direction: column; align-items: flex-end;">
+    <div class="date" style="text-align: right;">
+      <p>{{dateNow | date:'longDate'}}</p>
+    </div>
+    <div class="badges" style="display: flex; flex-wrap: wrap; justify-content: flex-end; max-width: 100%; margin-top: 8px;">
+      <div *ngFor="let badgeGroup of badgeGroups" style="margin-right: 4px;">
+        <span *ngFor="let course of badgesCourses[badgeGroup]" class="cursor-pointer" (click)="openCourseView(course)" [matTooltip]="course.doc.courseTitle">
+          <mat-icon
+            [ngClass]="{ 'primary-text-color': course.inCertification, 'grey-text-color': !course.inCertification }"
+            fontSet="fa"
+            [fontIcon]="badgeIcons[badgeGroup]">
+          </mat-icon>
+        </span>
+      </div>
     </div>
   </div>
 </mat-card>

diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
@@ -76,14 +76,15 @@ export class DashboardComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.displayName = this.user.firstName !== undefined ? this.user.firstName + ' ' + this.user.lastName : this.user.name;
+    this.displayName = this.user.firstName !== undefined ? `${this.user.firstName} ${this.user.lastName}` : this.user.name;
     this.planetName = this.stateService.configuration.name;
     this.getSurveys();
     this.getExams();
     this.initDashboard();
     this.couchService.findAll('login_activities', findDocuments({ 'user': this.user.name }, [ 'user' ], [], 1000))
       .pipe(
         catchError(() => {
+          console.warn('Error fetching login activities');
           return of([]);
         })
       ).subscribe((res: any) => {