Device compatibility

[ana0]

Found out from Furtherfield that their users are:
55.2% Chrome
27.7% Safari
6% Firefox

And:
68% desktop
31% mobile

Also will check what the breakpoints are (can it be used on very small devices like iphone 5?)

• Desktop Chrome
• Desktop Firefox (Linux)
• Desktop Firefox (Mac)
• Desktop Safari
• Mobile Chrome
• Mobile Firefox
• Mobile Safari
• Very small device (like iphone 5)
• Tablet sized device

[critocrito]

To test the UI on my mobile phone I have to do the following:

• Find out your IP address for your internal network (ip a l for Linux, ifconfig for macOS).
• Edit .env and change localhost to your IP address for BASE_PATH and API_ENDPOINT.
• Rebuild your client source (npm run client:watch)
• Restart the development server (npm run server:watch)
• Access the app with http://IPaddress:port/hotspot

[critocrito]

I tried the UI on Safari - desktop and mobile.

On Safari on Desktop I managed to vote without any fuss. Just to mention it, to use the camera Safari has to connect either on localhost or using SSL. Otherwise the devices "can't be enumerated". This might be true for other browsers as well.

On mobile I never manage to get past the booth initialization screen despite enabling the booth in the admin UI. I tried this both on iPhone and iPad. I'm not sure yet why that is.

The two 3D icons on the sides overlap with the booth setup UI as well. This is the case for all screen sizes below ~850px.

[ana0]

I think probably to get past this page, the GRAPH_NODE_ENDPOINT env var also will need to be updated!

Would definitely be nice to fix these icons, tho the most urgent page is /vote be not /booth

[critocrito]

While testing for Firefox on Mac initially I received constantly error messages like that when trying to initialize the booth (https://localhost:3000/booth).

I couldn't get past it, even though the voting booth appeared in my booth admin panel. When going straight to the vote page nothing happened, I couldn't enter the manual override secret menu. Turns out, I had the metamask plugin installed in Firefox (it wasn't configured though) and once I removed the plugin I could move on and cast my votes. Not sure if that is relevant or just an issue on my setup. I thought I should mention it.

I also noticed that the camera get's initialized twice, once on the artwork select page and again on the voting page. The latter one seems unnecessary, at least I don't see any place where the camera would be used.

[ana0]

Ah, I see - those errors are maybe due to metamask being on the wrong network (the same thing you fixed for the EthereumContainer component). I think we should probably investigate this one ... can you open an issue?

For the camera, do you think it's this one or different?

[ana0]

Tested mobile firefox and mobile chrome. Found two small issues with layout, but was otherwise able to successfully vote. Will open issues for these