FriendsOfFlarum BBCode Details

datitisev

Pherinos I think that's because of how those browsers style the details tag. I didn't add the style myself, it was the default browser style that can be seen in the screenshot.

Pherinos

datitisev OK, thank you for the answer.

Pherinos

Here is the custom CSS to resolve FF pb (if any). But someone said me there is a problem on "old" iPhone...

details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .5em .5em 0;
    color: black;
    background-color: white;
}

summary::-webkit-details-marker {display: none; }

details summary::before { 
    content:"►"; 
    padding: .5em .5em 0;
}

details[open] summary::before { 
    content:"▼"; 
    padding: .5em .5em 0;
}

MikeJones

I just tried using it on my site and it did not work. Is this the correct formatting?

[details=Pro Tip]

I have recently begun using a gravity filter while backpacking, and it has been awesome not having to stay next to the water to hand pump it. I just fill up the bag with water and let it do the rest.

Unfortunately hiking in the desert or other places without a lot of trees to hang the gravity filter from you may have to hold it yourself which would not be fun. Instead I repurpose my camera tripod....

So in the image above I have the Lifestraw Flex and Gravity bag(Amazon Affiliate) hanging off my Peak Design Tripod.

[/details]

datitisev

MikeJones Instead of [details=Pro Tip] try [details title="Pro Tip"].

MikeJones

datitisev That worked perfectly thanks!

NightDriller

I'm using Firefox Developer v82 and I'm not getting the little down arrow, it does however appear on my android phone.

Edit: I see mentions of the issue above. Perhaps using a font icon would be better?

huuduy216

Is there a way that I can add this to the Markdown toolbar in the composer box?

[deleted]

Does anyone know if this extension will be made compatible with Beta 14, or perhaps be included in core ?

karaok

[deleted] this one should just work, although Extiverse won't pick it up as compatible just yet..

[deleted]

karaok Great. Thanks

karaok

[deleted] just tried it, functionally it installs and works. Not sure if it's indended, but the css doesn't look right. If I get a chance later I'll take a look

[deleted]

karaok Ok. Thanks. CSS not an issue as I can easily resolve that myself.

karaok

[deleted] feel free to PR it, if you wish 😉

MikeJones

This one isnt beta 14 ready yet correct?

[deleted]

MikeJones https://discuss.flarum.org/d/18796-friendsofflarum-bbcode-details/13

karaok

0.2.0

Update to meta only, no code change
beta 14 compatible (mainly for the benefit of Extiverse)

IanM

0.2.1

Updated meta ready for beta 15 (no code/functionality change)
Compatible with beta 14 and up

Updating

composer require fof/bbcode-details:^0.2.1

MikeJones

Is there a way to target the text inside the details with CSS? I think there needs to be a little padding. The text of the details title seems to be right on top of the text inside of the details tags...

For extra points is there a way to move the arrow to the right side and use a custom image?

I really like the accordion style in the bootstrap framework:

datitisev

MikeJones You can definitely do some stuff with CSS. You may be limited by the fact that it uses the native <details> and <summary> tags. This extension does have some CSS - specially for the browsers that don't support these tags (extension includes a polyfill). I recommend looking at that @ https://github.com/FriendsOfFlarum/bbcode-details/blob/2f72f8a2ab5f118291e9b3d48824578a161530bb/less/forum.less

MikeJones

datitisev SO I am trying to target the div within the details tags...

but there is no class name to target.... Any ideas? Is there a way to target divs inside summary tags only?

RichardBanic

datitisev
Hey there, could you perhaps help me out with an issue I´m having. I would like to format the description title itself, but any kind of code I use is being applied only to the hidden text, not the title.
Any suggestions?