Attempting to create a horizontally dense storyview

[Yestin Harrison]

Essentially, the motivation behind this little experiment is that I have a big screen, and I want to use it to see more tiddlers at once. Even in fixed-sidebar mode, the result is just a bunch of wide tiddlers with unreadably long lines or excessive horizontal whitespace. So, the natural thought is, “what if I could see multiple tiddlers side-by-side?”. Now, I'm aware that things like TiddlyTouch exist, but that's far too much surface area and control to think about. Really, all I need is to fit my tiddlers into multiple columns, and turn the purely top-to-bottom order into a left-right-down-left-right-down sort of order.


I found this article: <https://tobiasahlin.com/blog/masonry-with-css/> which describes how to achieve such layouts with flexbox. Column flex, row order, with clear correspondence to DOM order. The one caveat is that parent height must be just over the height of the tallest would-be column for things to wrap correctly.

So, I set about creating a stylesheet for two columns:


<$list filter="[[$:/view]get[text]match[flex]]">
.tc-story-river {
    display: flex;
    flex-flow: column wrap;
    align-content: space-between;
    height: 2400px;
    width: 1000px;
}
.tc-tiddler-frame {
    width: calc(50% - 11.5px);
    box-sizing: border-box;
}
/* skip over story-backdrop */
.tc-tiddler-frame:nth-child(2n+1) {
    order: 1;
}
.tc-tiddler-frame:nth-child(2n+2) {
    order: 2;
}
.tc-tiddler-frame::before,
.tc-tiddler-frame::after {
    content: "";
    flex-basis: 100%;
    width: 0;
    order: 2;
}
</$list>


The conditional is that I have the storyview "flex" enabled, which is just "classic" modified to call the following function on the story list widget during prototype.remove and prototype.insert:

let settle_heights = (list) => {
    let lefts = 0.0, rights = 0.0;
    for (let i = 0, h; i <= list.children.length; i++) {
        h = list.parentDomNode.children[i].getBoundingClientRect().height;
        if (i % 2 === 0)
            lefts += h;
        else
            rights += h;
    }
    $tw.utils.setStyle(list.parentDomNode, [
        {"height": `${Math.ceil(Math.max(lefts, rights)) + 40}px`}
    ]);
};

The problem is that these are nowhere near the only places I need to call this, as tiddlers can change height for any number of reasons (most obvious example being tabbing through the control panel), so if I do anything other than open and close tiddlers, including load the page without doing so, the layout breaks, either overflowing with flex or shoving everything in one column as it's the initial.

So, is there anywhere I could hook settle_heights in order to get it to work?

[TonyM]

I assume you looked a stroll for its two story layout?

tony

[Yestin Harrison]

Yes; I'm afraid two distinct stories aren't exactly what I'm looking for, and neither are any of the other associated features, really – what I'm trying to achieve is quite a singular change to the stock TW experience.

[TonyM]

It is often really easy to make a tiddler that views many tiddlers in whatever format you want. Even containing the whole story. Perhaps using css colums to display a long list of tiddlers in N columns. Set a range widget to dynamically set the number of columns. Such a tiddler would provide a gallery of tiddlers and be use full in zoom in mode.

In tiddler solutions are much easier to clone share and move than page layouts and can be opened in a new window or displayed full screen.

Just some thoughts.

Regards
Tony

[Saq Imtiaz]

@Yestin this might be a good starting point:

https://learnawesome.org/tiddlywiki.html#%24%3A%2Fplugins%2Frmnvsl%2Fkrystal

See also:

• https://twitter.com/Learn_Awesome/status/1265574525342793730
• https://learnawesome.org/digitalgardensetup

[Joshua Fontany]

Love these recent experiments. I just dug up an old post that was using Flexbox really creatively. Thread: https://groups.google.com/forum/#!msg/tiddlywiki/lVRs1qfXEsc/vS_mo36e_vMJ

Site: http://solar-flair.tiddlyspot.com/#%24%3A%2F_ra%2Fstyles%2FTwo-column%20story

```

/*

    Two-column story.

    Not very practical, since there's no separate scrolling

    and the order of tiddlers remains linear

    (no way to position a tiddler in one column or the other)

*/

.tc-story-river {

  display: flex;

  flex-wrap: wrap;

}

.tc-tiddler-frame

{

    max-width: 49%; margin-right: 1%;

    display: table;

}

/* Make this into a separate button "Limit height".*/

.tc-tiddler-body

{

    max-height: 50vh;

    overflow: auto;

}

```