946224 - Alphabets on right side in the contact book are too small to select

Status: RESOLVED FIXED

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

Description

[abhinav.srivstva]

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.63 Safari/537.31

Steps to reproduce:

Opened contacts to find a contact whose name starts with V


Actual results:

I clicked the alphabet V on right side but its so hard to select it. I end up selecting nearby alphabets


Expected results:

I should easily select the alphabet. Please increase the font size

Comment 1

[Med Mack]

Hey, 

I'm interested in this bug but I don't know if we can play with UI elements and stick with the design team rules. I believe this is just about CSS so please it would be marked as good-first-bug.

I think, reducing the font size and increasing the line-height values will solve the problem.
I will be trying to upload a patch to fix this.

Comment 2

[Med Mack]

Attachment: 946224.patch

Hey again, 

this is my first patch but it still need a review from the UX to make changes ( even changing font size ), to make it look better and give it a feel that the letters are more separated, I reduced the font-size by 0.2rem and make the <li> element a little bigger.

I hope this can help, still depends on screen height. Maybe this bug https://bugzilla.mozilla.org/show_bug.cgi?id=876845 will help in the future with reducing the right list content.

Comment 3

[Ben Kelly [:bkelly, not reviewing]]

Comment on attachment 8443963 [details] [diff] [review]
946224.patch

Francisco, can you take a look at this?  Its unclear to me how we much room we have to change the visual design here.

Comment 4

[Francisco Jordano [:arcturus] [:francisco]]

Thanks Ben,

Asking for UI review from our UX team.

Comment 5

[Francisco Jordano [:arcturus] [:francisco]]

Attachment: Screen Shot 2014-06-03 at 15.51.44.png

Looks to me even smaller that the current alpha scroll here.

Vicky?

Comment 6

[Victoria Gerchinhoren [:vicky]]

Can you make sure this is synced with the BBs and framework team?

Ni Arnau and Przemek o they are aware of this change.

Comment 7

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

Please do not merge until verifying facebook import is not broken at 320x480, as the component is smaller due to "select" buttons.
If that looks good to Przemek, LGTM ;)

Comment 8

[Francisco Jordano [:arcturus] [:francisco]]

Won't do the review then till feedback from Przemek.

Thanks.

Comment 9

[Przemek Abratowski [:przemek] UX]

Comment on attachment 8445248 [details]
Screen Shot 2014-06-03 at 15.51.44.png

Feels a bit weird that it runs into the search field. Also if this is used in an app with a toolbar it would run over that as well. Our competitors use a far smaller version of this control and I'm able to use it, is this really an issue? This is intended as a secondary way to quick scroll a user to the general area, a user can also use the entire screen to scroll. I'm not convinced that we need to enlarge this control.

Comment 10

[Przemek Abratowski [:przemek] UX]

Comment on attachment 8445248 [details]
Screen Shot 2014-06-03 at 15.51.44.png

Sorry, I miss-understood this bug. I like this general change to reduce the font size and increase the padding between the letters. That should help with the touch targets.

I don't love how tall this controls is, but that's a separate issue and it would further complicate the touch targets.

Comment 11

[Francisco Jordano [:arcturus] [:francisco]]

Comment on attachment 8443963 [details] [diff] [review]
946224.patch

Done with the review.

Thanks for the contribution, I'll create a PR with this patch to go through the process for travis and so on.

Comment 12

[Francisco Jordano [:arcturus] [:francisco]]

Attachment: PR for the given patch

Comment 13

[Francisco Jordano [:arcturus] [:francisco]]

Landed:

https://github.com/arcturus/gaia/commit/1866a6e561000d682b945819924cfbb8c830bb49