refactor(templates): simplify BooksGrid component
Remove wrapper div and pagination from BooksGrid component. The component now only renders book cards, making it more reusable. Changes: - Remove books-grid wrapper div from BooksGrid - Remove pagination controls from BooksGrid - Component now only renders book card grid This allows the parent template to control the wrapper div placement and pagination location, which is needed for proper HTMX targeting on the bookshelf page. Related: Issue with pagination displaying inside grid instead of below
This commit is contained in:
@@ -3,7 +3,6 @@ package templates
|
||||
import "bookhoard/internal/handlers"
|
||||
|
||||
templ BooksGrid(books []handlers.BookInfo, limit int, offset int, count int, currentLibraryID string) {
|
||||
<div id="books-grid" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
|
||||
if len(books) > 0 {
|
||||
for _, book := range books {
|
||||
@BookCard(book)
|
||||
@@ -15,34 +14,4 @@ templ BooksGrid(books []handlers.BookInfo, limit int, offset int, count int, cur
|
||||
<p class="text-sm">Try adjusting your filters or add some books to your library.</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<!-- Pagination -->
|
||||
<div id="pagination" class="mt-6 flex justify-center gap-2">
|
||||
if count > 0 {
|
||||
<button
|
||||
type="button"
|
||||
class="px-4 py-2 rounded-lg border disabled:opacity-50"
|
||||
style="border-color: var(--border); color: var(--text-primary);"
|
||||
hx-get="/api/media-items/search?library_id={ currentLibraryID }&limit={ limit }&offset={ offset - limit }"
|
||||
hx-target="#books-grid"
|
||||
hx-include="#filter-form"
|
||||
disabled?={ offset <= 0 }
|
||||
>
|
||||
← Previous
|
||||
</button>
|
||||
<span class="px-4 py-2" style="color: var(--text-secondary);">
|
||||
Page { offset / limit + 1 }
|
||||
</span>
|
||||
<button
|
||||
class="px-4 py-2 rounded-lg border disabled:opacity-50"
|
||||
style="border-color: var(--border); color: var(--text-primary);"
|
||||
hx-get="/api/media-items/search?library_id={ currentLibraryID }&limit={ limit }&offset={ offset + limit }"
|
||||
hx-target="#books-grid"
|
||||
hx-include="#filter-form"
|
||||
disabled?={ offset+limit >= count }
|
||||
>
|
||||
Next →
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user