nhcarrigan/library
9
0
Fork 0
generated from nhcarrigan/template
Code Issues Pull Requests 54 Actions Releases 3 Activity

feat: add badges

Browse Source
This commit is contained in:
Naomi Carrigan
2026-02-04 17:59:26 -08:00
parent e20be5f4e8
commit 054a55ff9c
17 changed files with 451 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/app/components/admin/admin-users.component.ts
+55
View File
@@ -42,6 +42,18 @@ import { User } from '@library/shared-types';
@if (user.isBanned) {
<span class="banned-badge">Banned</span>
}
@if (user.inDiscord) {
<span class="discord-badge">Discord</span>
}
@if (user.isVip) {
<span class="vip-badge">VIP</span>
}
@if (user.isMod) {
<span class="mod-badge">Mod</span>
}
@if (user.isStaff) {
<span class="staff-badge">Staff</span>
}
</div>
</div>
<div class="user-actions">
@@ -167,6 +179,49 @@ import { User } from '@library/shared-types';
width: fit-content;
}
.discord-badge {
display: inline-block;
background: #5865f2;
color: var(--witch-moon);
padding: 0.15rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
width: fit-content;
}
.vip-badge {
display: inline-block;
background: linear-gradient(135deg, #ffd700, #ffaa00);
color: #1a1a1a;
padding: 0.15rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
width: fit-content;
}
.mod-badge {
display: inline-block;
background: linear-gradient(135deg, #00b894, #00cec9);
color: var(--witch-moon);
padding: 0.15rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
width: fit-content;
}
.staff-badge {
display: inline-block;
background: linear-gradient(135deg, #e84393, #fd79a8);
color: var(--witch-moon);
padding: 0.15rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
width: fit-content;
}
.user-actions {
display: flex;
gap: 0.5rem;
apps/frontend/src/app/components/art/art-gallery.component.ts
+48
View File
@@ -238,6 +238,18 @@ import { Art, CreateArtDto, UpdateArtDto, Comment } from '@library/shared-types'
<img [src]="comment.user.avatar" [alt]="comment.user.username" class="comment-avatar">
}
<span class="comment-author">{{ comment.user.username }}</span>
@if (comment.user.inDiscord) {
<span class="discord-badge">Discord</span>
}
@if (comment.user.isVip) {
<span class="vip-badge">VIP</span>
}
@if (comment.user.isMod) {
<span class="mod-badge">Mod</span>
}
@if (comment.user.isStaff) {
<span class="staff-badge">Staff</span>
}
<span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
@if (canEditComment(comment)) {
<button (click)="startEditComment(art.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
@@ -628,6 +640,42 @@ import { Art, CreateArtDto, UpdateArtDto, Comment } from '@library/shared-types'
color: var(--witch-plum);
}
.discord-badge {
background: #5865f2;
color: white;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 500;
}
.vip-badge {
background: linear-gradient(135deg, #ffd700, #ffaa00);
color: #1a1a1a;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 600;
}
.mod-badge {
background: linear-gradient(135deg, #00b894, #00cec9);
color: white;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 600;
}
.staff-badge {
background: linear-gradient(135deg, #e84393, #fd79a8);
color: white;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 600;
}
.comment-date {
font-size: 0.75rem;
color: var(--witch-mauve);
apps/frontend/src/app/components/books/books-list.component.ts
+48
View File
@@ -345,6 +345,18 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment } from '@librar
<img [src]="comment.user.avatar" [alt]="comment.user.username" class="comment-avatar">
}
<span class="comment-author">{{ comment.user.username }}</span>
@if (comment.user.inDiscord) {
<span class="discord-badge">Discord</span>
}
@if (comment.user.isVip) {
<span class="vip-badge">VIP</span>
}
@if (comment.user.isMod) {
<span class="mod-badge">Mod</span>
}
@if (comment.user.isStaff) {
<span class="staff-badge">Staff</span>
}
<span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
@if (canEditComment(comment)) {
<button (click)="startEditComment(book.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
@@ -705,6 +717,42 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment } from '@librar
color: var(--witch-plum);
}
.discord-badge {
background: #5865f2;
color: white;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 500;
}
.vip-badge {
background: linear-gradient(135deg, #ffd700, #ffaa00);
color: #1a1a1a;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 600;
}
.mod-badge {
background: linear-gradient(135deg, #00b894, #00cec9);
color: white;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 600;
}
.staff-badge {
background: linear-gradient(135deg, #e84393, #fd79a8);
color: white;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 600;
}
.comment-date {
font-size: 0.75rem;
color: var(--witch-mauve);
apps/frontend/src/app/components/games/games-list.component.ts
+48
View File
@@ -310,6 +310,18 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment } from '@librar
<img [src]="comment.user.avatar" [alt]="comment.user.username" class="comment-avatar">
}
<span class="comment-author">{{ comment.user.username }}</span>
@if (comment.user.inDiscord) {
<span class="discord-badge">Discord</span>
}
@if (comment.user.isVip) {
<span class="vip-badge">VIP</span>
}
@if (comment.user.isMod) {
<span class="mod-badge">Mod</span>
}
@if (comment.user.isStaff) {
<span class="staff-badge">Staff</span>
}
<span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
@if (canEditComment(comment)) {
<button (click)="startEditComment(game.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
@@ -588,6 +600,42 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment } from '@librar
color: #374151;
}
.discord-badge {
background: #5865f2;
color: white;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 500;
}
.vip-badge {
background: linear-gradient(135deg, #ffd700, #ffaa00);
color: #1a1a1a;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 600;
}
.mod-badge {
background: linear-gradient(135deg, #00b894, #00cec9);
color: white;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 600;
}
.staff-badge {
background: linear-gradient(135deg, #e84393, #fd79a8);
color: white;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 600;
}
.comment-date {
font-size: 0.75rem;
color: #6b7280;
apps/frontend/src/app/components/manga/manga-list.component.ts
+48
View File
@@ -310,6 +310,18 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment } from '@li
<img [src]="comment.user.avatar" [alt]="comment.user.username" class="comment-avatar">
}
<span class="comment-author">{{ comment.user.username }}</span>
@if (comment.user.inDiscord) {
<span class="discord-badge">Discord</span>
}
@if (comment.user.isVip) {
<span class="vip-badge">VIP</span>
}
@if (comment.user.isMod) {
<span class="mod-badge">Mod</span>
}
@if (comment.user.isStaff) {
<span class="staff-badge">Staff</span>
}
<span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
@if (canEditComment(comment)) {
<button (click)="startEditComment(manga.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
@@ -590,6 +602,42 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment } from '@li
color: #374151;
}
.discord-badge {
background: #5865f2;
color: white;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 500;
}
.vip-badge {
background: linear-gradient(135deg, #ffd700, #ffaa00);
color: #1a1a1a;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 600;
}
.mod-badge {
background: linear-gradient(135deg, #00b894, #00cec9);
color: white;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 600;
}
.staff-badge {
background: linear-gradient(135deg, #e84393, #fd79a8);
color: white;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 600;
}
.comment-date {
font-size: 0.75rem;
color: #6b7280;
apps/frontend/src/app/components/music/music-list.component.ts
+48
View File
@@ -383,6 +383,18 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment
<img [src]="comment.user.avatar" [alt]="comment.user.username" class="comment-avatar">
}
<span class="comment-author">{{ comment.user.username }}</span>
@if (comment.user.inDiscord) {
<span class="discord-badge">Discord</span>
}
@if (comment.user.isVip) {
<span class="vip-badge">VIP</span>
}
@if (comment.user.isMod) {
<span class="mod-badge">Mod</span>
}
@if (comment.user.isStaff) {
<span class="staff-badge">Staff</span>
}
<span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
@if (canEditComment(comment)) {
<button (click)="startEditComment(music.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
@@ -781,6 +793,42 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment
color: var(--witch-plum);
}
.discord-badge {
background: #5865f2;
color: white;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 500;
}
.vip-badge {
background: linear-gradient(135deg, #ffd700, #ffaa00);
color: #1a1a1a;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 600;
}
.mod-badge {
background: linear-gradient(135deg, #00b894, #00cec9);
color: white;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 600;
}
.staff-badge {
background: linear-gradient(135deg, #e84393, #fd79a8);
color: white;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 600;
}
.comment-date {
font-size: 0.75rem;
color: var(--witch-mauve);
apps/frontend/src/app/components/shows/shows-list.component.ts
+48
View File
@@ -306,6 +306,18 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment } fro
<img [src]="comment.user.avatar" [alt]="comment.user.username" class="comment-avatar">
}
<span class="comment-author">{{ comment.user.username }}</span>
@if (comment.user.inDiscord) {
<span class="discord-badge">Discord</span>
}
@if (comment.user.isVip) {
<span class="vip-badge">VIP</span>
}
@if (comment.user.isMod) {
<span class="mod-badge">Mod</span>
}
@if (comment.user.isStaff) {
<span class="staff-badge">Staff</span>
}
<span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
@if (canEditComment(comment)) {
<button (click)="startEditComment(show.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
@@ -585,6 +597,42 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment } fro
color: #374151;
}
.discord-badge {
background: #5865f2;
color: white;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 500;
}
.vip-badge {
background: linear-gradient(135deg, #ffd700, #ffaa00);
color: #1a1a1a;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 600;
}
.mod-badge {
background: linear-gradient(135deg, #00b894, #00cec9);
color: white;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 600;
}
.staff-badge {
background: linear-gradient(135deg, #e84393, #fd79a8);
color: white;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 600;
}
.comment-date {
font-size: 0.75rem;
color: #6b7280;