Comma-delimit numbers; use tabular figures in tables

app/port/templates/port/includes/port-header.html

@@ -27,7 +27,7 @@ <h2 class="mb-1">
     <span class="float-right">
         {% if is_followed %}<a href="{% url 'unfollow_port' port.name %}" class="btn btn-sm btn-light"><i class="fa fa-minus-circle"></i> Unfollow</a>
         {% else %}<a href="{% url 'follow_port' port.name %}" class="btn btn-sm btn-light"><i class="fa fa-plus"></i> Add to my watchlist</a>{% endif %}
-        <button class="btn btn-sm btn-light" disabled>{{ port.subscribers.count }}</button>
+        <button class="btn btn-sm btn-light" disabled>{{ port.subscribers.count|intcomma }}</button>
     </span>
 </h2>
 <span class="lead mb-0 mt-0">{{ port.description }}</span>

app/port/templates/port/port_basic.html

@@ -83,7 +83,7 @@ <h5 class="modal-title" id="insLabel">Reporting an issue on MacPorts Trac</h5>
                                 </button>
                             </div>
                             <div class="modal-body text-left">
-                                The MacPorts Project uses a system called Trac to file tickets to report bugs and enhancement requests. 
+                                The MacPorts Project uses a system called Trac to file tickets to report bugs and enhancement requests.
                                 Though anyone may search Trac for tickets, <strong>you must have a GitHub account</strong> in order to login to Trac to create tickets.<br><br>
                                 <div class="text-center mt-4">
                                         <a target="_blank" href="https://trac.macports.org/newticket?port={{ port.name }}" class="btn btn-primary">Report an Issue on MacPorts Trac</a>
@@ -133,19 +133,19 @@ <h4 class="text-center border-bottom">Installable ports:</h4>
             {% else %}
                 <a href="{% url 'follow_port' port.name %}" class="btn btn-light"><i class="fa fa-plus"></i> Add to my watchlist</a>
             {% endif %}
-                <button class="btn btn-light" disabled>{{ port.subscribers.count }}</button>
+                <button class="btn btn-light" disabled>{{ port.subscribers.count|intcomma }}</button>
             </span>
         </div>
         <br>
         <div>
             <table class="table table-striped lead">
                 <tr>
                     <td>Installations</td>
-                    <td>{{ count.all }}</td>
+                    <td>{{ count.all|intcomma }}</td>
                 </tr>
                  <tr>
                     <td>Requested Installations</td>
-                    <td>{{ count.requested }}</td>
+                    <td>{{ count.requested|intcomma }}</td>
                 </tr>
             </table>
         </div>

app/port/templates/port/port_details.html

@@ -84,7 +84,7 @@
             <br>
         {% with subports=port.get_subports %}
         {% if subports %}
-        <h4 class="border-bottom">Subport(s) ({{ subports.count }})</h4>
+        <h4 class="border-bottom">Subport(s) ({{ subports.count|intcomma }})</h4>
         <div class="row">
             {% for subport in subports %}
             <div class="col-3">
@@ -98,7 +98,7 @@ <h4 class="border-bottom">Subport(s) ({{ subports.count }})</h4>
             <h4 class="border-bottom">"{{ port.name }}" depends on</h4>
             {% if port.dependent_port.all.count > 0 %}
                     {% for d in port.dependent_port.all %}
-                        <h6><ins>{{ d.type }} ({{ d.dependencies.all.count }})</ins></h6>
+                        <h6><ins>{{ d.type }} ({{ d.dependencies.all.count|intcomma }})</ins></h6>
                         <div class="row mb-4">
                         {% for i in d.dependencies.all|dictsort:"name.lower" %}
                             <div class="col-3">
@@ -115,7 +115,7 @@ <h4 class="border-bottom">Ports that depend on "{{ port.name }}"</h4>
             {% if dependents|length > 0 %}
                 {% for d in dependents %}
                     <a class="btn pl-0" data-toggle="collapse" href="#d2-{{ d.type }}" role="button" aria-expanded="false" aria-controls="d2-{{ d.type }}">
