813056 - Clock in landing page does not follow visual formatting

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Homescreen, defect, P2)

Description

[Pablo Sanchez [:pabloUX]]

* Environment: Unagi, build (dev) from Friday 16 Nov.
* Repro: Clock displayed in landing page does not follow spec in formatting and size of type. 
* Expected: Size of the clock is slightly smaller, AMPM format is smaller than time, alignment with date is refined. 
* Actual: Numbers are bigger, AMPM format is same size as time, alignment with date is not to the left

Comment 1

[Cristian Rodriguez (:crdlc)]

I implemented this view with Sergi, is it wrong Sergi? thanks

Comment 2

[Cristian Rodriguez (:crdlc)]

We don't have problems about alignment in code. View:

https://github.com/mozilla-b2g/gaia/blob/master/apps/homescreen/style/landing.css

It could be because of numbers and letters are different in the current font?... We can solve it adding a negative padding to clock in my opinion if you want

Regarding to AM/PM is more complicated, because I have to implement more code. Where are this wireframe?

Thanks

Comment 3

[Sergi]

As @crdlc point this is correct in terms of sizing. I agree with the AM/PM, it was not intended to be used here. In any case i recommend to leave it as it is implemented right now. Pablo, can you upload a sample of the reference screen you're using to compare with the current build?

Comment 4

[steve]

See link.

This is the correct size and format. Also the correct layout of the carrier. PLEASE ALSO NOTE this clock size and format should be carried across into landing page (currently does not).

This is the first page any user and reviewer will see. It has to be correct.

https://www.dropbox.com/s/kbkcwpgadt8wjhl/OWD_00a_lock%201.png

Comment 5

[Sergi]

These are the changes we should implement in order to make the clock in the current build looks the same as in the design provided by Steve:

> Number zero used on the left of the hour should be removed from all cases when the clock is configured as 12h (we should use "7:35 AM" instead of "07:35 AM") 
> Text style for clock numbers should be MozTT Light (font-weight:300), 28pt (6.3rem)
> Text style for "AM/PM" should be MozTT Light (font-weight:300), 17pt (3.8rem)
> Text style for the date should be MozTT Regular (font-weight:400), 7pt (1.6rem)

Comment 6

[Cristian Rodriguez (:crdlc)]

Number zero used on the left of the hour should be removed from all cases -> It was implemented here https://bugzilla.mozilla.org/show_bug.cgi?id=805615

Comment 7

[Cristian Rodriguez (:crdlc)]

Attachment: New format v1

Comment 8

[Cristian Rodriguez (:crdlc)]

This is Gaia running the patch: http://i.imgur.com/rH1aY.png

is it ok?

thanks

Comment 9

[Cristian Rodriguez (:crdlc)]

Sergi, it's obvious, you don't need to read the code :) but I want that you review the screenshot linked in the previous comment

Comment 10

[Cristian Rodriguez (:crdlc)]

same hour than example in order to check better the sizes and paddings.

http://imgur.com/s06jJ

Comment 11

[Sergi]

Font sizes are ok.

We should adjust some paddings:

The distance between the status bar and the clock should be 45px (now it's 33px).

The distance from the right edge of the screen to the clock should be 25px (now it's 15px).

The distance between the hour and date should be 12px (now it's 14px).

I'd move the date 1px to the left so it's better aligned with the clock.

Comment 12

[Cristian Rodriguez (:crdlc)]

Following that rules

http://i.imgur.com/KWFUN.png

thanks

Comment 13

[Sergi]

In terms of font sizing and paddings i think it's ok. 

In regard of the font shadow i think it's stronger than the one used in the visuals. Although i think it's better using a stronger shadow because it's possible to see the hour when the background image has bright/light colors.  But that's my opinion.

I have a concern regarding the top padding of the clock when in the landing page. Although the implementation by @crdlc is correct and perfectly matches the visuals, i feel like the distance to the status bar is too tall. This is because we must use exactly the same position for the clock as we are using in the lock screen, but in the lock screen we have an extra component on top of the clock, which is the carrier info and a divider line. What do you think?

Comment 14

[Cristian Rodriguez (:crdlc)]

Kaze if you want to review this pr as you sais me before... ;)  It is about a new design of the clock in the landing page. The design has been reviewed by UX guys but you could review how I implemented it, thanks a lot!!!

Comment 15

[Cristian Rodriguez (:crdlc)]

Comment on attachment 685320 [details]
New format v1

NOTE: If blocking-basecamp+ is set, just land it for now.

[Approval Request Comment]
Bug caused by (feature/regressing bug #): new design
User impact if declined: legacy design
Testing completed: Tim, Sergi and Kaze reviewed this
Risk to taking this patch (and alternatives if risky): IMHO nothing

Comment 16

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Comment on attachment 685320 [details]
New format v1

Sounds limited scope for me.

Comment 17

[Fabien Cazenave [:kaze]]

Comment on attachment 685320 [details]
New format v1

https://github.com/mozilla-b2g/gaia/commit/db77ce33e3041762ac466e6585ff4ab68df7f795