mirror of https://github.com/yb/uptime-status
fix: update CountDays in config and add responsive styles for timeline elements
parent
64c4027015
commit
935fa4970c
|
@ -13,7 +13,7 @@ window.Config = {
|
|||
],
|
||||
|
||||
// Количество дней в логах
|
||||
CountDays: 24,
|
||||
CountDays: 20,
|
||||
|
||||
// Показывать ли ссылки на проверяемые сайты
|
||||
ShowLink: false,
|
||||
|
|
61
src/app.scss
61
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);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue