Closed Bug 951096 Opened 9 years ago Closed 9 years ago

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


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

Gonk (Firefox OS)
Not set



1.4 S1 (14feb)
feature-b2g 2.0


(Reporter: HHuang, Assigned: mcav)



(Whiteboard: [p=1])


(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 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:
Closed: 9 years ago
Resolution: --- → FIXED
[Verified info]
Gaia      6e71ab4da1b08586ea0c758edb7aa199ee34cd2f
BuildID   20140219160202
Version   30.0a1

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