A multi-column Layout / Storyview

Ciao Simon BTC

I have a request. Would it be possible to have an option to switch OFF all scrollers?

By way of background I been experimenting with the plugin as a tool to create website layouts that are “seamless”. It is looking very promising. (I’ll post an example once I properly tried the beta.)

Saluti, TT

It is NOT just your phone.

It is an irony that the (supposedly) best touch environments (smart phones) are basically, awful at d-n-d, that is easy on desktop or chromebook.

Architecturally I’m not sure what the answer is, though @BurningTreeC may know as he did stuff before on that kinda problem???

Just FYI, right now I’ll use Simon’s plugin to make wikis for reading on any platform, but won’t expose the tool-ology of it on Android at all yet.

Just a comment, TT

1 Like

You’re right TT, it works in all the right places and it’s still early days. The disappearing tiddlers are a bit weird, but it might be some kind of android quirk. I haven’t got an android tablet to test it on now, but it’s only feedback anyway, this plugin is getting better all the time. You’ve made something really useful BTC, thanks a lot!

If it is beta, I think you can start to use the “minor” version number eg: 0.1.0 :wink: See: https://semver.org/

Just a thought

about the mobile dragndrop quirks: dragndrop stopped working recently in my Android chrome browser and didn’t work at all in my Android FireFox browser.

There are some other quirks I have to resolve in CSS for mobile use

I’m glad that dragndrop works well on an iPad, thank you for reporting guys!

In my tests some things work well on Chrome/Chromium, some things work better on FireFox

@pmario you’re right, I’ll update the version number soon

Best wishes,
Simon

1 Like

I have successfully made a multi-column sidebar layout! FlowTiwi - a Multi-column draggable resizable sidebar (beta release) - #3 by linonetwo

It is using GitHub - react-grid-layout/react-grid-layout: A draggable and resizable grid layout with responsive breakpoints, for React. and thus didn’t take much of my time to implement it. (more time is spend on renderTiddler gets empty result... · Discussion #6645 · Jermolene/TiddlyWiki5 · GitHub )

1 Like

What I can say about mobile use is, that on Android mobile it works best on FireFox (the non-functioning dragging aside)

1 Like

There’s a big downside on mobile FireFox which I discovered recently:

when clicking a link on - say - the second column, it jumps to the first column. That doesn’t happen on mobile Chrome.

So the conclusion is, that the various Browsers are not yet at the same level for the various CSS solutions that are going on in this plugin.

Best wishes,
Simon

1 Like

I have being playing with some style customisations, not perfect but helpful;

multi-column-customiser.json (1.3 KB)

I have realised there would be value in dividing the total width into the number of columns to determine the tiddler width, especially since the side bar is an overlay and need not be counted.

  • We could then write CSS that is totally proportional

  • However I am yet to fully understand the use of zooming in and out.

  • This css mechanism would be useful even in non multi-column situations so the toolbar does not split the heading as much.

I observe that when I installed a macro that displays a button in the sidebar, with $:/tags/SideBarSegment it is not working? and not sure why.

multi-import-sidebar-segment.json (253 Bytes)

Hi @TW_Tones , this is my fault. I haven’t built the sidebar to use the $:/tags/SideBarSegment tag

I will change that soon! Thanks for reporting!

Best wishes,
Simon

Do you want me to advise of other observations or leave it for a while so you can stabilise the release?, which is very helpful as it is.

I am yet to try it on mobile but, columns at a time, slide right to different columns will be a good rapid access to multiple columns and tools on a mobile wiki.

Please do so, if you have the time. I have time at the moment to look at it and fix what I can fix.

What do you mean by “slide right to different columns” ? You can already slide to columns using the sidebar buttons for example (may not work on mobile chrome)

Someone else had mentioned using mutli-columns on mobile, allowed one to have N-columns and simply swipe-left or right to go to the next column. In this case only one column appears at once.

This seems to happen if you zoom in a lot on the desktop.

This is an excellent way to interact with tiddlywiki rather than infinite vertical scroll, finite horizontal scroll a column at a time. Using your multiple stories.

Example possible columns;

  • List of columns click to jump, home page etc…
  • Column for personal timing and log entries with a button click
  • Column for work timing and log entries
  • Journal or note entry page
  • Medications timers and records
  • Search tools for items created on other columns

This also happens, if you set the columns in horizontal view to 1 and press Alt-S to switch to horizontal view

Hi @TiddlyTweeter ,

you would like to switch off all vertical scrollers or all horizontal scrollers, too?

1 Like

Caro

Ideally both horizontal & vertical individually—if it’s not too much hassle.

Use cases for what I’m looking at could use either or both. (I will give some examples once I better studied the beta.)

Saluti, TT

I haven’t had time to practically look yet at the variant browser behaviours but I’m guessing that is absolutely right. TBH it is likely not a crippling problem?? I did notice you use CSS well to achieve the aims of the plugin; much to our good.

FWIW I don’t really fully understand the “snap thing” myself yet well enough to know if that is a CSS factor in the issue?

Just a comment, TT

Hi @TiddlyTweeter ,

Now there’s an option to hide all scrollbars (scrolling is still possible)
You can also disable box-shadows on tiddlers and set the tiddler-margin-bottom to 0 and the story-river padding to 0 so you get a seamless view

1 Like

Hi all tiddlywikians :slight_smile:

The plugin is now version 0.14.0

I’ve updated the palettes CupertinoDark, DesertSand, GruvboxDark, Nord and Vanilla to work well with the plugin and fixed some smaller issues

Hope you like it!

Best wishes,
Simon

2 Likes

Hi dear TiddlyWikians,

The plugin is now version 0.18.0

I’ve updated the sidebar to show ONLY the system SideBarSegments (site-title, site-subtitle, search, page-controls and tabs)

All other tiddlers with the tag $:/tags/SideBarSegment are shown in a sidebar panel at the opposite side

There’s also the option to add the tag $:/tags/SideBarSegment/User to a system tiddler with the tag $:/tags/SideBarSegment so that it will be also shown in the user-sidebar-panel

Conclusion: Now we have two sidebars (optionally)

I’ve done this because the main sidebar can become messy with too many additional SideBarSegments. Also, I’ve positioned the various SideBarSegments absolutely so that I’m able to control the overflow of the sidebar tabs (see how they overflow when you open the “More” tab and go to “System” for example)

P.S. the second sidebar will only show up if there are additional tiddlers tagged $:/tags/SideBarSegment or tiddlers tagged $:/tags/SideBarSegment/User

Best wishes,
Simon

2 Likes