diff --git a/public/config.js b/public/config.js index 9fcaf83..aa58fa3 100644 --- a/public/config.js +++ b/public/config.js @@ -13,7 +13,7 @@ window.Config = { ], // Количество дней в логах - CountDays: 24, + CountDays: 20, // Показывать ли ссылки на проверяемые сайты ShowLink: false, diff --git a/src/app.scss b/src/app.scss index 59d244b..2029a80 100644 --- a/src/app.scss +++ b/src/app.scss @@ -290,6 +290,21 @@ overflow: visible; } +// Адаптивная высота таймлайна +@media (max-width: 768px) { + .timeline { + height: 32px; + padding: 8px 0; + } +} + +@media (max-width: 480px) { + .timeline { + height: 28px; + padding: 6px 0; + } +} + .timeline-graph { position: absolute; top: 0; @@ -305,6 +320,19 @@ animation: drawLine 0.5s ease-out forwards; } +// Адаптивная толщина линии графика +@media (max-width: 768px) { + .timeline-segment { + stroke-width: 1.5 !important; + } +} + +@media (max-width: 480px) { + .timeline-segment { + stroke-width: 1 !important; + } +} + @keyframes drawLine { to { stroke-dashoffset: 0; @@ -323,6 +351,24 @@ border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } + +// Адаптивные размеры для разных экранов +@media (max-width: 768px) { + .timeline-point { + width: 18px; + height: 18px; + border: 2px solid #fff; + } +} + +@media (max-width: 480px) { + .timeline-point { + width: 14px; + height: 14px; + border: 2px solid #fff; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); + } +} .timeline-point-animate { opacity: 0; transform: translate(-50%, -50%) scale(0.3); @@ -403,6 +449,21 @@ height: 16px; } +// Адаптивные размеры для серых точек +@media (max-width: 768px) { + .timeline-point.none { + width: 12px; + height: 12px; + } +} + +@media (max-width: 480px) { + .timeline-point.none { + width: 10px; + height: 10px; + } +} + .timeline-point.latest-ok { box-shadow: 0 0 15px rgba(26, 173, 58, 0.6), 0 2px 6px rgba(0, 0, 0, 0.2); }