Fix icon alignment in page listings

wagtail · Apr 19, 2024 · 9d40ca1 · 9d40ca1
1 parent 2174cf4
commit 9d40ca1
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 11 deletions.
diff --git a/client/scss/components/_listing.scss b/client/scss/components/_listing.scss
@@ -231,6 +231,7 @@ ul.listing {
       gap: theme('spacing.2');
       margin: 0;
       vertical-align: middle;
+      align-items: center;
 
       a {
         color: inherit;
@@ -242,11 +243,6 @@ ul.listing {
         }
       }
     }
-
-    .icon-folder {
-      margin: 3px 0.3em 0 0;
-      vertical-align: top;
-    }
   }
 
   .actions {

diff --git a/wagtail/admin/templates/wagtailadmin/pages/listing/_page_title_explore.html b/wagtail/admin/templates/wagtailadmin/pages/listing/_page_title_explore.html
@@ -5,7 +5,7 @@
 <div class="title-wrapper">
     {% if page.is_site_root %}
         {% if perms.wagtailcore.add_site or perms.wagtailcore.change_site or perms.wagtailcore.delete_site %}
-            <a href="{% url 'wagtailsites:index' %}" title="{% trans 'Sites menu' %}">{% icon name="site" classname="initial" %}</a>
+            <a href="{% url 'wagtailsites:index' %}" title="{% trans 'Sites menu' %}" class="w-flex w-items-center">{% icon name="site" classname="initial" %}</a>
         {% endif %}
     {% endif %}
 
@@ -17,7 +17,7 @@
         without also reading out the buttons and indicators.
     {% endcomment %}
     {% fragment as page_title %}
-        <span id="page_{{ page.pk|unlocalize|admin_urlquote }}_title">
+        <span id="page_{{ page.pk|unlocalize|admin_urlquote }}_title" class="w-flex w-items-center w-gap-2">
             {% if not page.is_site_root and not page.is_leaf %}{% icon name="folder" classname="initial" %}{% endif %}
             {{ page.get_admin_display_title }}
         </span>

diff --git a/wagtail/admin/tests/pages/test_explorer_view.py b/wagtail/admin/tests/pages/test_explorer_view.py
@@ -133,13 +133,15 @@ def test_explore_root(self):
     def test_explore_root_shows_icon(self):
         response = self.client.get(reverse("wagtailadmin_explore_root"))
         self.assertEqual(response.status_code, 200)
+        soup = self.get_soup(response.content)
 
         # Administrator (or user with add_site permission) should see the
         # sites link with its icon
-        self.assertContains(
-            response,
-            '<a href="/admin/sites/" title="Sites menu"><svg',
-        )
+        url = reverse("wagtailsites:index")
+        link = soup.select_one(f'td a[href="{url}"]')
+        self.assertIsNotNone(link)
+        icon = link.select_one("svg use[href='#icon-site']")
+        self.assertIsNotNone(icon)
 
     def test_ordering(self):
         response = self.client.get(