@Jdlrobson
Here is the spec: T113635

Article tested: http://en.m.wikipedia.beta.wmflabs.org/wiki/Related_test

Inconsistencies:
There should be 3 articles in the list
Thumbnail images are blurry
"Related articles" title should have padding-left: 0em
Wikidata description text should be 13px. I filed a separate bug - its also too big in search results. T117998
Spacing between article actions and last edited bar should be 35px to keep spacing consistent.

Thank you for these a few clarifications needed before I fold them into the description.

Inconsistencies:
There should be 3 articles in the list

What if there are only 2 related articles? Should they not be shown at all? I assume this means there should be a maximum of 3?

Thumbnail images are blurry

Should we double the thumbnail size then?

"Related articles" title should have padding-left: 0em
Wikidata description text should be 13px. I filed a separate bug - its also too big in search results. T117998

Fixed in https://gerrit.wikimedia.org/r/251445 but really....

Spacing between article actions and last edited bar should be 35px to keep spacing consistent.

... It would be great @Nirzar to have a mockup css/html detailing how it should look to avoid any further confusion.

@Jdlrobson

I assume this means there should be a maximum of 3?

Yes, maximum of 3.

Should we double the thumbnail size then?

The images look correct, not blurry in search results. Maybe check that the code is the same? Sounds like more of an engineering question?

... It would be great @Nirzar to have a mockup css/html detailing how it should look to avoid any further confusion.

Here is the spec: T113635 with the mock in the description:

@KHammerstein, @Nirzar: What's the font size of the heading?

Ping, @Nirzar. I would appreciate it if the design can answer the questions above since getting this card fixed ASAP is important as other cards depend on this.

@bmansurov font size for the title (Related articles) should be 16px bold sans-serif

Thanks!

Change 252920 had a related patch set uploaded (by Phuedx):
Limit the number of pages to 3

https://gerrit.wikimedia.org/r/252920

 252920 covers the "Maximum of 3 cards in a view regardless of how many added by the editor. When more than 3 added just pick an arbitrary 3 e.g. the first 3" AC.

Change 252920 merged by jenkins-bot:
Limit the number of pages to 3

https://gerrit.wikimedia.org/r/252920

Change 253293 had a related patch set uploaded (by Bmansurov):
Design tweaks of Cards

https://gerrit.wikimedia.org/r/253293

Change 253293 merged by jenkins-bot:
Design tweaks of Cards

https://gerrit.wikimedia.org/r/253293

Tested on http://reading-web-staging.wmflabs.org/w/index.php?title=1&mobileaction=toggle_view_mobile after installing the Cards extension on the staging server.

@Nirzar should sign off on this, right?

@phuedx the example given here http://reading-web-staging.wmflabs.org/w/index.php?title=1&mobileaction=toggle_view_mobile doesn't have picture and wikidata descriptor in related. is there another place where i can check the implementation?

I uploaded a thumbnail for one of the articles (book), but the url is being escaped.

@bmansurov as you said the because of escaping, image doesn't show up and wikidata descriptor missing too.

even if i fix the escaping in dev tool the image gives 404
http://reading-web-staging.wmflabs.org/images/thumb/d/d9/Test.png/80px-Test.png

anyways, can we have these changes on http://en.m.wikipedia.beta.wmflabs.org or anywhere else where i can see how it's gonna look on production. or a screenshot maybe?

The thumbnail is also missing on the corresponding file page: http://reading-web-staging.wmflabs.org/wiki/File:Test.png

I got the thumbnail working, but wikidata descriptions aren't showing up. Any ideas how to get the already-installed wikidata wiki (http://wikidata-reading-web-staging-2.wmflabs.org) work, @phuedx?

@bmansurov: That link doesn't work for me. It feels like it should just be enabling the wikibase role on reading-web-staging but…

I followed the instructions at https://wikitech.wikimedia.org/wiki/Help:Labs-vagrant#Running_a_wikifarm_on_a_single_labs-vagrant_host to get http://wikidata-reading-web-staging.wmflags.org working.

I've spent quite some time trying to get wikidata descriptions show on the staging wiki, but no luck.
@Nirzar, can you please open [1] (make sure you're in beta mode) and edit the 'Book card' html in the developer tools to be the following:

<a href="/wiki/Book">
	<div class="ext-cards-card-thumb landscape" style="background-image: url( 'https\:\/\/upload\.wikimedia\.org\/wikipedia\/commons\/thumb\/a\/a7\/Ezra_Cornell\%27s_first_book\.jpg\/80px-Ezra_Cornell\%27s_first_book\.jpg' );"></div>
	<h3>Book</h3>
  	<div class="ext-cards-card-extract">medium for a collection of words and/or pictures to represent knowledge, often manifested in bound paper and ink, or in e-books</div>
</a>

This should get you what you need.

[1] http://reading-web-staging.wmflabs.org/w/index.php?title=1&mobileaction=toggle_view_mobile

@bmansurov looks good to me. i am just worried about picture quality but i think we will see that on beta. also i have high density display and we are not doing 2x thumbnails right now.

@Nirzar, thanks for testing. We can certainly improve the thumbnail quality. How about creating a new task for that since the current task doesn't have that as a requirement?

@bmansurov sure

@bmansurov, @Nirzar: Is this Done?

I remember Nirzar saying it looked good in stand-up.

@phuedx yes it's done.