Kain344/History-user
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: adjust mobile/tablet breakpoint to 1024px and relocate replay button to the ruler row

Browse Source
This commit is contained in:
taDuc
2026-06-16 00:24:39 +07:00
parent 3fff4b7b20
commit c16f4f773a
1 changed files with 43 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/uhm/components/ui/TimelineBar.tsx
+43 -43
View File
@@ -147,21 +147,21 @@ export default function TimelineBar({
onTimeRangeChange(Math.max(0, Math.min(30, safe))); onTimeRangeChange(Math.max(0, Math.min(30, safe)));
}; };
const [isMobile, setIsMobile] = useState(false); const [isMobileOrTablet, setIsMobileOrTablet] = useState(false);
useEffect(() => { useEffect(() => {
const checkMobile = () => setIsMobile(window.innerWidth < 768); const checkDevice = () => setIsMobileOrTablet(window.innerWidth < 1024);
checkMobile(); checkDevice();
window.addEventListener("resize", checkMobile); window.addEventListener("resize", checkDevice);
return () => window.removeEventListener("resize", checkMobile); return () => window.removeEventListener("resize", checkDevice);
}, []); }, []);
useEffect(() => { useEffect(() => {
if (isMobile && typeof timeRange === "number" && timeRange !== 0 && onTimeRangeChange) { if (isMobileOrTablet && typeof timeRange === "number" && timeRange !== 0 && onTimeRangeChange) {
onTimeRangeChange(0); onTimeRangeChange(0);
} }
}, [isMobile, timeRange, onTimeRangeChange]); }, [isMobileOrTablet, timeRange, onTimeRangeChange]);
if (isMobile) { if (isMobileOrTablet) {
return ( return (
<div <div
style={{ style={{
@@ -286,40 +286,6 @@ export default function TimelineBar({
> >
+ +
</button> </button>
{onPlayReplay ? (
<>
<div style={{ width: 1, height: 16, backgroundColor: "rgba(255, 255, 255, 0.15)" }} />
<button
type="button"
onClick={onPlayReplay}
style={{
width: 32,
height: 32,
borderRadius: "50%",
backgroundColor: "#2563eb",
border: "1px solid rgba(255, 255, 255, 0.2)",
color: "white",
display: "flex",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
transition: "all 0.2s ease",
flexShrink: 0,
}}
title="Xem diễn biến lịch sử (Replay)"
>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="currentColor"
>
<polygon points="5 3 19 12 5 21 5 3" />
</svg>
</button>
</>
) : null}
</div> </div>
{/* Ruler row below: full width */} {/* Ruler row below: full width */}
@@ -331,9 +297,12 @@ export default function TimelineBar({
pointerEvents: "auto", pointerEvents: "auto",
width: "100%", width: "100%",
borderRadius: "24px", borderRadius: "24px",
display: "flex",
alignItems: "center",
gap: "10px",
}} }}
> >
<div className={styles.flexWrapper} style={{ width: "100%", display: "flex" }}> <div className={styles.flexWrapper} style={{ flex: 1, display: "flex" }}>
<CanvasTimelineRuler <CanvasTimelineRuler
year={displayYear} year={displayYear}
onYearChange={handleLocalYearChange} onYearChange={handleLocalYearChange}
@@ -343,6 +312,37 @@ export default function TimelineBar({
disabled={effectiveDisabled} disabled={effectiveDisabled}
/> />
</div> </div>
{onPlayReplay ? (
<button
type="button"
onClick={onPlayReplay}
style={{
width: 36,
height: 36,
borderRadius: "50%",
backgroundColor: "#2563eb",
border: "1px solid rgba(255, 255, 255, 0.2)",
color: "white",
display: "flex",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
transition: "all 0.2s ease",
flexShrink: 0,
boxShadow: "0 2px 8px rgba(37, 99, 235, 0.3)",
}}
title="Xem diễn biến lịch sử (Replay)"
>
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="currentColor"
>
<polygon points="5 3 19 12 5 21 5 3" />
</svg>
</button>
) : null}
</div> </div>
</div> </div>
); );