Currently vertical tabs and the overlay are turned off for screens with a width below 640px by default. We can do better.

A possible solution would be to run Drupal.attachBehaviors() on orientation change.

#1277352: Responsive vertical tabs
#1260800: Kill the overlay for widths below 640 pixels

Comments

quartsize’s picture

quartsize CreditAttribution: quartsize commented

A possible solution would be to run Drupal.attachBehaviors() on orientation change.

I imagine we'd also need to detach some behaviors. To repeat myself from #1277352: Responsive vertical tabs:

So suppose you trap the orientation change / window resize event, and run vertical-tabs if there's enough space. You'd need code to reverse the effect if the dimensions change again, hiding the markup vertical-tabs.js must generate to make the document flow correctly, synchronizing the summaries, and uncollapsing the fieldset of the open tab while collapsing the others. [...] And actually, I've been talking about orientation changes / window resizes that increase width. What happens [...] if width decreases through the breakpoint?

I'm not sure I like the idea of attaching/detaching behaviors as the orientation changes. For one, we'd be adding Javascript to a mobile device's burdens during an orientation change, when the effect may be manageable in faster CSS. Secondly, it seems like one wouldn't want behaviors to appear and disappear on an orientation change, e.g. collapsible-fieldsets to vertical-tabs and vice versa; rather, they should adjust in a way that brings their width down, or takes advantage of additional width, but doesn't fundamentally change the interface.

These comments are, however, likely biased by having thought far more about vertical tabs than the overlay.

nod_’s picture

nod_
Primary language French
Location Lille
CreditAttribution: nod_ commented

Any idea is welcome, from the way we implemented things the detach/attach would be the easiest way of making it work, not the best. Feel free to think up a proper way of handling this, I was merely pointing out a quick and dirty solution for concerned people without much JS XP :p

We can do much better indeed :)

attiks’s picture

attiks CreditAttribution: attiks commented

"width below 640px by default" one quick remark, don't use px, use ems to support people with zoom level != 100%

I agree with #1 that maybe it's not desirable to do this, suppose I'm editing something on a tablet (portrait), and I want to type something, so I rotate my tablet to have a bigger keyboard and all of a sudden all fieldsets are transformed into vertical tabs, leaving me probably completely clueless where I was.

seutje’s picture

seutje CreditAttribution: seutje commented

Does it seem like a good idea to have a resize or reorient method on our behaviors, so each behavior can decide how it should handle those changes, and we can just fire them on all behaviors when resize/reorient occurs? This might, however, cause a significant perf impact upon changing orientation.

attiks’s picture

attiks CreditAttribution: attiks commented

This is possible since #1815602: Introduce a polyfill for matchMedia is committed, but maybe providing an easy php wrapper is good idea.

Shyamala’s picture

Shyamala CreditAttribution: Shyamala commented
Issue tags: +d8mux

Tagging to d8mux

klonos’s picture

klonos
he/him
Primary language English
Location 90% Melbourne, Australia - 10% Larissa, Greece
CreditAttribution: klonos commented

Turning vertical tabs to details could be a solution, but what about the overlay?

nod_’s picture

nod_
Primary language French
Location Lille
CreditAttribution: nod_ commented
Version: 8.x-dev » 9.x-dev

Past API freeze

nod_’s picture

nod_
Primary language French
Location Lille
CreditAttribution: nod_ commented
Issue summary: View changes

add related issues

catch’s picture

catch
he/him
Primary language English
CreditAttribution: catch commented
Version: 9.x-dev » 8.1.x-dev
Issue summary: View changes
Status: Active » Postponed

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

Drupal 8.1.0-beta1 was released on March 2, 2016, which means new developments and disruptive changes should now be targeted against the 8.2.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.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.

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.

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.

nod_’s picture

nod_
Primary language French
Location Lille
CreditAttribution: nod_ as a volunteer and at Smile commented
Status: Postponed » Active
Issue tags: -JavaScript +JavaScript

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.

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.

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.

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.