Optimize visuals based on screen size

[karmour]

The app currently tries to re-size the various elements (header and icon, filter bar, navigational tabs, visuals) as the screen size changes, creating a sub-optimal display of the app beyond a certain point. Wondering if we should enforce a minimum screen size for the app with scrollers to retain basic functionality? Also, are there standards we can leverage around this?

[hangler]

@karmour The Bootstrap plugin makes responsive design for smaller screens relatively easy, so I can look into this. (IIRC, this was a "nice to have" on the previous iteration of the app.) If it's a considerable amount of work, I could make it look "good but not perfect" in this phase, and we could maybe revisit full-blown responsiveness in another phase? What do you think?

[karmour]

Agreed - thank you!

[hangler]

@karmour @stephanieyurchak Here are a couple of mock-ups. Imagine that the large blue area was toggleable, i.e. you could show or hide it (title + logo would remain though). I would also of course adjust the scale for the graph so it didn't overlap so much. Let me know what you think!

[karmour]

Hi Frank, thanks for the mock-ups. I think that looks okay to me for the visuals (and I like the notion to minimize the blue area). Just wondering how the data tables below the charts would fare in this, though? Some of them are pretty wide. Might we need to live with a horizontal scroll bar for the time being?

[hangler]

@karmour Yes, the data tables will not look so great on narrower screens. I can try to make them horizontally scrollable individually.

[hangler]

The expanding / collapsing variable pane is now live. (Still a couple other tweaks to do, including horizontally scrolling tables if possible and better axes.)

[hangler]

The better axes + horizontally scrolling tables are now live, too.

[hangler]

Just noticed a bug in the axis labelling, sorry!

[hangler]

Fixed.

[karmour]

Really like the layout for the small screen - it fits nicely and the show/hide button makes it trim. The horizontal scroll bars on the Representation tab seem to work well for me. I am debating about the default setting for the hidden variables menu, though. Can't decide if it's better to start with them hidden (as it is currently), or start with them visible. Maybe hidden by default is best, so that it doesn't take over the screen by default -- but that makes me think we need another note on the landing page about finding the hidden filters on a mobile device! Will craft and re-open ticket #94 yet again.

[karmour]

It does appear that first reducing and then expanding the screen size does play a bit of havoc with the table positioning and Y axis labeling -- I think that's what you were referring to above? Maybe it didn't fix 100%, as I'm seeing axis labels getting cut off when I'm in fullscreen size after first reducing to mobile size. The data labels have also moved from being outside the bars to partially inside (very minor issue).

[hangler]

@karmour Looks like that weirdness might be Edge-specific. I will see what I can do about that.

[hangler]

Was actually able to reproduce in Chrome, and also difficult to fix. Will discuss tomorrow.