From a8f0047f2930289e5d290c8928fe7c3b2471ea29 Mon Sep 17 00:00:00 2001
From: Quildra <Quildra@gmail.com>
Date: Thu, 21 Dec 2023 14:42:18 +0000
Subject: [PATCH] Add in links rather than icon to user profiles

---
 .../race-details/race-details.component.html  | 11 +++-
 .../race-details/race-details.component.scss  | 43 +++++++++++++
 .../race-details/race-details.component.ts    | 10 +++
 .../season-standings.component.html           |  9 +--
 .../season-standings.component.scss           | 64 ++++++++++++-------
 5 files changed, 105 insertions(+), 32 deletions(-)

diff --git a/packages/bridge-ui/src/app/components/race-details/race-details.component.html b/packages/bridge-ui/src/app/components/race-details/race-details.component.html
index 79aab65..f843e04 100644
--- a/packages/bridge-ui/src/app/components/race-details/race-details.component.html
+++ b/packages/bridge-ui/src/app/components/race-details/race-details.component.html
@@ -60,7 +60,14 @@
             <!-- Name Column -->
             <ng-container matColumnDef="name">
                 <th mat-header-cell *matHeaderCellDef>Name </th>
-                <td mat-cell *matCellDef="let element"> {{getRacerName(element.racer)}} </td>
+                <td mat-cell *matCellDef="let element">
+                    @if(element.racer.user) {
+                        <a class="user-link" [routerLink]="['/user/'+getUserId(element.racer)]">{{getRacerName(element.racer)}}</a>
+                    }
+                    @else {
+                        {{getRacerName(element.racer)}}
+                    }
+                </td>
             </ng-container>
             
             <!-- Weight Column -->
