Because the sparklines are a new feature with additional data needs, splitting this out as a separate ticket.

This also requires networking code to be moved into our extension, which is split our as a separate ticket.

@RHo it looks like the background color the widget provides is different from what was in the mock (we can change this, but we can't change the top bar color and it wouldn't match the other widgets). I made a best guess at adjusting text colors but let me know if you have any updates (same goes for the continue reading widget)

@RHo updated screenshot

hey @JoeWalsh - looking good and I have just added the specific new color palette text colors in the Zeplin styleguide for this project. They are in brief:

Dark Gray hex #555a5f

UIColor(red: 85.0 / 255.0, green: 90.0 / 255.0, blue: 95.0 / 255.0, alpha: 1.0)

Used on

• Capitalised date (title in the expanded widget view)
• "See more trending" text and chevron (footer text in the expanded widget view)
• "## readers" trending amount text (right of the spark line on each trending list item)
• timestamp text in continue reading widget (eg "3 days ago")

Foundation Gray hex #7d8389

UIColor(red: 125.0 / 255.0, green: 131.0 / 255.0, blue: 137.0 / 255.0, alpha: 1.0)

Used on

• Numbers 1, 2, and 3 denoting the top 3 items shown in the expanded trending widget

Pure Black hex #000000

• used in the article title and description at opacity 1.0
• used for all widget header text at opacity 0.75

updated colors

@RHo for the header text, I can't do opacity 0.75 due to what I need to do to for the transition animation - is there an opaque equivalent I can use?

Ahh in that case, can we use the Dark Gray at 100% in the header text?
Thanks!

Seems broken to me.

Messages by me from September 4:
’04:31:19 <Josve05a> Umm...pressing articles in the new "Top read" widgets links to the mobile web version, and not to the app...
04:34:27 <Josve05a> Also, I press "show less" on the widget, but it does not collapse....too late in th night to file a ticket atm...
04:37:26 <Josve05a> https://usercontent.irccloud-cdn.com/file/evB4QJEs/IMG_3785.PNG
04:37:36 <Josve05a> https://usercontent.irccloud-cdn.com/file/2j9kmpFp/IMG_3784.PNG’

Messages from today:
’16:56:33 <Josve05a> https://usercontent.irccloud-cdn.com/file/z96oRwgj/IMG_3796.PNG
16:56:49 <Josve05a> joewalsh, coreyfloyd, JoshM_: Since I told you that the top read widget broke for me (2-3 days ago), it is still broken. Now even unpressable. Even when deactivated and turned back on’

Any way I can grab logs somehow for debugging?

@JoeWalsh - just updated mocks in the task description.

Main change is to show the article extract text up to 2 lines instead of the Wikidata description for the list item (with the wikidata description as fallback if no extract exists).

Just want to point out that my eyes are seeing the description for Lemonade under Mona Lisa as well. Although, now that I think about it, it may be a psychological and philosophical reason it is there as well ;) (yeah I know it is just a mock ;)

In addition to matching the design mocks, here are some initial tests. We will also need to add Regression tests for this feature in future versions.

Install

1. On the device's home screen, go to the Today view
2. Scroll to the bottom and press "Edit"
3. Scroll until you find Wikipedia Top Read, and tap the Add button
4. Tap Done
5. Verify that the "collapsed" version of the Widget is shown, and all elements in the mock are present.

Expand and Tap-through

1. Open the app and load any article
2. Close the app and go to the device's Today screen
3. Tap the Show More button on the widget
4. Verify that the widget expands smoothly and all the elements in the Expanded mock are present
5. Tap through on the 3rd article listed
6. Verify the app opens, and the article from the previous step loads as usual
7. tap the back button and verify that the article from step 1 is loaded
8. Tap the W button, then the History tab
9. Verify that the article from Step 1 and Step 5 are listed in the History

Data verification

1. Open the Explore tab, pull to refresh, and find the first Top Read card (should be yesterday's date)
2. Note the top 3 article titles
3. Go to the devices Today screen and tap "Show More" to expand the widget
4. Verify that the top three articles listed there match the top 3 from step 2

Language change

1. In the app, go to the Settings screen
2. choose any non-English language as your primary language
3. Open the Explore tab, pull to refresh, and find the first Top Read card (should be yesterday's date)
4. Note the top 3 article titles
5. Go to the devices Today screen and tap "Show More" to expand the widget
6. Verify that the top three articles listed there match the top 3 from step 2

Footer

1. Open the Explore tab, pull to refresh, and find the first Top Read card (should be yesterday's date)
2. Tap the Top Read card's footer "All top read articles..."
3. Note the list of articles shown
4. Tap "<Explore" to return to the feed
5. Go to the devices Today screen and tap "Show More" to expand the widget
6. With the widget expanded, tap the Widget's "See more trending" footer.
7. Verify that the app opens and the list is the same as the one from step 2

@JoeWalsh Did you have a chance to implement the empty state for when there is no data?

If not, I will create a follow-up ticket and we can test/review this as is for now.

Right now, pressing See more trending on build 930 does not open the right page in the app, just the explore feed.

hey @JoeWalsh – after discussing w Nirzar, last minute minor update on the font-style of the title. Instead of SF UI Bold, lets use SF UI Display Black in the same #555A5F color, and shorten to just the Language wikipedia it is on (ie., omit the preposition "on").

Testing with iPad Air 2 (iOS 10.0.1) and Wikipedia 5.2.0 (930). This is fixed according to initial tests, however even after the Language change of the Wikipedia app, the devices Today screen will continue to show only English articles until "Show More" is tapped.

Per @Nicholas.tsg note, the language setting is not respected in the wdiget. It should always show results in the users current primary language. Currently it seems "stuck" on English.

https://github.com/wikimedia/wikipedia-ios/pull/883

https://github.com/wikimedia/wikipedia-ios/pull/885

In T142762#2625348, @RHo wrote:

hi @Mhurd and @Fjalapeno – a few visual design bugs that I can see on the simulator and from the Git images posted (unfortunately cannot get it working on my phone).

1. Size of the Continue reading image should be the same as Top read articles' images. At the moment it is slightly bigger.
2. Continue reading image should be in the same position as the Top read articles' images. Actual: It is slightly closer to the left (ie., greater padding on the RHS).
3. Top read article images should be a square 86x86pt size. At the moment they are slightly narrower.
4. Title of the expanded Top read widget (ie., where it says the Wikipedia language) should be in font type SF UI Display with the heavier font-weight Black (but still in the same color #555A5F)
5. Sparkline should move to always be below the last line of text rather than being locked in the bottom LHS corner of each list item.

Here's a screenshot capturing feedback above in visual form:

https://github.com/wikimedia/wikipedia-ios/pull/887

Testing with iPhone 6S (iOS 10.0.1) and Wikipedia 5.2.0 (939). This is fixed according to the test steps @JMinor wrote above.