Page MenuHomePhabricator

Keep sticky header visible until 720px (vs. hiding at 1000px)
Open, MediumPublic

Description

Description

Currently the sticky header hides if the window is 1000px wide (or less). However it's nicely responsive and works well (at least) down to 720px wide windows. Here is a screen recording of how it looks when visible until 720px:

To-do

  • Update the sticky header CSS so that it hides at and below 720px
  • Update the language button in the sticky header to avoid wrapping:
    Screen Shot 2022-08-18 at 4.23.21 PM.png (502×1 px, 274 KB)

Event Timeline

. However it's nicely responsive and works well (at least) down to 720px wide windows

I think this is a false impression related to the disappearance of the language button from the sticky header.

Consider the following

  • We'll soon be expanding the sticky header to include 2 additional edit icons (VE and edit source).
  • We will be adding margins in T314323 to the right of icons
  • Long titles

With the above changes, we're struggling to fit the 1000px breakpoint so this will not easily scale to 720px without some additional code to adapt:

Screen Shot 2022-08-18 at 9.31.12 PM.png (446×2 px, 210 KB)

Consider the following

  • We'll soon be expanding the sticky header to include 2 additional edit icons (VE and edit source).
  • We will be adding margins in T314323 to the right of icons
  • Long titles

Here is a screen recording including two additional icon buttons, the 8px of space between the icon buttons, and a long title:

With the above changes, we're struggling to fit the 1000px breakpoint so this will not easily scale to 720px without some additional code to adapt:

Screen Shot 2022-08-18 at 9.31.12 PM.png (446×2 px, 210 KB)

I agree that we could make some changes to fix it up even more, for example:

  • drop the 82 languages and just use the icon
  • remove some of the other icon buttons
  • remove the page title

but even without making the changes I think it's an improvement to retain the sticky header until 720px

ovasileva triaged this task as Medium priority.Aug 19 2022, 10:48 AM
ovasileva moved this task from Incoming to Current Fiscal Year on the Web-Team-Backlog board.

@alexhollender_WMF - this one doesn't seem like a blocker. What do you think?

@alexhollender_WMF - this one doesn't seem like a blocker. What do you think?

agreed, not a blocker

I'm not doubting it's an improvement, just a lot of added technical complexity and additional work for a small group of logged in users who resize the browser (note tablet users already get the sticky header).

I forget what I said that led to the mention above (in August), but currently I really value having the sticky header at all window-sizes (including whilst logged-out).
I've got a lot of subtle customizations in my userscript; it's not perfect as I'm not a professional CSS-wrangler, but I really like it, especially the full-size search box for easy-clicking. Here's a recording of (part of) what they result in, for the sticky header:

alexhollender_WMF renamed this task from Hide sticky header at 720px wide window to Keep sticky header visible until 720px (vs. hiding at 1000px).Mar 9 2023, 4:42 PM