feat: display series information on book and game cards

- Add series name and order display to book cards (books-list.component.ts:598-602)
- Add series name and order display to game cards (games-list.component.ts:560-564)
- Series shows as "📚 Series Name #Order" format
- Add brown-themed styling (#8b6f47) for series info
- Pre-populate series fields when editing books/games
- Series fields added to startEdit() methods for both books and games

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-02-19 23:10:28 -08:00
parent 5a59afaa5e
commit 8f95f57838
2 changed files with 32 additions and 2 deletions
@@ -595,6 +595,11 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
<div class="book-info">
<h3>{{ book.title }}</h3>
<p class="author">by {{ book.author }}</p>
@if (book.series) {
<p class="series">
📚 {{ book.series }}@if (book.seriesOrder) { #{{ book.seriesOrder }}}
</p>
}
<span class="status status-{{ book.status }}">
{{ getStatusLabel(book.status) }}
@@ -1011,6 +1016,14 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
margin: 0.5rem 0;
}
.series {
color: #8b6f47;
font-size: 0.85rem;
margin: 0.5rem 0;
font-weight: 500;
font-style: italic;
}
.status {
display: inline-block;
padding: 0.25rem 0.5rem;
@@ -1747,7 +1760,9 @@ export class BooksListComponent implements OnInit {
notes: book.notes,
coverImage: book.coverImage,
tags: [...(book.tags || [])],
links: [...(book.links || [])]
links: [...(book.links || [])],
series: book.series,
seriesOrder: book.seriesOrder
};
this.editBookImagePreview.set(book.coverImage || null);
this.showAddForm.set(false);