fix: lướt xem ảnh ở màn hình index của người dùng public

2026-06-22 22:16:51 +07:00
parent ac91f6e4c8
commit a65be48d36
8 changed files with 202 additions and 115 deletions
@@ -0,0 +1,79 @@
+# To AI Agent: Implement Mobile Horizontal Image Panning Component
+
+## 1. Context & Objective
+We are developing a travel application. We need to implement a mobile-first image viewer component. 
+**CRITICAL REQUIREMENT:** When a user swipes/drags horizontally on mobile, the UI must NOT switch to the next image. Instead, it must smoothly scroll/pan horizontally to reveal the hidden, unexposed parts of the *same* wide/panoramic image.
+
+---
+
+## 2. Technical Stack & Scope
+- **Target Platform:** Mobile Web / Responsive (Touch-friendly).
+- **Preferred Method:** CSS-First approach utilizing Viewport Overflow (for optimal GPU performance and native inertia scrolling).
+- **Avoid:** Do NOT use global slider libraries (like standard Swiper/Slick) if they force image switching behavior.
+
+---
+
+## 3. UI/UX Specifications
+
+### A. DOM Structure
+- A wrapper/container acting as the "window view" (`.image-pan-container`).
+- The target wide/panoramic image (`.image-pan-element`).
+
+### B. CSS Rules & Constraints
+1. **Container (`.image-pan-container`):**
+   - Must have a fixed width (e.g., `100vw` or `100%` of parent).
+   - Must set `overflow-x: auto` and `overflow-y: hidden` to enable horizontal touch scrolling only.
+   - Must enable smooth scrolling (`scroll-behavior: smooth`) and native touch momentum (`-webkit-overflow-scrolling: touch`).
+   - **Crucial:** Hide the native scrollbar across all major browsers (Webkit, Firefox, IE/Edge) to make it look like a native mobile app feature.
+
+2. **Image Element (`.image-pan-element`):**
+   - Must fit the container's height perfectly (`height: 100%`).
+   - Width must be calculated automatically based on aspect ratio (`width: auto`).
+   - Must override any global framework styles: enforce `max-width: none !important`.
+   - Do NOT use `object-fit: cover` as it will crop the scrolling data.
+
+---
+
+## 4. Reference Code Blueprint
+
+Use the following snippet as a baseline for your implementation:
+
+```html
+<div class="image-pan-container">
+  <img src="YOUR_PANORAMIC_IMAGE_URL" class="image-pan-element" alt="Panoramic View" />
+</div>
+
+/* Styling Architecture */
+.image-pan-container {
+  width: 100%;
+  height: 400px; /* Adjust height based on project guidelines */
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Hide scrollbars entirely */
+.image-pan-container::-webkit-scrollbar {
+  display: none;
+}
+.image-pan-container {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.image-pan-element {
+  height: 100%;
+  width: auto;
+  max-width: none !important;
+  display: block;
+}
+
+5. Acceptance Criteria
+[ ] The wide photo fills the component height and overflows horizontally without distortion.
+
+[ ] Users can smoothly swipe left/right with their fingers to view all details of the photo.
+
+[ ] No desktop/mobile scrollbars are visible during the interaction.
+
+[ ] Ensure max-width override is active so Tailwind or other CSS frameworks don't crush the image width to 100%.