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 {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1fr) 34px;
gap: 8px;
grid-template-columns: repeat(3, minmax(0, 1fr)) 34px;
gap: 6px;
}
.status-select {
.status-button {
height: 34px;
padding: 5px 8px;
font-size: 12px;
padding: 0 6px;
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-select.open { border-color: #2f80ed; background: #eef5ff; }
.status-select.resolved { border-color: #87908a; background: #f3f5f3; }
.status-select.spam { border-color: #d92d20; background: #fff1f0; }
.status-button.active {
color: white;
border-color: transparent;
}
.status-button.new.active { background: #2f9e44; }
.status-button.open.active { background: #2f80ed; }
.status-button.resolved.active { background: #68736c; }
.delete-chat {
width: 34px;
height: 34px;
@@ -204,7 +211,7 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
margin-top: 8px;
}
.photo-preview {
width: min(240px, 100%);
width: min(340px, 100%);
display: grid;
gap: 0;
padding: 0;
@@ -218,6 +225,10 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
}
.photo-open {
width: 100%;
min-height: 80px;
max-height: 360px;
display: grid;
place-items: center;
padding: 0;
border: 0;
border-radius: 0;
@@ -225,9 +236,11 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
color: var(--ink);
}
.photo-open img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
max-width: 100%;
height: auto;
max-height: 360px;
width: auto;
object-fit: contain;
display: block;
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);
});
$("#conversationList").addEventListener("change", async (event) => {
const statusSelect = event.target.closest("[data-status-for]");
if (!statusSelect) return;
await updateConversationStatus(statusSelect.dataset.statusFor, statusSelect.value);
$("#conversationList").addEventListener("click", async (event) => {
const statusButton = event.target.closest("[data-status-button]");
if (!statusButton) return;
await updateConversationStatus(statusButton.dataset.statusButton, statusButton.dataset.status);
});
$("#messages").addEventListener("click", (event) => {
@@ -258,9 +258,7 @@ function renderConversations() {
</span>
</button>
<div class="conversation-actions">
<select class="status-select ${item.status}" data-status-for="${item.id}" aria-label="Zmenit stav chatu">
${statusOptions(item.status)}
</select>
${statusButtons(item)}
<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>
</button>
@@ -295,13 +293,16 @@ function filteredConversations() {
return state.conversations.filter((item) => item.status === state.statusFilter);
}
function statusOptions(currentStatus) {
function statusButtons(item) {
return [
["new", "nove"],
["open", "otevrene"],
["resolved", "vyresene"],
["spam", "spam"]
].map(([value, label]) => `<option value="${value}" ${value === currentStatus ? "selected" : ""}>${label}</option>`).join("");
["resolved", "vyresene"]
].map(([value, label]) => `
<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) {