From 9bc80cc5e9496f9b2f4ae6f9ac5a3601cf695ec5 Mon Sep 17 00:00:00 2001
From: Sascha Leib <sascha.leib@kolmio.com>
Date: Mon, 1 Sep 2025 15:42:06 +0200
Subject: [PATCH] Admin content styling

---
 admin.php  |  6 ++--
 script.js  | 40 ++++++++++++++++++--------
 style.less | 82 ++++++++++++++++++++++++++++++++++++++++++++++--------
 3 files changed, 101 insertions(+), 27 deletions(-)

diff --git a/admin.php b/admin.php
index 3f85c9f..68b8121 100644
--- a/admin.php
+++ b/admin.php
@@ -44,15 +44,15 @@ class admin_plugin_monitor extends AdminPlugin {
 		echo '</ul></nav>';
 
 		/* Live tab */
-		echo '<section role="tabpanel" id="monitor__today"">';
+		echo '<article role="tabpanel" id="monitor__today"">';
 		echo '<h2 class="a11y">Today</h2>';
-		echo '<header><h3 id="monitor__today__title">Loading&nbsp;&hellip;</h3></header>';
+		echo '<header id="monitor__today__title">Loading&nbsp;&hellip;</header>';
 		echo '<div id="monitor__today__content">';
 		echo '<details id="monitor__today__visitors"><summary>Visitor log</summary>';
 		echo '<ul id="monitor__today__visitorlist"></ul>';
 		echo '</details></div>';
 		echo '<footer aria-live="polite">' . $svg . '<span id="monitor__today__status">Initialising&nbsp;&hellip;</span></footer>';
-		echo '</section>';
+		echo '</article>';
 		echo '</div><!-- End of Monitor Admin Tool -->';
 
 	}
diff --git a/script.js b/script.js
index 62c7b48..0f929ce 100644
--- a/script.js
+++ b/script.js
@@ -343,15 +343,16 @@ Monitor.live = {
 				totalPageViews: 0,
 				bots: {
 					known: 0,
-					possible: 0,
-					human: 0
+					likely: 0,
+					human: 0,
+					users: 0
 				}
 			},
 
 			// sort the visits by type:
 			groups: {
 				knownBots: [],
-				possibleBots: [],
+				likelyBots: [],
 				humans: [],
 				users: []
 			},
@@ -380,6 +381,7 @@ Monitor.live = {
 
 					} if (v.usr && v.usr != '') { // known users
 						this.groups.users.push(v);
+						this.data.bots.users += 1;
 					} else {
 						// not a known bot, nor a known user; check other aspects:
 
@@ -404,8 +406,8 @@ Monitor.live = {
 
 						// decide based on the score:
 						if (botScore >= 0.5) {
-							this.data.bots.possible += 1;
-							this.groups.possibleBots.push(v);
+							this.data.bots.likely += 1;
+							this.groups.likelyBots.push(v);
 						} else {
 							this.data.bots.human += 1;
 							this.groups.humans.push(v);
@@ -676,13 +678,27 @@ Monitor.live = {
 				const parent = document.getElementById('monitor__today__content');
 				if (parent) {
 					jQuery(parent).prepend(jQuery(`
-						<h2>Overview</h2>
-						<p>Total visits: ${data.totalVisits}</p>
-						<p>Total page views: ${data.totalPageViews}</p>
-						<h3>Bots vs. Humans</h3>
-						<p>Known bots: ${data.bots.known}</p>
-						<p>Possible bots: ${data.bots.possible}</p>
-						<p>Humans: ${data.bots.human}</p>
+						<details id="monitor__today__overview" open>
+							<summary>Overview</summary>
+							<div class="grid-3-columns">
+								<dl>
+									<dt>Web metrics</dt>
+									<dd><span>Total visits:</span><span>${data.totalVisits}</span></dd>
+									<dd><span>Total page views:</span><span>${data.totalPageViews}</span></dd>
+									<dd><span>Bounce rate:</span><span>(TBD)</span></dd>
+								</dl>
+								<dl>
+									<dt>Bots vs. Humans</dt>
+									<dd><span>Known bots:</span><span>${data.bots.known}</span></dd>
+									<dd><span>Likely bots:</span><span>${data.bots.likely}</span></dd>
+									<dd><span>Probably humans:</span><span>${data.bots.human}</span></dd>
+									<dd><span>Registered users:</span><span>${data.bots.users}</span></dd>
+								</dl>
+								<dl id="monitor__botslistWould be good for me, too">
+									<dt>Known bots</dt>
+								</dl>
+							</div>
+						</details>
 					`));
 				}
 			}
diff --git a/style.less b/style.less
index 54e5365..de2c6fd 100644
--- a/style.less
+++ b/style.less
@@ -7,28 +7,86 @@
 	#monitor__today {
 
 		header {
+			background-color: #F0F0F0;
+			color: #333;
+			border: #CCC solid 1px;
+			border-radius: .5rem .5rem 0 0;
+			margin: .5rem 0 1pt 0;
+			padding: .25rem .5rem;
+			font-size: 1rem;
+		}
+
+		/* list formatting */
+		dl {
 			& {
-				background-color: #FBFAF9;
-				color: #333;
-				border: #EEE solid 1px;
-				border-radius: .25rem .25rem 0 0;
-				margin: 0 0 .25rem 0;
+				border-left: #555 solid 1px;
+				padding-left: .5rem;
+				margin: 0;
 			}
-			h3 {
-				font-size: 1rem;
-				padding: .25em .5em; margin: 0;
+			&:first-child {
+				border-left: none;
+				padding-left: 0;
+			}
+			dt {
+				margin-bottom: .2em;
+			}
+			dd {
+				display: flex;
+				justify-content: space-between;
+				padding: 0; margin: 0;
+			}
+			dd:nth-child(even) {
+				background-color: #EEE;
 			}
 		}
+
+		#monitor__today__content {
+			& > details {
+				& {
+					margin: 0 0 1pt 0;
+				}
+				summary {
+					& {
+						font-weight: bold;
+						font-size: 1rem;
+						padding: .25rem .5rem;
+						background-color: #F0F0F0;
+						color: #333;
+						border: #CCC solid 1px;
+						display: flex;
+						justify-content: space-between;
+						margin: 0;
+					}
+					&::marker {
+						content: '';
+					}
+					&::after {
+						content: '＋';
+						display: inline-block;
+						color: @ini_link;
+					}
+				}
+				&[open] {
+					summary::after {
+						content: '－';
+					}
+				}
+				& > div {
+					padding: .5rem;
+				}
+			}
+		}
+
 		footer {
 			& {
 				display: flex;
 				align-items: center;
 				column-gap: .25rem;
-				background-color: #FBFAF9;
+				background-color: #F0F0F0;
 				color: #333;
-				border: #EEE solid 1px;
-				border-radius: 0 0 .25rem .25rem;
-				margin: .25rem 0 0 0;
+				border: #CCC solid 1px;
+				border-radius: 0 0 .5rem .5rem;
+				margin: 1pt 0 0 0;
 				padding: .25rem .5rem;
 			}
 			& > svg {