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

Render country flags as images

Browse Source
This commit is contained in:
rajchales-monito
2026-07-24 13:32:40 +02:00
parent 942cee5d66
commit a54cc6d1d4
2 changed files with 33 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin.css
+24 -7
View File
@@ -207,7 +207,7 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
color: var(--muted); color: var(--muted);
font-size: 11px; font-size: 11px;
} }
.visitor-facts span { .visitor-facts > span {
max-width: 96px; max-width: 96px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -326,12 +326,29 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
border-color: #d9e6df; border-color: #d9e6df;
background: #fbfdfb; background: #fbfdfb;
} }
.flag-emoji { .country-badge {
font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; display: inline-flex;
font-size: 14px; align-items: center;
line-height: 1; gap: 5px;
min-width: 0;
} }
.country-code { .flag-image {
width: 18px;
height: 13px;
flex: 0 0 auto;
border-radius: 2px;
background-color: #e4ebe6;
background-position: center;
background-size: cover;
box-shadow: 0 0 0 1px rgb(0 0 0 / 8%);
}
.country-badge.unknown .flag-image {
width: auto;
height: auto;
background: transparent;
box-shadow: none;
}
.country-badge strong {
color: var(--muted); color: var(--muted);
font-size: 11px; font-size: 11px;
line-height: 1; line-height: 1;
@@ -518,7 +535,7 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
color: var(--muted); color: var(--muted);
font-size: 12px; font-size: 12px;
} }
.visitor-compact-meta span { .visitor-compact-meta > span {
flex: 0 0 auto; flex: 0 0 auto;
max-width: 72px; max-width: 72px;
overflow: hidden; overflow: hidden;
public/admin.js
+9 -4
View File
@@ -380,7 +380,7 @@ function renderVisitors() {
${presenceDot(visitor.presence)} ${presenceDot(visitor.presence)}
</div> </div>
<div class="visitor-compact-meta"> <div class="visitor-compact-meta">
<span>${visitor.countryFlag || escapeHtml(visitor.countryCode || "?")}</span> <span>${visitorCountry(visitor)}</span>
<span>${formatDuration(visitor.sessionSeconds)}</span> <span>${formatDuration(visitor.sessionSeconds)}</span>
<span>${Number(visitor.visitCount || visitor.pageCount || 1)} navst.</span> <span>${Number(visitor.visitCount || visitor.pageCount || 1)} navst.</span>
<span>${Number(visitor.conversationCount || 0)} chaty</span> <span>${Number(visitor.conversationCount || 0)} chaty</span>
@@ -507,9 +507,14 @@ function statusButtons(item) {
function visitorCountry(item) { function visitorCountry(item) {
const countryCode = item.countryCode || countryFromLanguage(item.language) || countryFromTimezone(item.timezone); const countryCode = item.countryCode || countryFromLanguage(item.language) || countryFromTimezone(item.timezone);
const countryFlag = item.countryFlag || flag(countryCode); const code = String(countryCode || "").toUpperCase();
if (!countryCode) return `<span class="flag-emoji" aria-hidden="true">?</span><strong class="country-code">?</strong>`; if (!/^[A-Z]{2}$/.test(code)) return `<span class="country-badge unknown"><span class="flag-image">?</span><strong>?</strong></span>`;
return `<span class="flag-emoji" aria-hidden="true">${countryFlag}</span><strong class="country-code">${escapeHtml(countryCode)}</strong>`; return `
<span class="country-badge">
<span class="flag-image" style="background-image:url('https://flagcdn.com/24x18/${code.toLowerCase()}.png')" aria-hidden="true"></span>
<strong>${escapeHtml(code)}</strong>
</span>
`;
} }
function visitorDetails(conversation) { function visitorDetails(conversation) {