Hi @schoenbaechler ,
Few clarifications I need:

• Do we show only one article on the cardview? or is it a horizontal scroll list [viewpager]?
• The gradient is removed on the cardview left line?

Thank you!

@schoenbaechler I also need design or suggestions for the OTD activity. I followed the cardview design and it currently looks like this:

When there is no image and description, it looks rather blank.

@Sharvaniharan

In T261673#6448142, @Sharvaniharan wrote:

Hi @schoenbaechler ,
Few clarifications I need:

• Do we show only one article on the cardview? or is it a horizontal scroll list [viewpager]?

I think one is enough for the Explore feed. Less is more.

• The gradient is removed on the cardview left line?

Yes!

In T261673#6452472, @Sharvaniharan wrote:

@schoenbaechler I also need design or suggestions for the OTD activity. I followed the cardview design and it currently looks like this:

When there is no image and description, it looks rather blank.

Added to my todo list for next week! ✅

@Sharvaniharan

I also need design or suggestions for the OTD activity

Here you go 👇

Zeplin: https://app.zeplin.io/project/57a120b91998d8977642a238/dashboard?seid=5f493336b4c4cf8483777b61

One minor change to the designs on the detail screen that can be applied to Explore feed as well is the addition of the UI: X years ago. I updated the visuals. Let me know if you have any questions.

Thank you @schoenbaechler . Will do this today.

@Sharvaniharan

Some updates / questions in regards to the On this day screen:

• Keep current transition/animation from Explore feed (date animation than takes users to the detail view)
• Hide the calendar icon when users are on the current day. Reveal it when users are exploring another day than today and use accent50 to highlight it.
• Add link for previous day at the end of the timeline, see Zeplin
• Bonus: Can we do a trigger a slight animation when users a scrolling past a date? I’m imagining a subtle (one time) pulse animation when users scroll past a year:
  

Thx, this is exciting! 😍

And thx to @cmadeo for the conversation about this today.

@schoenbaechler Looks great!
One clarification needed: Are we completely getting rid of 'Back to top'? After a long scroll, this was useful.

In T261673#6464906, @Sharvaniharan wrote:

@schoenbaechler Looks great!
One clarification needed: Are we completely getting rid of 'Back to top'? After a long scroll, this was useful.

Good point @Sharvaniharan, let’s keep back to top functionality. Users can go to another date from there. With this, we have it all👇

I updated the screens on Zeplin 👍

Thank you @schoenbaechler . Will update the screen.

Hi @Sharvaniharan, I have a question re: animation / transition: The current one is pretty smooth and it should still work fine when users tap on More on this day → (animate On this day instead of the date [September 17]):

https://www.dropbox.com/s/r9xnw8rarmz1gi1/20200917_121838.mp4?dl=0

I imagine the following transition/animation for this case:

When tapping the year (1988), users should be scrolled to the corresponding event on the detail page

1. Animate On this day, similar to how the date is currently animated September 17
2. Smoothly scroll to the corresponding year

Yes @schoenbaechler . I put in the transition. Looks good:
https://youtu.be/5KH5BffHJuk
However the scroll doesn't look too smooth. It is a bit disorienting when the year is way down in the list. Lmk your thoughts:
https://youtu.be/5ccL-E9TiBw
Other questions:
Also, could I please get the rocket icon for the "You travelled through time 🚀" message.

Thx @Sharvaniharan

Yes @schoenbaechler . I put in the transition. Looks good:
https://youtu.be/5KH5BffHJuk

Nice!

However the scroll doesn't look too smooth. It is a bit disorienting when the year is way down in the list. Lmk your thoughts:
https://youtu.be/5ccL-E9TiBw

You’re right, can we directly jump to the year without scrolling smoothly? Basically applying both the “On this day” animation and the anchor link scroll simultaneously.

Other questions:
Also, could I please get the rocket icon for the "You travelled through time 🚀" message.

