docs: add card carousel and tap-to-detail design [ci skip]
This commit is contained in:
parent
a153f64af4
commit
089ee88728
1 changed files with 57 additions and 0 deletions
57
docs/plans/2026-02-21-card-carousel-tap-detail-design.md
Normal file
57
docs/plans/2026-02-21-card-carousel-tap-detail-design.md
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
# Card View: Photo Carousel and Tap-to-Detail
|
||||
|
||||
**Date:** 2026-02-21
|
||||
**Status:** Approved
|
||||
|
||||
## Summary
|
||||
|
||||
Two changes to the listing card view:
|
||||
1. Replace single thumbnail with a 5-photo carousel on each card
|
||||
2. Fix tap behavior so tapping a card opens the detail bottom sheet (not Rightmove)
|
||||
|
||||
## Design
|
||||
|
||||
### Backend: Embed Photos in GeoJSON
|
||||
|
||||
**File:** `api/ui_exporter.py` — `convert_row_to_geojson()`
|
||||
|
||||
Add `photos` property (first 5 photo URLs) from `additional_info.property.images` to each GeoJSON feature. Fall back to `[photo_thumbnail]` if no photos array available.
|
||||
|
||||
### Frontend: Types
|
||||
|
||||
**File:** `frontend/src/types/index.ts`
|
||||
|
||||
Add `photos?: string[]` to `PropertyProperties` interface.
|
||||
|
||||
### Frontend: Card Carousel
|
||||
|
||||
**File:** `frontend/src/components/PropertyCard.tsx`
|
||||
|
||||
- Replace single `<img>` in compact variant with lightweight embla-carousel
|
||||
- Swipeable horizontally, dot indicators overlaid at bottom
|
||||
- Same aspect ratio as current thumbnail
|
||||
- Lazy-load images
|
||||
- Max 5 photos
|
||||
|
||||
### Frontend: Click Behavior
|
||||
|
||||
**File:** `frontend/src/components/PropertyCard.tsx`
|
||||
|
||||
- Remove `window.open(property.url)` from `handleClick`
|
||||
- Tapping card only calls `onClick()` callback
|
||||
- This triggers `onSelectListing(id)` in App.tsx, which opens `ListingDetailSheet`
|
||||
- Rightmove link remains accessible via external link button in `ListingDetail`
|
||||
|
||||
### No Changes Needed
|
||||
|
||||
- `ListingDetailSheet.tsx` — already wired correctly
|
||||
- `App.tsx` — `onSelectListing` already sets `selectedListingId`
|
||||
- `ListingDetail.tsx` — already has Rightmove external link
|
||||
- `PhotoCarousel.tsx` — used in detail view, unchanged
|
||||
- `SwipeablePropertyCard.tsx` — passes `onClick` through, unchanged
|
||||
|
||||
## Approach Decision
|
||||
|
||||
Chose **Approach A (Minimal Fix)** over:
|
||||
- **Approach B (Two-Zone Card):** Two click zones add UI complexity and are hard to discover on mobile
|
||||
- **Approach C (Long-press):** Most users won't discover long-press behavior
|
||||
Loading…
Add table
Add a link
Reference in a new issue