Page MenuHomePhabricator

Add a background view for status bar when TOC is visible
Closed, ResolvedPublic2 Estimated Story Points

Description

5.0 (454)
In TOC overlay, contents show through the status bar

IMG_6875.PNG (1×750 px, 171 KB)

Currently, the TOC flows below the status bar.

Proposed solution
Let's add a simple white background view to the status bar and scroll everything under it

statusbar.png (1×750 px, 182 KB)

Event Timeline

KHammerstein raised the priority of this task from to Needs Triage.
KHammerstein updated the task description. (Show Details)
KHammerstein added a subscriber: KHammerstein.
JMinor triaged this task as Medium priority.Nov 14 2015, 12:41 AM
JMinor added a project: iOS-app-v5-production.
JMinor set Security to None.

@barbarar this would be an easy, but valuable fix! some suggested approaches:

  • Add an opaque, white view at the top of the TOC that sits under the status bar frame but above the TOC cells
    • Optionally, could use WMFGradientView to fade out cells as the near the status bar
  • Prevent the TOC view from extending underneath the status bar

Or, hide the status bar when TOC is shown.

Some examples of how other apps address this issue:

Google's account/etc. sidebar (in this case, Google Maps, but it's in almost every Google app):

Screen Shot 2016-01-29 at 9.09.16 AM.png (1×750 px, 303 KB)

Google sheets overflow menu (note how "Brian's Workout" scrolls under where the status bar begins):

Screen Shot 2016-01-29 at 9.10.16 AM.png (1×750 px, 90 KB)

@JMinor @Nirzar do either of you have a preference for how we handle this?

Hiding the status bar is tricky because it will resize the article underneath as well. But we could hide the status bar ALWAYS when viewing an article - that way its not an issue anymore for the ToC

I think the white bar at the top is an ok solution. Not great but solves the issue.

Another idea is making the entire header "sticky" so it doesn't scroll up.

Similarly, we could make the header sticky but shrink it when the user scrolls (so it is still sticky but takes up less space)

Hiding the status bar is tricky because it will resize the article underneath as well.

It doesn't in Google Maps app, and I think our content already extends under the status bar so it shouldn't move.

Similarly, we could make the header sticky but shrink it when the user scrolls (so it is still sticky but takes up less space)

Mentioned this in the other ticket... maybe we should just merge these two

Personally, I like Fjalepeno's last solution:

The header takes up a fixed amount of space, and the rest of the ToC scroll under it. We could squeeze and hide the "CONTENTS" or Title part as you scroll down, so it doesn't take up to much space, and its a much need "jump to article top" action.

In landscape, only the "squeezed" version (suggest just article title) would be shown.

In either case, the header has a different treatment (as in blocked ticket) which extends under the status bar, but doesn't have text so it doesn't obscure it.

Another reason to have a sticky header is it would give a place for explicit close button, solving accessibility issue T124820.

Nirzar renamed this task from Scrolling content showing through the status bar to Table of contents needs a sticky header.Feb 9 2016, 8:26 AM
Nirzar updated the task description. (Show Details)

@Nirzar please update this ticket to reflect breaking out what goes in 5.0 and what goes in 5.1 (separate ticket for the latter), per estimation. CC: @JMinor

White background and sticky header only. ^

MBinder_WMF edited a custom field.

Additional note from estimation: Break up this 5 ticket into a 2 and a 3: one is a white background, one is a sticky header. Still need separate 3rd ticket for animations.

Nirzar renamed this task from Table of contents needs a sticky header to Add a background view for status bar when TOC is visible.Feb 11 2016, 11:46 PM
Nirzar updated the task description. (Show Details)

@Nirzar @Fjalapeno @JMinor I had some ideas that led me to think we could simply hide the status bar when showing the TOC w/o affecting the article view underneath (similar to the Google Maps example I posted earlier). Let me know if you think it's worth looking into. Keep in mind, this would also potentially solve T127342.

@BGerstle-WMF i tried that but if you hide it with conventional ways, the title bar jumps up. if we can hide it without any jump in base view controller that would the best solution to this problem.

I think this might have resolved T126337 as well:

pasted_file (1×768 px, 98 KB)

pasted_file (768×1 px, 101 KB)

Table of contents no longer visible through title bar on iOS 5C in build 5.0.0 740.