Open AdrianListon opened 4 years ago
On a desktop you can turn it on and off fairly easily during the run. On mobile the problem is we're running out of screen space to put additional controls. It's already pretty crowded with the simulation, the two sets of reported values and the main control buttons.
The desktop embed code seems to use the mobile version: http://www.liston.babraham.ac.uk/coronavirus/
Which version you get is purely a function of how big the display area is. If the width of the viewport is 800px or below you get the mobile layout. Bigger than that and you get the desktop version.
Can you change the threshold? The website needs to use 640px width
The side by side layout breaks if you try to squash it down to 640px (I just tried it). There isn't enough room for the heatmap and the options so the map gets pushed off screen. If it's in a window that size it's probably better to let it use the mobile layout anyway.
Then the tick-boxes below would be a nice addition.
The text size is rather large
On my Android phone there's already literally no screen space left on the run screen. Even the switch button is pushed off the bottom.
We can get some space back if we can find a smaller number of letters to say "Economic" or "Vaccination"!
Or maybe just remove "Cost" and let people figure that out from the pound sign. I don't really like that though.
Spacing already looks nice on the iPhone
Vaccination cost could be vaccine cost
It still doesn't fit onto one line on my phone. The resolution / aspect ration for iPhones is probably different to others.
It might be nice if you had a selectable button under the simulation to trigger quarantine +/- social distancing. At the moment if you want to turn it on during an outbreak you need to hit stop, properties, select quarantine, run and start. A bit convoluted and requires experience. Considering social distancing is a response for part-way through the pandemic, it would be a nice touch