Make Labels and Buttons Have Consistent Styling

[leoherzog]

http://i.imgur.com/IV51oGF.png

In the screenshot, dropdowns labeled 1 (worlds), buttons labeled 2 (layers), and buttons labeled 3 (overlays) are all different colors and sizes.

Also, labels A and B are different than Google Map's C.

We should strive for a single, consistent UI element.

[CounterPillow]

Overlays and markers should be distinctive from the renders buttons next to them since they're drop-downs and serve a different purpose. Worlds drop-down should be adjusted to whatever new style is chosen for overlays and markers. I think A and B shouldn't look like C because they have an actual function to fulfil.

Styles should correspond to the functions, so the only thing I agree with here is to find a consistent style for 1 and 2.

[leoherzog]

I respectfully disagree.

Buttons, dropdowns, and labels can have the same style, yet be distinctive.

Bootstrap:
http://getbootstrap.com/components/#btn-dropdowns

Material Design Lite:
http://www.getmdl.io/components/#buttons-section

Bootswatch:
http://bootswatch.com/flatly/#buttons
http://bootswatch.com/flatly/#indicators

These style guidelines have dropdowns, labels, and buttons, but they are consistent.

I think it would be awesome if Overviewer-generated maps had the same level of consistency.

[CounterPillow]

Yes, I agree, buttons with dropdown arrows where appropriate are what should be done for the ones on the top. The labels on the bottom, however, I still don't think should look the same as those on the top, as they're labels rather than clickable buttons.

[agrif]

I don't know a lot about it, but the "Terms of Use" label at least is generated internally by the Google Maps API. You could probably get at it to style it differently, but it'd probably be better to change all of our stuff to match the internal Google Maps stuff.

Incidentally, this is what caused our button style in the first place. It used to match the google maps style, but they've since changed and now it doesn't.

(Longer term, changing to a less possesive map API like leaflet would make this easier)

[Hinara]

I think you can change their style with a CSS which override the default style.

[CounterPillow]

@robbix1206 this issue concerns changing the default style, so custom web assets solutions are not what we're looking for.

[Hinara]

I know that but it's the best solution to unify the differences ui elements styles.
My solution is to make a CSS to unify the style and to integrate it to web assets of overviewer.
And for the new ui you will just need to update the web assets from 'overviewer.py --update-web-assets '
The CSS can also be directly put in the index.html between two 'style' node

[leoherzog]

In the time since I've filed this issue, the Google Maps Javascript API has only continued to diverge in button styling in contrast to Overviewer's button styling.

[Hinara]

After a quick look most of the GUI if unify the only thing which is not is
the map selector which you have with the list selector.
Just need to give it some changes.

[Hinara]

OK the bad thing is the custom control which is not from Google map API
It is a problem for two things.
1-A rudimentary style which doesn't look good with other parts of the GUI

2-It's not adapt to mobile phone view.

[CounterPillow]

Overviewer now uses leaflet, which should be more consistent.