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

VERIFIED FIXED

Status

VERIFIED FIXED
5 years ago
5 years ago

People

(Reporter: gasolin, Assigned: gasolin)

Tracking

unspecified
Other
Gonk (Firefox OS)

Firefox Tracking Flags

(blocking-b2g:hd+, b2g-v1.1hd fixed)

Details

Attachments

(8 attachments)

(Assignee)

Description

5 years ago
Created attachment 781452 [details]
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
(Assignee)

Comment 1

5 years ago
@amy this is for polish design of CostControl app. Any suggestions?
blocking-b2g: --- → hd?
Flags: needinfo?(amylee.design)

Comment 2

5 years ago
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
Flags: needinfo?(amylee.design)
HD+ UI adjustments.
blocking-b2g: hd? → hd+
Fred, have you got this?
Flags: needinfo?(gasolin)
(Assignee)

Comment 5

5 years ago
@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.
Depends on: 898257
Flags: needinfo?(gasolin)

Comment 6

5 years ago
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
(Assignee)

Comment 7

5 years ago
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?
Flags: needinfo?(salva)

Comment 8

5 years ago
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
(Assignee)

Comment 9

5 years ago
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.
(Assignee)

Comment 10

5 years ago
Created attachment 785629 [details]
device-2013-08-01-174419.png

Here's current usage view, fixed blur issue.

Is it OK or the layout still need some modification?
Flags: needinfo?(amylee.design)
Hi, 

Let me get Patryk to review this layout and I'll get back to you. Thanks
Flags: needinfo?(amylee.design)
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".
Flags: needinfo?(amylee.design)
Created attachment 786406 [details]
Usage_Screen.png

Hi Fred, 

Attached is a mock of the revisions. Please let me know if you have any questions.
Flags: needinfo?(amylee.design)
(Assignee)

Comment 14

5 years ago
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.
Assignee: nobody → gasolin
(Assignee)

Comment 15

5 years ago
Created attachment 786683 [details]
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
Flags: needinfo?(amylee.design)
(Assignee)

Comment 16

5 years ago
Created attachment 786768 [details]
device-2013-08-07-141148.png

screenshot with font 13/15 on hd device
(Assignee)

Comment 17

5 years ago
Created attachment 786769 [details]
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
Hi Fred, 

Can you make the font 13/15 with a medium bold weight?
Flags: needinfo?(amylee.design)
(Assignee)

Comment 20

5 years ago
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?
Flags: needinfo?(amylee.design)
Hi Fred, 

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

Thanks
Flags: needinfo?(amylee.design)
(Assignee)

Comment 22

5 years ago
Sure, but I have no device at home so I'll provide screenshot 10hr later...
(Assignee)

Comment 23

5 years ago
Created attachment 787295 [details]
device-2013-08-08-104506.png

here's the screenshot (all weight to 600)
Flags: needinfo?(amylee.design)
Hi Fred, 

This looks good. Thanks!
Flags: needinfo?(amylee.design)
(Assignee)

Comment 25

5 years ago
Created attachment 787867 [details]
pull request redirect to github

Thanks Amy.

Salva, here's PR for review.
Attachment #787867 - Flags: review?(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.
Attachment #787867 - Flags: review?(salva) → review+
Flags: needinfo?(salva)
(Assignee)

Comment 27

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

thanks!
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
(Assignee)

Updated

5 years ago
status-b2g18: --- → fixed
status-b2g-v1.1hd: --- → affected
b2g18 = v1-train, which I don't believe this landed on :)
status-b2g18: fixed → ---
(Assignee)

Comment 29

5 years ago
ooh, I must mis-understanding the flag, thanks for correct it.
(Assignee)

Comment 30

5 years ago
uplift v1.1.0hd c86a9ec1dab0463381690d8617fa905058e86e81
status-b2g-v1.1hd: affected → fixed
(Assignee)

Updated

5 years ago
Duplicate of this bug: 907685

Comment 32

5 years ago
[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
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.