From 95876222850c28509bcff2cf8b75803d7c4f1d6b Mon Sep 17 00:00:00 2001 From: AB Date: Sun, 20 Sep 2026 20:30:28 +0300 Subject: [PATCH] Fixed log mobile view --- templates/admin/analytics.html | 95 ++++++++++++++++++++++------------ 1 file changed, 62 insertions(+), 33 deletions(-) diff --git a/templates/admin/analytics.html b/templates/admin/analytics.html index af66c28..6e3fb13 100644 --- a/templates/admin/analytics.html +++ b/templates/admin/analytics.html @@ -54,7 +54,7 @@
{{ t.analytics_metrics_label }}: - + @@ -128,20 +128,26 @@ .analytics-log-card h2 { font-size:1rem; margin:0; } .analytics-log-head { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between; margin-bottom:10px; } .analytics-log-filters { margin-bottom:0; } -.analytics-log { max-height:460px; overflow-y:auto; border:1px solid #f0f0f0; border-radius:8px; } -.an-log-row { display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border-bottom:1px solid #f5f5f5; font-size:.85rem; } +.analytics-log { height:460px; overflow-y:auto; overflow-x:hidden; border:1px solid #f0f0f0; border-radius:8px; } +.an-log-row { display:grid; grid-template-columns:40px 1fr; gap:10px; align-items:start; padding:11px 12px; border-bottom:1px solid #f2f2f4; font-size:.85rem; } .an-log-row:last-child { border-bottom:none; } -.an-log-icon { font-size:1.1rem; line-height:1.4; flex:0 0 auto; } -.an-log-main { flex:1 1 auto; min-width:0; } -.an-log-head { display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; } -.an-log-event { font-weight:600; } -.an-log-client { color:#7c6ed4; } -.an-log-time { color:#999; font-size:.78rem; margin-left:auto; white-space:nowrap; } -.an-log-meta { color:#888; font-size:.78rem; margin-top:3px; word-break:break-word; } -.an-log-meta span { margin-right:12px; } -.an-log-meta code { background:rgba(0,0,0,.04); padding:1px 4px; border-radius:3px; } -.an-log-thumb { width:44px; height:44px; border-radius:6px; object-fit:cover; background:#eceaf5; flex:0 0 auto; } -.an-log-status { text-align:center; color:#aaa; padding:14px; font-size:.85rem; } +.an-log-figure { width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; background:var(--admin-accent-soft,#eef0fb); overflow:hidden; } +.an-log-figure img { width:100%; height:100%; object-fit:cover; display:block; } +.an-log-main { min-width:0; } +.an-log-head { display:flex; flex-wrap:wrap; gap:2px 8px; align-items:baseline; } +.an-log-event { font-weight:650; } +.an-log-client { color:#7c6ed4; font-weight:600; } +.an-log-time { color:#9a9aa6; font-size:.75rem; white-space:nowrap; margin-left:auto; } +.an-log-meta { color:#8a8a95; font-size:.76rem; margin-top:4px; display:flex; flex-direction:column; gap:2px; } +.an-log-meta .an-log-line { display:flex; flex-wrap:wrap; gap:4px 12px; } +.an-log-meta code { background:rgba(0,0,0,.045); padding:1px 5px; border-radius:4px; word-break:break-all; overflow-wrap:anywhere; max-width:100%; } +.an-log-ref { overflow-wrap:anywhere; word-break:break-word; } +.an-log-status { text-align:center; color:#aaa; padding:16px; font-size:.85rem; } +@media (max-width:600px) { + .an-log-row { grid-template-columns:34px 1fr; gap:9px; padding:10px; } + .an-log-figure { width:34px; height:34px; font-size:1rem; } + .an-log-time { flex-basis:100%; margin-left:0; } +} @@ -233,6 +239,10 @@ function initChart() { var ctx = document.getElementById('anChart').getContext('2d'); + var enabled = {}; + document.querySelectorAll('.metric-toggle').forEach(function (cb) { + enabled[cb.getAttribute('data-key')] = cb.checked; + }); var datasets = META.map(function (m) { return { label: metricLabel(m.key), @@ -243,7 +253,7 @@ pointRadius: 2, tension: 0.25, fill: true, - hidden: false, + hidden: enabled[m.key] === false, _key: m.key }; }); @@ -444,27 +454,33 @@ return s; } + function metaLine() { + var line = document.createElement('div'); + line.className = 'an-log-line'; + return line; + } + function renderLogRow(e) { var row = document.createElement('div'); row.className = 'an-log-row'; - var icon = document.createElement('div'); - icon.className = 'an-log-icon'; - icon.textContent = eventIcon(e.event_type); - row.appendChild(icon); - - if (e.media && e.media.exists && e.media.url) { - var a = document.createElement('a'); - a.href = e.media.url; - a.setAttribute('data-lightbox', e.media.file_type === 'video' ? 'video' : 'photo'); + // Single leading figure: media preview (clickable) or a type emoji. + var figure; + if (e.media && e.media.exists && e.media.url && e.media.thumbnail_url) { + figure = document.createElement('a'); + figure.href = e.media.url; + figure.setAttribute('data-lightbox', e.media.file_type === 'video' ? 'video' : 'photo'); var img = document.createElement('img'); - img.className = 'an-log-thumb'; img.src = e.media.thumbnail_url; img.alt = ''; img.loading = 'lazy'; - a.appendChild(img); - row.appendChild(a); + figure.appendChild(img); + } else { + figure = document.createElement('div'); + figure.textContent = eventIcon(e.event_type); } + figure.className = 'an-log-figure'; + row.appendChild(figure); var main = document.createElement('div'); main.className = 'an-log-main'; @@ -489,17 +505,30 @@ var meta = document.createElement('div'); meta.className = 'an-log-meta'; - if (e.visitor) { meta.appendChild(metaSpan(L.visitor + ': ' + e.visitor)); } + + var line1 = metaLine(); + if (e.visitor) { line1.appendChild(metaSpan(L.visitor + ': ' + e.visitor)); } var ua = shortUa(e.user_agent); - if (ua) { meta.appendChild(metaSpan(ua)); } + if (ua) { line1.appendChild(metaSpan(ua)); } + if (line1.childNodes.length) { meta.appendChild(line1); } + if (e.path && e.path !== '/') { - var p = document.createElement('span'); + var line2 = metaLine(); var code = document.createElement('code'); code.textContent = e.path; - p.appendChild(code); - meta.appendChild(p); + line2.appendChild(code); + meta.appendChild(line2); } - if (e.referer) { meta.appendChild(metaSpan('← ' + e.referer)); } + + if (e.referer) { + var line3 = metaLine(); + var ref = document.createElement('span'); + ref.className = 'an-log-ref'; + ref.textContent = '← ' + e.referer; + line3.appendChild(ref); + meta.appendChild(line3); + } + if (meta.childNodes.length) { main.appendChild(meta); } row.appendChild(main);