898262 - HD: [CostControl] canvas and wifi/3g checkboxs not use screen space well

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::Cost Control, defect)

Description

[[e-mail]]

Attachment: device-2013-07-25-162923.png

In HD device, wifi/3g checkboxs stay near the canvas, which left many space at the bottom.

Maybe we can use screen space more reasonably.

ex: put wifi/3g checkboxs in center or at bottom of the left space

Comment 1

[[e-mail]]

@amy this is for polish design of CostControl app. Any suggestions?

Comment 2

[Amy Lee [:amylee] UX]

Hi Fred, 

Can you make the grid section taller so it takes up more vertical space? Also can the numbers on the left of the grid be slightly larger? 

Thanks

Comment 3

[Wayne Chang [:wchang]]

HD+ UI adjustments.

Comment 4

[Wayne Chang [:wchang]]

Fred, have you got this?

Comment 5

[[e-mail]]

@amy changing canvas(grid section) is depends on bug 898257 work.
I can't tell if it's easy or not to change the grid section right now.

But any suggestions are welcome to improve this app look and feel in HD.

Comment 6

[Amy Lee [:amylee] UX]

Hi Fred, 

Can you let me know when you know you are able to change the grid? If it's not possible then we can figure something else out. 

Thanks

Comment 7

[[e-mail]]

Hi Amy,

Change the grid is possible since we own the source code, but not sure if its proper to do that for each scales.


@salva (module owner) how do you think about changing the grid height for WVGA(1.5x) device?

Comment 8

[Amy Lee [:amylee] UX]

Hi Fred, 

Can it be done for just @1.5 scale? Since for the other resolutions we don't have extra spacing that needs to be filled.

Thanks

Comment 9

[[e-mail]]

Hi Amy,

Yes it can be done only for @1.5 scale.
but I think we have to take in concern that there will be qHD & other resolution devices come in the incoming milestones. People expect all apps should work without specific change after our current work.

If we design the layout only for @1.5 scale, it might be not flexible or adaptive to other resolution devices.

Comment 10

[[e-mail]]

Attachment: device-2013-08-01-174419.png

Here's current usage view, fixed blur issue.

Is it OK or the layout still need some modification?

Comment 11

[Amy Lee [:amylee] UX]

Hi, 

Let me get Patryk to review this layout and I'll get back to you. Thanks

Comment 12

[Patryk Adamczyk [:patryk] UX]

Overall the text on the left feels really small, I think it needs to be increased by atleast 25%. Also the divider line under "5.18 MB..." should be removed. Amy can you provide a mock / sizing spec. We should be able to fit a label reading "200 MB" where it now reads "4 MB".

Comment 13

[Amy Lee [:amylee] UX]

Attachment: Usage_Screen.png

Hi Fred, 

Attached is a mock of the revisions. Please let me know if you have any questions.

Comment 14

[[e-mail]]

Hi @patryk, @amy,

Thanks for feedback and quick mockup.
In mock screen you mean change font size from 12 to 14 (14*1.5=21px)?
If answer is yes please provide font size for 'today font' as well.(explained below)


The font size in grid section are automatically scaled out from 12px(general font)/14px(today font).
So in 1.5x resolution, it will be 18px(12*1.5) and 21px(14*1.5) before scaled to fit the screen.



And please aware that any change will effect all (1.1.0hd and normal resolution) devices (if we removed the divider, the devider line under "5.18 MB..." will also removed from normal resolution), since for better flexibility we tend to not work only for specific resolution.

Comment 15

[[e-mail]]

Attachment: device-2013-08-07-101816.png

the real device preview follow the mockscreen
* the bottom divider is removed.
* seems font size 14(14*1.5=21) is a bit large for WVGA device. Some parts out of the screen

Comment 16

[[e-mail]]

Attachment: device-2013-08-07-141148.png

screenshot with font 13/15 on hd device

Comment 17

[[e-mail]]

Attachment: device-2013-08-07-144917.png

screenshot with font 13/15 on normal device

If it works I'd send pull request with this configurations

Comment 18

[[e-mail]]

PR in https://github.com/mozilla-b2g/gaia/pull/11396

Comment 19

[Amy Lee [:amylee] UX]

Hi Fred, 

Can you make the font 13/15 with a medium bold weight?

Comment 20

[[e-mail]]

Hi Amy,

'Today label'(size 15) already use the semi-bold weight (font-size 600)
http://help.typekit.com/customer/portal/articles/6855-using-multiple-weights-and-styles

do you mean to apply the same font weight to normal font?

Comment 21

[Amy Lee [:amylee] UX]

Hi Fred, 

Yes, can you try a semi-bold weight and send me a screen shot? 

Thanks

Comment 22

[[e-mail]]

Sure, but I have no device at home so I'll provide screenshot 10hr later...

Comment 23

[[e-mail]]

Attachment: device-2013-08-08-104506.png

here's the screenshot (all weight to 600)

Comment 24

[Amy Lee [:amylee] UX]

Hi Fred, 

This looks good. Thanks!

Comment 25

[[e-mail]]

Attachment: pull request redirect to github

Thanks Amy.

Salva, here's PR for review.

Comment 26

[Salvador de la Puente González [:salva]]

Comment on attachment 787867 [details]
pull request redirect to github

The code looks good but please, before merging, fix the comment on GitHub,
Thank you very much and sorry for the delay. I was on vacations.

Comment 27

[[e-mail]]

wrap string by `makeCSSFontString` and merged to gaia-master https://github.com/mozilla-b2g/gaia/commit/e2e2c7f39a71054c0d375885914ba9e186a1d73c

thanks!

Comment 28

[Ryan VanderMeulen [:RyanVM]]

b2g18 = v1-train, which I don't believe this landed on :)

Comment 29

[[e-mail]]

ooh, I must mis-understanding the flag, thanks for correct it.

Comment 30

[[e-mail]]

uplift v1.1.0hd c86a9ec1dab0463381690d8617fa905058e86e81

Comment 32

[Al Tsai [:atsai]]

[2013/10/21 Helix Testing]
Gaia:     c829a2042594b6c3a4899ee27979799a0f301534
Gecko:    http://hg.mozilla.org/releases/mozilla-b2g18_v1_1_0_hd/rev/f7c657f6d019
BuildID   20131015042201
Version   18.0