-                        <ins>{{ d.type }} ({{ d.ports|length }})</ins> <i class="fa fa-chevron-circle-down"></i>
+                        <ins>{{ d.type }} ({{ d.ports|length|intcomma }})</ins> <i class="fa fa-chevron-circle-down"></i>
                     </a><br>
                     <div class="row mb-4 collapse" id="d2-{{ d.type }}">
                         {% for i in d.ports|dictsort:"0.lower" %}
@@ -145,13 +145,13 @@ <h5>Port Health:</h5>
             <div class="card bg-light p-0 mt-2">
                 <div class="card-body bg-light p-2">
                     <h6 class="text-uppercase">Installations (30 days)</h6>
-                    <h1 class="display-5 mb-0">{{count.all}}</h1>
+                    <h1 class="display-5 mb-0">{{count.all|intcomma}}</h1>
                 </div>
             </div>
             <div class="card bg-light p-0 mt-2">
                 <div class="card-body bg-light p-2">
                     <h6 class="text-uppercase">Requested Installations (30 days)</h6>
-                    <h1 class="display-5 mb-0">{{ count.requested }}</h1>
+                    <h1 class="display-5 mb-0">{{ count.requested|intcomma }}</h1>
                 </div>
             </div>
             {% if port.livecheck.result %}

app/port/templates/port/port_health.html

@@ -1,4 +1,5 @@
 {% load url_generate %}
+{% load humanize %}
 
 <ul class="list-group">
     {% for builder in builders %}
@@ -14,7 +15,7 @@
             {{ builder.natural_name }}
             </a>
             {% if latest_build.files.count > 0 %}
-                <button id="build-{{ latest_build.id }}" class="btn btn-sm btn-link text-secondary p-0 m-0 float-right loadFiles">Files ({{ latest_build.files.count }})</button>
+                <button id="build-{{ latest_build.id }}" class="btn btn-sm btn-link text-secondary p-0 m-0 float-right loadFiles">Files ({{ latest_build.files.count|intcomma }})</button>
             {% endif %}
         </li>
         {% if latest_build.files.count > 0 %}
@@ -65,4 +66,4 @@ <h5 class="modal-title">Files ({{ builder.display_name }})</h5>
         }
         $("#" + id + "-modal-body").html(ul);
     });
-</script>
+</script>

app/port/templates/port/port_stats.html

@@ -1,6 +1,7 @@
 {% extends 'layout.html' %}
 {% load static %}
 {% load url_replace %}
+{% load humanize %}
 
 {% block title %}Statistics - {{ port.name }} |{% endblock %}
 
@@ -15,7 +16,7 @@
     {% include 'port/includes/port-tabs.html' with port_name=port.name active="stats" %}
 <br>
 <form method="get" action="." class="p-2 form form-inline justify-content-center">
-    <lable for="days">Displaying statistics for <strong>{{ users_in_duration_count }} users</strong> who made submissions during:</lable>
+    <lable for="days">Displaying statistics for <strong>{{ users_in_duration_count|intcomma }} users</strong> who made submissions during:</lable>
     <select onchange="this.form.submit()" id="days" name="days" class="form-control mx-2">
     {% for i in allowed_days|slice:"1:" %}
         <option value="{{ i }}" {% if days == i %}selected{% endif %}>{{ i }} days</option>
@@ -39,11 +40,11 @@ <h3 class="text-center bg-light p-2 rounded">Statistics for selected duration</h
             <table class="table border">
                 <tr>
                     <th scope="row">Total Installations</th>
-                    <td>{{ count.all }}</td>
+                    <td>{{ count.all|intcomma }}</td>
                 </tr>
                 <tr>
                     <th scope="row">Requested Installations</th>
-                    <td>{{ count.requested }}</td>
+                    <td>{{ count.requested|intcomma }}</td>
                 </tr>
             </table>
         </div>

app/static/css/main.css

@@ -48,6 +48,10 @@ body{
   min-height: 300px !important;
 }
 
