[mod] oscar: /preferences , engines tab: report engine times

* display the median time instead of the average.
* add a "Reliability" column (sum up the metrics and the checker results).
* the "selected language", "SafeSearch", "Time range" values are displayed as "broken" when the checker tests fail.

1 files changed, 62 insertions, 2 deletions

diff --git a/searx/static/themes/oscar/src/less/logicodev/preferences.less b/searx/static/themes/oscar/src/less/logicodev/preferences.less
index ccd0b0249..32e230413 100644
--- a/searx/static/themes/oscar/src/less/logicodev/preferences.less
+++ b/searx/static/themes/oscar/src/less/logicodev/preferences.less
@@ -20,12 +20,72 @@ input.cursor-text {
     padding: 0.5rem 1rem;
     margin: 0rem 0 0 2rem;
     border: 1px solid #ddd;
+    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.1);
     background: white;
     font-size: 14px;
     font-weight: normal;
     z-index: 1000000; 
 }
 
-th:hover .engine-tooltip, .engine-tooltip:hover {
+td:hover .engine-tooltip, th:hover .engine-tooltip, .engine-tooltip:hover {
     display: inline-block;
-}
\ No newline at end of file
+}
+
+/* stacked-bar-chart */
+.stacked-bar-chart {
+    margin: 0;
+    padding: 0 0.125rem 0 3rem;
+    width: 100%;
+    width: -moz-available;
+    width: -webkit-fill-available;
+    width: fill;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    flex-grow: 1;
+    align-items: center;
+    display: inline-flex;
+}
+
+.stacked-bar-chart-value {
+    width: 3rem;
+    display: inline-block;
+    position: absolute;
+    padding: 0 0.5rem;   
+    text-align: right;
+}
+
+.stacked-bar-chart-base {
+    display:flex;
+    flex-shrink: 0;
+    flex-grow: 0;
+    flex-basis: unset;
+}
+
+.stacked-bar-chart-median {
+    .stacked-bar-chart-base();
+    background: @stacked-bar-chart;
+    border: 1px solid fade(@stacked-bar-chart, 90%);
+    padding: 0.3rem 0;
+}
+
+.stacked-bar-chart-rate80 {
+    .stacked-bar-chart-base();
+    background: transparent;
+    border: 1px solid fade(@stacked-bar-chart, 30%);
+    padding: 0.3rem 0;
+}
+
+.stacked-bar-chart-rate95 {
+    .stacked-bar-chart-base();
+    background: transparent;
+    border-bottom: 1px dotted fade(@stacked-bar-chart, 50%);
+    padding: 0;
+}
+
+.stacked-bar-chart-rate100 {
+    .stacked-bar-chart-base();
+    background: transparent;
+    border-left: 1px solid fade(@stacked-bar-chart, 90%);
+    padding: 0.4rem 0;
+    width: 1px;
+}