john-okeefe
93991dfb0a
Remove the library selector dropdown from the series detail page since the page is scoped to the library from the browse page. Replace it with a simple '← All Series' back link in the sticky bar. Add title attributes to the shared BookCard template so the full book title and author are visible on hover (useful for truncated text with line-clamp).
54 lines
1.9 KiB
Templ
54 lines
1.9 KiB
Templ
package templates
|
|
|
|
import (
|
|
"bookhoard/internal/handlers"
|
|
"fmt"
|
|
)
|
|
|
|
templ SeriesDetail(user User, seriesName string, books []handlers.BookInfo, currentLibraryID string, errorMessage string) {
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>{ seriesName } - Bookhoard</title>
|
|
<link href="/static/style.css" rel="stylesheet"/>
|
|
</head>
|
|
<body class="theme-{ user.Theme }">
|
|
@Header(user, "/series")
|
|
<div class="sticky top-0 z-40 bg-opacity-95 backdrop-blur border-b" style="background-color: var(--bg-primary);">
|
|
<div class="w-full px-4 py-3 flex items-center gap-4">
|
|
<a href="/series" class="text-sm hover:opacity-80 transition-opacity" style="color: var(--text-secondary); text-decoration: none;">
|
|
← All Series
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- Series Header -->
|
|
<div class="w-full px-4 py-8">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<span class="px-3 py-1 rounded-full text-sm font-semibold" style="background-color: var(--accent); color: white;">
|
|
📚 Series
|
|
</span>
|
|
<h1 class="text-3xl font-bold" style="color: var(--text-primary)">{ seriesName }</h1>
|
|
<span class="text-sm" style="color: var(--text-secondary)">{ fmt.Sprintf("%d", len(books)) } books</span>
|
|
</div>
|
|
<!-- Books Grid -->
|
|
if len(books) > 0 {
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
|
|
for _, book := range books {
|
|
@BookCard(book)
|
|
}
|
|
</div>
|
|
} else {
|
|
<div class="text-center py-16" style="color: var(--text-secondary)">
|
|
<div class="text-6xl mb-4">📚</div>
|
|
<h3 class="text-xl font-semibold mb-2" style="color: var(--text-primary)">No Books Found</h3>
|
|
<p>This series doesn't have any books in this library yet</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
@ErrorToast(errorMessage)
|
|
</body>
|
|
</html>
|
|
}
|