Responsive design updates

script.js

@@ -189,7 +189,7 @@ BotMon.live = {
 		//console.info('BotMon.live.init()');
 
 		// set the title:
-		const tDiff = '(<abbr title="Coordinated Universal Time">UTC</abbr>' + (BotMon._timeDiff != '' ? `, ${BotMon._timeDiff}` : '' ) + ')';
+		const tDiff = '<abbr title="Coordinated Universal Time">UTC</abbr> ' + (BotMon._timeDiff != '' ? ` (offset: ${BotMon._timeDiff}` : '' ) + ')';
 		BotMon.live.gui.status.setTitle(`Data for <time datetime="${BotMon._datestr}">${BotMon._datestr}</time> ${tDiff}`);
 
 		// init sub-objects:
@@ -2281,10 +2281,8 @@ BotMon.live = {
 					/* add bot evaluation details: */
 					if (data._eval) {
 						dl.appendChild(make('dt', {}, "Bot evaluation:"));
-						const evalDd = make('dd');
-						const testList = make('ul',{
-							'class': 'eval'
-						});
+						const evalDd = make('dd', {'class': 'eval'});
+						const testList = make('ul');
 						data._eval.forEach( test => {
 
 							const tObj = BotMon.live.data.rules.getRuleInfo(test);

style.less

@@ -681,7 +681,7 @@
 				}
 			}
 
-			ul.eval {
+			dd.eval > ul {
 				li {
 					display: flex;
 					justify-content: space-between;
@@ -812,7 +812,7 @@
 					}
 				}
 
-				ul.eval {
+				dd.eval > ul {
 					li:nth-child(odd) {
 						background-color: #333;
 					}
@@ -843,6 +843,27 @@
 	}
 }
 /* layout overrides for narrow screens: */
+@media (max-width: 800px) {
+	#botmon__admin #botmon__today #botmon__today__visitorlists {
+		dl.visitor_details {
+			& {
+				display: block;
+				margin-top: .5rem;
+			}
+			dt {
+				margin-left: .67rem;
+				font-size: smaller;
+			}
+			dd {
+				margin-left: 1.5rem;
+			}
+			dd.pages, dd.eval {
+				margin-left: 0;
+			}
+		}
+	}
+}
+
 @media (max-width: 670px) {
 	#botmon__admin #botmon__today {
 		.botmon_bots_grid, .botmon_webmetrics_grid, .botmon_traffic_grid {