max_ronzhin/vidconf
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor(calendar): чип события — только название и карандашик, заголовок периода без «г.»

Browse Source 
В renderEventContent убраны бейдж статуса и время (переехали в
ConferenceOccurrenceDialog) — остались название с обрезкой по многоточию
(min-width:0/overflow:hidden по цепочке флекс-контейнеров, чинит вылезание
текста за границы ячейки) и, у владельца конференции, карандашик
редактирования (myConferenceById/onEditClick, stopPropagation, чтобы не
срабатывал клик по чипу). Клик по чипу — всегда информационное окно, включая
свои конференции.

titleFormat для dayGridWeek/dayGridMonth построен на Intl.DateTimeFormat
вместо ruLocale-форматтера — тот всегда добавляет «г.» после года.
This commit is contained in:
Ронжин Максим
2026-07-26 23:34:49 +03:00
parent 07e5aba9c9
commit 66935b04f8
2 changed files with 137 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/styles/calendar.css
View File

@@ -70,12 +70,15 @@
* Событие-вхождение конференции — карточка-«чип» в духе .conf-chip мокапа.
* FullCalendar оборачивает событие в .fc-daygrid-event (наследует классы из
* `classNames`) — переопределяем его внешний вид под чип целиком, без
* отдельного контейнера.
* отдельного контейнера. Содержимое — только название (+карандашик у
* владельца, время/статус/номер — в ConferenceOccurrenceDialog), поэтому чип —
* одна строка (flex row), а не колонка бейдж/время/название, как раньше.
*/
.vc-calendar .fc-daygrid-event.conf-chip {
display: flex !important;
flex-direction: column;
gap: 4px;
align-items: center;
gap: 8px;
min-width: 0;
background: var(--color-surface) !important;
border: 1px solid var(--color-border) !important;
border-radius: var(--radius-md) !important;
@@ -88,10 +91,34 @@
.vc-calendar .fc-daygrid-event.conf-chip .fc-event-time,
.vc-calendar .fc-daygrid-event.conf-chip .fc-event-title { display: none; } /* заменено собственным eventContent */
.chip-time { display: block; font: var(--text-caption); color: var(--color-ink-500); text-transform: none; letter-spacing: normal; }
.chip-title { display: flex; align-items: center; gap: 6px; font: var(--text-body); font-weight: 700; color: var(--color-ink-900); }
/* Цепочка min-width:0 + overflow:hidden + text-overflow:ellipsis — без неё
длинное название распирает чип и вылезает за границы ячейки (в узкой
недельной колонке — особенно). `.fc-daygrid-event-harness` — прямой
flex-item `.fc-daygrid-day-events` (флекс-колонка) выше по файлу: по
умолчанию у флекс-айтема min-width:auto (= min-content), из-за чего он не
сжимается уже ширины своего содержимого — тот самый grid/flex-blowout. */
.vc-calendar .fc-daygrid-event-harness { min-width: 0; }
.chip-row { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.chip-title { display: flex; align-items: center; gap: 6px; font: var(--text-body); font-weight: 700; color: var(--color-ink-900); min-width: 0; flex: 1; }
.chip-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chip-lock { width: 13px; height: 13px; flex-shrink: 0; }
.chip-edit {
width: 22px;
height: 22px;
flex-shrink: 0;
border-radius: 50%;
border: none;
background: transparent;
color: var(--color-ink-500);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.chip-edit svg { width: 13px; height: 13px; }
.chip-edit:hover { background: var(--color-bg-alt); color: var(--color-ink-900); }
.conf-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--radius-full); font: var(--text-caption); font-size: 11px; width: fit-content; }
.conf-badge.scheduled { background: var(--color-warning-bg); color: var(--color-warning); }
.conf-badge.pinned { background: var(--color-bg-alt); color: var(--color-ink-700); border: 1px solid var(--color-border-strong); }