What's good for a mobile layout these days?

#1

I know there is JD’s mobile layout but problems with the search have discouraged me away from this.

Any suggestions for a good mobile layout?

#2

I still find Nicolas Petton’s Notebook theme quite impressive. He’s no longer actively developing it, and I don’t have the skills or the time to take it over. But I have just hosted a copy at https://crosseye.github.io/Notebook/. The source code is at https://github.com/CrossEye/Notebook.

I’m pretty sure there are other copies floating around as well.

1 Like
#3

I second Nicolas Petton’s Notebook theme. I use it with a startup tiddler to change it.

Type: application/javascript
module-type: startup

/*global $tw: false */
(function() {
exports.name = "setup-mobile-theme";
exports.platforms = ["browser"];
exports.after = ["startup"];

var mobileTheme = "$:/themes/nico/notebook";
var desktopTheme = "$:/themes/tiddlywiki/vanilla";

var breakpoint = 750;

exports.startup = function() {
var theme, palette;
if (document.documentElement.clientWidth <= breakpoint) {
theme = mobileTheme;
} else {
theme = desktopTheme;
}

setup(theme);
};

function setup(theme, palette) {
$tw.wiki.addTiddler({title: "$:/theme", text: theme});
}
})();

And I use a second startup to change the direction of tabs between tc-horizontal and tc-vertical.

tag:$:/tags/StartupAction/PostRender

<$reveal type="lt" state="$:/info/browser/screen/width" text="750">
<$action-setfield $tiddler="$:/_/Settings/tabsdirection" field="text" $value="tc-horizontal"/>
</$reveal>

<$reveal type="gteq" state="$:/info/browser/screen/width" text="750">
<$action-setfield $tiddler="$:/_/Settings/tabsdirection" field="text" $value="tc-vertical"/>
</$reveal>

My standard tabs usage looks like this:


<$transclude 
	$variable="tabs"
	tabsList=
		"
		[tag[XXXXX]]
		"
	default="XXXXX" 
	state="$:/forget-state/tabs"
	template="$:/_/TiddlerTyp/Default/TabsEnabler"
	class={{$:/_/Settings/tabsdirection}}
/>

with $:/_/TiddlerTyp/Default/TabsEnabler being this

<$tiddler tiddler=<<currentTab>>>
<$transclude tiddler="$:/core/ui/ViewTemplate/body/default" mode="block" />
</$tiddler>
2 Likes
#4

That sounds great. It might be helpful if you set this up :pray: (Enabeling cloning in advanced settings) on tiddlyhost.com so the rest of us can clone it from there.

#5

You can import these tiddlers and use it.
As always: BackUp beforehand!
I am a Script kiddie, not a programmer…

switch nico notebook.json (53.6 KB)

2 Likes
#6

Yes, Saq’s predates mine, at https://saqimtiaz.github.io/sq-tw/notebook.html.

@saqimtiaz: you may want to know that your index page, https://saqimtiaz.github.io/sq-tw/ seems to be down.

#7

Notebook is a good theme, but I don’t want the fullscreen bit of it, just the really nice mobile view. I’m currently running itonNote theme with a big sidebar and YAR.
I’ll have a tinker with it next week.

1 Like
#8

It’s looking hopeful … TT, x

Screenshot 2025-08-31 11.14.14
Screenshot 2025-08-31 11.14.141208×637 27.1 KB

1 Like
#9

So I thought I’d try the official Menu bar plugin, which works nicely in mobile view, BUT it removes the sidebar toggle in desktop! :frowning: and doesn’t show in full width mode, so I’ve got a conflict somewhere but I’ve not managed to find it yet. (It didn’t come back when I switched off the YAR plugin, among other things). I don’t mind the the menu bar not being present on full screen, as long as the toggle is present to open and close the sidebar!

The notebook theme is nice, but in desktop doesn’t give enough room for the sidebar/ the sidebar is not easily resizable when the sidebar is present.

#10

My other small problem is that the mobile view appears to be wider than the story width. When looking at it on desktop and a narrow window there is a horizontal scroll bar to show the extra empty space.