Create a clickable area for a primary nav link

rackerlabs / canon

A front-end framework for fast & consistent development of Rackspace UIs.

http://rackerlabs.github.io/canon/

Other

30 stars 22 forks source link

Create a clickable area for a primary nav link #134

Closed riltsken closed 9 years ago

riltsken commented 9 years ago

Issue: Currently you can only click on the nav link text itself. It would be nice if I would be able to click near the text and maintain the same behavior.

I know this is probably not the ideal solution below, but wanted to prompt some feedback.

What it currently looks like original

What I want to happen original_goals

With the changes in this PR new

What I want for mycloud nav mycloud_change

riltsken commented 9 years ago

Red outline is current behavior. Blue outline is what I want to add with this PR.

j00k commented 9 years ago

The only downside I see is the dropdown extending to the width including the padding. Seems reasonable to increase the click area by adding padding instead of margin.

riltsken commented 9 years ago

New selection_086

Old selection_083

alainacoppa commented 9 years ago

@eddywashere is there anything that needs to be done on this before it can be merged?

eddywashere commented 9 years ago

@alainacoppa just one last thing. I think we should reduce the left padding on the left of the nav item. It seems unbalanced as a clickable element. What do you think? I'd propose something like the last screenshot below. If it looks good, I can make the change and merge this in another branch. Otherwise we can merge this as is.

production

In this pr

somewhere in the middle - left padding 15px, left margin 15px

alainacoppa commented 9 years ago

LGTM, thanks!

eddywashere commented 9 years ago

new pr is over at #148