3dtours/travelplanning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: cách các pages hiển thị trên browser điện thoại

Browse Source
This commit is contained in:
3dtours
2026-06-26 10:21:01 +07:00
parent 6d90a47c24
commit cfb97d976f
5 changed files with 64 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ItineraryTimeline.tsx
+23 -23
View File
@@ -259,11 +259,11 @@ export const ItineraryTimeline = ({
}, [legs, expandedStageId]);
return (
<div id="itinerary-timeline-print-zone" className="timeline-scroll-container itinerary-timeline-container">
<div id="itinerary-timeline-print-zone" className="timeline-scroll-container itinerary-timeline-container overflow-x-hidden">
{legs.length === 0 ? (
<div className="text-center py-20 bg-white rounded-3xl border-2 border-dashed border-gray-200">
<List className="w-12 h-12 text-gray-300 mx-auto mb-4" />
<p className="text-gray-500 font-medium">Chưa có chặng nào trong lộ trình.</p>
<div className="text-center py-16 sm:py-20 bg-white rounded-3xl border-2 border-dashed border-gray-200">
<List className="w-10 h-10 sm:w-12 sm:h-12 text-gray-300 mx-auto mb-3 sm:mb-4" />
<p className="text-gray-500 font-medium text-xs sm:text-sm">Chưa có chặng nào trong lộ trình.</p>
</div>
) : (
legs.map((leg, legIdx) => {
@@ -278,15 +278,15 @@ export const ItineraryTimeline = ({
const prevLegLastLoc = legIdx > 0 ? legs[legIdx - 1]?.locations.slice(-1)[0] : null;
return (
<section key={leg.id} id={`leg-anchor-node-${leg.id}`} className={`folder-node-wrapper scroll-mt-[70px] ${expandedStageId === leg.id ? 'expanded' : 'collapsed'}`}>
<section key={leg.id} id={`leg-anchor-node-${leg.id}`} className={`folder-node-wrapper scroll-mt-[60px] sm:scroll-mt-[70px] ${expandedStageId === leg.id ? 'expanded' : 'collapsed'}`}>
{/* Folder header row - clickable to toggle exclusive expansion */}
<div
onClick={() => toggleStageExpanded(leg.id)}
className="folder-header-row animate-in fade-in slide-in-from-bottom-4 duration-300 hover:bg-gray-50/50 transition-colors"
>
<div className="font-black text-blue-600 text-xl truncate flex-1 flex flex-col gap-1">
<div className="font-black text-blue-600 text-lg sm:text-xl truncate flex-1 flex flex-col gap-1">
<div className="flex items-center gap-2">
<span className="bg-blue-600 text-white w-8 h-8 rounded-lg flex items-center justify-center text-sm shrink-0">
<span className="bg-blue-600 text-white w-7 h-7 sm:w-8 sm:h-8 rounded-lg flex items-center justify-center text-xs sm:text-sm shrink-0">
{leg.sequence}
</span>
<div className="flex flex-col overflow-hidden">
@@ -466,29 +466,29 @@ export const ItineraryTimeline = ({
{isStartPoint && (
<span className="inline-block px-2 py-0.5 bg-green-100 text-green-700 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider">Điểm bắt đầu</span>
)}
{isEndPoint && (
<span className="inline-block px-2 py-0.5 bg-red-100 text-red-700 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider">Điểm kết thúc</span>
)}
<h3
onClick={(e) => {
e.stopPropagation();
onNavigate?.(location);
}}
className={`font-semibold text-lg cursor-pointer hover:text-blue-600 transition-colors select-none ${location.status === 'COMPLETED' ? 'text-gray-500 line-through' : 'text-gray-800'}`}
>
{location.name}
</h3>
<div className="flex items-center text-sm text-gray-500 mt-1">
{isEndPoint && (
<span className="inline-block px-2 py-0.5 bg-red-100 text-red-700 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider">Điểm kết thúc</span>
)}
<h3
onClick={(e) => {
e.stopPropagation();
onNavigate?.(location);
}}
className={`font-semibold text-base sm:text-lg cursor-pointer hover:text-blue-600 transition-colors select-none ${location.status === 'COMPLETED' ? 'text-gray-500 line-through' : 'text-gray-800'}`}
>
{location.name}
</h3>
<div className="flex items-center text-xs sm:text-sm text-gray-500 mt-1">
<MapPin className="w-3 h-3 mr-1" />
<span className="truncate max-w-[200px] sm:max-w-md">{location.address}</span>
<span className="truncate max-w-[120px] xs:max-w-[180px] sm:max-w-md">{location.address}</span>
</div>
{location.note && (
<div className="mt-2 text-xs text-gray-600 bg-gray-50 p-2 rounded-lg border border-gray-100 italic">
<div className="mt-1.5 sm:mt-2 text-[10px] sm:text-xs text-gray-600 bg-gray-50 p-1.5 sm:p-2 rounded-lg border border-gray-100 italic">
{location.note}
</div>
)}
{dwellMinutes !== null && (
<div className="flex items-center text-xs text-amber-600 font-medium mt-1">
<div className="flex items-center text-[10px] sm:text-xs text-amber-600 font-medium mt-1">
<Clock className="w-3 h-3 mr-1" />
<span>Thời gian dừng: {formatTravelTime(dwellMinutes)}</span>
</div>