A multi-column Layout / Storyview

,
#46

Ciao @TiddlyTweeter

Thanks, I try my best …

The horizontal challenge:

  1. I’m inclined not to overflow the page horizontally
  2. Users should use the amount of columns that fits their screen
  3. But since this is hackable wikitext everyone can make this his own Layout
  4. To 3) … there are some adjustments that are not (yet?) in the core, so the hackability is not fully given at the moment

Overall it’s clear what you intend, thanks!

Grazie mille,
Simon

1 Like
#47

Very cool. Just opened on my phone and it glides very nicely from column to column in portrait and shows all three columns in landscape.

I can’t drag tiddlers from one to another.

Just spotted horizontal scroll bar!

Is this building on your muuri work?

#48

Hi Simon

Wonderful!
I can open the same tiddler in more than one column! This is amazing!
The new feature of adding/removing new columns is absolutely neat!

This is very useful!

1 Like
#49

A small issue: Clicking a link to a tiddler is open in story river (same column) does not scroll to that tiddler

Example:
img_1059_msedge

#50

A Sample Application of Multi-Column Layout:

This screencast shows one usecase for multi-column layout. It employs an editor with a select widget to select among tiddlers, edit in one column and live preview in another column.
The multi-column layout allows separate scrollbars. This is useful for long tiddlers, like the one contains solution to an exam question!

img_1067_msedge

2 Likes
#51

1 column, 2 columns, infinite columns.

There are all kinds of use cases for infinite columns. All related to the ability to see and/or navigate to more information.

First one that comes to mind is Kanban. The use cases for more than two Kanban columns, you could find the same kind of uses cases for more than two columns in TiddlyWiki. All about visual organization and navigation.

Same reasoning when you look at Ted Nelson’s Xanadu.

Same reasoning as why anybody would need more than two columns in a spreadsheet.

A use case: a column of current events and how they related to events of 50 years ago in a second column, and to 50 years before that in a third column, and so on and so forth.

#52

Nice one! Use case - storyboarding. Thanks BTC.

#53

Hi @Ste_W ,

this isn’t building on my muuri work, it’s all wikitext :slight_smile:
yes for mobile use I will have to add some css to make it work

1 Like
#54

Hi @Mohammad ,

yes there’s this navigation issue and I wanna solve it somehow
I’d be interested in what @jeremyruston would have to say about it :slight_smile:

#55

No problem, what is the issue?

#56

Thanks for jumping in @jeremyruston :slight_smile:

The issue is, that navigation within the different columns doesn’t work
What I mean is the automatic scrolling to the domNode when opening a link for example

#57

Hi @BurningTreeC
Thanks for this usefull innovation, which to mind has great potential.
Some Ideas:

  • Astonishingly I like the multicoulumn-view best on my mobilephone. There it could allow to navigate through through a long article where the chapters are columns. The abiltiy to snap ta collumn to the viewport on small screens is great, it would be great to have a switch allowing this on large screens as well.
  • With a smart navigation-mechanism, this could be the basis for a native reveal.js like presentation like Sukimas implementation here.
  • With many tiddlers open simultaneously, it would be great to integrate your dynaview-mechanism to load the content dynamically.

Best wishes Jan

#58

Hi @JanJo ,

Thank you for your feedback!

  • The trick with the snapping of columns to the viewport is stolen from @jeremyruston’s twpup-tools. I can integrate a switch to allow this on large screens as well, no problem
  • TiddlyWiki can do lots of stuff natively with the right ideas :slight_smile:
  • The dynaview mechanism is Jeremy’s innovation … but yes, it could be integrated, I just don’t know how well it would play with the drag-n-drop mechanism

Best wishes Simon

#59

Hi @JanJo again,

I’m currently working on the navigation mechanism so that it works

Best wishes,
Simon

#60

Hi @BurningTreeC the storyview attached to the story river list widget should handle that. Conceivably the list widget itself is getting refreshed when a navigation occurs? That would prevent the storyview animation from working.

#61

Thanks Jeremy,

now I found the issue. It was the missing “history” attribute on the list widget. I didn’t even know that it existed :slight_smile:

1 Like
#62

UPDATE:

  • Now the Navigation works (yay!)
  • There’s a toggle to toggle the scroll-snap-type x on/off, like @JanJo suggested

Best wishes,
Simon

1 Like
#63

Ah, beautifull … but where do I find the toggle?
I thought dynaview was your invention, anyhow if there is a lot of external content like videos and images it would be deeply usefull with multicolumn.
Another idea especially usefull here: A thread with various solutions for smaller scrollbars .

1 Like
#64

Hi @JanJo , the toggle is a Keyboard Shortcut (Alt-S)

Yes we could experiment with scrollbars, that’s true :slight_smile:

@Mohammad already made a great solution for scrollbars and it’s just an import away:

3 Likes
#65

@BurningTreeC the Addition of an arbitrary number of columns, and the ability to use TiddlyWiki as a kanban is great.

One thought I had on reviewing your latest invention is could we have some CSS to reduce the Title and Toolbar size or some other variations, perhaps a single menu icon where the existing buttons go behind a hamburger menu, so titles don’t wrap or compete for space with the toolbar. This would be useful in other situations but particularly useful with multiple columns.

  • Perhaps we could reduce the title font size depending on the number of columns, or more to the point the width of the tiddler.

It would be useful if we could add a header, or use the above story tag or Menu bar. This would allow the columns to be supported by tools at the top.

  • Perhaps even an optional column header to guide the user in a Kanban configuration.

I always feel guilty suggesting changes to someone’s great work but I hope it shows a sincere interest in what you are creating.

I would be happy to look at building the hamburger menu for this but need to find the responsive mechanism.