+.table, .chart {
+  font-variant-numeric: tabular-nums;
+}
+
 .tab-content > .tab-pane:not(.active),
 .pill-content > .pill-pane:not(.active) {
     display: block;

app/stats/templates/stats/port_installations_table.html

@@ -1,7 +1,9 @@
+{% load humanize %}
+
 <div id="navigation-source">
 {% if installs.has_other_pages %}
-            Page {{ installs.number }} of {{ installs.paginator.num_pages }} | Showing ports {{ installs.start_index }} to
-            {{ installs.end_index }}<br><br>
+            Page {{ installs.number|intcomma }} of {{ installs.paginator.num_pages|intcomma }} | Showing ports {{ installs.start_index|intcomma }} to
+            {{ installs.end_index|intcomma }}<br><br>
             <nav aria-label="Page navigation">
                 <ul class="pagination">
                     {% if installs.has_previous %}
@@ -54,10 +56,10 @@ <h5 class="text-center">Showing ports that match with: <i><u>{{ search_by }}</u>
             <a href="{% url 'port_detail' port.port %}">{{ port.port }}</a>
         </div>
         <div class="col-3 p-2 border-left border-bottom text-right">
-            {{ port.total_count }}
+            {{ port.total_count|intcomma }}
         </div>
         <div class="col-3 p-2 border-left border-bottom border-right text-right">
-            {{ port.req_count }}
+            {{ port.req_count|intcomma }}
         </div>
     </div>
 {% endfor %}

app/stats/templates/stats/stats.html

@@ -1,5 +1,6 @@
 {% extends 'layout.html' %}
 {% load static %}
+{% load humanize %}
 
 {% block head_scripts %}
     <script type="text/javascript" src="{% static 'js/Chart.min.js' %}"></script>
@@ -29,19 +30,19 @@
                 <tbody>
                 <tr>
                     <th scope="row">Total submissions:</th>
-                    <td class="text-right">{{ total_submissions }}</td>
+                    <td class="text-right">{{ total_submissions|intcomma }}</td>
                 </tr>
                 <tr>
                     <th scope="row">Total unique users:</th>
-                    <td class="text-right">{{ unique_users }}</td>
+                    <td class="text-right">{{ unique_users|intcomma }}</td>
                 </tr>
                 <tr>
                     <th scope="row">Unique users last week:</th>
-                    <td class="text-right">{{ last_week }}</td>
+                    <td class="text-right">{{ last_week|intcomma }}</td>
                 </tr>
                 <tr>
                     <th scope="row">Unique users this week:</th>
-                    <td class="text-right">{{ current_week }}</td>
+                    <td class="text-right">{{ current_week|intcomma }}</td>
                 </tr>
                 </tbody>
             </table>
@@ -52,7 +53,7 @@
     <br>
     {% csrf_token %}
     <form id="duration-selector" class="bg-light p-2 form form-inline justify-content-center" method="get" action="{% url 'stats' %}#duration-selector">
-        <lable for="days">Displaying statistics for <strong>{{ users_count_in_duration }} users</strong> who made submissions during:</lable>
+        <lable for="days">Displaying statistics for <strong>{{ users_count_in_duration|intcomma }} users</strong> who made submissions during:</lable>
         <select onchange="this.form.submit()" id="days" name="days" class="form-control mx-2">
             {% for i in allowed_days|slice:"1:" %}
                 <option value="{{ i }}" {% if days == i %}selected{% endif %}>{{ i }} days</option>
@@ -73,7 +74,7 @@ <h6 class="text-center p-2">
     </h6>
 
     <br>
-    <div class="contiainer full-width-chart-container">
+    <div class="container full-width-chart-container">
         <p class="text-center p-0 m-0 f14 font-weight-bold" id="macports_versions"><a href="#macports_versions">MacPorts Versions</a></p>
         <canvas id="macports_version_chart"></canvas>
         <p id="macports_version_chart_loader" class="text-secondary text-center">Loading Chart <img width="30px" src="{% static 'images/tspinner.gif' %}">
@@ -161,7 +162,7 @@ <h6 class="text-center p-2">
             return r;
         }, {});
 
