1008934 - Link Clicker page needs styling for mobile clients

Status: RESOLVED FIXED

(Hello (Loop) :: Client, defect, P1)

Description

[Mark Banner (:standard8)]

It can currently be used on mobile clients, but the layout and button sizes are quite bad without zooming.

Comment 1

[Nicolas Perriault (:NiKo`) — needinfo me if you need my attention]

Attachment: https://github.com/mozilla/loop-client/pull/30

Screenshots are attached to the github PR. I'm not asking for a review yet, just for early feedback about both the simplistic UI & the CSS impl. here.

Comment 2

[Nicolas Perriault (:NiKo`) — needinfo me if you need my attention]

Note that I don't really know what to do do with the "Conversation, portrait on mobile" case… I feel like cropping would be better than all this wasted whitespace, but I remember conversations around Talkilla where we said that cropping was bad practice…

Comment 3

[Dan Mosedale (:dmosedale, :dmose)]

Looks like a fine start to me.

As far as portrait goes, I suspect it would look a bunch better if the portrait were vertically centered and the empty space were black, which might be a fine first iteration.

Maybe Darrin has an opinion on cropping here.  The thinking might be different on mobile, particularly if we set it up to be cropped by the viewport such that the user could make a pinch gesture to zoom out and see the whole thing.

Re the CSS, I'm surprised it's necessary to use absolute positioning on the button.  Why is that?

Comment 4

[Nicolas Perriault (:NiKo`) — needinfo me if you need my attention]

> Re the CSS, I'm surprised it's necessary to use absolute positioning on the button.  Why is that?

It's a common technique for centering vertically; alternatives are table-cell and negative margins… I don't have a very strong opinion on this but the absolution positioning trick seems the best to me.

Comment 5

[Dan Mosedale (:dmosedale, :dmose)]

The table-cell approach seems a bit more readable, since it includes "vertical-align" property.  That said, I don't feel terribly strongly about this.

Comment 6

[Darrin Henein [:darrin]]

(In reply to Dan Mosedale (:dmose) from comment #3)
> Looks like a fine start to me.
> 
> As far as portrait goes, I suspect it would look a bunch better if the
> portrait were vertically centered and the empty space were black, which
> might be a fine first iteration.

I agree, centered and on black is probably a good place to start for mobile.

> Maybe Darrin has an opinion on cropping here.  The thinking might be
> different on mobile, particularly if we set it up to be cropped by the
> viewport such that the user could make a pinch gesture to zoom out and see
> the whole thing.

Not sure yet, I want to look at how other cross platform solutions address the differing aspect ratios across desktop/mobile. This will probably be properly addressed in MVP, rather than MLP.

> Re the CSS, I'm surprised it's necessary to use absolute positioning on the
> button.  Why is that?

I guess flex-box is out of the question based on what we're aiming to support? I think Opera mobile would be the main concern...

Comment 7

[Mark Banner (:standard8)]

Comment on attachment 8421714 [details] [review]
https://github.com/mozilla/loop-client/pull/30

I don't think there's anything extra for me to add on top of Dan and Darrin's feedback.

Comment 8

[Nicolas Perriault (:NiKo`) — needinfo me if you need my attention]

Right, let me just center the videos on dark for portrait and land this baby.