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,
|
ShowLink: false,
|
||||||
|
|
61
src/app.scss
61
src/app.scss
|
@ -290,6 +290,21 @@
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Адаптивная высота таймлайна
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.timeline {
|
||||||
|
height: 32px;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.timeline {
|
||||||
|
height: 28px;
|
||||||
|
padding: 6px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.timeline-graph {
|
.timeline-graph {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -305,6 +320,19 @@
|
||||||
animation: drawLine 0.5s ease-out forwards;
|
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 {
|
@keyframes drawLine {
|
||||||
to {
|
to {
|
||||||
stroke-dashoffset: 0;
|
stroke-dashoffset: 0;
|
||||||
|
@ -323,6 +351,24 @@
|
||||||
border: 3px solid #fff;
|
border: 3px solid #fff;
|
||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
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 {
|
.timeline-point-animate {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translate(-50%, -50%) scale(0.3);
|
transform: translate(-50%, -50%) scale(0.3);
|
||||||
|
@ -403,6 +449,21 @@
|
||||||
height: 16px;
|
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 {
|
.timeline-point.latest-ok {
|
||||||
box-shadow: 0 0 15px rgba(26, 173, 58, 0.6), 0 2px 6px rgba(0, 0, 0, 0.2);
|
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