admin/WhatIDo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(chat): цитата ответа как в телеграме — квадрат слева, текст справа

Browse Source 
Миниатюра вложения в цитате больше не растягивается на всю ширину:
фиксированный квадрат 44x44 слева, автор и текст в колонке справа.
Обёртка .msg-reply-body даёт им flex:1, поэтому длинный текст
обрезается многоточием по месту, а не растягивает цитату.
This commit is contained in:
dev
2026-10-06 00:35:25 +03:00
parent 3ac54f57b4
commit a3169648f3
2 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin.css
+6 -5
View File
@@ -982,13 +982,14 @@ body.report-card-open .report-fields{display:flex}
.msg-act:hover{color:var(--accent);background:var(--bg)} .msg-act:hover{color:var(--accent);background:var(--bg)}
.msg-act-del:hover{color:#ef4444} .msg-act-del:hover{color:#ef4444}
.msg-act svg{width:13px;height:13px} .msg-act svg{width:13px;height:13px}
.msg-reply{display:flex;flex-direction:column;gap:1px;border-left:2px solid var(--accent);background:var(--bg);border-radius:0 7px 7px 0;padding:4px 8px;margin-bottom:2px;min-width:0;text-align:left;font:inherit;cursor:pointer;position:relative} .msg-reply{display:flex;align-items:center;gap:8px;border-left:2px solid var(--accent);background:var(--bg);border-radius:0 7px 7px 0;padding:4px 8px;margin-bottom:2px;min-width:0;text-align:left;font:inherit;cursor:pointer}
.msg-reply:hover{background:var(--card);border-left-color:var(--accent)} .msg-reply:hover{background:var(--card);border-left-color:var(--accent)}
.msg-reply-img{display:block;width:100%;max-width:280px;max-height:150px;object-fit:cover;border-radius:6px;background:var(--card);margin-bottom:4px} .msg-reply-body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.msg-reply-who{font-size:.68rem;color:var(--accent);font-weight:600} .msg-reply-img{display:block;width:44px;height:44px;flex-shrink:0;object-fit:cover;border-radius:6px;background:var(--card)}
.msg-reply-text{font-size:.75rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px} .msg-reply-who{font-size:.68rem;color:var(--accent);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-reply-text{font-size:.75rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-reply-text[hidden]{display:none} .msg-reply-text[hidden]{display:none}
.msg-reply-file{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;color:var(--muted);max-width:280px;min-width:0} .msg-reply-file{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;color:var(--muted);min-width:0}
.msg-reply-file[hidden]{display:none} .msg-reply-file[hidden]{display:none}
.msg-reply-file svg{width:13px;height:13px;flex-shrink:0} .msg-reply-file svg{width:13px;height:13px;flex-shrink:0}
.msg-reply-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .msg-reply-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
public/js/chat.js
+3 -2
View File
@@ -163,8 +163,9 @@ function chatReplyHtml(m) {
const inner = gone const inner = gone
? `${head}<span class="msg-reply-text">Сообщение удалено</span>` ? `${head}<span class="msg-reply-text">Сообщение удалено</span>`
: `${head}${body ? `<span class="msg-reply-text">${esc(body)}</span>` : ''}${fileLine}`; : `${head}${body ? `<span class="msg-reply-text">${esc(body)}</span>` : ''}${fileLine}`;
if (gone) return `<div class="msg-reply">${inner}</div>`; const body2 = `<span class="msg-reply-body">${inner}</span>`;
return `<button type="button" class="msg-reply" data-msg-jump="${m.reply_to_id}" title="Перейти к сообщению">${img}${inner}</button>`; if (gone) return `<div class="msg-reply">${body2}</div>`;
return `<button type="button" class="msg-reply" data-msg-jump="${m.reply_to_id}" title="Перейти к сообщению">${img}${body2}</button>`;
} }
function addChatMessage(m) { function addChatMessage(m) {