From 57b72a8e53aca6babb1ef946e08a52227f88cecd Mon Sep 17 00:00:00 2001
From: Matt Westcott <matthew@torchbox.com>
Date: Thu, 4 Apr 2019 11:57:24 +0100
Subject: [PATCH] Add consistent whitespace around sortable table headings
(#5190)
Labels for sortable headings need whitespace around them in order for the arrow to be correctly positioned. In addition, some headings had the label outside of the sort link - this is now fixed too.
---
CHANGELOG.txt | 1 +
docs/releases/2.5.rst | 1 +
.../wagtailadmin/pages/revisions/list.html | 6 +++++-
.../admin/templatetags/wagtailadmin_tags.py | 3 ++-
.../sites/templates/wagtailsites/index.html | 11 +++++++----
.../templates/wagtailusers/users/list.html | 18 ++++++++++++------
6 files changed, 28 insertions(+), 12 deletions(-)
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index ed7dc68e88..2eb2088ce3 100644
--- a/CHANGELOG.txt
+++ b/CHANGELOG.txt
@@ -53,6 +53,7 @@ Changelog
* Fix: Removing rich text links / documents now also works when the text selection is backwards (Thibaud Colas)
* Fix: Prevent the rich text editor from crashing when copy-paste filtering removes all of its content (Thibaud Colas)
* Fix: Page chooser now respects custom `get_admin_display_title` methods on parent page and breadcrumb (Haydn Greatnews)
+ * Fix: Added consistent whitespace around sortable table headings (Matt Westcott)
2.4 (19.12.2018)
diff --git a/docs/releases/2.5.rst b/docs/releases/2.5.rst
index cb20a5f6b1..9e1f270f00 100644
--- a/docs/releases/2.5.rst
+++ b/docs/releases/2.5.rst
@@ -85,6 +85,7 @@ Bug fixes
* Removing rich text links / documents now also works when the text selection is backwards (Thibaud Colas)
* Prevent the rich text editor from crashing when copy-paste filtering removes all of its content (Thibaud Colas)
* Page chooser now respects custom ``get_admin_display_title`` methods on parent page and breadcrumb (Haydn Greatnews)
+ * Added consistent whitespace around sortable table headings (Matt Westcott)
Upgrade considerations
diff --git a/wagtail/admin/templates/wagtailadmin/pages/revisions/list.html b/wagtail/admin/templates/wagtailadmin/pages/revisions/list.html
index 06e32e78fd..d22554b8fb 100644
--- a/wagtail/admin/templates/wagtailadmin/pages/revisions/list.html
+++ b/wagtail/admin/templates/wagtailadmin/pages/revisions/list.html
@@ -6,7 +6,11 @@
<thead>
<tr>
- <th><a href="{% url 'wagtailadmin_pages:revisions_index' page.id %}?ordering={% if ordering == "created_at" %}-{% endif %}created_at" class="icon icon-arrow-{% if ordering == "created_at" %}up-after{% elif ordering == "-created_at" %}down-after{% else %}down-after{% endif %} {% if ordering == "created_at" or ordering == "-created_at" %}teal{% endif %}">{% trans 'Revision date' %}</a></th>
+ <th>
+ <a href="{% url 'wagtailadmin_pages:revisions_index' page.id %}?ordering={% if ordering == "created_at" %}-{% endif %}created_at" class="icon icon-arrow-{% if ordering == "created_at" %}up-after{% elif ordering == "-created_at" %}down-after{% else %}down-after{% endif %} {% if ordering == "created_at" or ordering == "-created_at" %}teal{% endif %}">
+ {% trans 'Revision date' %}
+ </a>
+ </th>
</tr>
</thead>
<tbody>
diff --git a/wagtail/admin/templatetags/wagtailadmin_tags.py b/wagtail/admin/templatetags/wagtailadmin_tags.py
index 9d060c426e..b04204eff6 100644
--- a/wagtail/admin/templatetags/wagtailadmin_tags.py
+++ b/wagtail/admin/templatetags/wagtailadmin_tags.py
@@ -331,7 +331,8 @@ def table_header_label(context, label=None, sortable=True, ordering=None, sort_c
classname = "icon icon-arrow-down-after"
return format_html(
- '<a href="{url}" class="{classname}">{label}</a>',
+ # need whitespace around label for correct positioning of arrow icon
+ '<a href="{url}" class="{classname}"> {label} </a>',
url=url, classname=classname, label=label
)
diff --git a/wagtail/sites/templates/wagtailsites/index.html b/wagtail/sites/templates/wagtailsites/index.html
index 916757f660..7ba1ca4168 100644
--- a/wagtail/sites/templates/wagtailsites/index.html
+++ b/wagtail/sites/templates/wagtailsites/index.html
@@ -8,11 +8,14 @@
<thead>
<tr>
<th class="hostname">
- {% trans "Site" %}
- {% if ordering == "site" %}
- <a href="{% url 'wagtailsites:index' %}" class="icon icon-arrow-down-after teal"></a>
+ {% if ordering == "name" %}
+ <a href="{% url 'wagtailsites:index' %}" class="icon icon-arrow-down-after teal">
+ {% trans "Site" %}
+ </a>
{% else %}
- <a href="{% url 'wagtailsites:index' %}?ordering=name" class="icon icon-arrow-down-after"></a>
+ <a href="{% url 'wagtailsites:index' %}?ordering=name" class="icon icon-arrow-down-after">
+ {% trans "Site" %}
+ </a>
{% endif %}
</th>
<th class="port">{% trans "Port" %}</th>
diff --git a/wagtail/users/templates/wagtailusers/users/list.html b/wagtail/users/templates/wagtailusers/users/list.html
index a2b037ecf7..8123ade120 100644
--- a/wagtail/users/templates/wagtailusers/users/list.html
+++ b/wagtail/users/templates/wagtailusers/users/list.html
@@ -3,19 +3,25 @@
<thead>
<tr>
<th class="name">
- {% trans "Name" %}
{% if ordering == "name" %}
- <a href="{% url 'wagtailusers_users:index' %}" class="icon icon-arrow-down-after teal"></a>
+ <a href="{% url 'wagtailusers_users:index' %}" class="icon icon-arrow-down-after teal">
+ {% trans "Name" %}
+ </a>
{% else %}
- <a href="{% url 'wagtailusers_users:index' %}?ordering=name" class="icon icon-arrow-down-after"></a>
+ <a href="{% url 'wagtailusers_users:index' %}?ordering=name" class="icon icon-arrow-down-after">
+ {% trans "Name" %}
+ </a>
{% endif %}
</th>
<th class="username">
- {% trans "Username" %}
{% if ordering == "username" %}
- <a href="{% url 'wagtailusers_users:index' %}" class="icon icon-arrow-down-after teal"></a>
+ <a href="{% url 'wagtailusers_users:index' %}" class="icon icon-arrow-down-after teal">
+ {% trans "Username" %}
+ </a>
{% else %}
- <a href="{% url 'wagtailusers_users:index' %}?ordering=username" class="icon icon-arrow-down-after"></a>
+ <a href="{% url 'wagtailusers_users:index' %}?ordering=username" class="icon icon-arrow-down-after">
+ {% trans "Username" %}
+ </a>
{% endif %}
</th>
<th class="level">{% trans "Level" %}</th>