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.
47 lines
1.4 KiB
Text
47 lines
1.4 KiB
Text
package view
|
|
|
|
import ()
|
|
|
|
templ BookingLines(bookings []*ListBookingsViewModel) {
|
|
<ul id="booking-cards" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 list-none">
|
|
for _, b := range bookings {
|
|
<li class="card bg-base-200 shadow-xl hover:shadow-2xl transition-shadow duration-200">
|
|
<article class="card-body">
|
|
<div class="flex justify-between items-start">
|
|
<h2 class="card-title">
|
|
if b.Canceled {
|
|
<span class="line-through text-gray-500">{ b.Name }</span>
|
|
} else {
|
|
<span>{ b.Name }</span>
|
|
}
|
|
</h2>
|
|
<div class="badge badge-primary">{ b.Platform }</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-2 my-4">
|
|
<div class="text-sm">
|
|
<div class="text-gray-500">Check-in</div>
|
|
<div class="font-medium">{ b.From }</div>
|
|
</div>
|
|
<div class="text-sm">
|
|
<div class="text-gray-500">Check-out</div>
|
|
<div class="font-medium">{ b.To }</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between items-center mt-2">
|
|
<div class="text-lg font-bold text-primary">
|
|
{ b.Total } €
|
|
</div>
|
|
<div class="text-sm text-gray-500">
|
|
ID: { b.Id }
|
|
</div>
|
|
</div>
|
|
<div class="card-actions justify-end mt-4">
|
|
<a href={ b.Url } class="btn btn-primary btn-sm">
|
|
View Details
|
|
</a>
|
|
</div>
|
|
</article>
|
|
</li>
|
|
}
|
|
</ul>
|
|
}
|