fix(chat): убраны лишние отступы у изображений и видео
Проблема: - У медиафайлов были большие пустые поля сверху и снизу - Причины: padding/margin от .attachment-item и .bubble .attachment-item a - inline стили конфликтовали с CSS Решение: CSS (_chat-detail.scss): - Добавлен модификатор .attachment-item--media для медиа-контейнеров - .attachment-item--media имеет margin-bottom: 0 (вместо 8px) - Вложенные <a> в медиа-контейнерах: padding: 0, line-height: 0 - .chat-media: display: block (было inline-block), vertical-align: top - Селектор для файлов: .attachment-item:not(.attachment-item--media) JavaScript (messageRendererV2.js): - Добавлен класс attachment-item--media к изображениям и видео - Убраны inline стили (style="display: block; ...") - Чистая разметка без конфликтов Результат: медиафайлы отображаются плотно без пустых полей
This commit is contained in:
parent
9d5f70f16f
commit
e4e2f3cdf3
2
backend/static/css/bootstrap-custom.css
vendored
2
backend/static/css/bootstrap-custom.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -665,12 +665,11 @@ export class MessageRendererV2 {
|
||||
if (fileType === 'image' || fileType.startsWith('image/')) {
|
||||
const imgSrc = thumbnailUrl || fileUrl;
|
||||
return `
|
||||
<a href="${fileUrl}" target="_blank" class="attachment-item d-block">
|
||||
<a href="${fileUrl}" target="_blank" class="attachment-item attachment-item--media d-block">
|
||||
<img src="${imgSrc}"
|
||||
alt="${fileName}"
|
||||
class="chat-media chat-media--image"
|
||||
loading="lazy"
|
||||
style="max-width: 100%; height: auto; display: block;" />
|
||||
loading="lazy" />
|
||||
</a>
|
||||
`;
|
||||
}
|
||||
@ -678,13 +677,12 @@ export class MessageRendererV2 {
|
||||
// Рендеринг видео
|
||||
if (fileType === 'video' || fileType.startsWith('video/')) {
|
||||
return `
|
||||
<div class="attachment-item">
|
||||
<div class="attachment-item attachment-item--media">
|
||||
<video src="${fileUrl}"
|
||||
class="chat-media chat-media--video"
|
||||
controls
|
||||
playsinline
|
||||
preload="metadata"
|
||||
style="max-width: 100%; height: auto; display: block;">
|
||||
preload="metadata">
|
||||
Ваш браузер не поддерживает воспроизведение видео.
|
||||
</video>
|
||||
</div>
|
||||
|
||||
@ -288,9 +288,21 @@
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
margin-bottom: 8px;
|
||||
|
||||
// Медиа-элементы (изображения и видео) - минимальные отступы
|
||||
&.attachment-item--media {
|
||||
margin-bottom: 0;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bubble .attachment-item a {
|
||||
// Стили только для ссылок на файлы (документы)
|
||||
.bubble .attachment-item:not(.attachment-item--media) a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
@ -350,7 +362,7 @@
|
||||
}
|
||||
|
||||
.chat-media {
|
||||
display: inline-block;
|
||||
display: block; // Изменено с inline-block
|
||||
width: auto !important;
|
||||
max-width: min(640px, 85vw);
|
||||
max-height: 520px;
|
||||
@ -358,11 +370,14 @@
|
||||
border-radius: $radius-md;
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
content-visibility: auto;
|
||||
// Убираем vertical-align issues
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.message-attachments .attachment-item > a,
|
||||
.message-attachments .attachment-item > video,
|
||||
.message-attachments .attachment-item > img {
|
||||
// Убираем этот конфликтующий селектор - заменяем на более специфичный
|
||||
.message-attachments .attachment-item:not(.attachment-item--media) > a,
|
||||
.message-attachments .attachment-item:not(.attachment-item--media) > video,
|
||||
.message-attachments .attachment-item:not(.attachment-item--media) > img {
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user