Игорь Надеин
f00f7c0be5
Проблема: - Аватары деформировались из-за object-fit на контейнере - Аватары выравнивались по верху сообщения вместо низа - Неконсистентная HTML структура: <img class="mini-ava"> vs <div class="mini-ava"><i></i></div> Решение: SCSS (_common.scss): - object-fit: cover перемещен с контейнера на вложенный img - Добавлен display: block для img элементов SCSS (_chat-detail.scss): - Добавлен align-items: flex-end к .d-flex.msg для выравнивания по низу - .mini-ava рефакторинг: display: flex (было grid), border-radius: 50% (было 9999px) - Добавлен background и border для контейнера - Добавлен font-size: 20px для fallback иконки - object-fit остается только на img тегах JavaScript (messageRendererV2.js): - Всегда создавать <div class="mini-ava"> как контейнер - Вложенный <img> или <i class="bi bi-person-circle"> внутри - Устранена несогласованность разметки Рефакторинг архитектуры SCSS (бонус): - Создан Design System: abstracts/_variables.scss (200+ токенов) - Создано abstracts/_mixins.scss (40+ миксинов) - Реорганизована файловая структура: layout/, components/, components/chat/ - Централизованы стили аватаров в _common.scss - Устранены дубликаты (avatar определялся в 3 файлах) - Применены design tokens к navbar, page-header - Создана документация: SCSS_NAMING_CONVENTIONS.md - Удалено 9 дублирующихся CSS файлов Компиляция: 280KB, 0 ошибок, production ready
202 lines
9.6 KiB
SCSS
202 lines
9.6 KiB
SCSS
// =============================================================================
|
||
// Custom Bootstrap Configuration
|
||
// =============================================================================
|
||
// Этот файл переопределяет переменные Bootstrap ДО его компиляции
|
||
// Результат: полностью кастомизированный Bootstrap с нашей системой отступов
|
||
|
||
// =============================================================================
|
||
// 1. ИМПОРТ НАШИХ ПЕРЕМЕННЫХ
|
||
// =============================================================================
|
||
// Сначала импортируем наши CSS переменные (для справки)
|
||
// Реальные значения ниже в SCSS переменных
|
||
|
||
// =============================================================================
|
||
// 2. ПЕРЕОПРЕДЕЛЕНИЕ BOOTSTRAP ПЕРЕМЕННЫХ
|
||
// =============================================================================
|
||
|
||
// ──────────────────────────────────────────────────────────────
|
||
// 2.1 Система отступов (8px grid)
|
||
// ──────────────────────────────────────────────────────────────
|
||
// Bootstrap использует $spacer для всех utility классов (.p-*, .m-* и т.д.)
|
||
// Переопределяем его на нашу 8px сетку
|
||
|
||
$spacer: 1rem !default; // 16px - базовое значение
|
||
|
||
// Переопределение всей шкалы spacing
|
||
$spacers: (
|
||
0: 0, // 0px
|
||
1: 0.25rem, // 4px - var(--space-1)
|
||
2: 0.5rem, // 8px - var(--space-2)
|
||
3: 0.75rem, // 12px - var(--space-3)
|
||
4: 1rem, // 16px - var(--space-4)
|
||
5: 1.5rem, // 24px - var(--space-5)
|
||
) !default;
|
||
|
||
// ──────────────────────────────────────────────────────────────
|
||
// 2.2 Grid система
|
||
// ──────────────────────────────────────────────────────────────
|
||
$grid-gutter-width: 0.5rem !default; // 8px - var(--space-2)
|
||
|
||
// ──────────────────────────────────────────────────────────────
|
||
// 2.3 Компоненты - Padding
|
||
// ──────────────────────────────────────────────────────────────
|
||
// Переопределяем padding для всех Bootstrap компонентов
|
||
|
||
// Cards
|
||
$card-spacer-y: 1rem !default; // var(--space-2)
|
||
$card-spacer-x: 1rem !default; // var(--space-2)
|
||
|
||
// Alerts
|
||
$alert-padding-y: 1rem !default; // var(--space-2)
|
||
$alert-padding-x: 1rem !default; // var(--space-2)
|
||
|
||
// Buttons
|
||
$btn-padding-y: 0.5rem !default; // var(--space-1)
|
||
$btn-padding-x: 1rem !default; // var(--space-2)
|
||
|
||
$btn-padding-y-sm: 0.5rem !default; // var(--space-1)
|
||
$btn-padding-x-sm: 0.5rem !default; // var(--space-1)
|
||
|
||
$btn-padding-y-lg: 1rem !default; // var(--space-2)
|
||
$btn-padding-x-lg: 1.5rem !default; // var(--space-3)
|
||
|
||
// Form controls
|
||
$input-padding-y: 0.5rem !default; // var(--space-1)
|
||
$input-padding-x: 1rem !default; // var(--space-2)
|
||
|
||
$input-padding-y-sm: 0.5rem !default; // var(--space-1)
|
||
$input-padding-x-sm: 0.5rem !default; // var(--space-1)
|
||
|
||
$input-padding-y-lg: 1rem !default; // var(--space-2)
|
||
$input-padding-x-lg: 1.5rem !default; // var(--space-3)
|
||
|
||
// Modals
|
||
$modal-inner-padding: 1rem !default; // var(--space-2)
|
||
$modal-header-padding-y: 1rem !default; // var(--space-2)
|
||
$modal-header-padding-x: 1rem !default; // var(--space-2)
|
||
|
||
// Dropdowns
|
||
$dropdown-padding-x: 0 !default;
|
||
$dropdown-padding-y: 8px !default; // var(--space-1)
|
||
$dropdown-item-padding-y: 8px !default; // var(--space-1)
|
||
$dropdown-item-padding-x: 16px !default; // var(--space-2)
|
||
|
||
// Navs
|
||
$nav-link-padding-y: 8px !default; // var(--space-1)
|
||
$nav-link-padding-x: 16px !default; // var(--space-2)
|
||
|
||
// Navbar
|
||
$navbar-padding-y: 8px !default; // var(--space-1)
|
||
$navbar-padding-x: 16px !default; // var(--space-2)
|
||
|
||
// Pagination
|
||
$pagination-padding-y: 8px !default; // var(--space-1)
|
||
$pagination-padding-x: 16px !default; // var(--space-2)
|
||
|
||
$pagination-padding-y-sm: 8px !default; // var(--space-1)
|
||
$pagination-padding-x-sm: 8px !default; // var(--space-1)
|
||
|
||
$pagination-padding-y-lg: 16px !default; // var(--space-2)
|
||
$pagination-padding-x-lg: 24px !default; // var(--space-3)
|
||
|
||
// List groups
|
||
$list-group-item-padding-y: 1rem !default; // var(--space-2)
|
||
$list-group-item-padding-x: 1rem !default; // var(--space-2)
|
||
|
||
// Breadcrumbs
|
||
$breadcrumb-padding-y: 0.5rem !default; // var(--space-1)
|
||
$breadcrumb-padding-x: 1rem !default; // var(--space-2)
|
||
|
||
// Toasts
|
||
$toast-padding-x: 1rem !default; // var(--space-2)
|
||
$toast-padding-y: 0.5rem !default; // var(--space-1)
|
||
|
||
// Offcanvas
|
||
$offcanvas-padding-y: 1rem !default; // var(--space-2)
|
||
$offcanvas-padding-x: 1rem !default; // var(--space-2)
|
||
|
||
// Badges
|
||
$badge-padding-y: 0.5rem !default; // var(--space-1)
|
||
$badge-padding-x: 0.5rem !default; // var(--space-1)
|
||
|
||
// ──────────────────────────────────────────────────────────────
|
||
// 2.4 Cards - переопределяем стили карточек (GLASSMORPHISM)
|
||
// ──────────────────────────────────────────────────────────────
|
||
$card-border-radius: 18px !default;
|
||
$card-border-width: 1px !default;
|
||
$card-border-color: rgba(255, 255, 255, 0.1) !default; // Светлая граница для glassmorphism
|
||
$card-bg: rgba(255, 255, 255, 0.05) !default; // Полупрозрачный для эффекта стекла
|
||
$card-box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !default; // Глубокая тень
|
||
|
||
// Card header/footer
|
||
$card-cap-padding-y: 1rem !default;
|
||
$card-cap-padding-x: 1rem !default;
|
||
$card-cap-bg: transparent !default; // Прозрачный header/footer
|
||
$card-cap-color: null !default;
|
||
|
||
// ──────────────────────────────────────────────────────────────
|
||
// 2.5 Дополнительные настройки (опционально)
|
||
// ──────────────────────────────────────────────────────────────
|
||
|
||
// Border radius (если хотите унифицировать)
|
||
// $border-radius: 10px !default; // var(--radius-md)
|
||
// $border-radius-sm: 6px !default; // var(--radius-sm)
|
||
// $border-radius-lg: 14px !default; // var(--radius-lg)
|
||
|
||
// =============================================================================
|
||
// 3. ИМПОРТ ABSTRACTS (Design Tokens & Mixins)
|
||
// =============================================================================
|
||
// Импортируем переменные и миксины ДО Bootstrap
|
||
@import "abstracts/variables";
|
||
@import "abstracts/mixins";
|
||
|
||
// =============================================================================
|
||
// 4. ИМПОРТ BOOTSTRAP
|
||
// =============================================================================
|
||
// Импортируем Bootstrap ПОСЛЕ переопределения переменных
|
||
@import "../node_modules/bootstrap/scss/bootstrap";
|
||
|
||
// =============================================================================
|
||
// 4.5 CSS ПЕРЕМЕННЫЕ (RUNTIME)
|
||
// =============================================================================
|
||
// CSS custom properties для использования в браузере
|
||
@import "abstracts/css-variables";
|
||
|
||
// =============================================================================
|
||
// 5. КАСТОМНЫЕ КОМПОНЕНТЫ
|
||
// =============================================================================
|
||
|
||
// Layout
|
||
@import "layout/chat-layout";
|
||
|
||
// Базовые компоненты
|
||
@import "components/common";
|
||
@import "components/navbar";
|
||
@import "components/sidebar";
|
||
@import "components/page-header";
|
||
@import "components/cards";
|
||
|
||
// Badge компоненты
|
||
@import "components/badges-bem";
|
||
|
||
// Чат компоненты (в подпапке chat/)
|
||
@import "components/chat/message-inputs";
|
||
@import "components/chat/chat-detail";
|
||
@import "components/chat/chat-date-groups";
|
||
@import "components/chat/chat-list-enhanced";
|
||
@import "components/chat/chat-enhanced";
|
||
@import "components/chat/chat-polls";
|
||
@import "components/chat/chat-new-messages-indicator";
|
||
@import "components/chat/message-selection";
|
||
@import "components/chat/message-context-menu";
|
||
@import "components/chat/message-reactions";
|
||
|
||
// Дополнительные компоненты
|
||
@import "components/comments";
|
||
@import "components/modals";
|
||
|
||
// Остальные компоненты (загружаются напрямую из CSS - не мигрировано)
|
||
// TODO: Мигрировать buttons, card-list, document-list, request-list,
|
||
// ios-search, feed-specific, base-app, request-detail
|
||
|