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-Archived 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

This could potentially be related to T106463 and providing a more responsive Vector 2022 skin for Wikifunctions. Might need design work beforehand similar to T365631.

Jdlrobson added a subscriber: Jdrewniak.

Would need some designs from Justin and updates to use the new task template.

This is relevant to the Vector header re-work as well as some FY24-5 concepts in the hopper we have coming up about making search more prominent in the reading experience to encourage searching within articles and easier navigation between articles without leaving Wikipedia. I'm adding it to my work for the upcoming sprints.

Moving this to our backlog until we're ready to start looking at FY24/5 issues

Per the web team's quarterly grooming, these tasks are being removed from the team's backlog.