Miko/dokuwiki-plugin-botmon
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Admin content styling

Browse Source
This commit is contained in:
Sascha Leib
2025-09-01 15:42:06 +02:00
parent 4cddc6613d
commit 9bc80cc5e9
3 changed files with 101 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
admin.php
View File

@@ -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 -->';
}

40
script.js
View File

@@ -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>
`));
}
}

82
style.less
View File

@@ -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 {