Thanks @Jhernandez!

Yo @Jhernandez,

This looks solid. Some feedback below:

1. Move user icon 1px below
2. There is too much space between title and description
3. More padding after body copy in the card
4. New idea: Try removing the line for the button and making the entire card clickable to the article

Change 194498 had a related patch set uploaded (by Jhernandez):
WIP: Collection item cards are responsive (tablet)

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

@MSyed Hey! Not sure why you posted the comments here :p I've opened a task T91634 to keep track of this comment and act on it. Feel free to add more feedback there and request changes, then when they are ready we can move that task to "Ready for signoff" so that you can check it out. I've added it to the current sprint board too, since we may run short of frontend work.

@MSyed Regarding this task can you specify the behaviour you want for tablet-portrait+?

I've been experimenting by setting the cards to 768/2 width when in tablet mode upwards, but it is a bit difficult since the cards have variable height and css is crap.

@Jdlrobson Would it be feasible to use flexbox (http://caniuse.com/#feat=flexbox) for the tablet (and bigger) view?

I can't wait for flexbox to be everywhere...

Flexbox - if it makes your life easier go for it. We only really need to support IE10 for Windows phones, we can always fix older browsers later. Build for the future not the past etc...

@Jhernandez @JKatzWMF

Attaching a mock here for tablet view just to give some clarity around this. Let me know what you think.

I think each of the cards in both views should have a fixed width, and then we can lay them out on tablet fluidly.

@JKatzWMF @MSyed

In T94047 I've implemented the columns using css columns. That's the only way to get a behavior like in the mockup.

One thing to note is that the flow of boxes is top-down and left right, like newspaper columns. Like this: http://jsbin.com/rexahanade/1/

For aligning items in a horizontal left to right we have problemes, in css variable height boxes (with or without image, and the extract text wrapping varies the box width) are a problem: http://jsbin.com/diyoxopozo/1/ (see the problems in css in that example).
If we wanted so, making all the cards the same fixed height would solve this problems but create a lot of whitespace on cards without image.

Gif of current layout on tablet http://i.imgur.com/rQFskMD.gif

Change 194498 merged by jenkins-bot:
Collection item cards are responsive (tablet)

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

@Jhernandez, just noting that the collections view (more important) is done but it looks like the list of collections is what remains on this card.

@JKatzWMF what is the action on this card? We shouldn't really have placeholders in sprint :)

@Jdlrobson Implementing the column layout on tablet that you see on Special:Gather/by/User/1 but for the list of collections (Special:Gather/by/User or Special:Gather).

The description of the task matches. I'll get to it soon

Change 201690 had a related patch set uploaded (by Jhernandez):
Tablet styles for Special:Gather/by/User

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

Collections list tablet styles on previous patch ⬆️

@Jdlrobson Addressed your concerns. The css analysis thingy seems like a good topic for the dev pow pow maybe. Let's not forget to talk about it

Change 202018 had a related patch set uploaded (by Jhernandez):
Hygiene: Merge .collection-cards and .collection-items

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

⬆️ Follow up patch that merges the selectors b/c behavior is the same.

Change 201690 merged by jenkins-bot:
Tablet styles for Special:Gather/by/User

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

Change 202018 merged by jenkins-bot:
Hygiene: Merge .collection-cards and .collection-items

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