Add script, add progress-bar-outer-label class

Author: m-aciek

style.css

@@ -25,16 +25,26 @@ th {
   white-space: nowrap;
   box-sizing: border-box;
 }
-.progress-bar.appendix {
-  background-color: inherit;
-  color: inherit;
+.progress-bar-outer-label {
+  display: none;
   padding-left: .5em;
+  height: 20px;
+  line-height: 20px;
+  overflow: hidden;
+}
+.progress-bar.low {
+  color: transparent;
+  user-select: none;
+}
+.progress-bar.low + .progress-bar-outer-label {
+  display: inline-block;
 }
 td[data-label="visitors"], td[data-label="translators"] {
   text-align: right;
 }
 td[data-label="completion"] {
   width: 100%;
+  line-height: 0;
 }
 @media screen and (max-width: 600px) {
   table, thead, tbody, th, td, tr {

template.html.jinja

@@ -47,8 +47,8 @@
     {% if translators_link %}</a>{% endif %}
   </td>
   <td data-label="completion">
-    <div class="progress-bar" style="width: {{ completion | round(2) }}%;">{% if completion >= 5 %}{{ completion | round(2) }}%{% endif %}</div>
-    {% if completion < 5 %}<div class="progress-bar appendix">{{ completion | round(2) }}%</div>{% endif %}
+    <div class="progress-bar" style="width: {{ completion }}%;">{{ completion | round(2) }}%</div>
+    <div class="progress-bar-outer-label">{{ completion | round(2) }}%</div>
   </td>
 </tr>
 {% endfor %}