feat: khi người dùng click vào nút Chi tiết hành trình thì sẽ tự cuộn đến mốc thời gian hiện tại

2026-06-24 21:25:04 +07:00
parent 5e60614588
commit f17215f236
9 changed files with 147 additions and 116 deletions
@@ -21,8 +21,8 @@
    <meta name="twitter:title" content="Travel Planner - Lên kế hoạch chuyến đi của bạn" />
    <meta name="twitter:description" content="Khám phá những hành trình tuyệt vời và chia sẻ khoảnh khắc đẹp với cộng đồng du lịch." />
    <meta name="twitter:image" content="https://yotrip.labz.io.vn/background.avif" />
-    <script type="module" crossorigin src="/assets/index-BGRXypxd.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CRk_hghu.css">
+    <script type="module" crossorigin src="/assets/index-DTmIGIUE.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DpJrHqwq.css">
  </head>
 <body>
    <div id="root"></div>
@@ -207,6 +207,17 @@ export const ItineraryTimeline = ({
    if (storedLegId) {
      setExpandedStageId(storedLegId);
      sessionStorage.removeItem('defaultExpandedLegId');
+
+      setTimeout(() => {
+        const targetElement = document.getElementById(`leg-anchor-node-${storedLegId}`);
+        if (targetElement) {
+          targetElement.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start'
+          });
+        }
+        window.history.replaceState({}, document.title);
+      }, 150);
    } else if (legs.length > 0 && !expandedStageId) {
      setExpandedStageId(legs[0].id);
    }
@@ -232,7 +243,7 @@ export const ItineraryTimeline = ({
              const prevLegLastLoc = legIdx > 0 ? legs[legIdx - 1]?.locations.slice(-1)[0] : null;

              return (
-                <section key={leg.id} className={`folder-node-wrapper ${expandedStageId === leg.id ? 'expanded' : 'collapsed'}`}>
+                <section key={leg.id} id={`leg-anchor-node-${leg.id}`} className={`folder-node-wrapper scroll-mt-[70px] ${expandedStageId === leg.id ? 'expanded' : 'collapsed'}`}>
                  {/* Folder header row - clickable to toggle exclusive expansion */}
                  <div 
                    onClick={() => toggleStageExpanded(leg.id)}