Problem/Motivation

admin/structure/views / ViewListBuilder doesn't add any priorities to the columns, meaning they all show up on mobile.

Proposed resolution

Modify \Drupal\views_ui\ViewListBuilder::buildHeader to add the responsive class hints to the columns

Use RESPONSIVE_PRIORITY_MEDIUM or RESPONSIVE_PRIORITY_LOW constants from theme.inc

See for example \Drupal\comment\Form\CommentAdminOverview

Remaining tasks

User interface changes

Views overview columns are responsive.

API changes

Data model changes

CommentFileSizeAuthor
#35 After Patch #26.mp4464.36 KByashingole
#35 Before patch #26.mp4601.79 KByashingole
#28 After Patch.mp41.86 MBprasanth_kp
#28 Before Patch.mp42.66 MBprasanth_kp
#26 interdiff_2729707_24-26.txt2.22 KBandregp
#26 2729707-26.patch4.85 KBandregp
#26 adding_to_attributes_result.gif14.9 MBandregp
#26 adding_classes_into_attributes.png128.51 KBandregp
#24 views-table-responsive.gif12.31 MBandregp
#24 interdiff_2729707_20-24.txt2.35 KBandregp
#24 2729707-24.patch2.29 KBandregp
#23 Screenshot_2022-06-05 Views dev4-web.png25.34 KBquietone
#20 2729707-20.patch1.45 KBhmendes
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

catch created an issue. See original summary.

dawehner’s picture

dawehner
Primary language German
CreditAttribution: dawehner as a volunteer commented

Ideally this should wait on #2574767: Views listing page displays too few items on a page given that issue redefines the columns.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Bojhan’s picture

Bojhan CreditAttribution: Bojhan as a volunteer commented
Title: admin/structure/views / ViewListBuilder should use responsive priorities » Administration screen of the Views listing is not responsive
Category: Task » Bug report
Issue tags: +sprint

Should we investigate if this happens anywhere else in core. I thought Views would add this by default.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

yoroy’s picture

yoroy CreditAttribution: yoroy at Roy Scholten commented
Issue tags: +Baltimore2017

A first exploration is in order here :)

davemanroth’s picture

davemanroth CreditAttribution: davemanroth as a volunteer commented
Assigned: Unassigned » davemanroth

Working on this as first-time sprinter in DrupalCon Baltimore 2017

davemanroth’s picture

davemanroth CreditAttribution: davemanroth commented
Assigned: davemanroth » Unassigned

Cannot understand this issue, could not find anyone to help me decipher it. Unassigning myself. Sorry...

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

larowlan’s picture

larowlan
Location 🇦🇺🏝.au GMT+10
CreditAttribution: larowlan at PreviousNext commented
Issue summary: View changes
Issue tags: +Bug Smash Initiative, +Novice
Lendude’s picture

Lendude
Primary language Dutch
Location Amsterdam
CreditAttribution: Lendude as a volunteer and at iO commented
Issue summary: View changes

Added example to IS where this is done.

hmendes’s picture

hmendes CreditAttribution: hmendes at CI&T commented
Status: Active » Needs review
Issue tags: -sprint, -Baltimore2017
FileSize
2729707-20.patch1.45 KB

Idk if this is the only change needed...
I'm not familiar with front-end stuff (specially responsiveness), trying to get into this now, so, any feedback is welcome :D

Libbna’s picture

Libbna CreditAttribution: Libbna as a volunteer and at QED42 for Drupal India Association commented

I want to review the patch but how can I reproduce the issue?

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

quietone’s picture

quietone CreditAttribution: quietone at PreviousNext commented
Status: Needs review » Needs work
FileSize
Screenshot_2022-06-05 Views dev4-web.png25.34 KB

I tried this today on Drupal 10, standard install, applied the patch and went to /admin/structure/views. On small screens the table header no longer appear. Setting to NW.

Adding screenshot.

andregp’s picture

andregp CreditAttribution: andregp at CI&T commented
Status: Needs work » Needs review
FileSize
2729707-24.patch2.29 KB
interdiff_2729707_20-24.txt2.35 KB
views-table-responsive.gif12.31 MB

I changed a bit the responsive priority of the columns (so not all of them will be hidden on a mobile view).
What I struggled the most was to add the same classes to the rows (and not just the headers) but all my attempts to add a class attribute to the rows inside the ViewListBuilder::buildRow() method didn't work. Until I noticed that the row's classes were actually being defined by core/modules/views_ui/templates/views-ui-views-listing-table.html.twig so I made the proper changes there. Now the entire table is responsive.
responsive views table

dipakmdhrm’s picture

