[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: https://github.com/searxng/searxng/pull/81/files/d93bec7638908cae64530727d4e1539ae10bd144..1204e4f07e932029d66b4674a3474918228459a6#r633571496

Suggested-by: @dalf in commit 1204e4f0
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

searx/static/themes/__common__/less/stats.less

@@ -1,56 +1,54 @@
-#main_stats {
+.engine-stats {
 
-    table {
-	margin: 0 auto 0 0;
+    .engine-name {
+        width: 20rem;
     }
 
-    table .engine-name {
-	width: 20rem;
+    .engine-score {
+        width: 7rem;
+        text-align: right;
     }
 
-    table .engine-scores {
-	width: 7rem;
+    .result-count {
     }
 
-    table .result-count {
+    .response-time {
     }
 
-    table .response-time {
-    }
-
-    table .engine-reliability {
-	text-align: right;
+    .engine-reliability {
+        text-align: right;
     }
 
     table.engine-error {
-	max-width: 1280px;
-	margin: 1rem;
-	border: 1px solid gray;
+        max-width: 1280px;
+        margin: 1rem;
+        border: 1px solid gray;
     }
 
     table.engine-error th.engine-error-type,
     table.engine-error td.engine-error-type,
     failed-test {
-	width: 10rem;
+        width: 10rem;
     }
 
     table.engine-error span.log_parameters
     {
-	border-right: 1px solid gray;
-	padding: 0 1rem 0 0;
-	margin: 0 0 0 0.5rem;
+        border-right: 1px solid gray;
+        padding: 0 1rem 0 0;
+        margin: 0 0 0 0.5rem;
     }
 }
 
-@media screen and (max-width: 75em) {
-}
-
 .bar-chart-value {
     width: 3em;
+    display: inline-block;
+    text-align: right;
+    padding-right: 0.5rem;
 }
 
 .bar-chart-graph {
-    width: 300px;
+    width: calc(100% - 5rem);
+    display: inline-block;
 }
 
 .bar-chart-bar {
@@ -78,8 +76,8 @@
 .generate-bar(100);
 
 .generate-bar(@n, @i: 1) when (@i =< @n) {
-  .bar@{i} {
-    width: (@i * 100% / @n);
-  }
-  .generate-bar(@n, (@i + 1));
+    .bar@{i} {
+        width: (@i * 100% / @n);
+    }
+    .generate-bar(@n, (@i + 1));
 }

searx/templates/oscar/stats.html

@@ -27,7 +27,7 @@
                     <table class="table table-hover table-condensed table-striped engine-stats">
                         <tr>
                             <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="response-time">{{ th_sort('time', _('Response time')) }}</th>
                             <th scope="col" class="engine-reliability">{{ th_sort('reliability', _('Reliability')) }}</th>
@@ -35,7 +35,7 @@
                         {% for engine_stat in engine_stats.get('time', []) %}
                         <tr>
                             <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 -%}
                                 <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">{{- "" -}}
@@ -46,18 +46,18 @@
                             <td class="result-count">
                                 {%- if engine_stat.result_count -%}
                                 <div class="bar-chart-value">{{- engine_stat.result_count | int -}}</div>{{- "" -}}
-				<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>
+                                <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>
                                 {%- endif -%}
                             </td>
                             <td class="response-time">
                                 {%- if engine_stat.total -%}
                                 <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-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>
+                                <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-serie2 bar{{ (100 * engine_stat.processing / engine_stats.max_time)|round }}"></div>{{- "" -}}
+                                </div>
                                 <div class="engine-tooltip text-left" role="tooltip" id="{{engine_stat.name}}_time">{{- "" -}}
                                     <table class="table table-striped">
                                         <tr>

searx/templates/simple/stats.html

@@ -26,7 +26,7 @@
 <table class="engine-stats">
     <tr>
         <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="response-time">{{ th_sort('time', _('Response time')) }}</th>
         <th scope="col" class="engine-reliability">{{ th_sort('reliability', _('Reliability')) }}</th>
@@ -34,7 +34,7 @@
     {% for engine_stat in engine_stats.get('time', []) %}
     <tr>
         <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 %}
             <span aria-labelledby="{{engine_stat.name}}_score" >{{ engine_stat.score|round(1) }}</span>
             <div class="engine-tooltip" role="tooltip" id="{{engine_stat.name}}_score">{{- "" -}}
@@ -46,19 +46,19 @@
             {%- if engine_stat.result_count -%}
 
             <div class="bar-chart-value">{{- engine_stat.result_count | int -}}</div>{{- "" -}}
-	    <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>
+        <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>
             {%- endif -%}
         </td>
         <td class="response-time">
             {%- if engine_stat.total -%}
 
             <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-serie2 bar{{ (100 * engine_stat.processing / engine_stats.max_time)|round }}"></div>{{- "" -}}
-	    </div>
+        </div>
             <div class="engine-tooltip" role="tooltip" id="{{engine_stat.name}}_time">{{- "" -}}
                 <table>
                     <tr>