mirror of
https://github.com/rjNemo/rentease.git
synced 2026-06-06 02:36:49 +00:00
Ruidy
17eb65ebdc
### TL;DR Transformed the bookings list from a table layout to a responsive card-based grid design. ### What changed? - Replaced table structure with a responsive grid of cards - Each booking is now displayed as a card with improved visual hierarchy - Added hover effects and shadows for better interactivity - Reorganized booking information with dedicated sections for dates and pricing - Updated the search functionality to target the new card container - Added euro symbol to price display - Improved the presentation of canceled bookings ### How to test? 1. Navigate to the bookings list page 2. Verify cards display correctly on different screen sizes 3. Check that hover effects work on cards 4. Confirm search functionality still filters bookings 5. Verify canceled bookings show with strikethrough 6. Test that "View Details" links work correctly 7. Ensure all booking information is visible and properly formatted ### Why make this change? The card-based layout provides a more modern and user-friendly interface that works better across different screen sizes. It improves the visual hierarchy of booking information and makes it easier for users to scan and interact with individual bookings. The new design also better accommodates varying content lengths and provides a more engaging visual experience.
25 lines
798 B
Text
25 lines
798 B
Text
package view
|
|
|
|
import "github.com/rjNemo/rentease/internal/view/layout"
|
|
|
|
templ ListBookings(bookings []*ListBookingsViewModel) {
|
|
@layout.BaseLayout() {
|
|
<section class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-4 p-4 w-[98%] mx-auto">
|
|
<hgroup class="flex-shrink-0">
|
|
<h1 class="text-3xl font-bold text-primary tracking-tight">Bookings</h1>
|
|
<h2 class="text-muted text-lg font-normal">Overview of the activity</h2>
|
|
</hgroup>
|
|
<input
|
|
type="search"
|
|
name="search"
|
|
placeholder="Search bookings by name…"
|
|
hx-get="/bookings"
|
|
hx-target="#booking-cards"
|
|
hx-swap="outerHTML"
|
|
hx-trigger="keyup changed delay:500ms"
|
|
class="input input-bordered input-primary w-full md:w-96"
|
|
/>
|
|
</section>
|
|
@BookingLines(bookings)
|
|
}
|
|
}
|