Page MenuHomePhabricator

Fix padding below the legal text
Closed, ResolvedPublic

Description

This task was created off @cmadeo comment in More pixel pushing on footer.

Steps to reproduce:

  1. Tap on the TOC in an article, jump down to the 'read more' section
  2. Scroll up
  3. Scroll down to the bottom of the page again

There is slightly less padding below the legal text than there was on initial load after using the TOC link.


Design

  • Add dynamic padding below legal text so that Read more can reach the top of the screen to trigger the TOC active states
  • Updated iPad footer to have the same grey background / base as phone

Article footer - Single.png (667×375 px, 85 KB)

https://zpl.io/Zqiuzt

Event Timeline

Hey @cmadeo

There's some fallout from fixing this:

Formerly if you selected "Read More" it would scroll "Read more" header just above the threshold at which the TOC will consider a section "selected". Below is an image before this fix after making "Read more" selection from TOC. The dashed line is roughly where the "selection intersect" line is - so whatever section intersects that dashed line is considered selected:

Screen Shot 2017-06-30 at 6.13.04 PM.png (1×862 px, 253 KB)

So, before, if you tapped the TOC button again immediately after selecting "Read more" from the TOC, when the TOC appeared again it would still show "Read more" as being selected.

However, this is not the case after this fix because as you can see below, after selecting "Read more" from the TOC the "Read more" section doesn't rise to the "selection intersect" line:

Screen Shot 2017-06-30 at 6.12.03 PM.png (1×862 px, 262 KB)

Tap image for animation:

7777.mov.gif (720×400 px, 1 MB)

We can tune this in a few ways... maybe next week.

Oops accidentally closed this when I added the PR link above...

Thanks for the gif and all of the backstory @Mhurd, let's check in later this week or next. I'm sure we can find a working solution together :)

JMinor triaged this task as Lowest priority.Jul 6 2017, 10:48 PM
JMinor moved this task from Needs Triage to Bug Backlog on the Wikipedia-iOS-App-Backlog board.

Note to self: remember to add testing criteria for being able to scroll read more to top (tablet, phone, landscape, portrait) and note that we'll want to add this to regression script.

Testing criteria

Phone:

  • Load an article
  • Scroll to bottom of article
  • Portrait
    • Ensure the "Read more" header can be scrolled to near the top of the screen - some padding is added at the very bottom to ensure you can do so
  • Landscape
    • Ensure when you scroll to the very bottom of the article you no longer see the extra padding at the very bottom mentioned in the portrait step

Tablet:

  • Load an article
  • Scroll to bottom of article
  • Portrait AND Landscape
    • Ensure the "Read more" header can be scrolled to near the top of the screen - some padding is added at the very bottom to ensure you can do so
    • ^ When testing the above step try it with the table of contents both visible and hidden.

@ABorbaWMF Hey can you add this test to the regression script so TSG runs it each time?

Testing on iPhone 6s (iOS 10.3.3), iPad Air 2 (iOS 10.2) and Wikipedia app 5.6.0 (1171). I haven't noticed any oddities as described when executing the testing (I only tested one article, so feel free to recommend a specific one) but this seems fixed on the latest build.

Tested on iPad Mini Retina with iOS 10.3, and iPhone 7+ with iOS 10.3 on App 5.6.0 (1172)

Looks good