Refine mobile design

[katjam]

No description provided.

[aaaaargZombies]

Thoughts

from email

• Is there anything that would be cut for mobile?
• Anything that is draggable content or an animated collection could potentially become a side scrolling gallery using CSS rather than a more complex Elm interaction.
• I'm not sure how best to handle the floaty blurry labeled faces. There will be some very small details on mobile.
• The charts will need some rejigging as the labels are tiny at mobile, maybe remove the labels and use a key or potentially switch to a different type of chart.
• The messages could potentially stay as is, or remove the animation for a plain text version.

The current draggable content could become a side scrolling gallery thing, snap to element is now well supported in CSS see this demo

https://codepen.io/kevinpowell/pen/ExbKBQa

The graphs might be better as horizontal bars empty being the lowest value and full width the highest so we make the difference as legible as possible. If we do that we (hopefullly) can add notes to each bar then we can scroll as long as we need to to display all content. We could color the bars for different parties. Though now I'm writing this I'm noticing this issue with the chart library we use terezka/elm-charts#99

Though perhaps a chart library is not needed if we don't have axis just a vertical stack of bars

https://9elements.com/blog/responsive-bar-charts-in-html-and-css/

[aaaaargZombies]

• links causing on overflow
• tickers causing overflow
• drawn borders at mobile
• possibly turn tickers into just a list of updating text (depending on how it looks with the images)