A multi-column Layout / Storyview

,
#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.

#66

Hmm you put me in mind of MC + Tix

1 Like
#67

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 :slight_smile:

Thanks,
Simon

#68

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

#69

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

1 Like
#70

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

1 Like
#71

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.

4 Likes
#72

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

#73

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

#74

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.
1 Like
#75

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

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

that’s pretty easy to do

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"/>
1 Like
#76

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

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

#77

5 posts were split to a new topic: Widget Message tm-scroll and documentation

#78

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

1 Like