Page MenuHomePhabricator

Make sidebar responsive
Closed, ResolvedPublic1 Estimated Story Points

Description

Background

When the screen is large enough, we want to automatically show both the sidebar and 'main' screen side by side and remove the button to hide/show it. When the screen or window is too small to comfortably show them side by side, then the button should show to allow you to switch between the two views where each is full screen.

Requirements

The following breakpoints should apply for both desktop and minerva skins. For example, if someone is using minerva on a tablet with enough space to show both at the same time, both sidebar and main screen should be shown.

When experimenting ~540px seems to be where a breakpoint makes sense, but feel free to use a more standardized number nearby. The important thing is that the breakpoint happens before the sidebar becomes wider than the main window.

Desktop/Larger screens (~540px wide or more)

  • Sidebar always open
  • Remove hide/show button

Mobile/Small screens (~540px or less)

  • Maintain "Show/hide" button.
  • Default state: Sidebar collapsed.
  • When expanded, sidebar should be full screen

Ideally (communicate if this is creating technical difficulties):

  • Keep current sliding open/close animation

Implement behind feature flag together with:
T271800: (VE Template Dialog) Move parameter descriptions below field labels
T273971: Increase VE template dialog size

Mocks

Sidebar closedSidebar open
Mobile-Sidebar hidden.png (667×375 px, 34 KB)
Mobile-sidebar open.png (667×375 px, 19 KB)

Related Objects

Event Timeline

Lena_WMDE set the point value for this task to 3.Apr 14 2021, 1:14 PM
WMDE-Fisch renamed this task from VE template dialog rendering for mobile to VE always open the sidebar on desktop.Jun 2 2021, 11:48 AM
WMDE-Fisch updated the task description. (Show Details)
ECohen_WMDE renamed this task from VE always open the sidebar on desktop to Adjust sidebar behavior.Jun 4 2021, 7:29 AM
ECohen_WMDE updated the task description. (Show Details)
Lena_WMDE changed the point value for this task from 3 to 5.Jun 9 2021, 1:13 PM
ECohen_WMDE renamed this task from Adjust sidebar behavior to Make sidebar responsive.Jun 29 2021, 10:50 AM

Change 707396 had a related patch set uploaded (by Andrew-WMDE; author: Andrew-WMDE):

[mediawiki/extensions/VisualEditor@master] [WIP] Make the transclusion dialog sidebar responsive

https://gerrit.wikimedia.org/r/707396

One small detail to fix: when the viewport shrinks from large to small (due to e.g. rotating a device), there is an animation of the sidebar expanding to full, and then it collapses to zero width again. Should just collapse from two-column to hide the sidebar.

Change 710510 had a related patch set uploaded (by Awight; author: Awight):

[mediawiki/extensions/VisualEditor@master] Clean up toggleSidebar by splitting out 'auto'

https://gerrit.wikimedia.org/r/710510

Change 707396 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Make the sidebar in the transclusion dialog responsive

https://gerrit.wikimedia.org/r/707396

Change 710989 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Remove unwanted scrollbar in responsive template dialog

https://gerrit.wikimedia.org/r/710989

Remaining issues:

  • When growing window size, there is an extra breakpoint where the content or sidebar are full width, but the dialog goes from being fullscreen to a modal.
  • When in narrow mode, with the sidebar open, there is a tiny bit of extra width which makes the horizontal scrollbar visible.
  • Toolbar icons are centered, which looks bad. @ECohen_WMDE button placement in full-width sidebar mode needs design.
awight changed the point value for this task from 5 to 1.
awight changed the point value for this task from 1 to 2.
awight changed the point value for this task from 2 to 3.

Change 710989 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Remove unwanted scrollbar in responsive template dialog

https://gerrit.wikimedia.org/r/710989

Change 710510 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Clean up toggleSidebar by splitting out 'auto'

https://gerrit.wikimedia.org/r/710510

awight added a subscriber: Andrew-WMDE.

Toolbar icons are centered, which looks bad. @ECohen_WMDE button placement in full-width sidebar mode needs design.

Thanks for your patience - this slipped through the cracks a bit! It looks like on beta they were changed to align left. This is what I would have suggested and I think it looks good!

WMDE-Fisch changed the point value for this task from 3 to 1.Sep 1 2021, 8:16 AM
WMDE-Fisch added a subscriber: WMDE-Fisch.

Mostly done just one potential issue left with jumping the layouts at some break point.

Mostly done just one potential issue left with jumping the layouts at some break point.

I just did some investigation here:

  • At the 540px breakpoint defined in smallScreenMaxWidth we toggle the sidebar by calling toggleSidebar
  • In there the size of the dialog is set to either larger, large or medium depending on if the sidebar is expanded and if longer descriptions are enabled.
  • For us that means, that when the sidebar is collapsed at the 540px the size of the dialog will be set from larger to medium.
  • But at 540px a larger dialog is already in fullscreen mode, when it the jumps to medium fullscreen mode will be disabled again and just will get back when it's even more narrow

Two ways out:

  • With a collapsed sidebar we set the dialog size to large instead of medium (with longer descriptions) then it will stay in the fullscreen mode
  • We set the breakpoint to a smaller point so that even with medium we "stay" in fullscreen when we collapse the sidebar

Change 719965 had a related patch set uploaded (by Andrew-WMDE; author: Andrew-WMDE):

[mediawiki/extensions/VisualEditor@master] Don't jump back-and-forth between fullscreen and floating when resizing

https://gerrit.wikimedia.org/r/719965

Change 719971 had a related patch set uploaded (by Andrew-WMDE; author: Andrew-WMDE):

[mediawiki/extensions/VisualEditor@master] Rename showSidebar to expandSidebar for consistency

https://gerrit.wikimedia.org/r/719971

Change 719993 had a related patch set uploaded (by Andrew-WMDE; author: Andrew-WMDE):

[mediawiki/extensions/VisualEditor@master] Fully hide the content view when the sidebar is expanded

https://gerrit.wikimedia.org/r/719993

Change 720012 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] [POC] Use `display: none` in small-screen mode

https://gerrit.wikimedia.org/r/720012

Change 719965 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Don't jump back-and-forth between fullscreen and floating when resizing

https://gerrit.wikimedia.org/r/719965

Change 719993 abandoned by Awight:

[mediawiki/extensions/VisualEditor@master] Fully hide the content view when the sidebar is expanded

Reason:

Merging the `display: none` patch instead, I think Thiemo is right that there was a real issue with the content pane being visible off-screen, and hiding the scrollbar masked but didn't fix it.

https://gerrit.wikimedia.org/r/719993

Change 720012 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Hide content pane on narrow screens when sidebar is expanded

https://gerrit.wikimedia.org/r/720012

Once this is done, you can probably close T209909 too.

See also T209909#4760836 for a demo of an approach to mobile we experimented with some time ago (the code was never merged). I don't expect this'll change anything about your plans, but maybe you'll find it interesting. Thanks for working on this! :)

Change 719971 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Rename showSidebar to expandSidebar for consistency

https://gerrit.wikimedia.org/r/719971