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

Style hide bots as toggle

Browse Source
This commit is contained in:
rajchales-monito
2026-07-30 13:29:40 +02:00
parent e80d1f5f9f
commit d59a15d111
3 changed files with 44 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin.css
+36 -5
View File
@@ -913,16 +913,47 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.visitor-panel header span { color: var(--muted); font-size: 12px; } .visitor-panel header span { color: var(--muted); font-size: 12px; }
.visitor-filter-toggle { .visitor-filter-toggle {
height: 30px; height: 30px;
padding: 0 9px; padding: 0;
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 8px;
background: #f8fbf9; background: #f8fbf9;
color: var(--muted); color: var(--muted);
font-size: 12px; font-size: 12px;
cursor: pointer;
user-select: none;
} }
.visitor-filter-toggle.active { .visitor-filter-toggle input {
background: #eaf6f1; position: absolute;
color: var(--brand); opacity: 0;
border-color: #c7e8dc; pointer-events: none;
}
.visitor-filter-toggle span {
position: relative;
width: 42px;
height: 24px;
border-radius: 999px;
background: #cbd6d0;
flex: 0 0 42px;
}
.visitor-filter-toggle span:before {
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: white;
content: "";
transition: transform .16s ease;
}
.visitor-filter-toggle input:checked + span {
background: var(--brand);
}
.visitor-filter-toggle input:checked + span:before {
transform: translateX(18px);
} }
.visitor-list { .visitor-list {
min-height: 0; min-height: 0;
public/admin.html
+5 -1
View File
@@ -96,7 +96,11 @@
<aside class="visitor-panel"> <aside class="visitor-panel">
<header> <header>
<h2>Navstevnici</h2> <h2>Navstevnici</h2>
<button id="hideBotsToggle" class="visitor-filter-toggle" type="button">Skryt boty</button> <label class="visitor-filter-toggle" title="Skryt boty">
<input id="hideBotsToggle" type="checkbox">
<span></span>
Boty
</label>
<span id="visitorCount">0 online</span> <span id="visitorCount">0 online</span>
</header> </header>
<div id="visitorList" class="visitor-list"> <div id="visitorList" class="visitor-list">
public/admin.js
+3 -4
View File
@@ -322,8 +322,8 @@ $("#conversationFilter").addEventListener("change", () => {
renderConversations(); renderConversations();
}); });
$("#hideBotsToggle").addEventListener("click", () => { $("#hideBotsToggle").addEventListener("change", (event) => {
state.hideBots = !state.hideBots; state.hideBots = event.target.checked;
localStorage.setItem("mf_admin_hide_bots", state.hideBots ? "1" : "0"); localStorage.setItem("mf_admin_hide_bots", state.hideBots ? "1" : "0");
renderVisitors(); renderVisitors();
}); });
@@ -1068,8 +1068,7 @@ function conversationVisitorName(item) {
function renderVisitors() { function renderVisitors() {
const visitors = state.hideBots ? state.visitors.filter((visitor) => !visitor.isBot) : state.visitors; const visitors = state.hideBots ? state.visitors.filter((visitor) => !visitor.isBot) : state.visitors;
const botCount = state.visitors.filter((visitor) => visitor.isBot).length; const botCount = state.visitors.filter((visitor) => visitor.isBot).length;
$("#hideBotsToggle").classList.toggle("active", state.hideBots); $("#hideBotsToggle").checked = state.hideBots;
$("#hideBotsToggle").textContent = state.hideBots ? "Skryt boty" : "Boty videt";
$("#visitorCount").textContent = `${visitors.length} na webu${state.hideBots && botCount ? ` · ${botCount} bot` : ""}`; $("#visitorCount").textContent = `${visitors.length} na webu${state.hideBots && botCount ? ` · ${botCount} bot` : ""}`;
$("#visitorList").innerHTML = visitors.length ? visitors.map((visitor) => ` $("#visitorList").innerHTML = visitors.length ? visitors.map((visitor) => `
<article class="visitor-card ${visitor.lastConversationId ? "clickable" : ""} ${visitor.lastConversationId === state.activeId ? "active" : ""} ${visitor.isBot ? "bot" : ""}" data-visitor-conversation="${escapeHtml(visitor.lastConversationId || "")}"> <article class="visitor-card ${visitor.lastConversationId ? "clickable" : ""} ${visitor.lastConversationId === state.activeId ? "active" : ""} ${visitor.isBot ? "bot" : ""}" data-visitor-conversation="${escapeHtml(visitor.lastConversationId || "")}">