Closed Bug 951096 Opened 8 years ago Closed 7 years ago

[Clock] Adjust Stop/Lap buttons size and style in Stopwatch

Categories

(Firefox OS Graveyard :: Gaia::Clock, defect)

ARM
Gonk (Firefox OS)
defect
Not set
normal

Tracking

(feature-b2g:2.0)

VERIFIED FIXED
1.4 S1 (14feb)
feature-b2g 2.0

People

(Reporter: HHuang, Assigned: mcav)

References

Details

(Whiteboard: [p=1])

Attachments

(5 files, 1 obsolete file)

Buttons size are inconsistent with system UI.
Blocks: 950212
Attached image Clock_Stopwatch_VisualSpecV1_Dec10.jpg (obsolete) —
Visual spec update. Buttons size please follow the spec.
Visual spec updated.
Attachment #8358277 - Attachment is obsolete: true
Attached file Screenshots.tar.gz
Attached screenshots after changing the margin, height and width.

Similar to Bug 951092, have attached two screenshots with width 44% and 45%.

let me know your comments.
Flags: needinfo?(hhuang)
Would like to know your comments as well.
Flags: needinfo?(m)
Looks OK to me, but deferring to Helen.
Flags: needinfo?(m)
Gnaneswar, have you seen the calc CSS function? I see that the spec defines math-based widths. We could use the CSS calc() function https://developer.mozilla.org/en-US/docs/Web/CSS/calc to directly match what they want.
Following last common, I would be grateful if the calculation can work, it’s more precisely. 
Otherwise, I will go for the width 44% for buttons, but I found two buttons a bit close to the left side. Could you center them? Thanks!
Flags: needinfo?(hhuang)
Using width as calc ((100% - 1rem)/2) and setting margins as specified in spec would make the two buttons appear on two different rows.

Please note that I am using nexus-4 device.

Attached screenshots which includes width to 44% and alignment to center and left.
It appears that alignment to center looks bit close to the right side.

Please confirm the alignment.
Flags: needinfo?(hhuang)
Helen, take a look at this screenshot and let me know if that looks correct for you. It includes the 1.5rem padding on the outside and 1rem on the inside.

Gnaneswar, this time I used a CSS Flexbox to align the items. I can see why you had trouble -- the <menu> element had padding built in, and getting those to fit perfectly with varying margins and stuff can be complex.
Assignee: nobody → m
Attachment #8369596 - Flags: ui-review?(hhuang)
Flags: needinfo?(hhuang)
Attachment #8369593 - Flags: review?(jrburke) → review+
Comment on attachment 8369596 [details]
Buttons with correct sizes

Marcus/Gnaneswar, thank you for helping, it's exactly what I want.
Attachment #8369596 - Flags: ui-review?(hhuang) → ui-review+
Similar to comment 19 of Bug 951092, the spacing between counting value numbers and stopwatch controls should match.
Whiteboard: [p=1]
Target Milestone: --- → 1.4 S1 (14feb)
Landed in master:

https://github.com/mozilla-b2g/gaia/commit/a03bc3e737b165986ed4128e5fce7b1f99b71eab
Status: NEW → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
[Verified info]
Gaia      6e71ab4da1b08586ea0c758edb7aa199ee34cd2f
Gecko     https://hg.mozilla.org/mozilla-central/rev/bb030d47c946
BuildID   20140219160202
Version   30.0a1

[Testing result]
PASS
New UI is changed and no other side effects. I mark it to "VERIFIED"
Status: RESOLVED → VERIFIED
feature-b2g: --- → 2.0
You need to log in before you can comment on or make changes to this bug.