In narrow viewports (<320px), the toolbar menu tray should be 100% width

I pinged LewisNyman to get his feedback. While definitely inconsistent with Seven and different from Bartik in earlier versions (beta 3), I'm not sure how big a problem this really is. Are there actually users going to resize to such incredibly narrow sizes? (It's more narrow than 320px.)

Fair enough :)

On howitshouldbe.mov it is shown that active menu should push content down. By current situation we don't have anything like that in core. It of course can be done like that, but guys like LewisNyman, emma.maria or WimLeers could throw their opinions around if this is the best approach. Also, if that is done, should it start from <601px instead of something below 320px.

On howitshouldbe.mov it is shown that active menu should push content down. By current situation we don't have anything like that in core.

It should not push content down, but it makes sense for it to overlay 100% of the screen when the screen is so narrow that nothing useful can be shown.

Yup, that's exactly what I thought. Will add an patch today.

Ok. So on 608px both navigation and sidebars are hiddened by toolbar-menu for some pixles and at least for me there ux problems are starting, so decided to write the patch to 609px. Spend lot of time thinking between current height and between height: auto. Decided to go with current height so that the menu is taking control of the whole screen.

I think that there should be some discussion on the admin toolbar responsiveness generally as it's acting is quite weird.

Patch and few screenshots as attachments.
608px before and after:

263px before and after:

CSS -> SMACSS split made this patch to fail. Rerolling in few hours.

New patch around.

This issue needs the following:

A Beta evaluation added to the issue summary.
A code review of the patch.
A visual review + screenshots to show what the patch affects.

Whilst reviewing this I noticed that actually the toolbar behaves the same in Seven and Bartik at head. See screenshots...

Therefore it does not make sense to add this just to Bartik, we would need to add it to each theme or it will be inconsistent. It makes sense to add this fix to the toolbar module. People now expect menus to be 100% width on mobile devices, and people will want this out the box for any theme default or contrib.

Moving to toolbar module, a new patch is needed, feel free to tell me otherwise :)

For narrow viewports, added 100% width for toolbar menu and making it generic by placing it in toolbar module.
Attaching screenshots and patch (toolbar-menu-for-narrow-viewports-2382561-15.patch).

Width looks perfect, however hover state require little work. Attached shots

The above thing has been fixed in other issue.Here's the link https://www.drupal.org/node/2409427
So it is good to go.

Please see #1 & #2 — this was intended only for extremely narrow viewports!

We don't want this on e.g. iPhones.

+++ b/core/modules/toolbar/css/toolbar.menu.css
@@ -34,6 +34,13 @@
+/* ----- Toolbar menu for small screens ------ */
+@media screen and (max-width: 609px) {
+  .toolbar .toolbar-tray-vertical.active {
+    width: 100%;
+  }
+}

Here are are undoing CSS that was already set somewhere else, the default width of a div is 100%.

See line 140 of toolbar.module.css:

.toolbar-oriented .toolbar-tray-vertical {
  left: -100%; /* LTR */
  position: absolute;
  width: 240px;
  width: 15rem;
}

If we wrap the width properties in a min-width media query then we wouldn't have to override it later. I think the value that Wim is looking for is min-width: 321px

As far as i understand it, @Wim @Lewis extremely narrow viewports is <320px where the toolbar should be of 100% width. And leave rest resolutions as it is? Also looks like 320px screen resolutions looks ok. Attached a shot. Will add patch accordingly.

I wrote #18 after having looked at the #15 screenshots, which show something else than #20. Confused now. Once there's a NR patch again, I'll test locally.

@Lewis - Wrapping the width properties in a min-width media query at line 140 in toolbar.module.css doesn't seem to be feasible for viewports < 264px. At this breakpoint toolbar-oriented class is removed, also if we add min-width media query as:
@media screen and (min-width: 320px) {
.toolbar-processed .toolbar-tray-vertical { width: 240px; width: 15rem; }
}
toolbar tray doesn't span 100% width below 264px by default.

Added a new patch for extremely narrow viewports as per #18.

Updated screenshots for viewport < 320px

In case there no further enhancements required, On <320px toolbar expands to 100%.

Looks good :) Thanks!

CSS is not frozen in beta. Committed 02965ca and pushed to 8.0.x. Thanks!