The rocket emoji has been approved as part of Unicode 6.0 in 2010 and added to Emoji 1.0 in 2015. It’s safe to apply it directly as a text string, Also it’ll be more aware of the platform’s emoji style (e.g. there are style differences between Google and Samsung). More details here:

https://emojipedia.org/rocket/

The rocket emoji has been approved as part of Unicode 6.0 in 2010 and added to Emoji 1.0 in 2015. It’s safe to apply it directly as a text string, Also it’ll be more aware of the platform’s emoji style (e.g. there are style differences between Google and Samsung). More details here:

https://emojipedia.org/rocket/

Thank you @schoenbaechler . This is awesome to know! I was wondering about that, as it is working well in text in the app! 😅

I will try the direct scroll like we have on 'Back to top'

@Sharvaniharan

I will try the direct scroll like we have on 'Back to top'

🚀🚀🚀

@schoenbaechler I tried the pulse in the easiest way..

https://youtu.be/K7IojbcaJf8

A few things different than the design:

• There is more vertical padding space
• The pulse does not have a border

Please lmk if this works.

Looks like a good base to me @Sharvaniharan — thanks for the video!

Two questions / comments:

01) The pulse should animate when users scroll past it? According to the task’s description:

Bonus: Can we do a trigger a slight animation when users a scrolling past a date? I’m imagining a subtle (one time) pulse animation when users scroll past a year:

02) The space on the right side of the dot needs to be adapted (“2002” should be aligned with “last year”)

@schoenbaechler I implemented the above suggestions. Please lmk your thoughts on the new apk : https://drive.google.com/drive/folders/1faXH-1TU7RTrJM51V1H1UqQClxPgbfHQ?usp=sharing

Thx @Sharvaniharan, I like the animation 😍A few things to have a look at:

01) This part should not be fixed. Only the date should be added to the app bar when users scrolled past the date below

02) Make sure vertical type rhythm is the same as in the designs (font-size: 24sp; line-height: 32sp)

03) Hide dot when there’s only one card

04) Slider dots are too far away from cards. Check designs, they should have a top margin of 16dp

05) Check spacing after titles, it’s currently to large (it uses font-size: 16sp; line-height: 24sp for description and titles)

06) Avoid outputting formatted text here, can we just output plain text? (Use Roboto Regular instead of Medium for the entire description)

07) Bottom margin of certain cards is off? Can we unify it? I remember @cooltey fixing this by outputting plain text in the Explore feed.

08) Apply correct color from designs for this line (color_group_18). Also, the line needs to be at least 16sp above the dot, otherwise it seems cut off (see designs on Zeplin). Same applies to the cards on Explore.

09)

07) Bottom margin of certain cards is off? Can we unify it? I remember @cooltey fixing this by outputting plain text in the Explore feed.

@schoenbaechler the issue here is that there are other cards in the pager, which are taller, so automatically this card is getting extra space at the bottom. You can see the difference here :
When the long card is removed, it all looks fine: https://youtu.be/bCZi5su3N9I . When not removed, we have that extra space: https://youtu.be/nhn_7V17D70. So we can either have a fixed height, or would have to live with this.

In T261673#6510383, @Sharvaniharan wrote:

07) Bottom margin of certain cards is off? Can we unify it? I remember @cooltey fixing this by outputting plain text in the Explore feed.

@schoenbaechler the issue here is that there are other cards in the pager, which are taller, so automatically this card is getting extra space at the bottom. You can see the difference here :
When the long card is removed, it all looks fine: https://youtu.be/bCZi5su3N9I . When not removed, we have that extra space: https://youtu.be/nhn_7V17D70. So we can either have a fixed height, or would have to live with this.

Ok thx @Sharvaniharan — let’s keep it as is then. Btw. October 1 in your YouTube video is again using an incorrect bold style (faux bold).

You almost catched them all @Sharvaniharan 👏

01) This is not fixed yet.

01) This part should not be fixed. Only the date should be added to the app bar when users scrolled past the date below

Check out this video in which I was scrolling slowly through the feed:

