Improve checksum display (#2879)

Author: hugovk

downloads/templatetags/download_tags.py

@@ -5,6 +5,7 @@
 from django import template
 from django.core.cache import cache
 from django.utils.html import format_html
+from django.utils.safestring import mark_safe
 
 from downloads.models import Release
 
@@ -90,6 +91,31 @@ def has_sha256(files):
     return any(f.sha256_sum for f in files)
 
 
+@register.filter
+def wbr_wrap(value: str | None) -> str:
+    """
+    Insert <wbr> tags for optional line breaking, prioritising halfway break.
+
+    Uses inline-block spans for halves so the browser prefers breaking
+    at the midpoint first, then within each half if still too wide.
+    """
+    if not value:
+        return value or ""
+
+    interval = 16
+    chunks = [value[i : i + interval] for i in range(0, len(value), interval)]
+
+    # Split into two halves, each half has internal <wbr> breaks
+    midpoint = len(chunks) // 2
+    first_half = "<wbr>".join(chunks[:midpoint])
+    second_half = "<wbr>".join(chunks[midpoint:])
+
+    return mark_safe(
+        f'<span class="checksum-half">{first_half}</span><wbr>'
+        f'<span class="checksum-half">{second_half}</span>'
+    )
+
+
 @register.filter
 def sort_windows(files):
     if not files:

static/sass/style.css

@@ -1899,6 +1899,10 @@ table th, table td {
     border-left: none; }
 table tfoot {
   border-top: 1px solid #dddddd; }
+table .checksum {
+  font-size: 0.85em; }
+  table .checksum .checksum-half {
+    display: inline-block; }
 
 .row-title {
   border-top: 5px solid #d4dbe1;

static/sass/style.scss

@@ -1012,6 +1012,12 @@ table {
     }
 
     tfoot { border-top: 1px solid $grey-lighterer; }
+
+    .checksum {
+        font-size: 0.85em;
+
+        .checksum-half { display: inline-block; }
+    }
 }
 
 .documentation-help { }

templates/downloads/release_detail.html

@@ -8,6 +8,7 @@
 {% load has_sha256 from download_tags %}
 {% load sort_windows from download_tags %}
 {% load get_eol_info from download_tags %}
+{% load wbr_wrap from download_tags %}
 
 {% block body_attributes %}class="python downloads"{% endblock %}
 
@@ -126,9 +127,9 @@ <h3>{{ f.os.name }}</h3>
                 <td>{% if f.gpg_signature_file %}<a href="{{ f.gpg_signature_file }}">SIG</a>{% endif %}</td>
                 {% endif %}
                 {% if release_files|has_sha256 %}
-                <td>{{ f.sha256_sum }}</td>
+                <td><code class="checksum">{{ f.sha256_sum|wbr_wrap }}</code></td>
                 {% elif release_files|has_md5 %}
-                <td>{{ f.md5_sum }}</td>
+                <td><code class="checksum">{{ f.md5_sum|wbr_wrap }}</code></td>
                 {% endif %}
               </tr>
             {% endfor %}