Handle display for smartphone or small screens

[OlivierJourdan]

The responsiveness of the interface is not working great for small screens.

OK 👇

Not really OK 👇

Not OK at all 👇

Look into the code of the code of the ascidoctor documentation website to get some inspiration 👉 https://github.com/asciidoctor/asciidoctor-docs-ui.

They are dealing nicely with the responsiveness of their website 👇

[Vijayanth-Reddy-K]

@OlivierJourdan I believe the AsciiDoc site is using viewport to achieve this.

Example sourcecode:

Another possible avenue of exploration is to use flexboxes to better align information. This is the best reference I have found.

[OlivierJourdan]

@Vijayanth-Reddy-K, thanks for the input. I'm far from being versed in HTML, so I can't say how it's working at the end. The fact is that the website is built with Antora. The project is divided into 2 parts. The first part, for the content, is just text files written with the Asciidoc syntax. The second part, for the UI, relies on Handlebars templates (more info in this part of the Antora documentation).
The code for the UI is https://github.com/LabVIEWCommunityTraining/cti-documentation/tree/main/user-interface.
In the build process, we build the UI with gulp and then call Antora to convert the Asciidoc content.

The interesting thing is that we can access the UI code of the Asciidoctor (which is, obviously, built with Antora) website to see how they handle the responsiveness of the UI.

Any help is welcome 😉

Note: I think we need to fix this issue before doing #1.

[Vijayanth-Reddy-K]

@OlivierJourdan Thank you for the clarifications. 🙂 My go-to, instinctual reply was going to be along the lines of, "I can easily build a LabVIEW wrapper that substitutes the relevant commands into the final web page source code", but that would probably interrupt automation. It will definitely introduce an external dependency to LabVIEW.

I am not familiar with Antora, but a quick google search of "Antora viewport" led me to this promising page and this question and answers. Is that something that can be built into the existing workflow?