WP-FIGMA-HOTEL-PIXEL-01 — List-first + detail overlay vs Figma
Domain: D-HOTEL · Surface: CON · Status: IMP · Date: 2026-08-17
Design
- Figma
25:1379(list) — metadata live - JPG
934d7f88f875792b20645.jpg(detail · confirm · success) - Clone pattern:
WP-FIGMA-RENT-PIXEL-02
Change
| Screen | Figma | App trước | App sau |
|---|---|---|---|
| List | List-first, Map ở tab | NearbyMapSheet luôn hiện |
Mặc định list; chip Bản đồ bật sheet |
| List card | Rating cạnh tên | Rating trên ảnh | Rating pill cạnh tên |
| Detail | Hero full-bleed, back/share/tim overlay | Header tách + ảnh bo góc | Overlay trên hero |
| Detail | «Vị trí & Lân cận» | Chỉ link Chỉ đường | Map snippet + Chỉ đường |
| Detail room | Card ảnh + sức chứa + bữa sáng | Icon giường hàng ngang | Ảnh hạng phòng + N khách + «Bao gồm bữa sáng» |
Files
mobile/src/features/hotels/screens/HotelListScreen.tsxmobile/src/features/hotels/screens/HotelDetailScreen.tsxmobile/src/services/api.ts(rooms[].imageUrl— BE đã trả)
N/A (giữ từ WP-FIGMA-FN-HOTEL-01)
- Dual price slider / calendar native
- Pay gateway (method vẫn
note) - Grid 2 cột trên JPG (Figma list là 1 cột)
Verify
- Mở Khách sạn → list cards, không map peek.
- Chạm Bản đồ → map sheet; chạm lại → list.
- Mở chi tiết → hero overlay back/share/tim · map «Vị trí & Lân cận» · Đặt ngay.