Explain "recent" part of the completion bar (#73)

Author: m-aciek

template.html.jinja

@@ -13,7 +13,7 @@
   <th>language</th>
   <th>switcher</th>
   <th>translators</th>
-  <th>completion</th>
+  <th>completion*</th>
 </tr>
 </thead>
 <tbody>
@@ -36,17 +36,19 @@
   </td>
   <td data-label="completion">
     <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) }}% in the last 30 days"
+         style="width: {{ project.completion }}%;{% if project.change %}background: linear-gradient(to left, #94cf96 {{ project.change * 100 / project.completion }}%, #4caf50 {{ project.change * 100 / project.completion }}%);{% else %}background-color: #4caf50;{% endif %}"
     >
-        {{ "{:.2f}".format(project.completion) }}%
+        {{ '{:.2f}%'.format(project.completion) }} {% if project.change > 0 %}({{ '{:+.2f}%'.format(project.change) }}){% endif %}
+    </div>
+    <div class="progress-bar-outer-label">
+        {{ '{:.2f}%'.format(project.completion) }} {% if project.change > 0 %}({{ '{:+.2f}%'.format(project.change) }}){% endif %}
     </div>
-    <div class="progress-bar-outer-label">{{ "{:.2f}".format(project.completion) }}%</div>
   </td>
 </tr>
 {% endfor %}
 </tbody>
 </table>
+<p>* the number in parentheses shows change in the last 30 days, included in the total completion</p>
 <p>For more information about translations, see the <a href="https://devguide.python.org/documentation/translating/" target="_blank">Python Developer’s Guide</a>.</p>
 <p>Last updated at {{ generation_time.strftime('%A, %-d %B %Y, %-H:%M:%S %Z') }} (in {{ duration // 60 }}:{{ "{:02}".format(duration % 60) }} minutes).</p>
 </body>