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 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? -- You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/194c0eb7-e202-4188-9fed-273c30331d0eo%40googlegroups.com.
