Игорь Надеин
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
62 lines
1.8 KiB
SCSS
62 lines
1.8 KiB
SCSS
// =============================================================================
|
|
// Chat Layout
|
|
// =============================================================================
|
|
// Глобальная структура страниц чата (не специфичные компоненты)
|
|
|
|
// =============================================================================
|
|
// 1. MAIN CONTAINER
|
|
// =============================================================================
|
|
|
|
main.main {
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
// Специальное правило для страниц чата в grid layout
|
|
// Ограничиваем высоту main, чтобы не ломать grid и rightbar
|
|
@media (min-width: 992px) {
|
|
.app-layout.with-rightbar main.main:has(.chat-page),
|
|
.app-layout.with-sidebar main.main:has(.chat-page) {
|
|
max-height: calc(100vh - var(--navbar-h, 60px) - 2 * var(--layout-padding-y, 12px));
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// 2. CHAT PAGE STRUCTURE
|
|
// =============================================================================
|
|
|
|
// Root контейнер страницы чата
|
|
@supports (height: 100svh) {
|
|
.chat-root {
|
|
height: calc(100svh - var(--navbar-h));
|
|
}
|
|
}
|
|
|
|
.chat-root > .row {
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
// Column layout
|
|
.chat-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 93%;
|
|
min-height: 0;
|
|
}
|
|
|
|
// =============================================================================
|
|
// 3. CHAT BOX CONTAINER
|
|
// =============================================================================
|
|
|
|
.card.chat-box {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-rows: 1fr auto; /* messages + composer */
|
|
overflow: hidden;
|
|
margin-bottom: 0;
|
|
background: var(--bs-body-bg);
|
|
}
|