fix(timetravel): скрывать boundary-метки при коллизии с курсором
This commit is contained in:
@@ -515,26 +515,34 @@ function TimelineSlider({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Date labels (bottom) — start / value / now */}
|
{/* Date labels (bottom) — start / value / now.
|
||||||
|
* Boundary-метки (min/max) скрываются, когда курсор подъехал близко,
|
||||||
|
* иначе текст накладывается в "05.005.05". Порог 12% подобран так,
|
||||||
|
* чтобы две DD.MM метки ~ 36px @ text-cap не пересекались на типичной
|
||||||
|
* ширине трека ~340px. */}
|
||||||
<div className="relative h-4 mt-1 text-mono text-cap text-mute">
|
<div className="relative h-4 mt-1 text-mono text-cap text-mute">
|
||||||
|
{pct > 12 && (
|
||||||
<span className="absolute left-0">
|
<span className="absolute left-0">
|
||||||
{new Date(range.min).toLocaleDateString(undefined, {
|
{new Date(range.min).toLocaleDateString(undefined, {
|
||||||
month: '2-digit',
|
month: '2-digit',
|
||||||
day: '2-digit',
|
day: '2-digit',
|
||||||
})}
|
})}
|
||||||
</span>
|
</span>
|
||||||
|
)}
|
||||||
<span
|
<span
|
||||||
className="absolute -translate-x-1/2 text-accent font-semibold"
|
className="absolute -translate-x-1/2 text-accent font-semibold"
|
||||||
style={{ left: `${pct}%` }}
|
style={{ left: `${pct}%` }}
|
||||||
>
|
>
|
||||||
{dateLabel}
|
{dateLabel}
|
||||||
</span>
|
</span>
|
||||||
|
{pct < 88 && (
|
||||||
<span className="absolute right-0">
|
<span className="absolute right-0">
|
||||||
{new Date(range.max).toLocaleDateString(undefined, {
|
{new Date(range.max).toLocaleDateString(undefined, {
|
||||||
month: '2-digit',
|
month: '2-digit',
|
||||||
day: '2-digit',
|
day: '2-digit',
|
||||||
})}
|
})}
|
||||||
</span>
|
</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user