rajch_ales/MaalFlows
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine admin photo display and status controls

Browse Source
This commit is contained in:
rajchales-monito
2026-07-23 23:08:23 +02:00
parent bb2c267252
commit 273056284c
2 changed files with 38 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin.css
+26 -13
View File
@@ -137,18 +137,25 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.conversation-actions { .conversation-actions {
grid-column: 1 / -1; grid-column: 1 / -1;
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr) 34px; grid-template-columns: repeat(3, minmax(0, 1fr)) 34px;
gap: 8px; gap: 6px;
} }
.status-select { .status-button {
height: 34px; height: 34px;
padding: 5px 8px; padding: 0 6px;
font-size: 12px; font-size: 11px;
background: #f4f7f5;
color: var(--muted);
border: 1px solid var(--line);
white-space: nowrap;
} }
.status-select.new { border-color: #2f9e44; background: #effaf2; } .status-button.active {
.status-select.open { border-color: #2f80ed; background: #eef5ff; } color: white;
.status-select.resolved { border-color: #87908a; background: #f3f5f3; } border-color: transparent;
.status-select.spam { border-color: #d92d20; background: #fff1f0; } }
.status-button.new.active { background: #2f9e44; }
.status-button.open.active { background: #2f80ed; }
.status-button.resolved.active { background: #68736c; }
.delete-chat { .delete-chat {
width: 34px; width: 34px;
height: 34px; height: 34px;
@@ -204,7 +211,7 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
margin-top: 8px; margin-top: 8px;
} }
.photo-preview { .photo-preview {
width: min(240px, 100%); width: min(340px, 100%);
display: grid; display: grid;
gap: 0; gap: 0;
padding: 0; padding: 0;
@@ -218,6 +225,10 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
} }
.photo-open { .photo-open {
width: 100%; width: 100%;
min-height: 80px;
max-height: 360px;
display: grid;
place-items: center;
padding: 0; padding: 0;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
@@ -225,9 +236,11 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
color: var(--ink); color: var(--ink);
} }
.photo-open img { .photo-open img {
width: 100%; max-width: 100%;
aspect-ratio: 16 / 10; height: auto;
object-fit: cover; max-height: 360px;
width: auto;
object-fit: contain;
display: block; display: block;
background: #edf3ef; background: #edf3ef;
} }
public/admin.js
+12 -11
View File
@@ -152,10 +152,10 @@ $("#conversationList").addEventListener("click", async (event) => {
if (openButton) await openConversation(openButton.dataset.open); if (openButton) await openConversation(openButton.dataset.open);
}); });
$("#conversationList").addEventListener("change", async (event) => { $("#conversationList").addEventListener("click", async (event) => {
const statusSelect = event.target.closest("[data-status-for]"); const statusButton = event.target.closest("[data-status-button]");
if (!statusSelect) return; if (!statusButton) return;
await updateConversationStatus(statusSelect.dataset.statusFor, statusSelect.value); await updateConversationStatus(statusButton.dataset.statusButton, statusButton.dataset.status);
}); });
$("#messages").addEventListener("click", (event) => { $("#messages").addEventListener("click", (event) => {
@@ -258,9 +258,7 @@ function renderConversations() {
</span> </span>
</button> </button>
<div class="conversation-actions"> <div class="conversation-actions">
<select class="status-select ${item.status}" data-status-for="${item.id}" aria-label="Zmenit stav chatu"> ${statusButtons(item)}
${statusOptions(item.status)}
</select>
<button class="delete-chat" type="button" data-delete="${item.id}" aria-label="Smazat chat" title="Smazat chat"> <button class="delete-chat" type="button" data-delete="${item.id}" aria-label="Smazat chat" title="Smazat chat">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-.7 11H7.7L7 9Zm3 2 .2 7h1.6l-.2-7H10Zm4 0-.2 7h1.6l.2-7H14Z"></path></svg> <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-.7 11H7.7L7 9Zm3 2 .2 7h1.6l-.2-7H10Zm4 0-.2 7h1.6l.2-7H14Z"></path></svg>
</button> </button>
@@ -295,13 +293,16 @@ function filteredConversations() {
return state.conversations.filter((item) => item.status === state.statusFilter); return state.conversations.filter((item) => item.status === state.statusFilter);
} }
function statusOptions(currentStatus) { function statusButtons(item) {
return [ return [
["new", "nove"], ["new", "nove"],
["open", "otevrene"], ["open", "otevrene"],
["resolved", "vyresene"], ["resolved", "vyresene"]
["spam", "spam"] ].map(([value, label]) => `
].map(([value, label]) => `<option value="${value}" ${value === currentStatus ? "selected" : ""}>${label}</option>`).join(""); <button class="status-button ${value} ${item.status === value ? "active" : ""}" type="button" data-status-button="${item.id}" data-status="${value}">
${label}
</button>
`).join("");
} }
function visitorCountry(item) { function visitorCountry(item) {