Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix icon alignment in page listings #11870

Merged
merged 2 commits into from
Apr 30, 2024
Merged

Fix icon alignment in page listings #11870

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4a20892
Fix icon alignment in page listings
laymonage Apr 18, 2024
5927b12
Remove --inline-actions variant of listing tables
laymonage Apr 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
40 changes: 5 additions & 35 deletions client/scss/components/_listing.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,10 @@ ul.listing {

.title {
word-break: break-word;
display: flex;
align-items: center;
justify-content: space-between;
gap: theme('spacing.2');
Comment on lines +226 to +229
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately this caused unexpected styling issues elsewhere 🤦
image

I'll create a PR to fix this


.title-wrapper,
h2 {
Expand All @@ -231,6 +235,7 @@ ul.listing {
gap: theme('spacing.2');
margin: 0;
vertical-align: middle;
align-items: center;

a {
color: inherit;
Expand All @@ -242,11 +247,6 @@ ul.listing {
}
}
}

.icon-folder {
margin: 3px 0.3em 0 0;
vertical-align: top;
}
}

.actions {
Expand All @@ -265,36 +265,6 @@ ul.listing {
}
}

&--inline-actions td.title {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;

.title-wrapper {
margin-inline-end: 2.5em;
}

.w-status {
margin: 0;
}
}

&--inline-actions .actions {
display: inline-block;
margin-top: 0;
vertical-align: inherit;

li {
margin-bottom: 0;
}

.button {
vertical-align: inherit;
}
}

.moderate-actions form {
float: inline-start;
margin: 0 1em 1em 0;
Expand Down
1 change: 1 addition & 0 deletions client/scss/components/_status-tag.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
border-radius: 2px;
text-align: center;
display: inline-block;
word-break: normal;
// stylelint-disable-next-line property-disallowed-list
text-transform: uppercase;
padding: 0 0.5em;
Expand Down
4 changes: 2 additions & 2 deletions wagtail/admin/templates/wagtailadmin/pages/listing/_page_title_explore.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}

Expand All @@ -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>
Expand Down
10 changes: 6 additions & 4 deletions wagtail/admin/tests/pages/test_explorer_view.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
4 changes: 0 additions & 4 deletions wagtail/admin/ui/tables/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -518,7 +518,3 @@ def classname(self):
@cached_property
def attrs(self):
return self.table.get_row_attrs(self.instance)


class InlineActionsTable(Table):
classname = "listing listing--inline-actions"
3 changes: 1 addition & 2 deletions wagtail/admin/views/generic/history.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
MultipleUserFilter,
WagtailFilterSet,
)
from wagtail.admin.ui.tables import Column, DateColumn, InlineActionsTable, UserColumn
from wagtail.admin.ui.tables import Column, DateColumn, UserColumn
from wagtail.admin.utils import get_latest_str
from wagtail.admin.views.generic.base import (
BaseListingView,
Expand Down Expand Up @@ -197,7 +197,6 @@ class HistoryView(PermissionCheckedMixin, BaseObjectMixin, BaseListingView):
is_searchable = False
paginate_by = 20
filterset_class = HistoryFilterSet
table_class = InlineActionsTable
history_url_name = None
history_results_url_name = None
edit_url_name = None
Expand Down