Represent 30 days change in the completion bar (#71)

Represent the month change inside completion bar

Authored-by: Maciej Olko <[email protected]>

Author: StanFromIreland

style.css

@@ -16,7 +16,6 @@ th {
 }
 .progress-bar {
   display: inline-block;
-  background-color: #4caf50;
   color: white;
   height: 20px;
   line-height: 20px;

template.html.jinja

@@ -35,7 +35,12 @@
     {% if project.translators.link %}</a>{% endif %}
   </td>
   <td data-label="completion">
-    <div class="progress-bar" style="width: {{ project.completion }}%;">{{ "{:.2f}".format(project.completion) }}%</div>
+    <div class="progress-bar"
+         style="width: {{ project.completion }}%;{% if project.change %}background: linear-gradient(to left, lightgreen {{ project.change * 100 / project.completion }}%, #4caf50 {{ project.change * 100 / project.completion }}%);{% else %}background-color: #4caf50;{% endif %}"
+         title="{{ '{:.2f}'.format(project.completion) }}%, {{ '{:.2f}'.format(project.change) }} percentage points last month"
+    >
+        {{ "{:.2f}".format(project.completion) }}%
+    </div>
     <div class="progress-bar-outer-label">{{ "{:.2f}".format(project.completion) }}%</div>
   </td>
 </tr>