I think I need to change my approach when building the mobile view of the Hubzilla theme. Instead of trying to make one view that works well on both mobile and desktop, it might be useful to separate certain pages into multiple pages for mobile.
For example, Headquarters (HQ) is where users will check on their notifications, direct messages, latest messages, and also contains links to a variety of other resources. This looks great on desktop, but on mobile, it gets pretty cluttered and there is a lot of scrolling. Redbasic uses an offcanvas where you can show and hide the sidebar, but that is not really the experience I am looking for.
On mobile, you want a simpler display, even if that means navigating to a different page.
On Neuhub Tab and perhaps other themes, I am thinking of adding a bottom navbar with 5 icons that only shows on mobile for logged in users. It would have the following 5 buttons.
- Channel - To show your channel. Once there you can expand the "share" form (by clicking or tapping on it) to write a new post on your channel.
- Recent Posts - Just shows the messages widget (the one in the sidebar on HQ and other pages).
- Headquarters (HQ) - Takes you to the traditional Hubzilla HQ page.
- Notifications - Just shows the notifications widget (the one in the sidebar on HQ and other pages).
- Direct Messages - Sends you to /network and filters for DMs only. Change settings to blog mode, so it works like an enhanced inbox.
I figure that writing a new post and checking on incoming posts are the things you want quick access to. The rest you can access through the menus.
The trick here is reusing as many existing Hubzilla elements as possible so that we don't have to create a new addon that duplicates features or create a lot of new widgets.
I'm only keeping HQ because it has certain things that don't appear on any other pages. But I think eventually, a simplified less cluttered view for that page for mobile would be better.
We'll try it out on the Neuhub Tab theme, and see how people like it and how it performs. If it is liked, maybe we can get something similar into the core and Redbasic.