On a mobile device, the distance filter works unexpectedly

[timoh]

To reproduce:

1. Go through the steps to get the location
2. Get to the all drinks view
3. Move the slider

Observe: No drinks seem to match the filter

Note: a workaround is to tap the filter slider button after reaching the wanted distance, but is not something one expects.

[timoh]

@techstalgist I think we need to have some custom code in the slider.js file for touch devices, something like:

We need to listen to the touchstart / touchend events.

• http://stackoverflow.com/questions/3303469/does-mousedown-mouseup-in-jquery-work-for-the-ipad
• http://stackoverflow.com/questions/13655919/how-to-bind-both-mousedown-and-touchstart-but-not-respond-to-both-android-jqu
• http://stackoverflow.com/questions/11427403/how-to-get-touchend-to-behave-just-like-mouseup

[techstalgist]

http://tutorials.jenkov.com/responsive-mobile-friendly-web-design/touch-events-in-javascript.html

All code that uses onClick needs to be refactored so that the code recognizes tap events immediately, without 300ms lag.

[techstalgist]

An attempt to fix the issue https://github.com/timoh/craftbeer/commit/daef80d2a004cd4a8b1be2b9ce19999c7f93fa0b

Works on Device Mode (Chrome dev tools), but doesn't work on my LG G3 on production.

[techstalgist]

Now slider works on my LG G3 in production. https://github.com/timoh/craftbeer/commit/c0aea96e9bf86fc43724846c78653f0a9c2db9f1

But the lag is still there with the onClick events. So I need to work with that next.