Design a Layout for Mobile

I want a simple mobile layout that can write new todo or thoughts in a few seconds (using a voice input method).

The layout UI I can think of now is something like Twitter. Do you have an existing layout plugin, or any design suggestions?

1 Like

The default layout theme I’m currently using is like this (itonnote-theme), it may requires some steps till I really added something.

2 Likes

The Notebook theme has a layout for mobile

1 Like

a bit hacked together, but it’s working well for my own use:

i’m using a menu which uses $:/tags/TopRightBar

please see tiddler: topbar 20220521

which opens a revealmenu across the top of the screen when the … is tapped, one option is the (customised) new tiddler

Screen Recording 2023-01-09 at 10.44.26

1 Like

Demo of a mobile friendly layout. Just input, very quickly.

You can switch to default layout, and view created tiddler in the recent tab of sidebar. (note that sidebar can be opened via button on the left-top)

Demo 我的 ~TiddlyWiki — A Plugin Demo

Github GitHub - tiddly-gittly/mobile-imessage-layout: Simple chat style (or Twitter style) layout for mobile. Quickly input todo and thoughts in few seconds.

4 Likes

I don’t expect latest text entry to appear at the top of the list though?

It appears on the bottom, like the messaging app.

1 Like

Not for me sorry!

The issue is in .mobile-imessage-layout-imessage and it is caused by

flex-direction: column-reverse;

with the following it works correctly

flex-direction: column;
justify-content: flex-end;
1 Like

It now looks like this, I’m thinking if I need to hide the view toolbar.