Mobile layout with easy-to-use search, alternatives to JD Mobile Layout

[vilc]

I have trouble with the JD Mobile Layout plugin, namely I cannot get the search bar to function. The results pop up with text “Title matches: All matches:” shows up, but no search results are displayed.

Other aspects of the plugin seem to work correctly. I have created a test wiki mobile-test.tiddlyhost.com, added the plugin and created tiddlers One Two Three to test the search bar. I have tested it with multiple browsers on Android and Windows (on Desktop you can make the window narrower than sidebar breakpoint to test the mobile view).

The plugin wiki at http://j.d.simplemobile.tiddlyspot.com runs on TW v5.1.17 and doesn’t have any other active plugins (so no obvious dependencies here).

Am I doing something wrong, or is it a known issue with this plugin? I have the same problem on v5.2.7, so this has nothing to do with the recent changes in v5.3.0.

If this is a known and non-fixable issue, are there any other, up-to-date plugins offering a similar mobile layout for TW? I wasn’t able to find anything.

Thanks for help in advance!

[arunnbabu81]

@vilc

is it a known issue with this plugin?

It is a known issue I guess. It’s seen in JD’s whitespace theme also. May be someone more knowledgeable can help in fixing it.

[arunnbabu81]

@vilc In this tiddler, select the combined search. This seems to be working.

Here is a sample from your test wiki.

[arunnbabu81]

@vilc

up-to-date plugins offering a similar mobile layout for TW?

Do you like mobile layout in Memory Keeper by @clsturgeon . He uses a modified version of @telmiger navigator theme and search

Also notebook theme by nicolas petton has a good mobile layout.

[vilc]

Thanks @arunnbabu81 for looking closer into the issue!

This setting in JDML does show some results, but the normal results, title matches and all matches, remain empty, as seen on your screenshot. Typing “one” does not show the tiddler “One” among these results, as it does in the normal search bar. Unfortunately, this is not a solution.

I will look into the alternatives that you linked. And if I have time, I will also try to look into why the search doesn’t work in JDML.

[arunnbabu81]

Were their any z-Index changes in the 5.2.0 core release?

It’s not z-index. In the absence of @jd, here’s the problem area… I took this code from http://j.d.whitespace.tiddlyspot.com/ – The only change I made was to add a couple of $log widgets. In my tests, it produces nothing in 5.1.23 and 5.2.0. It works in 5.1.15 and 5.1.22. <$reveal state="$:/temp/search" type="nomatch" text=""> <div class="jd-search-results"> <$set name="searchTiddler" value="$:/temp/search"> <$list filter="[all[shadows+tiddlers]tag[$:/tags/SearchResults]!has[draft.of]butfir…

Search not working with JD's Whitespace theme

This might be related to your issue. Hope that you can solve it.

[vilc]

Thanks again. Even if I’m not able to solve the issue of JDML itself, at least I have some options to explore.

I was already familiar with notebook theme and its mobile layout, but I was seeking something with less interference with vanilla theme. Pity that there is no official mobile layout.

A quick workaround I found is to use telmiger’s simple search (button pinned to page controls) and JDML without its searchbar. Clicking search button on the bottom JDML bar launches telmiger’s simple search. It has some alignment issues, but it is still a lot more functional than core.

I will report back here if I come up with something

[vilc]

@vilc

I will report back here if I come up with something

I have two solutions that fit my needs.

JDML + Command Palette

I made some adjustments to the Command Palette, so that it looks better on mobile. I configured JDML so that its non-functional search is not displayed. Instead, there’s a button for Command Palette in the sidebar/ JDML bottom bar.

See the demo here: https://mobile-jd-cp.tiddlyhost.com/

Notebook theme + Command Palette

I made some adjustments to the Notebook theme, so that it plays better with Command Palette. The default search from Notebook theme is hidden. Instead, there’s a button for Command Palette in the menu bar.

See the demo here: https://mobile-nb-cp.tiddlyhost.com/

---

One caveat for both solutions is that clicking on the CP results in Firefox/Android is a little finnicky and doesn’t always work. I can’t tell if it’s browser’s or plugin’s fault. If anyone knows this, any info would be appreciated. I use my TWs on Vivaldi/Android because of this and other things (better support for PWAs, faster loading).

Another option would be to use Thomas Elmiger’s search plugin mentioned above, but I couldn’t get it to display reasonably on mobile and support keyboard navigation on desktop.

[arunnbabu81]

@vilc Thanks for sharing the tweaks you have made. I am liking it very much. I am using it with captivate theme (not layout).

[telmiger]

@vilc

Thomas Elmiger’s search plugin mentioned above, but I couldn’t get it to display reasonably on mobile and support keyboard navigation on desktop.

Simple Search was designed for standard TW, so it is possible that it breaks or looks suboptimal in other themes (even in my own designs there is no guarantee).

Regarding keyboard navigation I tried to keep it as simple as possible and rely on browser standards. In Firefox I can navigate from searchfield to buttons to links using the Tab key. Other browsers might offer other shortcuts. In Safari I had to activate this feature in the browser settings: highlight all objects using tab (translated from German).

All the best for 2024
Thomas