Love these recent experiments. I jut 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; } ``` On Saturday, June 13, 2020 at 12:18:48 AM UTC-7, Saq Imtiaz wrote: > > @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/d606b4b4-d335-4839-8b9a-e830d62b164ao%40googlegroups.com.
