Display progress outside the progress bar when it is low (#39)

Author: m-aciek

style.css

@@ -15,21 +15,36 @@ 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-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,12 +47,31 @@
     {% 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 }}%;">{{ completion | round(2) }}%</div>
+    <div class="progress-bar-outer-label">{{ completion | round(2) }}%</div>
   </td>
 </tr>
 {% endfor %}
 </tbody>
 </table>
 <p>Last updated at {{ generation_time.strftime('%A, %d %B %Y, %X %Z') }}.</p>
 </body>
+<script>
+  function updateProgressBarVisibility() {
+    document.querySelectorAll('.progress-bar').forEach(progressBar => {
+      const textWidth = progressBar.scrollWidth;
+      const barWidth = progressBar.offsetWidth;
+
+      if (barWidth < textWidth) {
+        progressBar.classList.add('low');
+      } else {
+        progressBar.classList.remove('low');
+      }
+    });
+  }
+
+  updateProgressBarVisibility();
+
+  window.addEventListener('resize', updateProgressBarVisibility);
+</script>
 </html>