dipakmdhrm CreditAttribution: dipakmdhrm as a volunteer and at QED42 for Drupal India Association commented
Status: Needs review » Needs work 
diff --git a/core/modules/views_ui/templates/views-ui-views-listing-table.html.twig b/core/modules/views_ui/templates/views-ui-views-listing-table.html.twig
index 66cd86395d..cda9a97652 100644
--- a/core/modules/views_ui/templates/views-ui-views-listing-table.html.twig
+++ b/core/modules/views_ui/templates/views-ui-views-listing-table.html.twig
@@ -31,13 +31,13 @@

Any changes to this file should also go to the corresponding files in stable & stable9.
Which makes me wonder if we should instead of adding classes in templates put them in the #attributes of each data cell so anyone overriding the templates inherit them. We already do this for table header & table row. So more consistency as well.

andregp’s picture

andregp CreditAttribution: andregp at CI&T commented
FileSize
adding_classes_into_attributes.png128.51 KB
adding_to_attributes_result.gif14.9 MB
2729707-26.patch4.85 KB
interdiff_2729707_24-26.txt2.22 KB

@dipakmdhrm I tried to add the class directly inside the cell #attributes tag with multiple syntax, but none of them worked. I'm sending an example where you can see this in action. Even using the same syntax I used with buildHeader() inside buildRow() only the header gets the class and become responsive and the rows keep broken. I changed the template file as a last resource after trying to fix the class using #attributes with many different ways.
But, if it's okay, here is a patch with stable & stable9 updated.

andregp’s picture

andregp CreditAttribution: andregp at CI&T commented
Status: Needs work » Needs review

Forgot to change status

prasanth_kp’s picture

prasanth_kp CreditAttribution: prasanth_kp as a volunteer and at Zyxware Technologies commented
FileSize
Before Patch.mp42.66 MB
After Patch.mp41.86 MB

Thanks @andregp for the patch. I have applied this cleanly on 9.5.x-dev version and it is working as expected.

gayatri chahar’s picture

gayatri chahar CreditAttribution: gayatri chahar as a volunteer and at Srijan | A Material+ Company for Drupal Association commented

I applied this patch against 9.5.x-dev and its working for me as expected
Thanks @andregp

dipakmdhrm’s picture

dipakmdhrm CreditAttribution: dipakmdhrm as a volunteer and at QED42 for Drupal India Association commented
Status: Needs review » Reviewed & tested by the community

@andregp I think it's perfectly fine here to keep the existing approach and not use #attributes

catch’s picture

catch
he/him
Primary language English
CreditAttribution: catch at Third and Grove commented
Status: Reviewed & tested by the community » Needs review
Issue tags: +Needs subsystem maintainer review

Tagging for subsystem maintainer review, I'm not sure about directly editing the templates here - not that many modules or themes are likely to want to customise the views admin listing.

smustgrave’s picture

smustgrave CreditAttribution: smustgrave at Mobomo commented

Could this be applied with javascript? So themes won't have to update their templates.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

yashingole’s picture

yashingole CreditAttribution: yashingole at QED42 for Drupal India Association commented
Assigned: Unassigned » yashingole
yashingole’s picture

yashingole CreditAttribution: yashingole at QED42 for Drupal India Association commented
Assigned: yashingole » Unassigned
FileSize
Before patch #26.mp4601.79 KB
After Patch #26.mp4464.36 KB

Verified and tested patch #26 on Drupal 10 and 10.1 Patch was applied successfully and looks good to me.
Testing steps:
1. Install 10 or 10.1
2. Navigate to admin/structure/views
3. Open dev tools
4. Click on responsive
5. Observe the page on different resolutions
6. Apply patch #26
7. Observe the page at different resolutions
Testing Result:
1. After applying the patch the page looks good at different resolutions
Can be moved to RTBC
Screenshots are attached for reference:

manojkumar_97’s picture

manojkumar_97 CreditAttribution: manojkumar_97 at OpenSense Labs commented
Status: Needs review » Reviewed & tested by the community

I have tested patch #26 on Drupal 10.1 applied successfully and work fine for me.

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
CreditAttribution: bnjmnm at Acquia commented
Status: Reviewed & tested by the community » Needs work

There are changes templates in Stable and Stable 9, but this shouldn't be happening. Those are themes that exist to ensure consistency between updates, even if it means missing out on a desirable improvement. While it's possible sites would be completely welcoming of this change, it would be breaking the promise offered by the stable themes.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

dipakmdhrm’s picture

dipakmdhrm CreditAttribution: dipakmdhrm as a volunteer and for Drupal India Association commented
Issue tags: +dcp23

This should be easy to fix now that we don't have stable in core.