diff --git a/public/admin.css b/public/admin.css index 1bff282..ff2a510 100644 --- a/public/admin.css +++ b/public/admin.css @@ -129,19 +129,23 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; } .conversation-item { border: 0; border-bottom: 1px solid var(--line); + border-left: 3px solid transparent; background: white; color: var(--ink); border-radius: 0; - padding: 10px; + padding: 10px 10px 10px 7px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; } -.conversation-item.active { background: #eaf6f1; } +.conversation-item.active { + background: #edf8f3; + border-left-color: var(--brand); +} .conversation-item.fresh { animation: pulse 1.2s ease-in-out 4; } .conversation-item.unread { background: #fffdf4; } -.conversation-item.unread.active { background: #eaf6f1; } +.conversation-item.unread.active { background: #edf8f3; } .conversation-open { min-width: 0; text-align: left; @@ -268,28 +272,26 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; } .conversation-header p { margin: 0; color: var(--muted); font-size: 13px; } .conversation-header select { width: 150px; align-self: start; } .visitor-head { width: 100%; min-width: 0; display: grid; gap: 7px; } -.visitor-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } -.visitor-title-row h2 { margin: 0; } -.country-pill { - border: 1px solid #e4ebe6; - border-radius: 999px; - padding: 3px 8px; - background: #f8fbf9; - color: var(--muted); - font-size: 12px; -} -.visitor-quick { +.visitor-summary-row { display: flex; + align-items: center; flex-wrap: wrap; - gap: 6px; + gap: 7px; color: var(--muted); font-size: 12px; } -.visitor-quick span { +.visitor-summary-row h2 { + min-width: 0; + margin: 0 4px 0 0; + color: var(--ink); + font-size: 20px; +} +.visitor-summary-row span { border: 1px solid #e4ebe6; border-radius: 999px; padding: 2px 7px; background: #f8fbf9; + white-space: nowrap; } .visitor-details { max-width: 980px; @@ -397,13 +399,18 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; } overflow: auto; } .visitor-card { - padding: 10px 12px; + padding: 10px 12px 10px 9px; border-bottom: 1px solid var(--line); + border-left: 3px solid transparent; background: white; } .visitor-card.bot { opacity: .68; } .visitor-card.clickable { cursor: pointer; } .visitor-card.clickable:hover { background: #f8fbf9; } +.visitor-card.active { + background: #edf8f3; + border-left-color: var(--brand); +} .visitor-card-head { display: grid; grid-template-columns: 34px minmax(0, 1fr) 10px; diff --git a/public/admin.js b/public/admin.js index f358fb9..000808e 100644 --- a/public/admin.js +++ b/public/admin.js @@ -362,7 +362,7 @@ function renderVisitors() { $("#hideBotsToggle").textContent = state.hideBots ? "Skryt boty" : "Boty videt"; $("#visitorCount").textContent = `${visitors.length} online${state.hideBots && botCount ? ` ยท ${botCount} bot` : ""}`; $("#visitorList").innerHTML = visitors.length ? visitors.map((visitor) => ` -
+
${escapeHtml(visitor.initials || "??")}
@@ -411,11 +411,9 @@ function renderActive() { const { conversation, messages } = state.active; $("#conversationHeader").innerHTML = `
-
-

${escapeHtml(conversation.visitor.name || conversation.visitor.email || "Navstevnik")}

- ${visitorCountry(conversation)} -
-
+
+

${escapeHtml(conversationVisitorName(conversation))}

+ ${visitorCountry(conversation)} ${formatDuration(conversation.sessionSeconds)} ${Number(conversation.pageCount || 0)} str. ${Number(conversation.visitorConversationCount || 1)}x chat