Allow sorting the datagrid on small screens - #7789
Open
gbere wants to merge 1 commit into
Open
Conversation
The datagrid header is hidden below 768px, so its column sort links are unreachable on phones. Add a 'Sort' button next to the other index page actions, visible only on small screens, that opens a modal listing the sortable columns and toggling their sort direction.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #7788
Below 768px the theme hides the datagrid header
(
assets/css/easyadmin-theme/datagrids.css), and the column sort links liveonly in that header, so listings can't be sorted on phones.
This adds a "Sort" button next to the other index page actions, shown only
below 768px, which opens a modal listing the sortable columns. Each item links
to the same URL the header link would generate and toggles between ascending
and descending, so both UIs stay in sync.
Details:
sort_actionsblock incrud/index.html.twigand a newcrud/includes/_sort_modal.html.twig, following the same pattern as thefilters modal.
ea:Modalcomponent, theexisting
internal:sort-*icons and Bootstrap'slist-group.sortable fields, so empty listings are unaffected.
datagrid.sortanddatagrid.sort_bykeys, translated in all locales.tests/Functional/Default/Sort/SortModalTest.phpcheckingthat the modal links match the datagrid header links, that they toggle the
sort direction and that nothing is rendered when there are no results.