FYI @Sharvaniharan, I added the article’s loading state without a placeholder to the card’s description:

Article (loading)

Original	Redesign

Hi @schoenbaechler

After code change for search:

I have assumed some margins and paddings as I moved the image right. Just wanted a pre-review as I go

Hey @Sharvaniharan, thanks for checking back! Looks like you nailed the margins 👏. It’s 16dp left, right and between text and image, right? (see image)

News

OnThis Day

In T218201#5166478, @schoenbaechler wrote:

Hey @Sharvaniharan, thanks for checking back! Looks like you nailed the margins 👏. It’s 16dp left, right and between text and image, right? (see image)

Yes yes yes!!! whoo hoo! Thanks @schoenbaechler

Point to note... when there is no image for the news card item, that is all the text we can show... 😖 Of course in the example I had to artificially remove the image to show how it would look... but in reality i assume all of the news items not having an image is very borderline..

@Sharvaniharan, thanks! I noticed the three dots in “In the news”:

when there is no image for the news card item, that is all the text we can show

So there’s no way to show more text here? If that’s the case, we might have to consider using the same layout as for “In the news“:

Hi @Sharvaniharan, just noticed another occurrence of placeholders – Link previews:

Original	Redesign

Added it to the task’s description. Sorry for not thinking about it earlier.

@schoenbaechler I have removed page item view is also used in page bottom content, so when I remove the placeholder image, it looks like this :

Also... when there are no descriptions and images the item views are too small like this :

Should there be a minimum height or is this good?

Do you have any suggestions to how this should look? or is it ok like this?
Thank you :-)

Great catches @Sharvaniharan!

I have removed page item view is also used in page bottom content, so when I remove the placeholder image, it looks like this:

Let’s remove the bookmark icon from this component and move the image to the right. I assume that the use case of bookmarking an article only by seeing a title and description is rather low. Plus, long pressing the item still provides easy access to save the article (Add to reading list).

Also... when there are no descriptions and images the item views are too small like this :

As long as the item is at least 48px high (which I think it is on that screenshot), then it’s fine to keep the height variable.

@schoenbaechler the news item ellipsis that we discussed this morning, is the only change pending. Otherwise ready for review.

-Update : scratch that... I had updated the extract maxlines to 10 before itself. :-) so fully ready for review.

Thanks for your work on this @Sharvaniharan. I didn’t see any In the news items without an image yet but I guess it’s fine since you showed it to me the other day! However, here are some things to optimize:

• 01 Remove this image and replace it with a plain background-color (color-group-21):

• 02 Remove placeholder images in Explore feed (when image is not loaded) and replace it with a plain background-color (color-group-21). Please also check the dedicated In the news, On this day, Trending & History views and apply the same specs.

• 03 Remove placeholder images completely and use the corresponding background-color of the element. Please also check the dedicated In the news, On this day, Trending & History views and apply the same specs.

Hi & thanks @Sharvaniharan, three things and then we’re ready for QA signoff! 🎉

01) On article pages when images are disabled, the placeholder images are still displayed. Please remove it and replace it with a plain background-color (color-group-21):

02) In “My lists”, the background color fill of the squares is different to what we defined anywhere else. Please change it to color-group-21.

03) In “On this day”, the thumbnail image disappears at some point after scrolling to the left. Have a look at the Union Army flag in this video that disappears at the end. Can we just keep it visible until users have scrolled past it? (basically the same behavior as at the right edge of the viewport)

https://www.dropbox.com/s/esmoqv9oljvcs6g/disappearing-flag.mp4?dl=0

Thanks for discussing this today morning @schoenbaechler :-) As discussed on call, 1 and 2 will be fixed and I was able to just change background colors conditionally per theme. However, 3 is just how the recyclerview draws with clipped padding.

Looks good across a couple of platforms on 2.7.50282-alpha-2019-07-08