Restyling a drop zone

[Soren Bjornstad]

I'm creating a horizontal list of my open tiddlers that runs across the top of the wiki, like this:

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:

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>

[maki aea]

wish i could try this on your code to see if it works first, but have you tried

div.sib-quick-tiddler-jump .tc-dropzone.tc-dragover:before {

display: inline-block;

instead of display: block; ?

sorry am on ios mobile so using google groups is difficult for me, sorry for short message

alternatively linonetwo seems to use flex for something similar in https://onetwo.ren/wiki/#%24%3A%2Fplugins%2Flinonetwo%2Fopened-tiddlers-bar%2Fstyle.css:%24%3A%2Fplugins%2Flinonetwo%2Fopened-tiddlers-bar%2Fstyle.css%20%24%3A%2Fplugins%2Flinonetwo%2Fopened-tiddlers-bar%20%24%3A%2FAdvancedSearch%20tiddlywiki%20Index

warmest wishes, maki

[Saq Imtiaz]

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.

[Soren Bjornstad]

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: "";

}

[Saq Imtiaz]

 

Saq, thanks, that was very helpful. (For anyone else who comes along, that should be "tc-dragover", with a dash, not a dot.)

 

 Happy it helped and apologies for the typo.

Another neat trick when trying to inspect tricky CSS that involves transient states is to trigger the debugger after a time out by executing this in the console:

setTimeout(function() { debugger; }, 2000);

[Darth Mole]

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!

[Soren Bjornstad]

Yes, $:/sib/Templates/Automatic/OpenTopBar. 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 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.)