mirror of
https://github.com/Icinga/icingadb-web.git
synced 2026-05-28 04:36:06 -04:00
Use sr-only to hide state labels visually
This commit is contained in:
parent
38ec7e06cb
commit
1baafc33d0
3 changed files with 17 additions and 23 deletions
|
|
@ -34,13 +34,13 @@ class PluginOutput extends HtmlString
|
|||
protected const TEXT_REPLACEMENTS = [
|
||||
"\t",
|
||||
"\n",
|
||||
'<span class="state-ball ball-size-m state-ok">[OK]</span>',
|
||||
'<span class="state-ball ball-size-m state-warning">[WARNING]</span>',
|
||||
'<span class="state-ball ball-size-m state-critical">[CRITICAL]</span>',
|
||||
'<span class="state-ball ball-size-m state-unknown">[UNKNOWN]</span>',
|
||||
'<span class="state-ball ball-size-m state-up">[UP]</span>',
|
||||
'<span class="state-ball ball-size-m state-down">[DOWN]</span>',
|
||||
'<span class="state-ball ball-size-m state-info">[INFO]</span>',
|
||||
'<span class="state-ball ball-size-m state-ok"><i class="sr-only">[OK]</i></span>',
|
||||
'<span class="state-ball ball-size-m state-warning"><i class="sr-only">[WARNING]</i></span>',
|
||||
'<span class="state-ball ball-size-m state-critical"><i class="sr-only">[CRITICAL]</i></span>',
|
||||
'<span class="state-ball ball-size-m state-unknown"><i class="sr-only">[UNKNOWN]</i></span>',
|
||||
'<span class="state-ball ball-size-m state-up"><i class="sr-only">[UP]</i></span>',
|
||||
'<span class="state-ball ball-size-m state-down"><i class="sr-only">[DOWN]</i></span>',
|
||||
'<span class="state-ball ball-size-m state-info"><i class="sr-only">[INFO]</i></span>',
|
||||
'@@@@@@'
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -13,12 +13,6 @@
|
|||
.plugin-output {
|
||||
.monospace();
|
||||
word-break: break-word;
|
||||
|
||||
.state-ball {
|
||||
color: transparent;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
div.show-more {
|
||||
|
|
|
|||
|
|
@ -38,9 +38,9 @@ class PluginOutputTest extends TestCase
|
|||
INPUT;
|
||||
|
||||
$expectedOutput = <<<'EXPECTED_OUTPUT'
|
||||
<span class="state-ball ball-size-m state-ok">[OK]</span> Dummy state
|
||||
\_ <span class="state-ball ball-size-m state-ok">[OK]</span> Fake "state"
|
||||
\_ <span class="state-ball ball-size-m state-warning">[WARNING]</span> Fake state again
|
||||
<span class="state-ball ball-size-m state-ok"><i class="sr-only">[OK]</i></span> Dummy state
|
||||
\_ <span class="state-ball ball-size-m state-ok"><i class="sr-only">[OK]</i></span> Fake "state"
|
||||
\_ <span class="state-ball ball-size-m state-warning"><i class="sr-only">[WARNING]</i></span> Fake state again
|
||||
EXPECTED_OUTPUT;
|
||||
|
||||
$this->checkOutput($expectedOutput, $input);
|
||||
|
|
@ -55,7 +55,7 @@ EXPECTED_OUTPUT;
|
|||
INPUT;
|
||||
|
||||
$expectedOutput = <<<'EXPECTED_OUTPUT'
|
||||
<span class="state-ball ball-size-m state-ok">[OK]</span> Dummy
|
||||
<span class="state-ball ball-size-m state-ok"><i class="sr-only">[OK]</i></span> Dummy
|
||||
EXPECTED_OUTPUT;
|
||||
|
||||
$this->checkOutput($expectedOutput, $input, 10);
|
||||
|
|
@ -86,9 +86,9 @@ INPUT;
|
|||
|
||||
$expectedOutput = <<<'EXPECTED_OUTPUT'
|
||||
Hello <h3>World</h3>, this "is" a <strong>test</strong>.
|
||||
<span class="state-ball ball-size-m state-ok">[OK]</span> Dummy state
|
||||
\_ <span class="state-ball ball-size-m state-ok">[OK]</span> Fake "state"
|
||||
\_ <span class="state-ball ball-size-m state-warning">[WARNING]</span> Fake state again
|
||||
<span class="state-ball ball-size-m state-ok"><i class="sr-only">[OK]</i></span> Dummy state
|
||||
\_ <span class="state-ball ball-size-m state-ok"><i class="sr-only">[OK]</i></span> Fake "state"
|
||||
\_ <span class="state-ball ball-size-m state-warning"><i class="sr-only">[WARNING]</i></span> Fake state again
|
||||
text <span> ends </span> here
|
||||
EXPECTED_OUTPUT;
|
||||
|
||||
|
|
@ -106,7 +106,7 @@ INPUT;
|
|||
|
||||
$expectedOutput = <<<'EXPECTED_OUTPUT'
|
||||
Hello <h3>World</h3>, this "is" a <strong>test</strong>.
|
||||
<span class="state-ball ball-size-m state-ok">[OK]</span> Dummy state
|
||||
<span class="state-ball ball-size-m state-ok"><i class="sr-only">[OK]</i></span> Dummy state
|
||||
special chars: !@#$%^&*()_+{}|:"<>?`-=[]\;',​./
|
||||
text <span> ends </span> here
|
||||
EXPECTED_OUTPUT;
|
||||
|
|
@ -150,7 +150,7 @@ EXPECTED_OUTPUT;
|
|||
|
||||
$input = sprintf('[%s] Test', $s);
|
||||
$expectedOutput = sprintf(
|
||||
'<span class="state-ball ball-size-m state-%s">[%s]</span> Test',
|
||||
'<span class="state-ball ball-size-m state-%s"><i class="sr-only">[%s]</i></span> Test',
|
||||
$l,
|
||||
$s
|
||||
);
|
||||
|
|
@ -172,7 +172,7 @@ EXPECTED_OUTPUT;
|
|||
|
||||
$input = sprintf('%s [%s] Test', $dummyHtml, $s);
|
||||
$expectedOutput = sprintf(
|
||||
'%s <span class="state-ball ball-size-m state-%s">[%s]</span> Test',
|
||||
'%s <span class="state-ball ball-size-m state-%s"><i class="sr-only">[%s]</i></span> Test',
|
||||
$dummyHtml,
|
||||
$l,
|
||||
$s
|
||||
|
|
|
|||
Loading…
Reference in a new issue