CSS: A sidebar for mobile

[Scott Kingery]

When you use TiddlyWiki on mobile, the wiki uses responsive design to move the sidebar up above the wiki content and fit everything on a small screen. It's nice but I don't typically use my side bar on mobile. I might use it to create a new tiddler but the rest of the content in the tabbed section is overkill for me on that small screen. It is pretty simple to close the sidebar but when you do that the wiki title goes away and it doesn't look as clean to me. Feels like the wiki loses its identity.

I wrote some CSS to solve this problem. You can see it in action and test the code here:

https://techlifeweb.com/tiddlywiki/tw5tribalknowledge.html#A%20sidebar%20for%20mobile

[Scott Kingery]

Ping to email.

[TonyM]

Scott,

Thanks for sharing. I will have a look. Have you seen the material mobile theme? It moves the sidebar into a menu.

But I do like component solutions

Tony

[Scott Kingery]

Tony, 

Thanks, I'll check that theme or as well.

Scott

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/9aa8f44d-3a12-4c10-b175-725e68bf3b92%40googlegroups.com.

[@TiddlyTweeter]

Ciao Scott

It is an interesting approach to reveal function progressively based on screen size.

Lot of merit in it!

I test a bit more and get back to you.

Best

TT

Scott Kingery wrote:

When you use TiddlyWiki on mobile, the wiki uses responsive design to move the sidebar up above the wiki content and fit everything on a small screen.

 

I wrote some CSS to solve this problem. You can see it in action and test the code here:

https://techlifeweb.com/tiddlywiki/tw5tribalknowledge.html#A%20sidebar%20for%20mobile

[Thomas Elmiger]

Hi Scott,

Thanks for sharing! With the same motivation I developed a theme some time ago:
https://tid.li/tw5/plugins.html#%24%3A%2Fthemes%2Ftelmiger%2Fnavigator

It would give you the possibility to put a (short) title in the mostly sticky top bar.
It has an option to display a new-tiddler button even while the sidebar is closed.

And it offers a bottom bar that can easily be reached on mobile screens ... I would love to hear what you think about it.

Cheers,
Thomas

[Scott Kingery]

Hi Thomas,

Thanks for the link to your design. It is very nice and clean. I do like how you've built the buttons on the bottom etc. If I build a mobile-first wiki I might very well use your code. For now, I'll stick with what I've built because my current use case is cross-device and I like the standard layout on the desktop.

Cheers,

Scott

[@TiddlyTweeter]

Ciao Scott

I played with it. It works. Fiddling with the media queries widths I was able to match Android phones (360px break point for many Androids in portrait).

In brief, what I LIKE about it...

• It is simple. It builds from TW CSS as is, rather than going back to ground zero

• Very good illustration of use of differential CSS behaviour at device "breakpoints"

It is interesting it shows TW CSS is more mobile amenable than it first looks like.

Best wishes

TT

Scott Kingery wrote:

When you use TiddlyWiki on mobile, the wiki uses responsive design to move the sidebar up above the wiki content and fit everything on a small screen. 

I wrote some CSS to solve this problem....

 

https://techlifeweb.com/tiddlywiki/tw5tribalknowledge.html#A%20sidebar%20for%20mobile

[David Gifford]

Nice! Just a question: how would a web user access those controls on a small device since they are hidden? As in, saving the file? On my phone I can turn it sideways and access those. But for sharing with others it might be a bit confusing for them. Maybe some kind of small button to expand the sidebar would improve this just a bit? But that said, this is really nice. Kudos.

[Ton Gerner]

Hi all,

There are many ways leading to Rome.
Some time ago I made an experimetal mobile theme, where a menu button toggled between story river and sidebar. One of the drawbacks was that after searching (in the sidebar) you had to switch back to the story river to see the searched tiddler.

Lateron I changed the structure: with a button you can now toggle the sidebar: it slides up/down.

I forgot to publish the new version. You can see a demo at http://tw5mobile.tiddlyspot.com/ where you can import or drag & drop the theme to your wiki.

NOTE: It is a real theme, so you can switch from e.g. Snow White to my Mobie theme and vice versa.

Cheers,

Ton

[@TiddlyTweeter]

Ciao Ton

Scott's approach uses Media Queries to incrementally add function AT different viewport sizes.

In effect there is not A design for mobile v. desktop. Rather, there are several stages of reveal of function at different viewport sizes.

Each step revealing more.

I think that interesting. And relevant to design.

Best wishes

TT

[@TiddlyTweeter]

Ermm

They are hidden!

[@TiddlyTweeter]

Ciao Scott

Update.

I was struck by the simplicity of this. I been playing around with it with different "breakpoints". I have no improvement over your demo yet but will work more with the general idea.

FYI, unrelated, there is one issue on moblie sizes that Telmiger did solve.  Its the "wiggle width". On Android, at least, even if you think you scale properly, the tiddlers sometimes need scrolling right a bit. The problem is likely somewhere in the Vanilla CSS. Not quite sure where. We could ask Thomas?

Best wishes

Josiah

[Thomas Elmiger]

Hi Josiah

Am Samstag, 9. November 2019 15:20:49 UTC+1 schrieb @TiddlyTweeter:

FYI, unrelated, there is one issue on moblie sizes that Telmiger did solve.  Its the "wiggle width". On Android, at least, even if you think you scale properly, the tiddlers sometimes need scrolling right a bit. The problem is likely somewhere in the Vanilla CSS. Not quite sure where. We could ask Thomas?

FYI: Of course you could ask, but I am afraid he would not remember. He still remembers a lot of hard searching though ...

Sorry and best wishes,

Thomas

[David Gifford]

Added to the toolmap

On Sunday, November 3, 2019 at 11:49:24 AM UTC-6, Scott Kingery wrote: