From 17eb65ebdc232c82d043b544f04e64371c1fa32c Mon Sep 17 00:00:00 2001 From: Ruidy Date: Sun, 2 Mar 2025 13:44:43 +0100 Subject: [PATCH] update booking list to card layout (#46) ### 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. --- internal/view/booking_lines.templ | 61 ++++++++++------ internal/view/booking_lines_templ.go | 102 ++++++++++++++++----------- internal/view/bookings_list.templ | 18 +---- internal/view/bookings_list_templ.go | 6 +- 4 files changed, 102 insertions(+), 85 deletions(-) diff --git a/internal/view/booking_lines.templ b/internal/view/booking_lines.templ index f67dc3a..090d356 100644 --- a/internal/view/booking_lines.templ +++ b/internal/view/booking_lines.templ @@ -3,28 +3,45 @@ package view import () templ BookingLines(bookings []*ListBookingsViewModel) { - + } diff --git a/internal/view/booking_lines_templ.go b/internal/view/booking_lines_templ.go index eca80ad..73517d3 100644 --- a/internal/view/booking_lines_templ.go +++ b/internal/view/booking_lines_templ.go @@ -31,114 +31,132 @@ func BookingLines(bookings []*ListBookingsViewModel) templ.Component { templ_7745c5c3_Var1 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } diff --git a/internal/view/bookings_list.templ b/internal/view/bookings_list.templ index 38e768a..557468a 100644 --- a/internal/view/bookings_list.templ +++ b/internal/view/bookings_list.templ @@ -14,26 +14,12 @@ templ ListBookings(bookings []*ListBookingsViewModel) { name="search" placeholder="Search bookings by name…" hx-get="/bookings" - hx-target="tbody" + hx-target="#booking-cards" hx-swap="outerHTML" hx-trigger="keyup changed delay:500ms" class="input input-bordered input-primary w-full md:w-96" /> -
- - - - - - - - - - - - @BookingLines(bookings) -
IDNameTotal (€)FromToPlatform
-
+ @BookingLines(bookings) } } diff --git a/internal/view/bookings_list_templ.go b/internal/view/bookings_list_templ.go index 347d50f..05c55ad 100644 --- a/internal/view/bookings_list_templ.go +++ b/internal/view/bookings_list_templ.go @@ -43,7 +43,7 @@ func ListBookings(bookings []*ListBookingsViewModel) templ.Component { }() } ctx = templ.InitializeContext(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "

Bookings

Overview of the activity

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "

Bookings

Overview of the activity

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -51,10 +51,6 @@ func ListBookings(bookings []*ListBookingsViewModel) templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "
IDNameTotal (€)FromToPlatform
") - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } return nil }) templ_7745c5c3_Err = layout.BaseLayout().Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)