Page MenuHomePhabricator

User links: treatment at smaller resolutions
Open, MediumPublic

Description

Background

The user links menu T266536: [EPIC] Consolidate user links into a single menu will require a separate treatment at smaller resolutions to ensure that all required links are displayed correctly.

Acceptance criteria

  • For logged-out users, at ??? px, the menu will collapse the create account link into the user menu
  • For logged-in users, at ??? px, the menu will collapse the user name/link to user page into the user menu

Design

Prototype: https://di-community-round-2.web.app/Gucci_Mane

Logged-out
defaultmenu opennotes
full size
-
medium
(1) menu icon switches from ... to 👤, (2) Create account collapses into menu, (3) icon (globe) drops from logo
small
Search collapses into a icon button
Logged-in
defaultmenu opennotes
full size
-
medium
(1) menu icon switches from ... to 👤, (2) [Username] collapses into menu, (3) icon (globe) drops from logo
small
Search collapses into a icon button

Event Timeline

ovasileva triaged this task as Medium priority.Mar 5 2021, 1:22 PM

@alexhollender - what is our small break point?

@alexhollender - what is our small break point?

ha, good question. I don't actually know what the specific breakpoint is. @Jdrewniak ?

500px is the minimum we support right now

alexhollender added subscribers: RHo, Volker_E, Pginer-WMF.

@Pginer-WMF @RHo @Volker_E can you please review the responsive states in the description and let me know if you have any questions or concerns? Thanks so much : )

The Wikipedia mark with the sub-text feels a bit heavy on smaller screens. Not looking bad, but I wonder whether it would make it more clean to use the simplified mark (just "Wikipedia", not including "The Free Encyclopedia") as it is done in the mobile web experience:

Thanks @alexhollender for the ping. The user links treatment for logged out and in users at medium and small widths LGTM. +1 to @Pginer-WMF's suggestion above about using the wordmark only (no tagline) on the small screen.