In a custom module (amap), I have two forms with the same final purpose: handle (create, update, delete) a custom content entity (distribution_inscription).
The first one (DistributionInscriptionTableForm) is for "mass" update, designed as a table form and needs a "large" screen:
The second one (DistributionInscriptionForUserForm) is for "small" screen (smartphone):
With the same menu option, I'd like the user automatically redirected to the relevant form depending on the size of the device he currently uses.
How can I do that?
Add a comment
|
1 Answer
I can think of a couple of ways to do this:
Render the table version as a list of (list of) items (e.g. ul / li / ul... ), not an html table, and then use CSS media queries to adjust the display between the two formats. That is, traditional responsive design. Optionally, include some JS to "load more" items when there is space to fill.
Render the page furniture and some JS that will inspect the device dimensions and load the wide/narrow element (as html) from the server in an AJAX callback. Once loaded, the page can be submitted as normal.
Of the two, the first would be my own preference. Be aware that there are a wide range of device sizes, including 5" phones with Full HD and wider screens, so don't rely on absolute pixel numbers - you need to account for dpi. On mobiles, I would definitely lose the sidebar, too.
I would not try to use page redirection - bad user experience - flickering screen, general horribleness :-)