https://www.dropbox.com/s/ftat67sogmqj82s/20201021_125636.mp4?dl=0

The elements...

On this day
October 20
27 events from 1568 – 2011

... should naturally scroll up when scrolling down. It’s currently sticky until the first card has passed the viewport.

02) Increase bottom padding of the cards to the same value as the top padding. Especially in cards where there’s no image and description, the text feels unbalanced as it sits too low in the card:

The same imbalance can be observed when there’s an image and a title (more space at the bottom)

03) The text here is using faux bold (incorrect bold style):

If these are fixed, it’s good to go! 🚀 THX

@schoenbaechler

01) This part should not be fixed. Only the date should be added to the app bar when users scrolled past the date below

This is also happening because the viewpager is swallowing the vertical scroll touch and not letting the collapse toolbar to collapse gracefully. You can. see here that if we scroll on other items, it collapses without an issue, even on slow scroll:
https://youtu.be/1fOzf_38ob4

So will be converting this to a recyclerview too :

From our discussion that this will be converted to recyclerview, and will try our best to do concept 1, where items snap to place. : https://app.zeplin.io/project/57a120b91998d8977642a238/screen/5f91cc21779df9645d845e7c or concept 2, that fails, which is regular recyclerview working : https://app.zeplin.io/project/57a120b91998d8977642a238/screen/5f91cdc6b5eca50e5b5ac7e6

A side effect of this will be :

No indicator dots

01) This part should not be fixed. Only the date should be added to the app bar when users scrolled past the date below

This is also happening because the viewpager is swallowing the vertical scroll touch and not letting the collapse toolbar to collapse gracefully. You can. see here that if we scroll on other items, it collapses without an issue, even on slow scroll:
https://youtu.be/1fOzf_38ob4

Sounds good! It would be great if the app bar title fades in (simultaneously with the fade out) below so we don’t have a state where there’s nothing visible in the app bar (see 0:04).

From our discussion that this will be converted to recyclerview, and will try our best to do concept 1, where items snap to place. : https://app.zeplin.io/project/57a120b91998d8977642a238/screen/5f91cc21779df9645d845e7c or concept 2, that fails, which is regular recyclerview working : https://app.zeplin.io/project/57a120b91998d8977642a238/screen/5f91cdc6b5eca50e5b5ac7e6

Okay!

A side effect of this will be :

No indicator dots

That’s fine, RIP indicator dots ;)

Since @cooltey and I fine tuned Top read, Because you read, Featured article and Random article together, can you (@cooltey) apply the same settings to the On this day cards (Explore feed and detail view) ?

01)

I noticed that the On this day title uses a different bottom margin than the other cards, e.g. Top read (T261669) or Because you read (T261671). Please apply the settings for the title to On this day in the feed and detail view.

02)

Also different is the bottom margin for On this day cards, see comparison with the Featured article card below. Please apply the same margin from Featured article to On this day cards in the Explore feed and detail view.

@schoenbaechler I have made a separate ticket to resolve the collapsing toolbar issue: https://phabricator.wikimedia.org/T266592. Other than that everything is fixed in this: https://drive.google.com/file/d/1kwxzkKLRUDfWWCUd-Oqzb22xRexzWjwi/view?usp=sharing

once @cooltey makes the changes you. have mentioned, is this ready for QA?

Thx @Sharvaniharan, since this has not been optimized:

It would be great if the app bar title fades in (simultaneously with the fade out) below so we don’t have a state where there’s nothing visible in the app bar (see 0:04).

I added it to the ticket that you’ve openend (T266592).

once @cooltey makes the changes you. have mentioned, is this ready for QA?

Yes, if the changes in T261673#6582483 are applied, it’s ready for QA signoff.

once @cooltey makes the changes you. have mentioned, is this ready for QA?

Yes, if the changes in T261673#6582483 are applied, it’s ready for QA signoff.

For the sake of completion → @cooltey is still tweaking this in T263259#6596008.

Also looks good on 2.7.50334-alpha-2020-11-09