Navigation between layout pages

I have a small touch screen (480x480px) which I want to make some pages that makes it
quick and easy to set some modes and configure music in different rooms.

Grid layout pages has made it easy to visualize exactly how it will look on the small screen,
here is the “front” page, which from left to right, top to bottom lets me set night or day mode, send the “alert kids that it is dinner time” or change to a the “music” page:

image

The issue I have here is that only a small part of the page is clickable. No I need to create my own widget to get a simple button, or is there something I am missing from the widget list?

This problem is exaggerated on the sub pages for music, where the bottom left button navigates to the “front” page, and the “Kjøkken” button gives a similar page for another music zone:

Here I also have problems with setting up the animations. If I use “Push” to visualize navigating “further” on the same level, I find no “push back”, though this page: View / Router | Framework7 Documentation obviously has them (if you try the demo). I have tried to change the code to use f7-push-backward on the transition, but that makes the next page unusable without a refresh. How can I tell it to use the back transition?

image

  • Platform information:
    • openHAB version: 3.4.0