github
/
uptime-status
mirror of https://github.com/yb/uptime-status
1
0
Fork 0
Code Issues Releases Wiki Activity

fix: adjust timeline segment styles and animation durations

pull/62/head
SawGoD 2025-07-28 09:22:53 +03:00
parent f8a635bd2e
commit ac8f131c74
2 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/app.scss
View File

@ -317,7 +317,7 @@
.timeline-segment { .timeline-segment {
stroke-dasharray: 100; stroke-dasharray: 100;
stroke-dashoffset: 100; stroke-dashoffset: 100;
animation: drawLine 0.8s ease-out forwards; animation: drawLine 1.2s ease-out forwards;
} }
// Базовые толщины линий для разных статусов // Базовые толщины линий для разных статусов
@ -326,11 +326,11 @@
} }
.timeline-segment.segment-ok { .timeline-segment.segment-ok {
stroke-width: 2.5; stroke-width: 2.8;
} }
.timeline-segment.segment-down { .timeline-segment.segment-down {
stroke-width: 3.5; stroke-width: 2.7;
} }
// Адаптивная толщина линии графика для мобильных // Адаптивная толщина линии графика для мобильных
@ -340,11 +340,11 @@
} }
.timeline-segment.segment-ok { .timeline-segment.segment-ok {
stroke-width: 3 !important; stroke-width: 3.3 !important;
} }
.timeline-segment.segment-down { .timeline-segment.segment-down {
stroke-width: 4 !important; stroke-width: 3.2 !important;
} }
} }
@ -354,11 +354,11 @@
} }
.timeline-segment.segment-ok { .timeline-segment.segment-ok {
stroke-width: 3.5 !important; stroke-width: 3.8 !important;
} }
.timeline-segment.segment-down { .timeline-segment.segment-down {
stroke-width: 4.5 !important; stroke-width: 3.7 !important;
} }
} }
@ -401,7 +401,7 @@
.timeline-point-animate { .timeline-point-animate {
opacity: 0; opacity: 0;
transform: translate(-50%, -50%) scale(0.3); transform: translate(-50%, -50%) scale(0.3);
animation: timelinePointAppear 0.6s ease-out forwards; animation: timelinePointAppear 0.8s ease-out forwards;
} }
@keyframes timelinePointAppear { @keyframes timelinePointAppear {

23
src/components/uptimerobot.js
View File

@ -151,27 +151,31 @@ const UptimeRobot = ({ apikey, pingUrl }) => {
const segments = svgPoints.slice(0, -1).map((point, index) => { const segments = svgPoints.slice(0, -1).map((point, index) => {
const nextPoint = svgPoints[index + 1] const nextPoint = svgPoints[index + 1]
// Определяем цвет сегмента на основе статусов точек // Определяем цвет и класс сегмента на основе статусов точек
let segmentColor = 'var(--my-alpha-gray-color)' let segmentColor = 'var(--my-alpha-gray-color)'
let segmentClass = 'timeline-segment segment-none'
if (point.status === 'ok' && nextPoint.status === 'ok') { if (point.status === 'ok' && nextPoint.status === 'ok') {
segmentColor = '#1aad3a' segmentColor = '#1aad3a'
segmentClass = 'timeline-segment segment-ok'
} else if (point.status === 'down' || nextPoint.status === 'down') { } else if (point.status === 'down' || nextPoint.status === 'down') {
segmentColor = '#ea4e43' segmentColor = '#ea4e43'
segmentClass = 'timeline-segment segment-down'
} else if (point.status === 'ok' || nextPoint.status === 'ok') { } else if (point.status === 'ok' || nextPoint.status === 'ok') {
segmentColor = '#1aad3a' segmentColor = '#1aad3a'
segmentClass = 'timeline-segment segment-ok'
} }
// Задержка для появления сегментов // Линии появляются раньше точек
const segmentDelay = index * 50 + 100 // Линии появляются после точек const segmentDelay = index * 20
return ( return (
<path <path
key={index} key={index}
className="timeline-segment" className={segmentClass}
d={`M ${point.x} ${point.y} L ${nextPoint.x} ${nextPoint.y}`} d={`M ${point.x} ${point.y} L ${nextPoint.x} ${nextPoint.y}`}
fill="none" fill="none"
stroke={segmentColor} stroke={segmentColor}
strokeWidth="2"
strokeLinejoin="round" strokeLinejoin="round"
strokeLinecap="round" strokeLinecap="round"
style={{ animationDelay: `${segmentDelay}ms` }} style={{ animationDelay: `${segmentDelay}ms` }}
@ -223,9 +227,12 @@ const UptimeRobot = ({ apikey, pingUrl }) => {
} }
const dayPosition = (index / (site.daily.length - 1)) * 100 const dayPosition = (index / (site.daily.length - 1)) * 100
// Случайная задержка от 50мс до 200мс для каждой точки // Более случайная анимация: разбиваем на блоки и добавляем случайность
const randomDelay = 50 + Math.random() * 150 const blockSize = 5
const animationDelay = index * 30 + randomDelay // Базовая задержка + случайная const blockIndex = Math.floor(index / blockSize)
const blockRandomDelay = Math.random() * 100
const itemRandomDelay = Math.random() * 80
const animationDelay = blockIndex * 150 + blockRandomDelay + itemRandomDelay + 200 // Точки появляются после линий
return ( return (
<div <div