Improving the Mobile Interface

[BeatLink]

Hey everyone,

I've been fiddling with the mobile interface to see how it could be made more usable in terms of navigation. Here's what I did

• Bookmarking the root node to act as the starting point of the mobile UI
• Set #viewType(inheritable)=list on the root note. This switches the view of subtasks in the editor from grid to list
• Retract the side pane

With this setup i now use the view inside the editor to navigate the tree from top to bottom. This results in less information overload and better utilization of space for the smaller mobile screen. Try it out and let me know what you think. Perhaps it could be set as the default mobile setup

[SiriusXT]

I run a script on the mobile side, three touches show/hide the launcher bar:

$(document).ready(function () {
$('html body.mobile.heading-style-plain div#root-widget.component div#launcher-pane.component').css('display','none');
document.addEventListener('touchstart', function(event) {
  if (event.touches.length === 3) {
     if($('html body.mobile.heading-style-plain div#root-widget.component div#launcher-pane.component').css('display')=='none')
     { $('html body.mobile.heading-style-plain div#root-widget.component div#launcher-pane.component').css('display','flex');}
      else{$('html body.mobile.heading-style-plain div#root-widget.component div#launcher-pane.component').css('display','none');}
  }
});
    
});

You'll need to make a JS Frontend note with the script content and give the note the #run=mobileStartup label, then when loading the mobile interface, you can three-finger tap to hide/unhide the left sidebar.

[meichthys]

@BeatLink Thanks for starting the discussion. I definitely am interested in improving the situation where possible.
I'm not a big fan of the list view since there's no preview of the note, so your second bullet probably isn't something i would want to become the default.
I'm going to try it out anyway though to see how it works out, but there seems to be no way to navigate up the note tree unless you start over by clicking the bookmark and navigating back down the tree again.

@SiriusXT Thanks for your three finger script! It seems like that could come in quite handy! For other's reference, you'll need to make a JS Frontend note with the script content and give the note the #run=mobileStartup label, then when loading the mobile interface, you can three-finger tap to hide/unhide the left sidebar.

[BeatLink]

You can use the back button on android to navigate to the previous note.

[meichthys]

Ok, yes, that does seem to work well if you always start at the root note 👍

[zadam]

Bookmarking the root node to act as the starting point of the mobile UI

I wonder if it makes sense to create a dedicated (and default) "home"/"root" button for both desktop and mobile.

Retract the side pane

What do you mean exactly? The tree of the icon bar? Do you want to make it hideable or hidden by default?

[meichthys]

I wonder if it makes sense to create a dedicated (and default) "home"/"root" button for both desktop and mobile.

I do find myself using this button quite a bit 👍
#3535

[meichthys]

For anyone looking to seriously use trilium on mobile, be sure to check out @BeatLink's wonderful new mobile view creation!
https://github.com/BeatLink/trilium-scripts/tree/main/Mobile%20View