[fix] bar graph and rename CSS class engine-scores -> engine-score

- drop #main_stats selector in stats.less
- 'engine-score' exists before this PR.
- untabify searx/static/themes/__common__/less/stats.less

for details see comment at: d93bec7638..1204e4f07e (r633571496)

Suggested-by: @dalf in commit 1204e4f0
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
This commit is contained in:
Markus Heiser 2021-05-17 17:56:18 +02:00
parent 3e9ad7ae0c
commit 0507e185a5
3 changed files with 42 additions and 44 deletions

View file

@ -1,24 +1,21 @@
#main_stats { .engine-stats {
table { .engine-name {
margin: 0 auto 0 0;
}
table .engine-name {
width: 20rem; width: 20rem;
} }
table .engine-scores { .engine-score {
width: 7rem; width: 7rem;
text-align: right;
} }
table .result-count { .result-count {
} }
table .response-time { .response-time {
} }
table .engine-reliability { .engine-reliability {
text-align: right; text-align: right;
} }
@ -42,15 +39,16 @@
} }
} }
@media screen and (max-width: 75em) {
}
.bar-chart-value { .bar-chart-value {
width: 3em; width: 3em;
display: inline-block;
text-align: right;
padding-right: 0.5rem;
} }
.bar-chart-graph { .bar-chart-graph {
width: 300px; width: calc(100% - 5rem);
display: inline-block;
} }
.bar-chart-bar { .bar-chart-bar {

View file

@ -27,7 +27,7 @@
<table class="table table-hover table-condensed table-striped engine-stats"> <table class="table table-hover table-condensed table-striped engine-stats">
<tr> <tr>
<th scope="col" class="engine-name">{{ th_sort('name', _("Engine name")) }}</th> <th scope="col" class="engine-name">{{ th_sort('name', _("Engine name")) }}</th>
<th scope="col" class="engine-scores">{{ th_sort('score', _('Scores')) }}</th> <th scope="col" class="engine-score">{{ th_sort('score', _('Scores')) }}</th>
<th scope="col" class="result-count">{{ th_sort('result_count', _('Result count')) }}</th> <th scope="col" class="result-count">{{ th_sort('result_count', _('Result count')) }}</th>
<th scope="col" class="response-time">{{ th_sort('time', _('Response time')) }}</th> <th scope="col" class="response-time">{{ th_sort('time', _('Response time')) }}</th>
<th scope="col" class="engine-reliability">{{ th_sort('reliability', _('Reliability')) }}</th> <th scope="col" class="engine-reliability">{{ th_sort('reliability', _('Reliability')) }}</th>
@ -35,7 +35,7 @@
{% for engine_stat in engine_stats.get('time', []) %} {% for engine_stat in engine_stats.get('time', []) %}
<tr> <tr>
<td class="engine-name"><a href="{{ url_for('stats', engine=engine_stat.name|e) }}">{{ engine_stat.name }}</a></td> <td class="engine-name"><a href="{{ url_for('stats', engine=engine_stat.name|e) }}">{{ engine_stat.name }}</a></td>
<td class="engine-scores"> <td class="engine-score">
{%- if engine_stat.score -%} {%- if engine_stat.score -%}
<span aria-labelledby="{{engine_stat.name}}_score" >{{ engine_stat.score|round(1) }}</span> <span aria-labelledby="{{engine_stat.name}}_score" >{{ engine_stat.score|round(1) }}</span>
<div class="engine-tooltip text-left" role="tooltip" id="{{engine_stat.name}}_score">{{- "" -}} <div class="engine-tooltip text-left" role="tooltip" id="{{engine_stat.name}}_score">{{- "" -}}
@ -46,7 +46,7 @@
<td class="result-count"> <td class="result-count">
{%- if engine_stat.result_count -%} {%- if engine_stat.result_count -%}
<div class="bar-chart-value">{{- engine_stat.result_count | int -}}</div>{{- "" -}} <div class="bar-chart-value">{{- engine_stat.result_count | int -}}</div>{{- "" -}}
<div class="bar-chart-graph" aria-hidden="true"> <div class="bar-chart-graph" aria-hidden="true">{{- "" -}}
<div class="bar-chart-bar bar{{ (100 * engine_stat.result_count / engine_stats.max_result_count)|round }}"></div>{{- "" -}} <div class="bar-chart-bar bar{{ (100 * engine_stat.result_count / engine_stats.max_result_count)|round }}"></div>{{- "" -}}
</div> </div>
{%- endif -%} {%- endif -%}
@ -54,7 +54,7 @@
<td class="response-time"> <td class="response-time">
{%- if engine_stat.total -%} {%- if engine_stat.total -%}
<div class="bar-chart-value">{{- engine_stat.total | round(1) -}}</div>{{- "" -}} <div class="bar-chart-value">{{- engine_stat.total | round(1) -}}</div>{{- "" -}}
<div class="bar-chart-graph" aria-labelledby="{{engine_stat.name}}_time" aria-hidden="true"> <div class="bar-chart-graph" aria-labelledby="{{engine_stat.name}}_time" aria-hidden="true">{{- "" -}}
<div class="bar-chart-serie1 bar{{ (100 * engine_stat.http / engine_stats.max_time)|round }}"></div>{{- "" -}} <div class="bar-chart-serie1 bar{{ (100 * engine_stat.http / engine_stats.max_time)|round }}"></div>{{- "" -}}
<div class="bar-chart-serie2 bar{{ (100 * engine_stat.processing / engine_stats.max_time)|round }}"></div>{{- "" -}} <div class="bar-chart-serie2 bar{{ (100 * engine_stat.processing / engine_stats.max_time)|round }}"></div>{{- "" -}}
</div> </div>

View file

@ -26,7 +26,7 @@
<table class="engine-stats"> <table class="engine-stats">
<tr> <tr>
<th scope="col" class="engine-name">{{ th_sort('name', _("Engine name")) }}</th> <th scope="col" class="engine-name">{{ th_sort('name', _("Engine name")) }}</th>
<th scope="col" class="engine-scores">{{ th_sort('score', _('Scores')) }}</th> <th scope="col" class="engine-score">{{ th_sort('score', _('Scores')) }}</th>
<th scope="col" class="result-count">{{ th_sort('result_count', _('Result count')) }}</th> <th scope="col" class="result-count">{{ th_sort('result_count', _('Result count')) }}</th>
<th scope="col" class="response-time">{{ th_sort('time', _('Response time')) }}</th> <th scope="col" class="response-time">{{ th_sort('time', _('Response time')) }}</th>
<th scope="col" class="engine-reliability">{{ th_sort('reliability', _('Reliability')) }}</th> <th scope="col" class="engine-reliability">{{ th_sort('reliability', _('Reliability')) }}</th>
@ -34,7 +34,7 @@
{% for engine_stat in engine_stats.get('time', []) %} {% for engine_stat in engine_stats.get('time', []) %}
<tr> <tr>
<td class="engine-name"><a href="{{ url_for('stats', engine=engine_stat.name|e) }}">{{ engine_stat.name }}</a></td> <td class="engine-name"><a href="{{ url_for('stats', engine=engine_stat.name|e) }}">{{ engine_stat.name }}</a></td>
<td class="engine-scores"> <td class="engine-score">
{% if engine_stat.score %} {% if engine_stat.score %}
<span aria-labelledby="{{engine_stat.name}}_score" >{{ engine_stat.score|round(1) }}</span> <span aria-labelledby="{{engine_stat.name}}_score" >{{ engine_stat.score|round(1) }}</span>
<div class="engine-tooltip" role="tooltip" id="{{engine_stat.name}}_score">{{- "" -}} <div class="engine-tooltip" role="tooltip" id="{{engine_stat.name}}_score">{{- "" -}}