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/97f4b457-7de3-4766-8672-d49dd45c54c5n%40googlegroups.com.
