diff --git a/admin.css b/admin.css index 8b15ce9..9acddbb 100644 --- a/admin.css +++ b/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; } +} \ No newline at end of file diff --git a/admin.js b/admin.js index a684ebc..eea32a0 100644 --- a/admin.js +++ b/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 */ diff --git a/admin.php b/admin.php index 2f30ef3..7a3c3a0 100644 --- a/admin.php +++ b/admin.php @@ -107,7 +107,7 @@ class admin_plugin_botmon extends AdminPlugin { echo '' . NL; echo ''; echo ''; diff --git a/captcha.js b/captcha.js index fdbcbc8..f95ddcd 100644 --- a/captcha.js +++ b/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 = '

' + _loc('dlgTitle', 'Title') + '

' + _loc('dlgSubtitle', 'Subtitle') + '

'; + dlg.innerHTML = '

' + _loc('dlgTitle', 'Title') + '

' + _loc('dlgSubtitle', 'Subtitle') + '

'; // Checkbox: const lbl = document.createElement('label'); + lbl.setAttribute('aria-live', 'assertive'); lbl.innerHTML = '' + _loc('dlgConfirm', "Confirm.") + '' + '' + _loc('dlgChecking', "Checking") + '' + '' + _loc('dlgLoading', "Loading") + '' + diff --git a/lang/en/settings.php b/lang/en/settings.php index d42003b..44d8c35 100644 --- a/lang/en/settings.php +++ b/lang/en/settings.php @@ -14,4 +14,8 @@ $lang['geoiplib'] = 'Add GeoIP Information
(requires PHP module to b $lang['geoiplib_o_phpgeoip'] = 'Use GeoIP Module'; $lang['useCaptcha'] = 'Enable Captcha
(Experimental, read the manual first!)'; -$lang['captchaSeed'] = 'Captcha Seed
(Best use a random number, e.g. here )'; + $lang['useCaptcha_o_disabled'] = 'Disabled'; + $lang['useCaptcha_o_blank'] = 'Show empty background'; + $lang['useCaptcha_o_dada'] = 'Show placeholder text'; + + $lang['captchaSeed'] = 'Captcha Seed
(Best use a random number, e.g. here )'; diff --git a/style.less b/style.less index fb29653..593404c 100644 --- a/style.less +++ b/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; } }