Page MenuHomePhabricator

[EPIC] Build collapsible sidebar and deploy to all test wikis
Closed, ResolvedPublic

Description

Background

We would like to give users the ability to collapse the sidebar. We believe this will lead to a cleaner reading and editing experience while continuing to give access to important functionality.

Acceptance criteria

  • Collapsed sidebar - sidebar will collapse when selecting the button adjacent to the logo
  • Limit content width (parser-output). Strictly no changes to target content that is larger than this content width. That will be worked on later. (No responsive CSS for content at this point)
  • Sidebar will be open by default for all users (with the possibility to close by default for logged-out users at a later time)
  • State of the sidebar is preserved for logged-in users across sessions (nice to have: globally)
  • Sidebar should be sticky, independent of the content
  • Try to minimize JavaScript used and favor CSS.

Sidebar behavior

(Initial) logged-out - sidebar open, persistent throughout session
(Eventual) logged-out - sidebar closed, persistent throughout session
Logged-in - acts as a preference, persistent across sessions (nice to have, globally)

Mockups/prototype

https://di-collapsible-sidebar-2.firebaseapp.com/Young_Thug
https://people.wikimedia.org/~jdrewniak/dip/p3.html#/en/wiki/Main_Page
http://patchdemo.wmflabs.org/wikis/24b6fd1f6a50fc53846f92f943ce79a4/w/ (Code: GitHub - commits of layout | GitHub - usermenu | Gerrit - squash)

Design spec here: T247038: Design spec for collapsible sidebar

Metrics (qualitative and quantitative)

  • Do people discover that the sidebar is collapsible?
  • Do people collapse it and leave it collapsed?
  • Is there any effects on account creation?
  • Is there any effect on donations?

Testing/QA

  • kowiki gadget

Related Objects

StatusSubtypeAssignedTask
ResolvedJdlrobson
Resolvedovasileva
DeclinedNone
Invalid alexhollender_WMF
Resolvedovasileva
Resolvedovasileva
Resolved alexhollender_WMF
OpenJScherer-WMF
ResolvedEdtadros
Duplicateovasileva
Duplicate Demian
Duplicate Demian
ResolvedSpikeovasileva
ResolvedEdtadros
DeclinedNone
ResolvedPeter.ovchyn
Resolved alexhollender_WMF
Resolvedovasileva
ResolvedMayakp.wiki
InvalidMayakp.wiki
ResolvedEdtadros
ResolvedJdlrobson
Resolvedovasileva
ResolvedEdtadros
ResolvedJdlrobson
Resolved Demian
ResolvedJdlrobson
ResolvedBUG REPORT Demian
ResolvedJdlrobson
DeclinedSpikeNone
Resolved alexhollender_WMF
OpenNone
ResolvedSpikeovasileva
ResolvedEdtadros
Resolvedjwang
Resolvedppelberg
Resolvedovasileva
ResolvedJdrewniak
ResolvedMNeisler
ResolvedMayakp.wiki
ResolvedNone
Resolvedovasileva
Resolvedovasileva

Event Timeline

Demian updated the task description. (Show Details)
Demian updated the task description. (Show Details)

For your information, here is a script of mine, that I had developed to give full horizontal space to the content:

https://fr.wikipedia.org/wiki/MediaWiki:Gadget-LeftPaneSwitch.js

ovasileva claimed this task.

Resolving this, will follow up on the other tasks individually

seems like the collapsed sidebar shouldn't create useless whitespace on the left, and should instead expand the body content to fill the space previously occupied by the sidebar. A good example of this would be Notion.so's sidebar.