Tiddlywiki and customized bullet list: Something is going wrong!

[Mohammad]

The attached tiddlers include a small CSS and example to create a bullet list!

Import them into tiddlywiki.com and try the example!

When you click on the hr/demo tiddler you see blue bullets connected  with a horizontal line!

When render is finished (means after TW transition effect) you see line is disappeared!

Is there something wrong with TW stylesheets?

--Mohammad

[Mohammad]

Tiddlers attached here.

I forgot to attached them in the original post!

[Mat]

When render is finished (means after TW transition effect) you see line is disappeared!

What do you mean "when render is finished" - what "transition effect"? It is static for me, with the line showing.

-----

BTW, I don't often download attached files but now decided to do so - so I don't know if this always happens for attached json files in ggroups but my Chrome blocks downloading it and says it is malicious. How do you guys "get" attached files from ggroups? (I had to "view" it copy-paste etc etc. Way too much work.)

<:-)

[Birthe C]

Hi Mat,

Using firefox I have not had that problem. I wonder are you not able to export as .json either?

Birthe

[Mohammad]

Hi Mat,

1. Chrome block downloading json, but you can tell Chrome they are safe and keep them

2. TW has a transition effect when you open a tiddler so by transition effect I mean what TW does on tiddler opening

3. render finished may be wrong here! but I mean when you click  tiddler during transition TW shows the contents at that time blue bullets and a horizontal line can be seen but

when transition effect finished and tiddler settled in its position in story river you cannot see the horizontal line!

Note my design uses a css to customize the TW li tag!

--Mohammad

[Mohammad]

Birthe

 What do you see? Did you note the disappearing of horizontal line (the line connects the bullets)

--Mohammad

[Mat]

Birthe C wrote:

Hi Mat,

Using firefox I have not had that problem. I wonder are you not able to export as .json either?

No problems to export.

<:-) 

[Mat]

Mohammad wrote:

1. Chrome block downloading json, but you can tell Chrome they are safe and keep them

yeah... but....

 

2. TW has a transition effect when you open a tiddler so by transition effect I mean what TW does on tiddler opening 

3. render finished may be wrong here! but I mean when you click  tiddler during transition TW shows the contents at that time blue bullets and a horizontal line can be seen but

when transition effect finished and tiddler settled in its position in story river you cannot see the horizontal line!

I don't see anything but the static blue line with the circled numbers on it, all the time.

<:-)

[Mohammad]

Which version do you use?

See what happened for me

TW 5.1.20pr

Expected one

What I get in TW 5.1.20

See my next post! publishing a small horizontal timeline!

--Mohammad

[Mat]

Chrome latest. TW .19 but I just tested with prerelease and it works fine there too.

See if reloading the page while holding down the Shift key helps. Otherwise restarting the browser.

<:-)

[Mat]

BTW, as noted I do see the blue line, but in your image it seems to be fading. My blue line is the same intensity between all circles. The circles do fade.

<:-)

[Mohammad]

Thank you Mat!

The line also should be fading! but you see the line!

I don't know what is wrong I cannt even see the line in tiddlywiki.com online

I use Chrome latest version too!

--Mohammad

[Birthe C]

Hi Mohammad,

I see the lines disappear...but very fast I nearly did not see it...(old eyes!). I am using Firefox 68.

Birthe

[Mohammad]

Thanks for confirmation!
Seems something wrong in TW

--Mohammad

[Mark S.]

Maybe try with an empty prerelease? There's a lot of CSS floating around in the tiddlywiki prerelease editions.

I tweaked your CSS and on an empty prerelease this just draws lines across the last 4 bullets (but you won't like it ;-) ).

I see that the CSS depends on the z-order to hide the color block between bullets.

I don't see anything in the CSS that should create a transition effect, except the time it takes to apply

the z-order . The fact that it goes almost faster than you can see suggests that FF has a faster render

engine than Chrome.

.xx li {
  width: 2em;
  height: 2em;
  line-height: 2em;
  /*font-size: 12px;
  font-family: arial, calibri, sans-serif;
  font-weight: bold;*/
  text-align: center;
  border-radius: 50%;
  background: dodgerblue;
  display: inline-block;
  color: white;
  position: relative;
  margin: 0px 10px;
 /* box-shadow: 0 0 3px 3px grey;*/
}

.xx li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -100%;
  width: 100%;
  height: 2px;
  background: dodgerblue !important;
  z-index: -1; 
}

.xx li:first-child::before {
  display: none;
}

.xx li:after {}

.xx .active {
  background: dodgerblue;
}

.xx li.active+li::before {
z-index: -1 ;
}

.xx .active~li {
  background: lightblue;
  
}

.xx .active~li::before {
  background: lightblue;
z-index: auto ;
}

[Mohammad]

Hi Mark,

 Many thanks! Thats true the z-order!

But seems there is something in TW stylesheet covers it! I changed the z-order to 1000 and can see the results now!

So, you are right, in empty TW which has few stylesheet I should work!

By the way it seems in TW 5.1.19 afterward there is an issue with stylesheet order which causes some of user defined css to be overridden!

Thanks again

Mohammad

[Mohammad]

Hi again Birthe,

 Could you try this new version. It seems this address your case.

It also has a nice color switching on items before the item you clicked.

--Mohammad

[Birthe C]

Hurrah Mohammad,

The color switching is nice. It looks good and works well.

Birthe