ab/web-petting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed log mobile view
Build and Publish / Build and Publish Docker Image (push) Successful in 1m44s
Details

Browse Source
This commit is contained in:
ab
2026-09-20 20:30:28 +03:00
parent 866118497f
commit 9587622285
1 changed files with 62 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/admin/analytics.html
+62 -33
View File
@@ -54,7 +54,7 @@
<div class="analytics-metric-toggles"> <div class="analytics-metric-toggles">
<span class="toggles-label">{{ t.analytics_metrics_label }}:</span> <span class="toggles-label">{{ t.analytics_metrics_label }}:</span>
<label><input type="checkbox" class="metric-toggle" data-key="landing_views" checked> {{ t.analytics_metric_landing_views }}</label> <label><input type="checkbox" class="metric-toggle" data-key="landing_views"> {{ t.analytics_metric_landing_views }}</label>
<label><input type="checkbox" class="metric-toggle" data-key="landing_unique" checked> {{ t.analytics_metric_landing_unique }}</label> <label><input type="checkbox" class="metric-toggle" data-key="landing_unique" checked> {{ t.analytics_metric_landing_unique }}</label>
<label><input type="checkbox" class="metric-toggle" data-key="portal_opens" checked> {{ t.analytics_metric_portal_opens }}</label> <label><input type="checkbox" class="metric-toggle" data-key="portal_opens" checked> {{ t.analytics_metric_portal_opens }}</label>
<label><input type="checkbox" class="metric-toggle" data-key="media_views" checked> {{ t.analytics_metric_media_views }}</label> <label><input type="checkbox" class="metric-toggle" data-key="media_views" checked> {{ t.analytics_metric_media_views }}</label>
@@ -128,20 +128,26 @@
.analytics-log-card h2 { font-size:1rem; margin:0; } .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-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-filters { margin-bottom:0; }
.analytics-log { max-height:460px; overflow-y:auto; border:1px solid #f0f0f0; border-radius:8px; } .analytics-log { height:460px; overflow-y:auto; overflow-x:hidden; 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; } .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-row:last-child { border-bottom:none; }
.an-log-icon { font-size:1.1rem; line-height:1.4; flex:0 0 auto; } .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-main { flex:1 1 auto; min-width:0; } .an-log-figure img { width:100%; height:100%; object-fit:cover; display:block; }
.an-log-head { display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; } .an-log-main { min-width:0; }
.an-log-event { font-weight:600; } .an-log-head { display:flex; flex-wrap:wrap; gap:2px 8px; align-items:baseline; }
.an-log-client { color:#7c6ed4; } .an-log-event { font-weight:650; }
.an-log-time { color:#999; font-size:.78rem; margin-left:auto; white-space:nowrap; } .an-log-client { color:#7c6ed4; font-weight:600; }
.an-log-meta { color:#888; font-size:.78rem; margin-top:3px; word-break:break-word; } .an-log-time { color:#9a9aa6; font-size:.75rem; white-space:nowrap; margin-left:auto; }
.an-log-meta span { margin-right:12px; } .an-log-meta { color:#8a8a95; font-size:.76rem; margin-top:4px; display:flex; flex-direction:column; gap:2px; }
.an-log-meta code { background:rgba(0,0,0,.04); padding:1px 4px; border-radius:3px; } .an-log-meta .an-log-line { display:flex; flex-wrap:wrap; gap:4px 12px; }
.an-log-thumb { width:44px; height:44px; border-radius:6px; object-fit:cover; background:#eceaf5; flex:0 0 auto; } .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-status { text-align:center; color:#aaa; padding:14px; font-size:.85rem; } .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; }
}
</style> </style>
<script src="/static/chart.min.js?v={{ t.app_version() }}"></script> <script src="/static/chart.min.js?v={{ t.app_version() }}"></script>
@@ -233,6 +239,10 @@
function initChart() { function initChart() {
var ctx = document.getElementById('anChart').getContext('2d'); 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) { var datasets = META.map(function (m) {
return { return {
label: metricLabel(m.key), label: metricLabel(m.key),
@@ -243,7 +253,7 @@
pointRadius: 2, pointRadius: 2,
tension: 0.25, tension: 0.25,
fill: true, fill: true,
hidden: false, hidden: enabled[m.key] === false,
_key: m.key _key: m.key
}; };
}); });
@@ -444,27 +454,33 @@
return s; return s;
} }
function metaLine() {
var line = document.createElement('div');
line.className = 'an-log-line';
return line;
}
function renderLogRow(e) { function renderLogRow(e) {
var row = document.createElement('div'); var row = document.createElement('div');
row.className = 'an-log-row'; row.className = 'an-log-row';
var icon = document.createElement('div'); // Single leading figure: media preview (clickable) or a type emoji.
icon.className = 'an-log-icon'; var figure;
icon.textContent = eventIcon(e.event_type); if (e.media && e.media.exists && e.media.url && e.media.thumbnail_url) {
row.appendChild(icon); figure = document.createElement('a');
figure.href = e.media.url;
if (e.media && e.media.exists && e.media.url) { figure.setAttribute('data-lightbox', e.media.file_type === 'video' ? 'video' : 'photo');
var a = document.createElement('a');
a.href = e.media.url;
a.setAttribute('data-lightbox', e.media.file_type === 'video' ? 'video' : 'photo');
var img = document.createElement('img'); var img = document.createElement('img');
img.className = 'an-log-thumb';
img.src = e.media.thumbnail_url; img.src = e.media.thumbnail_url;
img.alt = ''; img.alt = '';
img.loading = 'lazy'; img.loading = 'lazy';
a.appendChild(img); figure.appendChild(img);
row.appendChild(a); } else {
figure = document.createElement('div');
figure.textContent = eventIcon(e.event_type);
} }
figure.className = 'an-log-figure';
row.appendChild(figure);
var main = document.createElement('div'); var main = document.createElement('div');
main.className = 'an-log-main'; main.className = 'an-log-main';
@@ -489,17 +505,30 @@
var meta = document.createElement('div'); var meta = document.createElement('div');
meta.className = 'an-log-meta'; 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); 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 !== '/') { if (e.path && e.path !== '/') {
var p = document.createElement('span'); var line2 = metaLine();
var code = document.createElement('code'); var code = document.createElement('code');
code.textContent = e.path; code.textContent = e.path;
p.appendChild(code); line2.appendChild(code);
meta.appendChild(p); 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); } if (meta.childNodes.length) { main.appendChild(meta); }
row.appendChild(main); row.appendChild(main);