subject:"\[tw5\] Re\: Restyling a drop zone"

[tw5] Re: Restyling a drop zone

2021-06-27 Thread 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=<> variable=_>

<>



(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.)

On Sunday, June 27, 2021 at 12:06:14 PM UTC-5 iamdar...@gmail.com 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?
>
> 
> <>
> 
>
> 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: <>;
>> 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 <>;
>> padding-bottom: 3px;
>> padding-top: 3px;
>> font-size: 12px;
>> }
>>
>> div.sib-quick-tiddler-jump a {
>> color: <>;
>> }
>>
>> 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 saq.i...@gmail.com 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

[tw5] Re: Restyling a drop zone

2021-06-27 Thread 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?


<>


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: <>;
> 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 <>;
> padding-bottom: 3px;
> padding-top: 3px;
> font-size: 12px;
> }
>
> div.sib-quick-tiddler-jump a {
> color: <>;
> }
>
> 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 saq.i...@gmail.com 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.sib-quick-tiddler-jump {
>>> background-color: <>;
>>> 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 <>;
>>> padding-bottom: 3px;
>>> padding-top: 3px;
>>> font-size: 12px;
>>> }
>>>
>>> div.sib-quick-tiddler-jump a {
>>> color: <>;
>>> }
>>>
>>> div.sib-quick-tiddler-jump a.tc-tiddlylink-shadow {
>>> font-weight: normal;
>>> }
>>>
>>> div.sib-quick-tiddler-jump .tc-dropzone.tc-dragover:before {
>>> display: block;
>>>

[tw5] Re: Restyling a drop zone

2021-06-27 Thread 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);

-- 
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 tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/7ef74a3d-53dc-4828-a3ac-61dba5c9c801n%40googlegroups.com.

[tw5] Re: Restyling a drop zone

2021-06-27 Thread 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: <>;
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 <>;
padding-bottom: 3px;
padding-top: 3px;
font-size: 12px;
}

div.sib-quick-tiddler-jump a {
color: <>;
}

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 saq.i...@gmail.com 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.sib-quick-tiddler-jump {
>> background-color: <>;
>> 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 <>;
>> padding-bottom: 3px;
>> padding-top: 3px;
>> font-size: 12px;
>> }
>>
>> div.sib-quick-tiddler-jump a {
>> color: <>;
>> }
>>
>> 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: "";
>> }
>> 
>>
>

-- 
You received this message because you are subscribed to the Google

[tw5] Re: Restyling a drop zone

2021-06-27 Thread 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.

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.sib-quick-tiddler-jump {
> background-color: <>;
> 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 <>;
> padding-bottom: 3px;
> padding-top: 3px;
> font-size: 12px;
> }
>
> div.sib-quick-tiddler-jump a {
> color: <>;
> }
>
> 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: "";
> }
> 
>

-- 
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 tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/ec86298b-8daa-4139-ad67-cfe6e62bc635n%40googlegroups.com.

[tw5] Re: Restyling a drop zone

2021-06-26 Thread 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
On Sunday, June 27, 2021 at 12:18:07 AM UTC+1 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.sib-quick-tiddler-jump {
> background-color: <>;
> 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 <>;
> padding-bottom: 3px;
> padding-top: 3px;
> font-size: 12px;
> }
>
> div.sib-quick-tiddler-jump a {
> color: <>;
> }
>
> 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: "";
> }
> 
>

-- 
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 tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/4157b14e-dca0-497f-b155-f9f3d91c1384n%40googlegroups.com.

[tw5] Re: Restyling a drop zone

[tw5] Re: Restyling a drop zone

[tw5] Re: Restyling a drop zone

[tw5] Re: Restyling a drop zone

[tw5] Re: Restyling a drop zone

[tw5] Re: Restyling a drop zone

6 matches

Site Navigation

Mail list logo

Footer information