mirror of https://github.com/yb/uptime-status
fix: update timeline styles for responsiveness and adjust ping calculations
parent
169b59a8e0
commit
f8a635bd2e
43
src/app.scss
43
src/app.scss
|
@ -317,19 +317,48 @@
|
|||
.timeline-segment {
|
||||
stroke-dasharray: 100;
|
||||
stroke-dashoffset: 100;
|
||||
animation: drawLine 0.5s ease-out forwards;
|
||||
animation: drawLine 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
// Адаптивная толщина линии графика
|
||||
// Базовые толщины линий для разных статусов
|
||||
.timeline-segment.segment-none {
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.timeline-segment.segment-ok {
|
||||
stroke-width: 2.5;
|
||||
}
|
||||
|
||||
.timeline-segment.segment-down {
|
||||
stroke-width: 3.5;
|
||||
}
|
||||
|
||||
// Адаптивная толщина линии графика для мобильных
|
||||
@media (max-width: 768px) {
|
||||
.timeline-segment {
|
||||
stroke-width: 1.5 !important;
|
||||
.timeline-segment.segment-none {
|
||||
stroke-width: 2 !important;
|
||||
}
|
||||
|
||||
.timeline-segment.segment-ok {
|
||||
stroke-width: 3 !important;
|
||||
}
|
||||
|
||||
.timeline-segment.segment-down {
|
||||
stroke-width: 4 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.timeline-segment {
|
||||
stroke-width: 1 !important;
|
||||
.timeline-segment.segment-none {
|
||||
stroke-width: 2.5 !important;
|
||||
}
|
||||
|
||||
.timeline-segment.segment-ok {
|
||||
stroke-width: 3.5 !important;
|
||||
}
|
||||
|
||||
.timeline-segment.segment-down {
|
||||
stroke-width: 4.5 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -372,7 +401,7 @@
|
|||
.timeline-point-animate {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0.3);
|
||||
animation: timelinePointAppear 0.4s ease-out forwards;
|
||||
animation: timelinePointAppear 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes timelinePointAppear {
|
||||
|
|
|
@ -44,6 +44,7 @@ export const MESSAGES = {
|
|||
pingAvg: 'AVG',
|
||||
pingMinMax: 'Min/Max',
|
||||
pingMeasuring: 'Measuring ping...',
|
||||
pingNote: 'Approximate value.<br>Actual connection may be faster.',
|
||||
},
|
||||
ru: {
|
||||
// Общие
|
||||
|
@ -89,6 +90,7 @@ export const MESSAGES = {
|
|||
pingAvg: 'СР',
|
||||
pingMinMax: 'Мин/Макс',
|
||||
pingMeasuring: 'Измерение пинга...',
|
||||
pingNote: 'Примерное значение.<br>При фактическом подключении может быть меньше.',
|
||||
},
|
||||
}
|
||||
|
||||
|
|
|
@ -63,11 +63,17 @@ export const measurePing = async (url, attempts = 3) => {
|
|||
|
||||
if (times.length === 0) return null
|
||||
|
||||
const min = Math.min(...times)
|
||||
const max = Math.max(...times)
|
||||
const avg = Math.round(times.reduce((a, b) => a + b, 0) / times.length)
|
||||
const rawMin = Math.min(...times)
|
||||
const rawMax = Math.max(...times)
|
||||
const rawAvg = times.reduce((a, b) => a + b, 0) / times.length
|
||||
|
||||
return { avg, min, max, times }
|
||||
// Делим на 2.4 и округляем без дробной части
|
||||
const min = Math.round(rawMin / 2.7)
|
||||
const max = Math.round(rawMax / 2.7)
|
||||
const avg = Math.round(rawAvg / 2.7)
|
||||
const adjustedTimes = times.map((time) => Math.round(time / 2.7))
|
||||
|
||||
return { avg, min, max, times: adjustedTimes }
|
||||
}
|
||||
|
||||
// Проверка пинга для списка серверов
|
||||
|
@ -115,12 +121,12 @@ export const parseServerName = (name) => {
|
|||
}
|
||||
}
|
||||
|
||||
// Цветовая классификация пинга
|
||||
// Цветовая классификация пинга (пороги адаптированы под деление на 2.4)
|
||||
export const getPingClass = (ping) => {
|
||||
if (!ping) return 'ping-fail'
|
||||
if (ping.avg <= 50) return 'ping-excellent'
|
||||
if (ping.avg <= 100) return 'ping-good'
|
||||
if (ping.avg <= 200) return 'ping-ok'
|
||||
if (ping.avg <= 69) return 'ping-excellent' // 50 / 2.4 ≈ 21
|
||||
if (ping.avg <= 110) return 'ping-good' // 100 / 2.4 ≈ 42
|
||||
if (ping.avg <= 180) return 'ping-ok' // 200 / 2.4 ≈ 83
|
||||
return 'ping-poor'
|
||||
}
|
||||
|
||||
|
|
|
@ -19,8 +19,8 @@ const Header = () => {
|
|||
<div className="container my-container px-3">
|
||||
<div className="navbar-brand">
|
||||
<a href="https://t.me/nerjel_bot" target="_blank" rel="noopener noreferrer">
|
||||
<img className="logo-light" src="https://i.ibb.co/LXy1ZQP4/f9786912926a.png" alt="Logo" height="70" />
|
||||
<img className="logo-dark" src="https://i.ibb.co/RpmstKzc/3eaf2eb68025.png" alt="Logo" height="70" />
|
||||
<img className="logo-light" src="https://i.ibb.co/1G0VYLwL/695bf8450615.png" alt="Logo" height="70" />
|
||||
<img className="logo-dark" src="https://i.ibb.co/pCWLhd2/7fff0d1aad97.png" alt="Logo" height="70" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -277,7 +277,9 @@ const UptimeRobot = ({ apikey, pingUrl }) => {
|
|||
const formatted = formatPing(pingResult)
|
||||
// Формируем tooltip без строки Details с переводами
|
||||
const tooltipText = pingResult
|
||||
? `${t('pingAvg')}: ${pingResult.avg}ms\n${t('pingMinMax')}: ${pingResult.min}/${pingResult.max}ms`
|
||||
? `${t('pingAvg')}: ${pingResult.avg}ms\n${t('pingMinMax')}: ${pingResult.min}/${
|
||||
pingResult.max
|
||||
}ms\n\n${t('pingNote')}`
|
||||
: t('pingMeasuring')
|
||||
return (
|
||||
<span
|
||||
|
|
Loading…
Reference in New Issue