Design and improve UI

[corviday]

Ui has been put together without much planning, and definitely is a bit rough. Possible improvements might be:

• currently a "loading data" message appears when data is first loading in a graph, but not when the graph is switched to a different dataset
• Do we want to use buttons instead of dropdowns for selections that have a limited number of choices, like emissions scenario and salmon species? Indicator is a borderline case; tehre are about 6 annual indicators; fewer of the others, but we also want to display their descriptions.
• Borders differentiating the selections made for a particular graph and the selections made for all graphs
• in-app help

[rod-glover]

May I suggest a design confab within CSG? And ideally, a way to trial designs with some actual users.

Other items:

• Clearly distinguish "global" selections (e.g., watershed, model(?), scenario(?)) from "local" (e.g., indicator). Right now that doesn't seem very clear to me.
• Apply Bootstrap CSS to the app. Unless it has been comprehensively overridden, I think the appearance indicates we are lacking that CSS.

[corviday]

Involving CSG is a great idea, I will definitely do that. We can get at least some UI feedback from our DFO collaborators.

[rod-glover]

Despite our general brilliance on all aspects of software design, it is amazing how useful and sometimes surprising feedback from real users is!

[corviday]

@rod-glover fixed a huge layout issue, and it's a lot better now, but there's still much room for improvement.

• [x] add PCIC logo
• [x] add favicon
• [x] selectors might be too large now - perhaps switch to having labels beside them?
• [ ] loading messages when switching variable on a graph
• [ ] differentiate selectors that affect entire map from selectors that only affect one graph

plus whatever CSG comes up with at a review.

[corviday]

AreaDisplay is getting crowded, with three dropdowns and seven checkboxes. Possibilities to make it tidier:

• [ ] padding between taxon checkboxes in a horizontal row - ended up putting them vertically instead
• [ ] alternately putting area selector label and selector in a horizontal row - it collapsed the selector into a tiny awkward box when I did this (note this is the opposite of the thing I wanted to do in the above comment)

Maybe something else, suggested in review by CSG?

EDIT: I think Floating Labels are the ideal solution here.