Improve the display of dates (#6662)

Author: nlhkabu

warehouse/static/js/warehouse/controllers/localized_time_controller.js

@@ -13,6 +13,7 @@
  */
 import { Controller } from "stimulus";
 import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
+import format from "date-fns/format";
 
 export default class extends Controller {
 
@@ -29,20 +30,25 @@ export default class extends Controller {
   connect() {
     const timestamp = this.element.getAttribute("datetime");
     let localTime = this.getLocalTimeFromTimestamp(timestamp);
+    let isoDate = format(localTime, "YYYY-MM-DD HH:mm:ss");
     let startOfDay = new Date();
     startOfDay.setUTCHours(0, 0, 0, 0);
-    if (this.data.get("relative") == "true" && localTime > startOfDay) {
+
+    let isRelative = this.data.get("relative") == "true";
+    let showTime = this.data.get("show-time") == "true";
+    const options = { month: "short", day: "numeric", year: "numeric" };
+
+    if (isRelative && localTime > startOfDay) {
       this.element.innerText = distanceInWordsToNow(localTime, {includeSeconds: true}) + " ago";
     } else {
-      const options = { month: "short", day: "numeric", year: "numeric" };
-      this.element.innerText = localTime.toLocaleDateString("en-US", options);
-    }
-
-    if(this.element.classList.contains("tooltipped")) {
-      const options = { hour12: false, timeZoneName: "short", second: "2-digit", minute: "2-digit", hour: "2-digit", month: "short", day: "numeric", year: "numeric" };
-      this.element.setAttribute("aria-label", localTime.toLocaleDateString("en-US", options));
-      this.element.setAttribute("data-original-label", localTime.toLocaleDateString("en-US", options));
+      if (showTime) {
+        this.element.innerText = localTime.toLocaleTimeString("en-US", options);
+      } else {
+        this.element.innerText = localTime.toLocaleDateString("en-US", options);
+      }
     }
 
+    this.element.setAttribute("title", isoDate);
+    this.element.setAttribute("aria-label", isoDate);
   }
 }

warehouse/templates/accounts/profile.html

@@ -36,7 +36,7 @@ <h1 class="author-profile__name">{{ user.name }}</h1>
             <p>
               <i class="fa fa-calendar-alt" aria-hidden="true"></i>
               <span class="sr-only">{% trans %}Date joined{% endtrans %}</span>
-              &nbsp;&nbsp;{% trans start_date=user.date_joined|format_date() %}Joined on {{ start_date }}{% endtrans %}
+              &nbsp;&nbsp;{% trans start_date=humanize(user.date_joined) %}Joined on {{ start_date }}{% endtrans %}
             </p>
             {% endif %}
           </div>
@@ -65,7 +65,7 @@ <h2>
         <a class="package-snippet" href="{{ request.route_path('packaging.project', name=project.normalized_name) }}">
           <h3 class="package-snippet__title">{{ project.name }}</h3>
           <p class="package-snippet__meta">
-            {% trans release_date=project.releases[0].created|format_date() %}Last released on {{ release_date }}{% endtrans %}
+            {% trans release_date=humanize(project.releases[0].created) %}Last released on {{ release_date }}{% endtrans %}
           </p>
           <p class="package-snippet__description">{{ project.releases[0].summary }}</p>
         </a>

warehouse/templates/base.html

@@ -12,14 +12,8 @@
  # limitations under the License.
 -#}
 
-{% macro humanize(timestamp) -%}
-<time class="-js-relative-time" datetime="{{ timestamp|format_datetime('yyyy-MM-ddTHH:mm:ssZ') }}" data-controller="localized-time" data-localized-time-relative="true">
-  {{ timestamp|format_date()}}
-</time>
-{%- endmacro %}
-
-{% macro localize(timestamp) -%}
-<time class="tooltipped tooltipped-s -js-relative-time" datetime="{{ timestamp|format_datetime('yyyy-MM-ddTHH:mm:ssZ') }}" data-controller="localized-time">
+{% macro humanize(timestamp, relative="true", time="false") -%}
+<time datetime="{{ timestamp|format_datetime('yyyy-MM-ddTHH:mm:ssZ') }}" data-controller="localized-time" data-localized-time-relative="{{ relative }}" data-localized-time-show-time="{{ time }}">
   {{ timestamp|format_date()}}
 </time>
 {%- endmacro %}

warehouse/templates/manage/account.html

@@ -171,7 +171,7 @@
       {% endif %}
     </td>
     <td>
-      <span class="table__mobile-label">{% trans %}Created on{% endtrans %}</span>
+      <span class="table__mobile-label">{% trans %}Created{% endtrans %}</span>
       {{ humanize(macaroon.created) }}
     </td>
     <td>
@@ -272,7 +272,9 @@ <h2 class="sub-title">{% trans %}Account details{% endtrans %}</h2>
       <p class="form-group__text">{{ user.username }}</p>
       {% if user.date_joined %}
       <span class="form-group__label">{% trans %}Date Joined{% endtrans %}</span>
-      <p class="form-group__text"> {{ user.date_joined|format_date() }}</p>
+      <p class="form-group__text">
+        {{ humanize(user.date_joined) }}
+      </p>
       {% endif %}
       <p class="form-group__help-text">
         {% trans trimmed href=request.route_path('accounts.profile', username=user.username) %}
@@ -631,7 +633,7 @@ <h2>{% trans %}Security history{% endtrans %} <span class="badge badge--warning"
           <td>{{ event_summary(event) }}</td>
           <td>
             <span class="table__mobile-label">{% trans %}Date / time{% endtrans %}</span>
-            {{ humanize(event.time) }}
+            {{ humanize(event.time, time="true") }}
           </td>
           <td>
             <span class="table__mobile-label">{% trans %}IP address{% endtrans %}</span>

warehouse/templates/manage/history.html

@@ -96,7 +96,7 @@ <h2>{% trans %}Security history{% endtrans %} <span class="badge badge--warning"
         <td>{{ event_summary(event) }}</td>
         <td>
           <span class="table__mobile-label">{% trans %}Date / time{% endtrans %}</span>
-          {{ humanize(event.time) }}
+          {{ humanize(event.time, time="true") }}
         </td>
         <td>
           <span class="table__mobile-label">{% trans %}IP address{% endtrans %}</span>

warehouse/templates/manage/journal.html

@@ -46,7 +46,7 @@ <h2>{% trans %}Project journal{% endtrans %}</h2>
         </th>
         <td>
           <span class="table__mobile-label">{% trans %}Date{% endtrans %}</span>
-          {{ journal.submitted_date|format_datetime() }}
+          {{ humanize(journal.submitted_date, time="true") }}
         </td>
         <td>
           <span class="table__mobile-label">{% trans %}User{% endtrans %}</span>

warehouse/templates/manage/projects.html

@@ -33,14 +33,14 @@ <h3 class="package-snippet__title">{{ project.name }}
           </h3>
           {% if release %}
           <p class="package-snippet__meta">
-            {% trans release_date=release.created|format_date() %}Last released on {{ release_date }}{% endtrans %}
+            {% trans release_date=humanize(release.created) %}Last released on {{ release_date }}{% endtrans %}
           </p>
           <p class="package-snippet__description">
             {{ release.summary }}
           </p>
           {% else %}
           <p class="package-snippet__meta">
-            {% trans creation_date=project.created|format_date() %}Created on {{ creation_date }}{% endtrans %}
+            {% trans creation_date=humanize(project.created) %}Created on {{ creation_date }}{% endtrans %}
           </p>
           {% endif %}
         </div>

warehouse/templates/manage/release.html

@@ -59,7 +59,7 @@ <h2 class="heading-wsubtitle__heading">{% trans version=release.version %}Releas
         </td>
         <td>
           <span class="table__mobile-label">{% trans %}Upload date{% endtrans %}</span>
-          {{ file.upload_time|format_date() }}
+          {{ humanize(file.upload_time) }}
         </td>
         <td class="table__align-right">
           <nav class="dropdown dropdown--with-icons">

warehouse/templates/packaging/detail.html

@@ -120,7 +120,9 @@ <h1 class="package-header__name">
         <span>{% trans %}Latest version{% endtrans %}</span>
       </a>
       {% endif %}
-      <p class="package-header__date">{% trans release_date=humanize(release.created) %}Last released: {{ release_date }}{% endtrans %}</p>
+      <p class="package-header__date">
+        {% trans release_date=humanize(release.created) %}Last released: {{ release_date }}{% endtrans %}
+      </p>
     </div>
   </div>
 </div>
@@ -262,7 +264,7 @@ <h2 class="page-title split-layout">
                   {{ hversion.version }} {% if hversion.is_prerelease %}<span class="badge badge--warning release__version-badge">{% trans %}pre-release{% endtrans %}</span>{% endif %}
                 </p>
                 <p class="release__version-date">
-                  {{ localize(hversion.created) }}
+                  {{ humanize(hversion.created) }}
                 </p>
               </a>
             </div>
@@ -311,7 +313,7 @@ <h2 class="page-title">{% trans %}Download files{% endtrans %}</h2>
                   </td>
                   <td>
                     <span class="table__mobile-label">{% trans %}Upload date{% endtrans %}</span>
-                    {{ localize(file.upload_time) }}
+                    {{ humanize(file.upload_time) }}
                   </td>
                   <td class="table__align-right">
                     <span class="table__mobile-label table__mobile-label--hashes">{% trans %}Hashes{% endtrans %}</span>