Admin UI fixes

admin.css

@@ -7,24 +7,29 @@
 	/* icon items */
 	.has_icon {
 		display: inline-flex;
+		align-items: center;
+		width: auto;
+		white-space: nowrap;
 	}
 	.icon_only {
 		display: inline-grid;
 		grid-template-columns: 20px max-content;
-		overflow: hidden;
-		width: 20px;
+		width: 20px; max-width: 20px;
 	}
 
 	.has_icon, .icon_only {
 		& {
 			align-items: center;
-			column-gap: .25em;
+			overflow: hidden;
+			column-gap: .2em;
+			min-width: 20px;
 		}
 
 		&::before {
 			content: '';
 			display: inline-block;
-			width: 20px; height: 20px;
+			width: 20px; min-width: 20px; max-width: 20px;
+			height: 20px;
 			background: transparent none center no-repeat;
 			background-position: 0 0;
 			background-size: 20px;
@@ -534,14 +539,15 @@
 						color: #333;
 						cursor: pointer;
 					}
-					&::marker, &::before {
+					&::marker {
 						content: none;
 						display: none;
 					}
 					&::before {
 						content: '';
 						display: inline-block;
-						width: 1.25em; height: 1.25em;
+						width: 1.25em; min-width: 1.25em; max-width: 1.25em;
+						height: 1.25em;
 						background: transparent url('img/chevron.svg') center no-repeat;
 						background-size: 1.25em;
 						transform: rotate(-90deg);
@@ -607,8 +613,10 @@
 				border-radius: .5em;
 			}
 			details ul > li > details > summary {
-				display: flex;
-				justify-content: space-between;
+				display: grid;
+				grid-template-columns: 1.25em minmax(calc(100px + 4em), auto) max-content;
+		        justify-items: stretch;
+				justify-content: stretch;
 				align-items: center;
 				column-gap: .5em;
 				font-weight: normal;
@@ -617,6 +625,7 @@
 				background-color: #F0F0F0;
 				border-bottom: #CCC solid 1px;
 				border-radius: .7em;
+				overflow: auto;
 			}
 			details ul > li > details > summary.noServer {
 				opacity: 67%;
@@ -627,7 +636,10 @@
 				column-gap: .25em;
 			}
 			details ul > li > details > summary > span:first-child {
-				flex-grow: 1;
+				justify-content: flex-start;
+			}
+			details ul > li > details > summary > span:last-child {
+				justify-content: flex-end;
 			}
 			details ul > li > details > summary > span > span[title] {
 				cursor: help;
@@ -744,11 +756,12 @@
 				font-size: smaller;
 				border-radius: .5em;
 				margin-right: .25em;
+				min-width: fit-content;
 			}
 			span.pageseen::before {
 				content : '';
 				display: inline-block;
-				width: 1.25em; height: 1.25em;
+				width: 1.25em; min-width: 1.25em; max-width: 1.25em; height: 1.25em;
 				background: transparent url('img/page.svg') center no-repeat;
 				background-size: 1.25em;
 			}
@@ -980,3 +993,9 @@
 		}
 	}
 }
+
+@media (max-width: 440px) {
+	#botmon__admin #botmon__latest #botmon__today__content details  > div { padding: .25em; }
+	#botmon__admin #botmon__latest #botmon__today__visitorlists details ul > li { margin-left: 0; }
+	#botmon__admin #botmon__latest #botmon__today__visitorlists details ul > li > details > summary { column-gap: .1em; }
+}

admin.js

@@ -182,7 +182,7 @@ const BotMon = {
 	}
 };
 
-/* everything specific to the "Latest" tab is self-contained in the "live" object: */
+/* everything specific to the 'Latest' tab is self-contained in the 'live' object: */
 BotMon.live = {
 	init: function() {
 		//console.info('BotMon.live.init()');
@@ -2306,15 +2306,15 @@ BotMon.live = {
 				} else { /* others */
 
 					
-					/*span1.appendChild(make('span', { // IP-Address
+					span1.appendChild(make('span', { // IP-Address
 						'class': 'has_icon ipaddr ip' + ipType,
 						'title': "IP-Address: " + data.ip
-					}, data.ip));*/
+					}, data.ip));
 
-					span1.appendChild(make('span', { /* Internal ID */
+					/*span1.appendChild(make('span', { // Internal ID
 						'class': 'has_icon session typ_' + data.typ,
 						'title': "ID: " + data.id
-					}, data.id));
+					}, data.id));*/
 				}
 
 				span1.appendChild(make('span', { /* page views */

admin.php

@@ -107,7 +107,7 @@ class admin_plugin_botmon extends AdminPlugin {
 		echo '</article>' . NL;
 		echo '<script>
 		BMSettings = {
-			showDay: ' . json_encode($this->getConf('showDay')) . '
+			showday: ' . json_encode($this->getConf('showday')) . '
 		};
 		</script>';
 		echo '</div><!-- End of BotMon Admin Tool -->';

captcha.js

@@ -27,12 +27,15 @@ const $BMCaptcha = {
 		const dlg = document.createElement('dialog');
 		dlg.setAttribute('closedby', 'none');
 		dlg.setAttribute('open', 'open');
+		dlg.setAttribute('role', 'alertdialog');
+		dlg.setAttribute('aria-labelledby', 'botmon_captcha_title');
 		dlg.classList.add('checking');
 		dlg.id = 'botmon_captcha_box';
-		dlg.innerHTML = '<h2>' + _loc('dlgTitle', 'Title') + '</h2><p>' + _loc('dlgSubtitle', 'Subtitle') + '</p>';
+		dlg.innerHTML = '<h2 id="botmon_captcha_title">' + _loc('dlgTitle', 'Title') + '</h2><p>' + _loc('dlgSubtitle', 'Subtitle') + '</p>';
 
 		// Checkbox:
 		const lbl = document.createElement('label');
+		lbl.setAttribute('aria-live', 'assertive');
 		lbl.innerHTML = '<span class="confirm">' + _loc('dlgConfirm', "Confirm.") + '</span>' + 
 			'<span class="busy"></span><span class="checking">' + _loc('dlgChecking', "Checking") + '</span>' +
 			'<span class="loading">' + _loc('dlgLoading', "Loading") + '</span>' + 

lang/en/settings.php

@@ -14,4 +14,8 @@ $lang['geoiplib']			= 'Add GeoIP Information<br><small>(requires PHP module to b
 	$lang['geoiplib_o_phpgeoip']	= 'Use GeoIP Module';
 
 $lang['useCaptcha']		= 'Enable Captcha<br><small>(Experimental, read the manual first!)</small>';
+	$lang['useCaptcha_o_disabled']	= 'Disabled';
+	$lang['useCaptcha_o_blank']	= 'Show empty background';
+	$lang['useCaptcha_o_dada']	= 'Show placeholder text';
+
 	$lang['captchaSeed']	= 'Captcha Seed<br><small>(Best use a random number, e.g. <a href="https://www.browserling.com/tools/random-hex" target="_blank">here</a> )</small>';

style.less

@@ -30,6 +30,7 @@ body.botmon_captcha {
 			font-family: system-ui, sans-serif;
 			box-shadow: .25rem .25rem .5rem rgba(0,0,0,.5);
 			box-sizing: border-box;
+			z-index: 10001;
 		}
 		& * {
 			color: #EDEDF5;
@@ -112,7 +113,6 @@ body.botmon_captcha {
 		height: auto;
 		left: 0; top: 80px;
 		border-radius: 2px;
-		z-index: 10001;
 	}
 }