Switch breadcrumbs so only the last element is bold

Stormheg · Oct 19, 2023 · 78b8b7c · 78b8b7c
1 parent ad488a5
commit 78b8b7c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/wagtail/admin/templates/wagtailadmin/shared/breadcrumbs.html b/wagtail/admin/templates/wagtailadmin/shared/breadcrumbs.html
@@ -7,7 +7,7 @@
     `classname` - Modifier classes
     `is_expanded` - Whether the breadcrumbs are always expanded or not, if True the breadcrumbs will not be collapsible
 {% endcomment %}
-{% with breadcrumb_link_classes='w-flex w-items-center w-h-full w-text-text-label w-pr-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-text-label w-h-full' breadcrumb_item_classes='w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold' icon_classes='w-w-4 w-h-4 w-ml-3' %}
+{% with breadcrumb_link_classes='w-flex w-items-center w-h-full w-text-text-label w-pr-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-text-label w-h-full' breadcrumb_item_classes='w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0' icon_classes='w-w-4 w-h-4 w-ml-3' %}
     {# Breadcrumbs are visible on mobile by default but hidden on desktop #}
     <div class="w-breadcrumbs w-flex w-flex-row w-items-center w-overflow-x-auto w-overflow-y-hidden w-scrollbar-thin {{ classname }} {% if is_expanded %} w-pl-3{% endif %}"
         {% if not items %}hidden{% endif %}
@@ -40,7 +40,7 @@
                     {% block breadcrumbs_items %}
                         {% for item in items %}
                             <li
-                                class="{{ breadcrumb_item_classes }} {% if not is_expanded and not forloop.last %}w-max-w-0{% endif %}"
+                                class="{{ breadcrumb_item_classes }} {% if forloop.last %}w-font-bold{% endif %} {% if not is_expanded and not forloop.last %}w-max-w-0{% endif %}"
                                 {% if not is_expanded and not forloop.last %}
                                     hidden
                                 {% endif %}

diff --git a/wagtail/admin/templates/wagtailadmin/shared/page_breadcrumbs.html b/wagtail/admin/templates/wagtailadmin/shared/page_breadcrumbs.html
@@ -20,7 +20,7 @@
         {% endif %}
         {% if page.is_root %}
             <li
-                class="{{ breadcrumb_item_classes }} {% if not is_expanded %}w-max-w-0{% endif %}"
+                class="{{ breadcrumb_item_classes }} {% if forloop.last %}w-font-bold{% endif %} {% if not is_expanded %}w-max-w-0{% endif %}"
                 {% if not is_expanded %}hidden{% endif %}
                 data-w-breadcrumbs-target="content"
             >
@@ -46,7 +46,7 @@
             </li>
         {% elif forloop.last %}
             <li
-                class="{{ breadcrumb_item_classes }}"
+                class="{{ breadcrumb_item_classes }} w-font-bold"
                 {% if trailing_breadcrumb_title and not is_expanded %}hidden{% endif %}
                 {% if trailing_breadcrumb_title or is_expanded %}data-w-breadcrumbs-target="content"{% endif %}
             >

diff --git a/wagtail/admin/tests/pages/test_explorer_view.py b/wagtail/admin/tests/pages/test_explorer_view.py
@@ -478,7 +478,7 @@ def test_breadcrumb_uses_specific_titles(self):
 
         expected = (
             """
-            <li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold w-max-w-0" data-w-breadcrumbs-target="content" hidden>
+            <li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-max-w-0" data-w-breadcrumbs-target="content" hidden>
                 <a class="w-flex w-items-center w-h-full w-text-text-label w-pr-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-text-label w-h-full" href="%s">
                     Secret plans (simple page)
                 </a>
@@ -730,7 +730,7 @@ def test_admin_sees_breadcrumbs_up_to_root_page(self):
         response = self.client.get(reverse("wagtailadmin_explore", args=[6]))
         self.assertEqual(response.status_code, 200)
         expected = """
-            <li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold w-max-w-0" data-w-breadcrumbs-target="content" hidden>
+            <li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-max-w-0" data-w-breadcrumbs-target="content" hidden>
                 <a class="w-flex w-items-center w-h-full w-text-text-label w-pr-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-text-label w-h-full" href="/admin/pages/">
                     Root
                 </a>
@@ -742,7 +742,7 @@ def test_admin_sees_breadcrumbs_up_to_root_page(self):
         """
         self.assertContains(response, expected, html=True)
         expected = """
-            <li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold w-max-w-0" data-w-breadcrumbs-target="content" hidden>
+            <li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-max-w-0" data-w-breadcrumbs-target="content" hidden>
                 <a class="w-flex w-items-center w-h-full w-text-text-label w-pr-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-text-label w-h-full" href="/admin/pages/4/">
                     Welcome to example.com!
                 </a>
@@ -753,7 +753,7 @@ def test_admin_sees_breadcrumbs_up_to_root_page(self):
         """
         self.assertContains(response, expected, html=True)
         expected = """
-            <li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold w-max-w-0" data-w-breadcrumbs-target="content" hidden>
+            <li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-max-w-0" data-w-breadcrumbs-target="content" hidden>
                 <a class="w-flex w-items-center w-h-full w-text-text-label w-pr-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-text-label w-h-full" href="/admin/pages/5/">
                     Content
                 </a>
@@ -771,7 +771,7 @@ def test_nonadmin_sees_breadcrumbs_up_to_cca(self):
         # While at "Page 1", Josh should see the breadcrumbs leading only as far back as the example.com homepage,
         # since it's his Closest Common Ancestor.
         expected = """
-            <li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold w-max-w-0" data-w-breadcrumbs-target="content" hidden>
+            <li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-max-w-0" data-w-breadcrumbs-target="content" hidden>
                 <a class="w-flex w-items-center w-h-full w-text-text-label w-pr-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-text-label w-h-full" href="/admin/pages/4/">
                     Root
                 </a>
@@ -782,7 +782,7 @@ def test_nonadmin_sees_breadcrumbs_up_to_cca(self):
         """
         self.assertContains(response, expected, html=True)
         expected = """
-            <li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold w-max-w-0" data-w-breadcrumbs-target="content" hidden>
+            <li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-max-w-0" data-w-breadcrumbs-target="content" hidden>
                 <a class="w-flex w-items-center w-h-full w-text-text-label w-pr-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-text-label w-h-full" href="/admin/pages/5/">
                     Content
                 </a>