240815 – MOOVPAD Web App – Responsive UI

Screenshot 2024-08-15 184858

Working Proof Of Concept

The images shown here are a working proof of concept (small sample only), showing just the main dashboard background in the three main sizes (smartphone, tablet, and desktop), as well as the javascript and C# code needed to make the responsive UI work properly. The most important line of code among all the many thousands... that last one... "this.StateHasChanged();"

Screenshot 2024-08-15 192018
Screenshot 2024-08-15 192049

Without that line, the "WindowResized()" function changes only the image proportions and positioning, but not the actual images. The same would be true for all the other elements of the UI already built. This responsive UI will allow desktop and tablet users of the MOOVPAD Web App to adjust the size and style of the app to suit their needs, while allowing smartphone users to also get a UI very similar to the paid, downloadable mobile app. As you can see, I started a brand new file to help organise all of the code already written as it is brought in.

So maybe... not so foolish. Still insane though. Very. Ngl 🙂

Stay awesome,

EMH

Screenshot 2024-08-15 192118

HOW MOOVPAD IS BEING BUILT

For the overview of how MOOVPAD apps are being developed, the reasoning behind particular decisions during development, policies, and more in relation to all the technical things, please see the link to the left.

This will be an ongoing work in progress, and will always be linked to the bottom of each upcoming Blog post.