From 1ad22f530d50409aa090b9e57a0118a75ac94a41 Mon Sep 17 00:00:00 2001 From: Sage Abdullah Date: Fri, 15 Dec 2023 16:20:39 +0000 Subject: [PATCH] Enforce bulk action checkbox column via CSS 10px was never the right width. Using CSS instead of the column's width attribute allows us to use media queries to change the width responsively --- client/scss/components/_bulk_actions.scss | 17 -------- client/scss/components/_listing.scss | 52 ++++++++++++----------- wagtail/admin/views/pages/listing.py | 4 +- wagtail/admin/views/pages/search.py | 2 +- wagtail/documents/views/documents.py | 2 +- wagtail/snippets/views/snippets.py | 2 - 6 files changed, 32 insertions(+), 47 deletions(-) diff --git a/client/scss/components/_bulk_actions.scss b/client/scss/components/_bulk_actions.scss index 8463a71c35..1cc2fabbed 100644 --- a/client/scss/components/_bulk_actions.scss +++ b/client/scss/components/_bulk_actions.scss @@ -17,23 +17,6 @@ } } -.listing:not(.full-width) { - thead th.bulk-actions-filter-checkbox, - td.bulk-action-checkbox-cell { - width: 50px; - text-align: center; - - input[type='checkbox'] { - margin: 0; - } - - + th, - + td { - padding-inline-start: 0; - } - } -} - .bulk-actions-choices { &.footer { @include transition(transform 0.1s ease 0.1s); diff --git a/client/scss/components/_listing.scss b/client/scss/components/_listing.scss index 2e6bf538e2..9340af2212 100644 --- a/client/scss/components/_listing.scss +++ b/client/scss/components/_listing.scss @@ -75,13 +75,17 @@ ul.listing { } } - &.full-width td:first-child, - &.full-width th:first-child { - padding-inline-start: 20px; - padding-inline-end: 20px; + &:has(.bulk-action-checkbox) { + td:first-child, + th:first-child { + // Bulk actions, use smaller width (48px) for smaller screens + // (no need to match where the breadcrumbs are) + width: theme('spacing.10'); + text-align: center; - input[type='checkbox'] { - margin-inline-end: 0; + input[type='checkbox'] { + margin-inline-end: 0; + } } } @@ -419,14 +423,6 @@ table.listing { .table-headers, thead tr { height: 35px; - - .title { - padding-inline-start: 0; - } - } - - tbody .title { - padding-inline-start: 0; } } @@ -603,17 +599,25 @@ table.listing { padding-inline-start: 50px; } - &.full-width td:first-child, - &.full-width th:first-child { - padding-inline-start: 30px; - padding-inline-end: 30px; - } + &:has(.bulk-action-checkbox) { + // Bulk actions, match the width of the header spacing up until + // the page title (final breadcrumb item): + // Breadcrumbs left padding: 20px + // Breadcrumbs toggle: 50px + // Breadcrumbs toggle margin right: 10px + // Total: 80px + th:first-child, + td:first-child { + width: theme('spacing.20'); + // Follow the left padding for the breadcrumbs (20px) + // so the checkbox align with the breadcrumbs toggle. + padding-inline-start: theme('spacing.5'); + } - // Reduce padding on sort order controls so total width matches previous state - &.full-width td.ord, - &.full-width th.ord { - padding-inline-end: 20px; - padding-inline-start: 20px; + th:nth-child(2), + td:nth-child(2) { + padding-inline-start: 0; + } } &.full-width .divider td { diff --git a/wagtail/admin/views/pages/listing.py b/wagtail/admin/views/pages/listing.py index 202bc45ff4..f7572dc1ab 100644 --- a/wagtail/admin/views/pages/listing.py +++ b/wagtail/admin/views/pages/listing.py @@ -96,7 +96,7 @@ class BaseIndexView(generic.IndexView): page_title = _("Exploring") columns = [ - BulkActionsColumn("bulk_actions", width="10px"), + BulkActionsColumn("bulk_actions"), PageTitleColumn( "title", label=_("Title"), @@ -310,7 +310,7 @@ class BaseIndexView(generic.IndexView): self.show_ordering_column = self.ordering == "ord" if self.show_ordering_column: self.columns = self.columns.copy() - self.columns[0] = OrderingColumn("ordering", width="10px", sort_key="ord") + self.columns[0] = OrderingColumn("ordering", width="80px", sort_key="ord") self.i18n_enabled = getattr(settings, "WAGTAIL_I18N_ENABLED", False) context = super().get_context_data(**kwargs) diff --git a/wagtail/admin/views/pages/search.py b/wagtail/admin/views/pages/search.py index 913010d8a6..e699aa79c6 100644 --- a/wagtail/admin/views/pages/search.py +++ b/wagtail/admin/views/pages/search.py @@ -66,7 +66,7 @@ class BaseSearchView(PermissionCheckedMixin, BaseListingView): table_class = PageTable columns = [ - BulkActionsColumn("bulk_actions", width="10px"), + BulkActionsColumn("bulk_actions"), PageTitleColumn( "title", classname="title", diff --git a/wagtail/documents/views/documents.py b/wagtail/documents/views/documents.py index e7094818a1..fa68da8ff6 100644 --- a/wagtail/documents/views/documents.py +++ b/wagtail/documents/views/documents.py @@ -90,7 +90,7 @@ class IndexView(generic.IndexView): @cached_property def columns(self): columns = [ - BulkActionsColumn("bulk_actions", width="10px"), + BulkActionsColumn("bulk_actions"), TitleColumn( "title", label=_("Title"), diff --git a/wagtail/snippets/views/snippets.py b/wagtail/snippets/views/snippets.py index 9ae13dd8cf..00ba685afe 100644 --- a/wagtail/snippets/views/snippets.py +++ b/wagtail/snippets/views/snippets.py @@ -21,7 +21,6 @@ from wagtail.admin.ui.tables import ( BulkActionsCheckboxColumn, Column, DateColumn, - InlineActionsTable, LiveStatusTagColumn, TitleColumn, UserColumn, @@ -156,7 +155,6 @@ class ModelIndexView(generic.IndexView): class IndexView(generic.IndexViewOptionalFeaturesMixin, generic.IndexView): view_name = "list" - table_class = InlineActionsTable def get_base_queryset(self): # Allow the queryset to be a callable that takes a request