Игорь Надеин
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
41 lines
1.1 KiB
SCSS
41 lines
1.1 KiB
SCSS
// =============================================================================
|
||
// Стили для модальных окон
|
||
// =============================================================================
|
||
|
||
// Скругление углов для всех модальных окон
|
||
.modal-content {
|
||
border-radius: 1rem !important; // Соответствует карточкам Bootstrap (16px)
|
||
}
|
||
|
||
// Убираем скроллбар у modal-content
|
||
.modal-dialog {
|
||
.modal-content {
|
||
overflow: hidden; // Скрываем скроллбар
|
||
}
|
||
}
|
||
|
||
// Специальные стили для модального окна поста
|
||
#postDetailModal {
|
||
.modal-dialog {
|
||
max-width: 800px !important;
|
||
width: 100%;
|
||
margin: 1.75rem auto;
|
||
}
|
||
|
||
.modal-body {
|
||
max-height: 85vh;
|
||
overflow-y: auto;
|
||
padding: 0;
|
||
background: var(--bs-body-bg) !important; // Непрозрачный фон
|
||
|
||
// Скрываем скроллбар
|
||
scrollbar-width: none; // Firefox
|
||
-ms-overflow-style: none; // IE и Edge
|
||
|
||
// Chrome, Safari, Edge
|
||
&::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|