Problem/Motivation

I came across this issue when working on #2949991: Add workspace UI in top dialog.

When scrolling on mobile the toolbar stays pinned to the top of the page, so moves up as the page scrolls. However the toolbar try stays fixed to the right and does not scroll, this introduces a weird space at the top of the page.

I have been able to replicate this on Bartik and Seven, but not on Bootstrap.

Here's the issue in Firefox's mobile emulation:

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#6 Screenshot 2019-06-14 at 15.13.47.png70.95 KBjohn cook
#5 2986237-4.patch1.06 KBahebrank
#3 2986237-3.patch928 bytestimmillwood
#2 Screenshot_Firefox_20180717-103448.png58.37 KBtimmillwood
Screenshot_2018-07-17 Extend Site-Install.png14.76 KBtimmillwood

Comments

timmillwood created an issue. See original summary.

timmillwood’s picture

timmillwood
Primary language English
Location 🏴󠁧󠁢󠁷󠁬󠁳󠁿 Wales, UK
commented
StatusFileSize
new Screenshot_Firefox_20180717-103448.png58.37 KB

Here's the issue on Firefox on Android:

timmillwood’s picture

timmillwood
Primary language English
Location 🏴󠁧󠁢󠁷󠁬󠁳󠁿 Wales, UK
commented
Status: Active » Needs review
StatusFileSize
new 2986237-3.patch928 bytes

This fixes the issue.

However based in the comment in both files, I'm not sure what was intended:

/* Position the admin toolbar absolutely when the configured standard breakpoint
 * is active. The toolbar container, that contains the bar and the trays, is
 * position absolutely so that it scrolls with the page. Otherwise, on smaller
 * screens, the components of the admin toolbar are positioned statically. */

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

Drupal 8.5.6 was released on August 1, 2018 and is the final bugfix release for the Drupal 8.5.x series. Drupal 8.5.x will not receive any further development aside from security fixes. Sites should prepare to update to 8.6.0 on September 5, 2018. (Drupal 8.6.0-rc1 is available for testing.)

Bug reports should be targeted against the 8.6.x-dev branch from now on, and new development or disruptive changes should 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.

ahebrank’s picture

ahebrank commented
Version: 8.6.x-dev » 8.7.x-dev
StatusFileSize
new 2986237-4.patch1.06 KB

Reroll for 8.7. I don't understand the code comments either -- seems like the toolbar should pretty much always be fixed position regardless of viewport or orientation.

I'm not so much concerned about the usability of the toolbar or admin experience itself on mobile, but the usability of the front end site breaks if the user is logged in on their phone and happens to open the toolbar.

john cook’s picture

john cook commented
Status: Needs review » Reviewed & tested by the community
Issue tags: +Needs frontend framework manager review
StatusFileSize
new Screenshot 2019-06-14 at 15.13.47.png70.95 KB

Thanks for working on this.

I've tested on Safari on iPhone and the same problem happens, so it's not just a Firefox or Android problem. It also happens on desktop with Chrome with a small width window.

The patch works by making the #toolbar-bar sticky as well as the toolbar menu.

As the patch changes Stable, I've added the 'Needs frontend framework manager review' tag.

But otherwise it's RTBC.

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 5: 2986237-4.patch, failed testing. View results

john cook’s picture

john cook commented
Status: Needs work » Reviewed & tested by the community

Back to RTBC after a false fail.

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 5: 2986237-4.patch, failed testing. View results

yogeshmpawar’s picture

yogeshmpawar
He/Him/His
Primary language English
Location Pune(MH), INDIA 🇮🇳
commented
Status: Needs work » Reviewed & tested by the community

Setting back to RTBC because the above test fails are unrelated.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Needs review
Issue tags: -Needs frontend framework manager review +Usability

I'm not sure if this is the correct solution. I assume the toolbar has been positioned with absolute position to give users more space for users using mobile devices. I'm wondering if there are other solutions to this problem than making the toolbar positioning fixed?

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

Drupal 8.7.9 was released on November 6 and is the final full bugfix release for the Drupal 8.7.x series. Drupal 8.7.x will not receive any further development aside from security fixes. Sites should prepare to update to 8.8.0 on December 4, 2019. (Drupal 8.8.0-beta1 is available for testing.)

Bug reports should be targeted against the 8.8.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.9.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
commented
Status: Needs review » Closed (duplicate)
Related issues: +#2516938: Set the toolbar to position fixed on mobile

Cleaning up the toolbar queue