Display progress out of progress bar when low

Author: m-aciek

style.css

@@ -15,16 +15,21 @@ th {
   background-color: #f4f4f4;
 }
 .progress-bar {
+  display: inline-block;
   background-color: #4caf50;
   color: white;
   height: 20px;
   line-height: 20px;
   text-align: center;
   overflow: hidden;
   white-space: nowrap;
-  min-width: 50px;
   box-sizing: border-box;
 }
+.progress-bar.appendix {
+  background-color: inherit;
+  color: inherit;
+  padding-left: .5em;
+}
 td[data-label="visitors"], td[data-label="translators"] {
   text-align: right;
 }

template.html.jinja

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