on small screens we bypass all the vertical tabs things but the style is still applied and looks broken.

Patch fixes the issue by relying on a data attribute and only adding the class when JS is on and the screen is big enough.

Files: 
CommentFileSizeAuthor
#1 vertical_tabs-mobile-before.png68.99 KBWim Leers
#1 vertical_tabs-mobile-after.png78.74 KBWim Leers
core-js-verticaltabs-small.patch3.96 KBnod_
PASSED: [[SimpleTest]]: [MySQL] 59,167 pass(es).
[ View ]

Comments

Status:Needs review» Reviewed & tested by the community
Issue tags:+JavaScript, +mobile
StatusFileSize
new78.74 KB
new68.99 KB

I did manual testing for this. Not only do vertical tabs look broken on mobile devices, they actually break the styling of everything else on the page as well!

Everything that looked strange at first to me in this patch turned out to be correct and essential.

Before
vertical_tabs-mobile-before.png
After
vertical_tabs-mobile-after.png

Wow, that does indeed look much nicer. :)

+++ b/core/includes/form.inc
@@ -4067,7 +4067,7 @@ function form_pre_render_vertical_tabs($element) {
-  return '<div class="vertical-tabs-panes">' . $element['#children'] . '</div>';
+  return '<div data-vertical-tabs-panes>' . $element['#children'] . '</div>';

Huh. I had no idea that was valid HTML. Go HTML5, I guess. :)

Committed and pushed to 8.x. Thanks!

Status:Reviewed & tested by the community» Fixed

Status:Fixed» Active

Sadly, this patch had an interesting side-effect that we all forgot to consider.

filter.admin.js called tabHide() on the vertical tab containing the filter settings for any filter that is disabled. (And tabShow() when it gets enabled.)

Because the Vertical Tabs JS is no longer run at all on mobile devices, this also *breaks* on mobile devices.

It was already the case before. The killswitch for mobile hasn't been introduced by this patch.

Status:Active» Fixed

Indeed, I just realized that too. Opened a new issue to fix it, includes a patch: #2108955: Settings for disabled filters are not hidden in narrow viewports, because Vertical Tabs are disabled in narrow viewports.

Sorry for inappropriately reopening this issue.

Automatically closed -- issue fixed for 2 weeks with no activity.