@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 On Saturday, June 13, 2020 at 12:30:20 AM UTC+2, Yestin Harrison wrote: > > 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? > > -- 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/19098f99-49ca-4512-9dd1-e16db8e953c5o%40googlegroups.com.
