79 lines
4.3 KiB
Markdown
79 lines
4.3 KiB
Markdown
# Plan to Implement Like-Based Photo Selection, Displays, and Mobile UI Enhancements
|
|
|
|
Highlight photos with more likes across different displays and optimize the public photo modal's mobile UI layout.
|
|
|
|
---
|
|
|
|
## Proposed Changes
|
|
|
|
### 1. Public Photo Modal Mobile UI Layout & Fixes
|
|
|
|
#### [MODIFY] [PublicPhotoModal.tsx](file:///home/locpham/travelplanning/frontend/src/components/PublicPhotoModal.tsx)
|
|
- **Fixed Photo and Scrollable Comments**:
|
|
- Remove parent modal container vertical scrolling on mobile (`overflow-y-auto` -> `overflow-hidden`).
|
|
- Set the parent container layout to `flex flex-col h-[90vh] md:h-[85vh] overflow-hidden`.
|
|
- The photo container (`h-[45vh]`) and mobile uploader details container will remain static/fixed at the top.
|
|
- Set the comments panel container to `flex-1 min-h-0 flex flex-col` and the comments list to `flex-1 overflow-y-auto` so only the comments scroll on mobile.
|
|
- **Remove Comments Header on Mobile**:
|
|
- Add responsive classes to the comment header (`hidden md:block`) to hide the "Bình luận cộng đồng" / "bình luận từ cộng đồng" title banner on mobile, maximizing space.
|
|
- **Style Uploader Details**:
|
|
- Reduce font size and remove bold style for the "Người đăng" (Uploader name) elements.
|
|
- Desktop uploader text: change from `font-semibold` to `text-xs`.
|
|
- Mobile uploader text: change from `text-sm font-semibold text-white` to `text-xs text-slate-200`.
|
|
- **Safe Area Like Button**:
|
|
- Shift the absolute top position of the Like button to account for safe area insets: `top-[calc(1rem+env(safe-area-inset-top,0px))]`. This prevents browser address bars or notches from clipping it.
|
|
|
|
---
|
|
|
|
### 2. Landing Page Like-Based Sorting
|
|
|
|
#### [MODIFY] [LandingPage.tsx](file:///home/locpham/travelplanning/frontend/src/pages/LandingPage.tsx)
|
|
- In `fetchPublicPhotos`, sort the fetched `publicPhotos` array based on the number of likes (`likedUserIds.length`) in descending order.
|
|
- This ensures:
|
|
1. The cycling background images naturally present the most-liked public photos first.
|
|
2. The gallery previews at the bottom display the top 8 most-liked photos from the community.
|
|
|
|
---
|
|
|
|
### 3. Tour Banner Image Selection
|
|
|
|
#### [MODIFY] [TourDetailPage.tsx](file:///home/locpham/travelplanning/frontend/src/pages/TourDetailPage.tsx)
|
|
- Replace the simple first-photo check for `coverImage` with a function that retrieves the photo with the most likes in the tour.
|
|
- If there are no photos in the tour, fall back to the default Unsplash placeholder cover image.
|
|
|
|
---
|
|
|
|
### 4. Auto-Select Most Liked Photo for Display
|
|
|
|
#### [MODIFY] [ExploreMap.tsx](file:///home/locpham/travelplanning/frontend/src/pages/ExploreMap.tsx)
|
|
- In `groupedPhotos` memo, sort each location's photo array so that photos with the most likes appear first.
|
|
- This ensures the map pin thumbnail bubble displays the most-liked photo at that coordinate, and clicking it displays that photo as the default.
|
|
|
|
#### [MODIFY] [MyPhotosPage.tsx](file:///home/locpham/travelplanning/frontend/src/pages/MyPhotosPage.tsx)
|
|
- Define a helper function `getMostLikedPhoto(photos)` that returns the photo with the most likes.
|
|
- In the `useEffect` that updates `selectedPhotoForDisplay`, use this helper to default-select the most liked photo from the filtered list.
|
|
|
|
#### [MODIFY] [TourDetailPage.tsx](file:///home/locpham/travelplanning/frontend/src/pages/TourDetailPage.tsx)
|
|
- Define the same helper function `getMostLikedPhoto(photos)`.
|
|
- Update the default photo selection inside both `useEffect` hooks (the one listening to `filteredPhotos` and the one listening to `currentTour`/`legs` changes) to select the photo with the most likes using this helper.
|
|
|
|
---
|
|
|
|
## Verification Plan
|
|
|
|
### Automated Tests
|
|
- Run `npm run build -w frontend` to verify that there are no compilation or syntax errors.
|
|
|
|
### Manual Verification
|
|
- **Mobile Public Photo Modal**:
|
|
1. View a photo on mobile browser/emulator.
|
|
2. Verify only the comments scroll, and the header label is hidden.
|
|
3. Verify the Like button position is adjusted.
|
|
4. Verify the Uploader text size is reduced and normal.
|
|
- **Landing Page background & gallery**:
|
|
1. Open the landing page. Verify that the previews show the most liked photos first.
|
|
- **Tour Banner**:
|
|
1. Verify the tour banner updates to show the photo with the most likes.
|
|
- **Map Marker / Photo Timeline default**:
|
|
1. Click map marker and verify most liked photo is active by default.
|