fix: улучшена визуализация многодневных событий календаря
Проблема: - Многодневные события отображались странно - Не было визуальной связи между сегментами - Закругления и отступы были некорректными Решение: 1. Визуальные индикаторы продолжения - Первый день: стрелка › справа - Средние дни: стрелки ‹ › с обеих сторон - Последний день: стрелка ‹ слева - Цвет стрелок: белый с opacity 0.7 2. Правильные закругления углов - Первый день: слева закруглено, справа прямо - Средние дни: без закруглений - Последний день: слева прямо, справа закруглено - Один день: закруглено со всех сторон 3. Убраны лишние отступы - margin-left/right: 0 для соединённых сегментов - Увеличен padding для стрелок (+2px) - Высота увеличена до 22px для читаемости 4. Улучшенное позиционирование - Многодневные события в отдельном слое (z-index: 2) - Абсолютное позиционирование для пересечений - Правильные отступы между сегментами Результат: ✅ Многодневные события визуально связаны ✅ Понятно где начало/середина/конец ✅ Стрелки указывают направление ✅ Сегменты плотно соединены ✅ Улучшенная читаемость
This commit is contained in:
parent
db2be4b469
commit
2332680d31
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -126,23 +126,122 @@ $event-max-lines: 2;
|
||||
// События на весь день
|
||||
.fc-event.fc-daygrid-block-event {
|
||||
padding: ($event-padding-y + 1px) $event-padding-x !important;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
// Многодневные события - закругления только с нужных сторон
|
||||
// ============================================================================
|
||||
// МНОГОДНЕВНЫЕ СОБЫТИЯ (УЛУЧШЕННАЯ ВИЗУАЛИЗАЦИЯ)
|
||||
// ============================================================================
|
||||
|
||||
// Базовые стили для всех многодневных событий
|
||||
.fc-event.fc-daygrid-event {
|
||||
// Убираем отступы между сегментами
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 2px !important;
|
||||
|
||||
// Улучшенная высота для читаемости
|
||||
min-height: 22px;
|
||||
|
||||
// Выравнивание контента
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Событие начинается (первый день)
|
||||
.fc-event.fc-event-start:not(.fc-event-end) {
|
||||
border-radius: $event-radius 0 0 $event-radius !important;
|
||||
margin-right: 0 !important;
|
||||
padding-right: ($event-padding-x + 2px) !important;
|
||||
|
||||
// Визуальный индикатор продолжения
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '›';
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-event:not(.fc-event-start).fc-event-end {
|
||||
border-radius: 0 $event-radius $event-radius 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
// Событие продолжается (средние дни)
|
||||
.fc-event:not(.fc-event-start):not(.fc-event-end) {
|
||||
border-radius: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
padding-left: ($event-padding-x + 2px) !important;
|
||||
padding-right: ($event-padding-x + 2px) !important;
|
||||
|
||||
// Визуальные индикаторы продолжения с обеих сторон
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '‹';
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '›';
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
// Событие заканчивается (последний день)
|
||||
.fc-event:not(.fc-event-start).fc-event-end {
|
||||
border-radius: 0 $event-radius $event-radius 0 !important;
|
||||
margin-left: 0 !important;
|
||||
padding-left: ($event-padding-x + 2px) !important;
|
||||
|
||||
// Визуальный индикатор начала
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '‹';
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
// Событие в один день (начинается и заканчивается)
|
||||
.fc-event.fc-event-start.fc-event-end {
|
||||
border-radius: $event-radius !important;
|
||||
margin-left: 2px !important;
|
||||
margin-right: 2px !important;
|
||||
|
||||
// Убираем индикаторы
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Для событий с цветом календаря - индикаторы белые
|
||||
.fc-event[data-has-calendar-color="true"] {
|
||||
&::before,
|
||||
&::after {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
@ -187,6 +286,22 @@ $event-max-lines: 2;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
// Контейнер для многодневных событий (отдельная секция сверху)
|
||||
.fc-daygrid-event-harness-abs {
|
||||
// Абсолютное позиционирование для многодневных
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
// Z-index выше обычных событий
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
// Убираем лишние отступы для многодневных событий
|
||||
.fc-daygrid-day-bg + .fc-daygrid-day-events {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// ССЫЛКА "+N ЕЩЁ"
|
||||
// ============================================================================
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user