A multi-column Layout / Storyview

[BurningTreeC]

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
• 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

[BurningTreeC]

Hi @JanJo again,

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

Best wishes,
Simon

[jeremyruston]

@BurningTreeC

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

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.

[BurningTreeC]

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

[BurningTreeC]

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

[JanJo]

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 .

[BurningTreeC]

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

Yes we could experiment with scrollbars, that’s true

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

Customize Scrollbars in Tiddlywiki

Refs: Mario plugin: Thin Scrollbars @JanJo solution Scrollbar is shown although there is enough space left - #2 by JanJo @makiaea solution to hide scrollbars Other refs 1.The Current State of Styling Scrollbars - CSS-Tricks 2. Discussion ( Query: Is there an existing solution to Preview Alignment? - Discussion - Talk TW (tiddlywiki.org)) Yes another solution The below solution will make scrollbars thin and will follow your Palette colors mysettings_scrollbars.json (845 Bytes) To…

[TW_Tones]

@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.

[CodaCoder]

@TW_Tones

could we have some CSS to reduce the Title and Toolbar size

Hmm you put me in mind of MC + Tix

[BurningTreeC]

Hi @TW_Tones

Thanks for your feedback!

CSS to reduce the title size would look something like this:

<$set name="amountOfColumns" value={{{ [list[$:/columns]count[]] }}}>

<$list filter="[<amountOfColumns>compare:number:gteq[4]]">

.tc-titlebar {
line-height: 0.9em;
}

.tc-titlebar .tc-title {
font-size: 0.7em;
}

</$list>

<$list filter="[<amountOfColumns>compare:number:gteq[6]]">

.tc-titlebar {
line-height: 0.7em;
}

.tc-titlebar .tc-title {
font-size: 0.6em;
}

</$list>


</$set>

and so on

The hamburger Menu instead of the tiddler-control buttons would be great, that’s true

I just forgot integrating the $:/tags/AboveStory mechanism, I will add it

Thanks,
Simon

[TW_Tones]

Simon,

If possible please see if the menu bar plugin can operate with it. My test suggested no.

I will publish a title handler and hamburger menu if possible given your tips.

Thanks heaps

[BurningTreeC]

Yes, I’ll make the menubar plugin compatible with this layout

[Watt]

@DaveGifford 's plugin - Toggle! works well too if you want to hide title/subtitle/tags. Great if you only want to see images (or text).

A multi-storylist saver like @Mohammad 's ‘Story saver’ (can’t find a link sorry) would allow sets of tiddlers to be saved and reloaded easily.

Looking great already, thanks BTC.

[saqimtiaz]

@JanJo

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.

I had a similar realization when I first saw the scroll snap behaviour in TWPub. I have been using it in a mobile layout for one of my TW based apps, where the first column is a sort of dashboard/search area, the next one is for reading and the third for selections, with swipe gestures to move tiddlers between columns. The UX is pleasing and friendly enough that it has made me actively starting using that wiki on my mobile, whereas previously TW has been a desktop only affair for me.

[Watt]

Apologies - not @Mohammad 's, but the work of the mighty @EricShulman

‘Story saver’ demo’d in this thread on the other forum
https://groups.google.com/g/tiddlywiki/c/2WWN0Lf0G-E/m/Ah4r_Nu0AgAJ

[TW_Tones]

@saqimtiaz

where the first column is a sort of dashboard/search area, the next one is for reading and the third for selections, with swipe gestures to move tiddlers between columns.

This is an example of unexpected benifits supporting the idea of “pure tiddlywiki” research and experiments.

[JanJo]

@BurningTreeC

the toggle is a Keyboard Shortcut (Alt-S)

Is it possible to trigger this within a button?

Seeing how well this works I ask myself whether there is an implementation for a horizontal storyview where the tiddlers are placed in a horizontal row and how this could be elegantly realized
I guess I could be useful to start a new thread on this topic.
The basic concept I would like to have:

• a horizontal storyriver
• @Mohammad 's section plugin to be able to control long tiddlers
• a mechanism to navigate from section to section
• a toggle to switch the tiddlerwitdh to viewportwidth and sectionheight to min 100 vh.
  furthermore I’d like
• the zoom mechanism of the singleTiddler storyview if links are followed.

Slideshow based on horizontal storyview

Seeing how well @BurningTreeC 's multicolumn works I ask myself whether there is an implementation for a horizontal storyview where the tiddlers are placed in a horizontal row and how this could be elegantly realized The basic concept I would like to have: a horizontal storyriver @Mohammad 's section plugin to be able to control long tiddlers a mechanism to navigate from section to section a toggle to switch the tiddlerwitdh to viewportwidth and sectionheight to min 100 vh. furthermore I’d…

[BurningTreeC]

@JanJo

Is it possible to trigger this within a button?

Hi @JanJo - yes sure, that’s possible. I just don’t know where to get all those icons from for the various buttons ^^

@JanJo

a mechanism to navigate from section to section

that’s already implemented here, isn’t it?

@JanJo

a toggle to switch the tiddlerwitdh to viewportwidth and sectionheight to min 100 vh.

that’s pretty easy to do

@JanJo

the zoom mechanism of the singleTiddler storyview if links are followed.

the zoom mechanism? you would like to have the zoomin animation, right?

---

Did you know that we can scroll to any place on the page by:

<$action-sendmessage $message="tm-scroll" selector="a css selector" animationDuration="your duration"/>

[JanJo]

@BurningTreeC

@JanJo

a mechanism to navigate from section to section

that’s already implemented here, isn’t it?

I could not find it yet in the sectioneditor-demo…
@Mohammad is something a scroll to sectionheader-mechanism implemented?
Perhaps it can be built with your scrolltrick

@BurningTreeC

Hi @JanJo - yes sure, that’s possible. I just don’t know where to get all those icons from for the various buttons ^^

I could do that…for a slideshow I’d build a mix between fullscreen and playbutton.