Shiraz Callout is a cherrypicked from Shiraz 3.0
Demo: Shiraz Callout 0.5.2 — admonitions static and collapsible
Code: GitHub - kookma/TW-Shiraz: Shiraz is a small Tiddlywiki 5 plugin contains macros, stylesheets, templates, snippets, images, static tables, dynamic tables and acts as a starter kit.
Yes, you can do it!
PR are welcome!
Hey all, callout-details is a powerful successor to telmiger’s details widget, and shares the advantage of being easily exported to static-html details markup.
Its only downside is that it’s not convenient for super-complex non-transcluded content. You’ll have to transclude anything other than simple text strings – or else do funny """ or <div> bookends if you want to jam multi-line dropdown-content into the same enclosing tiddler.
But it’s tremendously flexible, style-wise: it puts a variety of standard (yet of course configurable) “admonition” styles at your fingertips — both with and without details-collapsability.
If you’re interested enough in this, you may well be running telmiger’s details widget already. And converting to shiraz callout-details may take some time (going through to do excise/transclusion fixes as needed).
Minor problem for using both during transition: the css for telmiger’s details widget conflicts with css for Shiraz callout-details: callout-details summary bars render with text overlapping icons (and they also lose the visual caret-icon cue for collapsable GUI):
Quick solution: put the following in a tiddler tagged $:/tags/stylesheet, thus cancelling out the offending bit of telmiger’s css (whose negative text-indent causes both the icon overlap and the disappearance of caret-icon):
details > summary {
text-indent: 0em;
}
-Springer
Hi @Springer
I think the problem is with @telmiger details widget.
As we discussed, the $details has some styles for details html element! like
details{
....
....
}
This affects all details elements in a wiki. I would recommend using name space here like
tl-details{
....
....
}
let’s see what Thomas thinks here!
Perhaps you did not see that I had already found the bit of responsible css in the details widget – and was posting the small bit of code needed to get the two solutions to play well together?
Hi @Springer
I saw your solution! but that solution affects all details in a wiki so it absolutely has side effects.
The callout plugin uses namespace for CSS styling! so, it works fine and does not change the styles of other details elements.
That problem is with $details widget plugin! You will have such problem in any wiki in that the $details widget has been installed.
It is not a good practice to change property of a standard html element globally! We only do this in stylesheet like normalize.css. So, please wait to see what @telmiger thinks on this.
Hi @Springer, thank you for exploring this and for providing a fix at the same time.
When I wrote the Details plugin, not all browsers were equally good at supporting the details HTML element. So the not so good practice mentioned by @Mohammad was a feature in my eyes at that time, fixing the quirks of browsers for all details elements in a wiki, hand written as well as generated by my widget.
I think Springer is on the right track by switching from my Details plugin to a – for her use – better and newer solution. Her temporary fix makes the transition smoother, so I am grateful for the comment and hope other people on the same path will find it.
Cheers and happy new year,
Thomas
The details widget did that and so much more! It has played an essential role in every project I’ve developed, for a few years now. I still think for some uses it’s the most powerful tool, since it’s very easy to generate and edit complex structures (including nesting details) all within the same tiddler.
Many thanks for chiming in!
-Springer
Can you test Shiraz by the demo page on GitHub or install in an empty.html?
I am afraid other plugins like detail widget cause such behaviour!
I think it is also the problem of this widget
test-callout It seems that there is still this problem in the test in the empty tiddlywiki, callout plugins However this page is normal on ios
Shiraz and one of its children (Shiraz Formatter) have got new updates.
sv-exlude-tags to exclude specified tags from displaying in tablemono macro now supports dark palettes.Shiraz got a new update
Special thanks to @Springer for this release.
EDIT If you use Shiraz 2.8.0, please update to 2.8.1. There is a critical bug in tbl-expand in 2.8.0
To remove the default arrow that comes with the <summary> tag in Safari
details[data-callout] summary::-webkit-details-marker {
display: none;
}
Thank you oeyoews
I have not installed Safari, but if your test shows the issue is gone, I add this to the Shiraz Callout stylesheet.
Yes, it totally works; browser compatibility issues are a real pain in the ass sometimes
Added in Shiraz-Callout 0.7