mirror of https://github.com/yb/uptime-status
fix: adjust timeline segment styles and animation durations
parent
f8a635bd2e
commit
ac8f131c74
16
src/app.scss
16
src/app.scss
|
@ -317,7 +317,7 @@
|
|||
.timeline-segment {
|
||||
stroke-dasharray: 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 {
|
||||
stroke-width: 2.5;
|
||||
stroke-width: 2.8;
|
||||
}
|
||||
|
||||
.timeline-segment.segment-down {
|
||||
stroke-width: 3.5;
|
||||
stroke-width: 2.7;
|
||||
}
|
||||
|
||||
// Адаптивная толщина линии графика для мобильных
|
||||
|
@ -340,11 +340,11 @@
|
|||
}
|
||||
|
||||
.timeline-segment.segment-ok {
|
||||
stroke-width: 3 !important;
|
||||
stroke-width: 3.3 !important;
|
||||
}
|
||||
|
||||
.timeline-segment.segment-down {
|
||||
stroke-width: 4 !important;
|
||||
stroke-width: 3.2 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -354,11 +354,11 @@
|
|||
}
|
||||
|
||||
.timeline-segment.segment-ok {
|
||||
stroke-width: 3.5 !important;
|
||||
stroke-width: 3.8 !important;
|
||||
}
|
||||
|
||||
.timeline-segment.segment-down {
|
||||
stroke-width: 4.5 !important;
|
||||
stroke-width: 3.7 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -401,7 +401,7 @@
|
|||
.timeline-point-animate {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0.3);
|
||||
animation: timelinePointAppear 0.6s ease-out forwards;
|
||||
animation: timelinePointAppear 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes timelinePointAppear {
|
||||
|
|
|
@ -151,27 +151,31 @@ const UptimeRobot = ({ apikey, pingUrl }) => {
|
|||
const segments = svgPoints.slice(0, -1).map((point, index) => {
|
||||
const nextPoint = svgPoints[index + 1]
|
||||
|
||||
// Определяем цвет сегмента на основе статусов точек
|
||||
// Определяем цвет и класс сегмента на основе статусов точек
|
||||
let segmentColor = 'var(--my-alpha-gray-color)'
|
||||
let segmentClass = 'timeline-segment segment-none'
|
||||
|
||||
if (point.status === 'ok' && nextPoint.status === 'ok') {
|
||||
segmentColor = '#1aad3a'
|
||||
segmentClass = 'timeline-segment segment-ok'
|
||||
} else if (point.status === 'down' || nextPoint.status === 'down') {
|
||||
segmentColor = '#ea4e43'
|
||||
segmentClass = 'timeline-segment segment-down'
|
||||
} else if (point.status === 'ok' || nextPoint.status === 'ok') {
|
||||
segmentColor = '#1aad3a'
|
||||
segmentClass = 'timeline-segment segment-ok'
|
||||
}
|
||||
|
||||
// Задержка для появления сегментов
|
||||
const segmentDelay = index * 50 + 100 // Линии появляются после точек
|
||||
// Линии появляются раньше точек
|
||||
const segmentDelay = index * 20
|
||||
|
||||
return (
|
||||
<path
|
||||
key={index}
|
||||
className="timeline-segment"
|
||||
className={segmentClass}
|
||||
d={`M ${point.x} ${point.y} L ${nextPoint.x} ${nextPoint.y}`}
|
||||
fill="none"
|
||||
stroke={segmentColor}
|
||||
strokeWidth="2"
|
||||
strokeLinejoin="round"
|
||||
strokeLinecap="round"
|
||||
style={{ animationDelay: `${segmentDelay}ms` }}
|
||||
|
@ -223,9 +227,12 @@ const UptimeRobot = ({ apikey, pingUrl }) => {
|
|||
}
|
||||
|
||||
const dayPosition = (index / (site.daily.length - 1)) * 100
|
||||
// Случайная задержка от 50мс до 200мс для каждой точки
|
||||
const randomDelay = 50 + Math.random() * 150
|
||||
const animationDelay = index * 30 + randomDelay // Базовая задержка + случайная
|
||||
// Более случайная анимация: разбиваем на блоки и добавляем случайность
|
||||
const blockSize = 5
|
||||
const blockIndex = Math.floor(index / blockSize)
|
||||
const blockRandomDelay = Math.random() * 100
|
||||
const itemRandomDelay = Math.random() * 80
|
||||
const animationDelay = blockIndex * 150 + blockRandomDelay + itemRandomDelay + 200 // Точки появляются после линий
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
Loading…
Reference in New Issue