-       return generateDataset(result, group, 'os_version'); 
+       return generateDataset(result, group, 'os_version');
     }
 
     async function drawOSVersionsChart() {

app/templates/account/my_ports.html

@@ -1,6 +1,7 @@
 {% extends 'account/account_layout.html' %}
 
 {% load i18n %}
+{% load humanize %}
 
 {% block account_head_scripts %}{% include 'account/style.html' %}{% endblock %}
 {% block account_title %}Maintained by me |{% endblock %}
@@ -9,8 +10,8 @@
     <h3>Ports maintained by me:</h3>
     <nav>
         <div class="nav nav-tabs" id="nav-tab" role="tablist">
-            <a class="nav-item nav-link text-dark {% if using == 'GitHub' %}active font-weight-bold{% endif %}" href="{% url 'my_ports_github' %}">Using GitHub ({{ ports_by_github_count }})</a>
-            <a class="nav-item nav-link text-dark {% if using == 'email' %}active font-weight-bold{% endif %}" href="{% url 'my_ports_email' %}">Using Email(s) ({{ ports_by_email_count }})</a>
+            <a class="nav-item nav-link text-dark {% if using == 'GitHub' %}active font-weight-bold{% endif %}" href="{% url 'my_ports_github' %}">Using GitHub ({{ ports_by_github_count|intcomma }})</a>
+            <a class="nav-item nav-link text-dark {% if using == 'email' %}active font-weight-bold{% endif %}" href="{% url 'my_ports_email' %}">Using Email(s) ({{ ports_by_email_count|intcomma }})</a>
         </div>
     </nav>
             {% if connections|length > 0 %}

app/templates/account/profile.html

@@ -1,6 +1,7 @@
 {% extends 'account/account_layout.html' %}
 
 {% load notifications_tags %}
+{% load humanize %}
 
 {% block account_head_scripts %}{% include 'account/style.html' %}{% endblock %}
 {% block account_title %}Profile |{% endblock %}
@@ -12,7 +13,7 @@ <h3>Hello, {{ user.username }}</h3>
     <hr>
 
     {% if followed_count > 0 %}
-    <p class="lead">You are following {{ followed_count }} port(s). <a href="{% url 'followed_ports' %}">View</a></p>
+    <p class="lead">You are following {{ followed_count|intcomma }} port(s). <a href="{% url 'followed_ports' %}">View</a></p>
     {% else %}
     <p class="lead">You are not following any ports. To receive notifications about changes to the
     ports that interest you, add them to your watchlist.</p>
@@ -33,7 +34,7 @@ <h6 class="text-uppercase mb-0">Connected GitHub</h6>
                             <li class="list-group-item">{{ handle }}</li>
                         {% endfor %}
                         </ul>
-                        <a href="{% url 'my_ports_github' %}" class="btn btn-sm btn-primary">View ports ({{ ports_by_github_count }})</a>
+                        <a href="{% url 'my_ports_github' %}" class="btn btn-sm btn-primary">View ports ({{ ports_by_github_count|intcomma }})</a>
                         <a href="{% url 'socialaccount_connections' %}" class="btn btn-sm btn-warning">Mange GitHub connections</a>
                     {% else %}
                         <p>You have no GitHub accounts connected. To track the ports maintained by you, please add a GitHub account.</p>
@@ -65,4 +66,4 @@ <h6 class="text-uppercase mb-0">Connected Emails</h6>
     </div>
 
 
-{% endblock %}
+{% endblock %}

app/templates/filtered_table.html

@@ -1,11 +1,13 @@
+{% load humanize %}
+
 <button class="float-right" type="button" style="color: red;" onclick="cancel_search()">Cancel Search</button>
 {% if ports.count > 0 %}
     {% if content == "Category" %}
-        <h4>Your search "{{ query }}" in category "{{ search_in }}" matched {{ ports|length }} ports.</h4>
+        <h4>Your search "{{ query }}" in category "{{ search_in }}" matched {{ ports|length|intcomma }} ports.</h4>
     {% elif content == "Maintainer" %}
-        <h4>Your search "{{ query }}" in ports maintained by "{{ search_in }}" matched {{ ports|length }} ports.</h4>
+        <h4>Your search "{{ query }}" in ports maintained by "{{ search_in }}" matched {{ ports|length|intcomma }} ports.</h4>
     {% elif content == "Variant" %}
-        <h4>Your search "{{ query }}" in variant "{{ search_in }}" matched {{ ports|length }} ports.</h4>
+        <h4>Your search "{{ query }}" in variant "{{ search_in }}" matched {{ ports|length|intcomma }} ports.</h4>
     {% else %}
         <h4>Showing results for "{{ query }}".</h4>
     {% endif %}
@@ -68,4 +70,3 @@ <h4>Showing results for "{{ query }}".</h4>
         </div>
     {% endif %}
 {% endif %}
-

app/templates/includes/basic_pagination.html

@@ -1,9 +1,10 @@
 {% load url_replace %}
+{% load humanize %}
 
-{{ items.paginator.count }} {{contents}} found
+{{ items.paginator.count|intcomma }} {{contents}} found
 {% if items.has_other_pages %}
-    <p class="f15">Page {{ items.number }} of {{ items.paginator.num_pages }} | Showing {{contents}} {{ items.start_index }} to
-        {{ items.end_index }}</p>
+    <p class="f15">Page {{ items.number|intcomma }} of {{ items.paginator.num_pages|intcomma }} | Showing {{contents}} {{ items.start_index|intcomma }} to
+        {{ items.end_index|intcomma }}</p>
     <nav aria-label="Page navigation">
         <ul class="pagination">
             {% if items.has_previous %}

app/templates/index.html

@@ -61,7 +61,7 @@ <h6 class="text-uppercase mb-0">Recently Added</h6>
                         <h6 class="text-uppercase mb-0">Active Ports</h6>
                     </div>
                     <div class="card-body px-3 py-1">
-                        <h1 class="display-6 mb-0">{{ ports_count }}</h1>
+                        <h1 class="display-6 mb-0">{{ ports_count|intcomma }}</h1>
                     </div>
                     <a href="{% url 'search' %}" class="btn btn-light">View all</a>
                 </div>

app/templates/search/search.html

@@ -2,6 +2,7 @@
 {% load static %}
 {% load highlight %}
 {% load url_replace %}
+{% load humanize %}
 
 {% block head_scripts %}
     <script type="text/javascript" src="{% static 'js/search.js' %}"></script>
@@ -35,7 +36,7 @@
                         </button>
                         {% for maintainer in facets.fields.maintainers|slice:":5" %}
                             <button class="btn btn-link p-0 m-0 btn-sm"
-                                    onclick="appendMaintainerFilter('{{ maintainer.0 }}');$('#super-submit').click();">{{ maintainer.0 }}({{ maintainer.1 }})
+                                    onclick="appendMaintainerFilter('{{ maintainer.0 }}');$('#super-submit').click();">{{ maintainer.0 }}({{ maintainer.1|intcomma }})
                             </button>
                         {% endfor %}
                     </div>
@@ -63,7 +64,7 @@
                         </button>
                         {% for category in facets.fields.categories|slice:":5" %}
                             <button class="btn btn-link p-0 m-0 btn-sm"
-                                    onclick="appendCategoryFilter('{{ category.0 }}');$('#super-submit').click();">{{ category.0 }}({{ category.1 }})
+                                    onclick="appendCategoryFilter('{{ category.0 }}');$('#super-submit').click();">{{ category.0 }}({{ category.1|intcomma }})
                             </button>
                         {% endfor %}
                     </div>
@@ -91,7 +92,7 @@
                         </button>
                         {% for variant in facets.fields.variants|slice:":5" %}
                             <button class="btn btn-link p-0 m-0 btn-sm"
-                                    onclick="appendVariantFilter('{{ variant.0 }}');$('#super-submit').click();">{{ variant.0 }}({{ variant.1 }})
+                                    onclick="appendVariantFilter('{{ variant.0 }}');$('#super-submit').click();">{{ variant.0 }}({{ variant.1|intcomma }})
                             </button>
                         {% endfor %}
                     </div>