Altitude/AltitudeWeb
5
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance user and punisher avatar display in history table

Browse Source 
Refactored the layout for player and punisher avatars by adding a container around usernames and aligning elements vertically. Updated the `getAvatarUrl` method to accept only UUID strings, streamlining its usage. Improved styling for better alignment and presentation.
This commit is contained in:
Peter 2025-04-12 17:41:29 +02:00
parent 5e75c82994
commit 81807b107c
3 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/app/bans/history/history.component.html
View File

@ -21,11 +21,19 @@
<tr *ngFor="let entry of history"> <tr *ngFor="let entry of history">
<td class="historyType">{{ getType(entry) }}</td> <td class="historyType">{{ getType(entry) }}</td>
<td class="historyPlayer"> <td class="historyPlayer">
<img class="avatar" [ngSrc]="getAvatarUrl(entry)" width="25" <div class="playerContainer">
height="25" alt=""> <img class="avatar" [ngSrc]="getAvatarUrl(entry.uuid)" width="25" height="25"
{{ entry.username }} alt="{{entry.username}}'s Minecraft skin">
<span class="username">{{ entry.username }}</span>
</div>
</td>
<td class="historyPlayer">
<div class="playerContainer">
<img class="avatar" [ngSrc]="getAvatarUrl(entry.punishedByUuid)" width="25" height="25"
alt="{{entry.punishedBy}}'s Minecraft skin">
<span>{{ entry.punishedBy }}</span>
</div>
</td> </td>
<td class="historyPlayer">{{ entry.punishedBy }}</td>
<td class="historyReason">{{ entry.reason }}</td> <td class="historyReason">{{ entry.reason }}</td>
<td class="historyDate">{{ getPunishmentTime(entry) }}</td> <td class="historyDate">{{ getPunishmentTime(entry) }}</td>
<td class="historyDate">{{ getExpiredTime(entry) }}</td> <td class="historyDate">{{ getExpiredTime(entry) }}</td>

11
frontend/src/app/bans/history/history.component.scss
View File

@ -38,6 +38,16 @@ table tr td {
text-overflow: clip; text-overflow: clip;
} }
.playerContainer {
display: inline-flex;
flex-direction: column;
align-items: center;
}
.username {
text-align: center;
}
img { img {
vertical-align: middle; vertical-align: middle;
border-style: none; border-style: none;
@ -45,7 +55,6 @@ img {
.avatar { .avatar {
margin-bottom: 5px; margin-bottom: 5px;
margin-right: 5px;
border-radius: 2px; border-radius: 2px;
} }

4
frontend/src/app/bans/history/history.component.ts
View File

@ -90,8 +90,8 @@ export class HistoryComponent implements OnInit, OnChanges {
}); });
} }
public getAvatarUrl(entry: PunishmentHistoryInner): string { public getAvatarUrl(entry: string): string {
let uuid = entry.uuid.replace('-', ''); let uuid = entry.replace('-', '');
return `https://crafatar.com/avatars/${uuid}?size=25&overlay`; return `https://crafatar.com/avatars/${uuid}?size=25&overlay`;
} }
} }