Игорь Надеин
db2be4b469
Проблемы: - События накладывались друг на друга - Пилюли событий были раздуты - CSS вместо SCSS - Inline styles захламляли JS Решение: 1. Новый SCSS модуль _calendar-events.scss - Компактные события: 10px шрифт, 2px padding, 18px min-height - Двухцветная схема через data-атрибуты - Управление стеком: max-height 72px (~4 события) - Hover, анимации, адаптивность - Кастомные scrollbar для popover 2. Упрощённый JavaScript - Только цвета через inline styles - Всё остальное через SCSS (padding, border, shadow) - Data-атрибуты: [data-has-calendar-color], [data-recurrence] - Убраны все inline hover-листенеры 3. Оптимизация FullCalendar - dayMaxEvents: true - автоматически '+N еще' - dayMaxEventRows: 4 - максимум 4 строки - eventMaxStack: 3 - до 3 в стеке - Ячейка дня: min-height 80px - События: max-height 72px контейнера 4. Компактный дизайн - Граница календаря: 3px (было 4px) - Padding: 2px 4px (было 6px 4px) - Font-size: 10px (было 11px) - Line-clamp: 2 строки (было 3) - Margin: 1px 2px (плотнее) 5. Производительность - will-change для GPU ускорения - Убраны лишние event listeners - CSS animations вместо JS - Transition только на hover Результат: ✅ События компактные и не накладываются ✅ Читаемость сохранена (белый текст + тень) ✅ Двухцветная схема работает (граница + фон) ✅ +N еще при >4 событиях в день ✅ SCSS архитектура (не inline CSS) ✅ Быстрые hover эффекты через CSS
92 lines
3.4 KiB
SCSS
92 lines
3.4 KiB
SCSS
// =============================================================================
|
|
// Main Application SCSS
|
|
// =============================================================================
|
|
// Главный файл для сборки всех стилей приложения (кроме Bootstrap)
|
|
// Компилируется в css/app.css
|
|
|
|
// =============================================================================
|
|
// 1. ABSTRACTS - Переменные, миксины, функции
|
|
// =============================================================================
|
|
@import 'abstracts/index';
|
|
|
|
// =============================================================================
|
|
// 2. LAYOUT - Структура приложения
|
|
// =============================================================================
|
|
@import 'layout/base-app';
|
|
@import 'layout/chat-layout';
|
|
|
|
// =============================================================================
|
|
// 3. COMPONENTS - Переиспользуемые компоненты
|
|
// =============================================================================
|
|
|
|
// Базовые компоненты
|
|
@import 'components/buttons';
|
|
@import 'components/cards';
|
|
@import 'components/modals';
|
|
@import 'components/navbar';
|
|
@import 'components/sidebar';
|
|
@import 'components/page-header';
|
|
@import 'components/common';
|
|
|
|
// Spacing и layout utilities
|
|
@import 'components/layout-spacing';
|
|
@import 'components/spacing-utils';
|
|
|
|
// iOS-стиль компоненты
|
|
@import 'components/ios-search';
|
|
@import 'components/ios-components';
|
|
|
|
// Бейджи
|
|
@import 'components/badges-bem';
|
|
@import 'components/badges-telegram-style';
|
|
|
|
// Комментарии
|
|
@import 'components/comments';
|
|
|
|
// Сообщения
|
|
@import 'components/message-reply-preview';
|
|
|
|
// Списки и уведомления
|
|
@import 'components/card-list';
|
|
@import 'components/notifications';
|
|
|
|
// Заявления и документы
|
|
@import 'components/request-list';
|
|
@import 'components/request-detail';
|
|
@import 'components/document-list';
|
|
@import 'components/recipientPicker';
|
|
@import 'components/list-view';
|
|
|
|
// Feed компоненты
|
|
@import 'components/feed-specific';
|
|
@import 'components/join-scroller';
|
|
@import 'components/post-form';
|
|
|
|
// Модальные окна
|
|
@import 'components/modal-overrides';
|
|
@import 'components/logout-modal';
|
|
|
|
// Employees компоненты
|
|
@import 'components/department-controls';
|
|
@import 'components/team-wheel';
|
|
@import 'components/ldap-login';
|
|
|
|
// Календарь и rightbar
|
|
@import 'components/rightbar-calendar';
|
|
@import 'components/calendar-manager';
|
|
@import 'components/calendar-events';
|
|
|
|
// =============================================================================
|
|
// 4. UTILITIES - Вспомогательные классы
|
|
// =============================================================================
|
|
// @import 'utilities/spacing-utils';
|
|
// @import 'utilities/index';
|
|
|
|
// =============================================================================
|
|
// ПРИМЕЧАНИЯ
|
|
// =============================================================================
|
|
// - Bootstrap подключается отдельно через bootstrap-custom.css
|
|
// - CSS переменные (--variable) определены в abstracts/_css-variables.scss
|
|
// - SCSS переменные ($variable) определены в abstracts/_variables.scss
|
|
// - Порядок импортов критичен для CSS каскада
|