Add admin image replies and attachment removal

This commit is contained in:
rajchales-monito
2026-07-23 23:01:53 +02:00
parent 7b6d855fec
commit bb2c267252
4 changed files with 228 additions and 21 deletions
+80 -8
View File
@@ -204,9 +204,9 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
margin-top: 8px;
}
.photo-preview {
width: 116px;
width: min(240px, 100%);
display: grid;
gap: 5px;
gap: 0;
padding: 0;
border: 1px solid var(--line);
border-radius: 8px;
@@ -214,22 +214,47 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
color: var(--ink);
overflow: hidden;
text-align: left;
margin: 0;
}
.photo-preview img {
.photo-open {
width: 100%;
aspect-ratio: 4 / 3;
padding: 0;
border: 0;
border-radius: 0;
background: #edf3ef;
color: var(--ink);
}
.photo-open img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
display: block;
background: #edf3ef;
}
.photo-preview span {
padding: 0 7px 7px;
.photo-preview figcaption {
display: grid;
grid-template-columns: minmax(0, 1fr) 30px;
gap: 6px;
align-items: center;
padding: 6px 7px;
}
.photo-preview figcaption span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--muted);
font-size: 12px;
}
.photo-delete {
width: 30px;
height: 30px;
padding: 0;
display: grid;
place-items: center;
background: #fff1f0;
color: #b42318;
}
.photo-delete svg { width: 16px; height: 16px; fill: currentColor; }
.photo-modal {
position: fixed;
inset: 0;
@@ -279,12 +304,59 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.typing { padding: 0 20px 10px; color: var(--brand); font-size: 13px; }
.reply {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
gap: 8px;
padding: 14px;
background: white;
border-top: 1px solid var(--line);
}
.reply-composer {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
}
.admin-dropzone {
min-height: 38px;
border: 1px dashed var(--line);
border-radius: 8px;
padding: 8px 10px;
display: flex;
align-items: center;
color: var(--muted);
background: #f8fbf9;
cursor: pointer;
}
.admin-dropzone.dragging { border-color: var(--brand); background: #edf8f3; color: var(--ink); }
.admin-dropzone input { display: none; }
.reply-attachments {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.reply-chip {
max-width: 100%;
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--line);
border-radius: 999px;
background: #f8fbf9;
padding: 5px 5px 5px 9px;
font-size: 12px;
}
.reply-chip span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 240px;
}
.reply-chip button {
width: 22px;
height: 22px;
border-radius: 50%;
padding: 0;
background: #e8eee9;
color: var(--ink);
}
.settings {
position: fixed;