Experimental mobile theme

[Ton Gerner]

Hi all,

With the increasing interest in mobile apps (aTW, Quinoid), I made an - experimental - mobile theme.
Available at http://tongerner.tiddlyspot.com/

Use with care; please don't try to use it for anything important.

Cheers,

Ton

EDIT: Theme moved to demo site: http://tw5mobile.tiddlyspot.com/

[Ton Gerner]

Hi Josiah,

Tab Plugins > Themes > Mobile.

Cheers,

Ton

[Ton Gerner]

Hi Josiah,

Theme moved to demo site: http://tw5mobile.tiddlyspot.com/

Its a bit odd its disabled?

I did disable it because you cannot try this theme at my heavily modified  http://tongerner.tiddlyspot.com

Cheers,

Ton

[TonyM]

Ton,

Thanks for sharing. Is it just a theme or plugin?

What testing or help would you like?

Tony

[Ton Gerner]

Hi Tony,

It is a theme for mobile use and comments (looks, use, ...) are very welcome.

I call it experimental because there is one problem I have to solve.
The 'story river' / 'sidebar menu' toggle display was made by toggling the tag $:/tags/Stylesheet on / off for the 'sidebar menu' stylesheet. This works but gives an overwritten shadow tiddler.
When switching themes that overwritten shadow tiddler can play havoc (when tagged with $:/tags/Stylesheet) as you can imagine.
As a workaround I modified the Theme button: when switching themes it deletes the overwritten shadow tiddler.

NOTE: As long as you only use it as a mobile theme, there is no problem!

I started all this with an `if-then` in the stylesheet (as used in the Vanilla theme at a few places). Then there is no overwritten shadow tiddler!
For some reason this 'if-then' works for 'normal' CSS like color etc. but not for e.g. position (unless I made mistakes which is also possible).
Since this 'if-then' did not work, I made it as it is now (toggle $:/tags/Stylesheet).

I will try the 'if-then' route again, but may be there are other ideas.

Cheers,

Ton

[TonyM]

Ton,

Rather than overwrite the shadow styleshhet, why not create your own, that contains only the differences and toggle that tiddlers sytlesheet tag. If you must use "after" field to ensure your stylesheet comes last. It is css "cascade" after all?

Do i make sence?

Tony

[Ton Gerner]

Hi Josiah,

Thanks for commenting.
I totally agree and started that way.
But the space for the 'original' search (search icon, search field, 3 icons thereafter + text 'xy matches') was more than the CSS pixels of 360px in portrait mode of an Android phone.
Lateron I omitted the text 'xy matches', decreased the icon size, so may be now it is possible to set the search toggle button at the second place.
I will have a look.

Thanks,

Ton


On Monday, January 28, 2019 at 2:17:07 PM UTC+1, @TiddlyTweeter wrote:

ciao Ton

First comment. Would it not be better to have the "hamburger" on the far left?

Josiah

[Ton Gerner]

Hi Tony,

Thanks for helping think of a solution.

The nice feature of themes is that there can only be one theme active at a time.
So in principle styles of theme A cannot influence styles of theme B and vice versa (I know you can base a theme on another theme by the 'dependents' field but that is not important for the discussion).
So for me it looks like bad practice to overwrite a stylesheet of my theme by toggling the tag $:/tags/Stylesheet on/off (by a button of my theme!).
Rearranging styles by list-before/list-after or drag & drop is a workaround like what I did with the overwritten Theme button which deletes the remnant stylesheet.

The way to go is what is used in the Vanilla theme: an 'if-then' macro which checks a state. This is used at several places in the Vanilla theme (checking @media, sidebar, fluid-width, ...). As far as I can see I overlooked something and I will start again with a minimal setup.

Cheers,

Ton

[Mohammad]

Excellent Ton,

With TWapp and Quinoid it is great.

Thank you for sharing!

As Josiah said the search button has an odd place.

--Mohammad

[Ton Gerner]

Hi all,

No experimental theme but a 'real' theme now: you can switch between all installed themes without problems (no remnant styles).
The 'if-then' macros in the stylesheet work now as expected (comments in the stylesheet did crash the 'if-then' macro).

The Menu button is the first button while the Search button needs to be the second button.
By decreasing button size and button spacing, Search (search box + 3 buttons after the search box) stays within 360px.

Menu button, Search button and Editor toolbar have an 'active' state ('colour alert-highlight') and do not trigger the 'dirty' state anymore.

Comments welcome.

Cheers,

Ton

[Ton Gerner]

Hi Josiah,

http://tw5mobile.tiddlyspot.com/

Cheers,

Ton

[Mohammad]

Thanks Ton,

 Just a small suggestion:

 - click on menu

 - Click on Recent

 - Click on Paragraph (for example)

NOTHING HAPPENED

but when you close the menu, you see Paragraph tiddler is open

Is there any reason when you click on a tiddler, you dont get it focused and you still the Menu is open?

--Mohammad

[Ton Gerner]

Hi Mohammad,

Thanks for testing.

It was a design decision: the Menu button toggles between Story river and Sidebar menu. So you need to click Menu again to get to the story river.

To be honest I don't know if the 'normal' way - with sidebar above story river (when below sidebar breakpoint) is easier. Time will tell.

Up till now (since aTW & Quinoid) I never used my phone for TW. So it is new for me.

Anyhow I learned a lot by implementing the 'if-then' macros in my stylesheet (needed for toggling story river / sidebar menu) ;-)

Cheers,

Ton