A multi-column Layout / Storyview

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

[BurningTreeC]

Hi all, now I’ve resolved some bugs and made dragging smoother

You can change layout to horizontal and back by Alt-S then you can navigate smoothly from section to section by Alt-Right and Alt-Left

Do you have some ideas what I can implement?
I still have to make the layout usable with the various palettes, that’s the next thing on my list

Best wishes,
Simon

[TW_Tones]

@BurningTreeC I have returned to test and play with this;

Design Ideas;

• The ability to “pin” a tiddler for each column, acting as a column header would allow each column to be described and support various workflows.
  • In a similar vein imagine each story had its own emptyMessage like $:/config/EmptyStoryMessage
  • The ability to pin more than one tiddler and reorder etc… could be part of a more advanced future design

To document

• The fact that selecting the different columns alters the behaviour of the sidebar, such as providing column specific open tab, Is something to remind people of.

Some notes:

• I needed to import $:/config/OfficialPluginLibrary to be able to use the official plugins.
• Installing the menu bar plugin it’s not appearing.
• If I have three columns containing tiddlers, and I close the third, the User Interface no longer provides info or access to the story and the tiddler list. However the sidebar open tab will list the tiddlers if it was focused on the now missing column. New tiddler also now adds tiddlers to the missing column.
  • I have more ideas to resolve this, perhaps discuss in anothe4r thread?
• I do not see content in the above story $:/tags/AboveStory tagged tiddlers

I continue to test and play, I am currently working on a generic switch the viewToolbar to a hamburger menu.

Love your work

[BurningTreeC]

Hi @TW_Tones ,

thank you for your feedback!

I’ve now implemented the emptyMessages for each column.
You can set them by using the tiddler $:/EmptyMessage-<column-number>

Also the $:/tags/AboveStory-<column-number>tags are implemented

The menubar plugin should show up now

I’ve addressed the problem with the closed columns still being active

Thanks again for your help,
Simon

[TW_Tones]

Thanks for that @BurningTreeC, I tested it rightway. Lookin great.

Keep in mind until we can use the menu bar, or across all the columns above story $:/tags/AboveStory, it may be hard to create tiddlywikis that have the supporting tools and documentation etc… for naive users arriving at the site, or ourselves after an extended break.

This tool is already very powerful to tiddlywiki enthusiasts and is proving to generate a lot of interest. As always my mind always returns to “if I was to use this to publish something to the world, how can I make it easy for visitors?”.

This is a json package of tiddlers using the above story tags including the non-working page abovestory $:/tags/AboveStory

above-multi-columns.json (530 Bytes)

• Notice how the 3rd column/RHSTop tiddler is not wikifying the “!!” markup.

Other tests

• I activated ControlPanel > Settings > Display Tiddler titles as links
  • This works fine as long as you use the title to drag to other wikis and elsewhere to drag between columns.

Other ideas;

• Get a theme / layout that makes this look like trello as was done with another kanban solution.
• Create a button to click done, that also moves it to the second/done column (how I wonder)

To test the menubar plugin we first need to install the oficial library config_OfficialPluginLibrary.json (237 Bytes)

• I can now see part of the Menu Bar (unlike before) but insufficient to use it.
• The menu bar toggle sidebar not longer works, only the one you provided.

Continue to love your work. I am such a