Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

design / selected color isn't clear #14

Open
ofZach opened this issue Aug 22, 2015 · 11 comments
Open

design / selected color isn't clear #14

ofZach opened this issue Aug 22, 2015 · 11 comments

Comments

@ofZach
Copy link
Owner

ofZach commented Aug 22, 2015

here, in one case grey = selected, while in another case, white = selected. needs maybe some consistency?

screen shot 2015-08-22 at 10 01 11 am

@Daandelange
Copy link
Collaborator

Yes, this is not clear and was the first thing I saw after this update.
Dark grey with white text for selected seems better

On 22 August 2015 at 16:02, ofZach notifications@github.com wrote:

here, in one case grey = selected, while in another case, white =
selected. needs maybe some consistency?

[image: screen shot 2015-08-22 at 10 01 11 am]
https://cloud.githubusercontent.com/assets/142897/9424286/d5e8112e-48b4-11e5-957f-e5a1df6f14f5.png


Reply to this email directly or view it on GitHub
#14.

@Daandelange
Copy link
Collaborator

Btw I think I fixed this in 002c075 (makes it white on gray)
Approve ?

@ofZach
Copy link
Owner Author

ofZach commented Aug 22, 2015

I still think it's confusing, I'm working on styling the select2 it might help. The problem is that the select 2 grey is the same as the unselected platform, so for me the feels it's a bit off, like I can't tell what is active. I'll work on this a bit, thanks for the changes!

screen shot 2015-08-22 at 3 41 48 pm

@kylemcdonald
Copy link
Contributor

if it helps, it was also unclear to me which one was "selected". a color might not be enough, but adding a border to the selected ones would feel very clear to me.

@ofZach
Copy link
Owner Author

ofZach commented Aug 23, 2015

I also think an "x" image, like the PG roadmap mockup and the adddons multiselect would be useful, ie, signaling an unselect... I tried to do this via css but I think it has to be done with javascript.

Daandelange added a commit that referenced this issue Aug 24, 2015
Places the console as relative and fixes some of it’s CSS
Removes css from index.html ( into app.css )
Fixes PG error messages not being sent to console
Console setting and advanced setting are independent now(#7)
@Daandelange
Copy link
Collaborator

I did a new try, might be better but I'm still not convinced.

@ofZach
Copy link
Owner Author

ofZach commented Aug 24, 2015

I think if the x was bigger (like the PG mockup) and it was visibility:none on unselected (so there wasn't a gap) it might help. Obviously things will reflow as you select them, but it feels like it would be more obvious.

@Daandelange
Copy link
Collaborator

I made the gap on purpose so the buttons don't move on enabling/disabling them. (because adding the "x" adds more width to the buttons)

@ofZach
Copy link
Owner Author

ofZach commented Aug 24, 2015

I think it's fine if they reflow as you select them...

Daandelange added a commit that referenced this issue Aug 24, 2015
 - Reflow stuff (removed whitespace padding)
 - No pointer nor "x" when only 1 platform is selected
Also Fixes default platform selection
@Daandelange
Copy link
Collaborator

Should be better now :)
Also removed the "x" and the pointer when it's the only selected platform.

@kylemcdonald
Copy link
Contributor

this could be closed i think, as the design is much clearer now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants