Yes, $:/sib/Templates/Automatic/OpenTopBar <https://zettelkasten.sorenbjornstad.com/#%24%3A%2Fsib%2FTemplates%2FAutomatic%2FOpenTopBar>. I tagged it $:/tags/TopLeftBar, but I think one could instead use the PageTemplate or several other tags as well since the location on screen is fixed via CSS.
<$list filter=<<ff OpenTopBar>> variable=_> <div class="sib-quick-tiddler-jump"> <<list-links-draggable "$:/StoryList">> </div> </$list> (ff <https://zettelkasten.sorenbjornstad.com/#%24%3A%2Fsib%2FMacros%2Fff> is a *feature flag *conditional, which makes it possible to show and hide it on the fly, and separately for the public and private editions. I don't have it on in public, but if you search for FeatureFlags and turn the "Open top bar" checkbox on, you can see this in action.) On Sunday, June 27, 2021 at 12:06:14 PM UTC-5 [email protected] wrote: > Hello Soren! > > As always awesome solution/work! > > I just had a quick question; is it safe to assume that you need a tiddler, > with the following code, open in the storylist for your code to work? Or > did you add it to a template? > > <div class="sib-quick-tiddler-jump"> > <<list-links-draggable "$:/StoryList">> > </div> > > Thanks! > > On Sunday, June 27, 2021 at 12:41:25 PM UTC-4 Soren Bjornstad wrote: > >> Maki, yeah, I had previously tried inline-block along with a bunch of >> other things in that rule. It didn't help because I hadn't targeted the >> item underneath it as well. >> >> Saq, thanks, that was *very* helpful. (For anyone else who comes along, >> that should be "tc-dragover", with a dash, not a dot.) >> >> The selector I had missed targeting was *.tc-droppable.tc-dragover > >> .tc-droppable-placeholder*. (Both the droppable divs and the placeholder >> divs beneath them need to be inline-block.) I also needed this goofy rule: >> >> div.sib-quick-tiddler-jump ul > div.tc-droppable >> div.tc-droppable-placeholder svg { >> height: 0; >> width: 1rem; >> } >> >> Yes, that's an *svg*, because TiddlyWiki uses a blank image within a >> *div* for the placeholder after the last *li* in list-links-draggable. I >> assume there is a good reason for this. :-) >> >> Final version for anyone interested: >> >> div.sib-quick-tiddler-jump { >> background-color: <<color menubar-background>>; >> position: fixed; >> z-index: 850; >> display: inline-block; >> top: 0; >> right: 0; >> left: 0; >> text-align: center; >> height: 30px; >> overflow: auto; >> border-bottom: 1px solid <<color muted-foreground>>; >> padding-bottom: 3px; >> padding-top: 3px; >> font-size: 12px; >> } >> >> div.sib-quick-tiddler-jump a { >> color: <<color menubar-foreground>>; >> } >> >> div.sib-quick-tiddler-jump a.tc-tiddlylink-shadow { >> font-weight: normal; >> } >> >> div.sib-quick-tiddler-jump ul { >> list-style-type: none; >> margin: 0; >> padding: 0; >> } >> >> /* Droppable placeholders take up no space until we drag something there. >> */ >> div.sib-quick-tiddler-jump ul li.tc-droppable >> div.tc-droppable-placeholder { >> height: 0; >> } >> >> /* TW inserts this as a placeholder after the last item. We have to >> resize it to match the rest. */ >> div.sib-quick-tiddler-jump ul > div.tc-droppable >> div.tc-droppable-placeholder svg { >> height: 0; >> width: 1rem; >> } >> >> div.sib-quick-tiddler-jump .tc-dropzone.tc-dragover:before { >> display: inline-block; >> } >> >> div.sib-quick-tiddler-jump ul > li.tc-droppable div, >> div.sib-quick-tiddler-jump ul > div.tc-droppable div { >> display: inline-block; >> } >> >> div.sib-quick-tiddler-jump .tc-droppable.tc-dragover > >> .tc-droppable-placeholder { >> display: inline-block; >> background-color: green; >> border: 0px; >> width: 1rem; >> height: 1rem; >> margin-bottom: 0; >> margin-top: 0; >> padding-bottom: 0; >> padding-top: 0; >> } >> >> div.sib-quick-tiddler-jump ul li, div.sib-quick-tiddler-jump ul > >> div.tc-droppable { >> display: inline-block; >> } >> >> .sib-quick-tiddler-jump ul li div:nth-child(2):after { >> padding-left: 5px; >> content: "·"; >> padding-right: 5px; >> } >> >> /* not last-child because there's a dropzone after it */ >> .sib-quick-tiddler-jump ul li:nth-last-child(2) div:after { >> content: ""; >> } >> >> >> On Sunday, June 27, 2021 at 4:11:05 AM UTC-5 [email protected] wrote: >> >>> Inspect the dropzone DOM node with the browser dev tools and add the >>> class "tc.dragover". This will allow you see what CSS is active during the >>> drag over and make it easier to arrive at a solution. >>> >>> On Sunday, June 27, 2021 at 1:18:07 AM UTC+2 Soren Bjornstad wrote: >>> >>>> I'm creating a horizontal list of my open tiddlers that runs across the >>>> top of the wiki, like this: >>>> >>>> [image: Screenshot from 2021-06-26 18-13-01.png] >>>> >>>> It's based on *list-links-draggable* and works great except for when I >>>> try to drag something to a different position. When I try, the bar scrolls >>>> to fit the dropzone on a separate line, so that I can no longer see where >>>> I'm moving the tiddler to: >>>> >>>> [image: 2.png] >>>> >>>> I tried poking through the theme CSS for a bit, but wasn't able to find >>>> anything that worked. It doesn't help that it's impossible to carefully >>>> inspect the DOM with the browser devtools since the mouse is tied up with >>>> the drag. Can someone point me to how I'd make the dropzone end up >>>> horizontally inline with the items, instead of above/below them? >>>> >>>> Here's the code of the tiddler/CSS that I currently have: >>>> >>>> <div class="sib-quick-tiddler-jump"> >>>> <<list-links-draggable "$:/StoryList">> >>>> </div> >>>> >>>> <style> >>>> div.sib-quick-tiddler-jump { >>>> background-color: <<color menubar-background>>; >>>> position: fixed; >>>> z-index: 850; >>>> display: inline-block; >>>> top: 0; >>>> right: 0; >>>> left: 0; >>>> text-align: center; >>>> height: 25px; >>>> overflow: auto; >>>> border-bottom: 1px solid <<color muted-foreground>>; >>>> padding-bottom: 3px; >>>> padding-top: 3px; >>>> font-size: 12px; >>>> } >>>> >>>> div.sib-quick-tiddler-jump a { >>>> color: <<color menubar-foreground>>; >>>> } >>>> >>>> div.sib-quick-tiddler-jump a.tc-tiddlylink-shadow { >>>> font-weight: normal; >>>> } >>>> >>>> div.sib-quick-tiddler-jump .tc-dropzone.tc-dragover:before { >>>> display: block; >>>> position: relative; >>>> top: 0; >>>> left: 0; >>>> right: 0; >>>> } >>>> >>>> div.sib-quick-tiddler-jump ul { >>>> list-style-type: none; >>>> margin: 0; >>>> padding: 0; >>>> } >>>> >>>> div.sib-quick-tiddler-jump ul li { >>>> display: inline-block; >>>> } >>>> >>>> .sib-quick-tiddler-jump ul li div:after { >>>> padding-left: 5px; >>>> content: "·"; >>>> padding-right: 5px; >>>> } >>>> >>>> /* not last-child because there's a dropzone after it */ >>>> .sib-quick-tiddler-jump ul li:nth-last-child(2) div:after { >>>> content: ""; >>>> } >>>> </style> >>>> >>> -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" 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/tiddlywiki/3ce2cd4e-d0c7-432b-81de-0fabb4f2a1fen%40googlegroups.com.
