fix(report): traffic light flexbox on small screens

ing-bank · May 31, 2022 · 9757ea7 · 9757ea7
1 parent aa4eb10
commit 9757ea7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 11 deletions.
diff --git a/popmon/visualization/templates/aggregated-overview.html b/popmon/visualization/templates/aggregated-overview.html
@@ -3,15 +3,17 @@
   <tr>
       <td width="20%" style="text-align:center;"><a class="table-item" href="#" data-feature="{{ feature }}">{{ feature }}</a></td>
       <td width="80%">
+          <div class="tl-container">
           {% for i in [2, 1, 0] %}
               {% if vals[i] > 0 %}
-                  <div style="width: calc(6% + {{ vals[i] }} / {{ vals['total'] }} * {{ 82 + 6 * vals['n_zero'] }}%)" class="{% if i == 2%}red{%elif i == 1%}yellow{%else%}green{%endif%}">
+                  <div style="width: calc({{ vals[i] }} / {{ vals['total'] }} * 100%)" class="tl-bar {% if i == 2%}red{%elif i == 1%}yellow{%else%}green{%endif%}">
                       {{ vals[i] }} ({{ "%d" % (vals[i] / (vals["total"] * 0.01))}}%)
                   </div>
               {% else %}
                   <div style="width: 0%" class="white">&nbsp;</div>
               {% endif %}
           {% endfor %}
+          </div>
       </td>
   </tr>
   {% endfor %}

diff --git a/popmon/visualization/templates/assets/css/custom-style.css b/popmon/visualization/templates/assets/css/custom-style.css
@@ -61,6 +61,8 @@ table.overview{
 }
 table.overview tbody td.metric{
     white-space: nowrap;
+    min-width: max-content;
+    width: 200px;
 }
 table.overview tbody td.cell{
    border: 1px solid #333333;
@@ -91,19 +93,26 @@ table.overview tfoot td span{
 }
 
 /* overview progress bars */
-.green, .yellow, .red, .white{
-    float:left;
-    padding-top:10px;
-    padding-bottom:10px;
-    color: white;
-    text-align:center;
-}
-.green{
+.tl-bar.green{
     background-color: green;
 }
-.yellow{
+.tl-bar.yellow{
     background-color: rgba(255, 200, 0, 1.0);
 }
-.red{
+.tl-bar.red{
     background-color: rgba(255, 0, 0, 1.0);
 }
+
+.tl-bar{
+    padding-top:10px;
+    padding-bottom:10px;
+    color: white;
+    text-align:center;
+    padding-left:6px;
+    padding-right: 6px;
+    min-width: max-content;
+}
+.tl-container{
+    display: flex;
+    width: 100%;
+}