Manually Control Responsiveness with Elm classifyDevice

Flavio Corpa
InstructorFlavio Corpa

Share this video with your friends

Send Tweet

We will make all the necessary changes to keep track within our model of the device and orientation that the user is using, and change our UI according with that information, adding responsiveness and multiple columns (at last!) to our dashboard.

To do this, we'll need to modify our app state to track the device height and width (which we expose from JavaScript). Then we can use the classifyDevice function to pattern match the devices we want to handle, in our case, Desktop and everything else (as mobile). We will add a Browser.Events subscription that sends a ResizedApp message to our model that defines what device we are on.