@@ -72,7 +79,7 @@
             <ng-container matColumnDef="ghost">
                 <th mat-header-cell *matHeaderCellDef>Ghost</th>
                 @if(openToUploads) {
-                    <td mat-cell *matCellDef="let element"> <button mat-raised-button color="disabled"><mat-icon aria-hidden="false" aria-label="Example home icon" fontIcon="download"></mat-icon> Ghost</button> </td>
+                    <td mat-cell *matCellDef="let element"> <button mat-raised-button color="disabled"><mat-icon aria-hidden="false" aria-label="Example home icon" fontIcon="file_download_off"></mat-icon> Ghost</button> </td>
                 }
                 @else {
                     <td mat-cell *matCellDef="let element"> <button mat-raised-button color="accent" (click)="onClickDownloadGhost(element)"><mat-icon aria-hidden="false" aria-label="Example home icon" fontIcon="download"></mat-icon> Ghost</button> </td>
diff --git a/packages/bridge-ui/src/app/components/race-details/race-details.component.scss b/packages/bridge-ui/src/app/components/race-details/race-details.component.scss
index 40edb04..bfc24d6 100644
--- a/packages/bridge-ui/src/app/components/race-details/race-details.component.scss
+++ b/packages/bridge-ui/src/app/components/race-details/race-details.component.scss
@@ -116,4 +116,47 @@
 
 .mat-column-ghost {
   text-align: center;
+}
+
+.small-icon-button {
+  width: 32px !important;
+  height: 32px !important;
+  padding: 0px !important;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+
+  & > *[role=img] {
+     width: 24px;
+     height: 24px;
+     font-size: 24px;
+
+     svg {
+        width: 24px;
+        height: 24px;
+     }
+  }
+
+  .mat-mdc-button-touch-target {
+     width: 24px !important;
+     height: 24px !important;
+  }
+}
+
+.inline-row-name {
+  display: inline;
+  vertical-align: super;
+}
+
+a {
+  font-weight: 700;
+  text-decoration: none;
+}
+
+a, a:visited, a:hover, a:active {
+  color: inherit;
+}
+
+a:hover {    /* mouse over link */
+  border-bottom: 1px solid;
 }
\ No newline at end of file
diff --git a/packages/bridge-ui/src/app/components/race-details/race-details.component.ts b/packages/bridge-ui/src/app/components/race-details/race-details.component.ts
index 43cd4ac..b66a31a 100644
--- a/packages/bridge-ui/src/app/components/race-details/race-details.component.ts
+++ b/packages/bridge-ui/src/app/components/race-details/race-details.component.ts
@@ -1,5 +1,6 @@
 import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
 
 import { MatButtonModule } from '@angular/material/button';
 import { MatGridListModule } from '@angular/material/grid-list';
@@ -19,6 +20,7 @@ import { ServerSideEventsService } from '../../services/server-side-events.servi
   standalone: true,
   imports: [
     CommonModule,
+    RouterModule,
     MatGridListModule,
     MatIconModule,
     MatTableModule,
@@ -162,6 +164,14 @@ export class RaceDetailsComponent implements AfterViewInit {
     return ""
   }
 
+  getUserId(racer: any): string {
+    if( racer != undefined && racer.user != undefined) {
+      return racer.user.auth0id.replace("auth0|", "");
+    }
+
+    return ""
+  }
+
   timeToMedal(time: number) {
     if( this.race == undefined) { return "" }
     if( time < this.race.authorTime ) { return "assets/medal_author.png"; }
diff --git a/packages/bridge-ui/src/app/components/season-standings/season-standings.component.html b/packages/bridge-ui/src/app/components/season-standings/season-standings.component.html
index c1bfeb2..650e03c 100644
--- a/packages/bridge-ui/src/app/components/season-standings/season-standings.component.html
+++ b/packages/bridge-ui/src/app/components/season-standings/season-standings.component.html
@@ -10,16 +10,11 @@
             <th mat-header-cell *matHeaderCellDef>Name </th>
             <td mat-cell *matCellDef="let element"> 
                 @if(element.racer.user) {
-                    <button mat-icon-button class="small-icon-button" [routerLink]="['/user/'+getUserId(element.racer)]">
-                        <mat-icon>info</mat-icon>
-                    </button>
+                    <a class="user-link" [routerLink]="['/user/'+getUserId(element.racer)]">{{getRacerName(element.racer)}}</a>
                 }
                 @else {
-                    <button mat-icon-button class="small-icon-button">
-                        <mat-icon>mystery</mat-icon>
-                    </button>
+                    {{getRacerName(element.racer)}}
                 }
-                {{getRacerName(element.racer)}} 
             </td>
         </ng-container>
         
diff --git a/packages/bridge-ui/src/app/components/season-standings/season-standings.component.scss b/packages/bridge-ui/src/app/components/season-standings/season-standings.component.scss
index 31abf65..f91e13b 100644
--- a/packages/bridge-ui/src/app/components/season-standings/season-standings.component.scss
+++ b/packages/bridge-ui/src/app/components/season-standings/season-standings.component.scss
@@ -1,24 +1,42 @@
 .small-icon-button {
-    width: 24px !important;
-    height: 24px !important;
-    padding: 0px !important;
-    display: inline-flex !important;
-    align-items: center;
-    justify-content: center;
- 
-    & > *[role=img] {
-       width: 16px;
-       height: 16px;
-       font-size: 16px;
- 
-       svg {
-          width: 16px;
-          height: 16px;
-       }
-    }
- 
-    .mat-mdc-button-touch-target {
-       width: 24px !important;
-       height: 24px !important;
-    }
- }
\ No newline at end of file
+   width: 32px !important;
+   height: 32px !important;
+   padding: 0px !important;
+   display: inline-flex !important;
+   align-items: center;
+   justify-content: center;
+
+   & > *[role=img] {
+      width: 24px;
+      height: 24px;
+      font-size: 24px;
+
+      svg {
+         width: 24px;
+         height: 24px;
+      }
+   }
+
+   .mat-mdc-button-touch-target {
+      width: 24px !important;
+      height: 24px !important;
+   }
+}
+
+.inline-row-name {
+    display: inline;
+    vertical-align: super;
+}
+
+a {
+    font-weight: 700;
+    text-decoration: none;
+}
+
+a, a:visited, a:hover, a:active {
+    color: inherit;
+}
+
+a:hover {    /* mouse over link */
+    border-bottom: 1px solid;
+}
\ No newline at end of file