1026091 - [Homescreen] 2.0 Smart Collections header style isn't consistent with OS headers

Status: VERIFIED FIXED

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

Description

[Amy Lee [:amylee] UX]

Attachment: smartcollection_screen.png

Header text style doesn't look consistent with  OS headers (centered, thin weight, italic). It should match the building block. See attached.

Comment 1

[Cristian Rodriguez (:crdlc)]

Attachment: photography.png

Hola Arnau, I used the header BB but the text does not seem centered according to the device width. Should it be so? or is a problem related to BB?

Comment 2

[Cristian Rodriguez (:crdlc)]

Attachment: Github pull request

Comment 3

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Guillaume,
Is there anything else Cristian needs to do in his patch to get the header title properly centered?
Thanks!

Comment 4

[Guillaume Marty [:gmarty]]

Hi Cristian. You need to add the following JS file `/shared/js/font_size_utils.js`.
Then all the headers will be auto-resized and centered.

Comment 5

[Amir Nissim (:amirn)]

Comment on attachment 8442765 [details]
Github pull request

The code looks ok, but the title is not centered in respect with the 'X' icon.
I am not sure if it should be centered to the empty header space or the entire header.

maybe ask for UX review?

Comment 6

[Stephany Wilkes]

Please let me know if this needs the ui-review? flag set for someone on our team. Can't tell from this if it's ready yet. Thanks!

Comment 7

[Cristian Rodriguez (:crdlc)]

Attachment: Centered, thanks

Comment 8

[Cristian Rodriguez (:crdlc)]

It works like a charm, many thanks

(In reply to gmarty from comment #4)
> Hi Cristian. You need to add the following JS file
> `/shared/js/font_size_utils.js`.
> Then all the headers will be auto-resized and centered.

Comment 9

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Comment on attachment 8442765 [details]
Github pull request

Looks good Cristian :)

Comment 10

[Cristian Rodriguez (:crdlc)]

Merged in master:

https://github.com/crdlc/gaia/commit/78a9428121a0e12bed58125f851715543c72161d

Comment 11

[Kevin Grandon :kgrandon]

Comment on attachment 8442765 [details]
Github pull request

Needed for the vertical homescreen.

Comment 12

[Kevin Grandon :kgrandon]

2.0: https://github.com/mozilla-b2g/gaia/commit/f536888df5a444597da76230190f0cc836cb9d2e

Comment 13

[Elie]

Attachment: VIDEO0081.mp4

This issue has been successfully verified on Flame 2.0:
Gaia-Rev        8d1e868864c8a8f1e037685f0656d1da70d08c06
Gecko-Rev       https://hg.mozilla.org/releases/mozilla-b2g32_v2_0/rev/c756bd8bf3c3
Build-ID        20141130000204
Version         32.0
Device-Name     flame
FW-Release      4.4.2


This issue has been successfully verified on Flame 2.1:
Gaia-Rev        ccb49abe412c978a4045f0c75abff534372716c4
Gecko-Rev       https://hg.mozilla.org/releases/mozilla-b2g34_v2_1/rev/18fb67530b22
Build-ID        20141130001203
Version         34.0
Device-Name     flame
FW-Release      4.4.2