search

codidact / qpixel

Q&A-based community knowledge-sharing software
https://codidact.com
GNU Affero General Public License v3.0
397 stars 68 forks source link

Spoiler blocks #418

Open cellio opened 3 years ago

cellio commented 3 years ago

Mentioned in https://meta.codidact.com/posts/275836#answer-275836 (and I think it's come up before).

Can we support some way to mark a block of a post as a "spoiler", meaning it wouldn't be shown by default and the user would have to click something to see it? If it's not easy then we can instead direct people to the details/summary HTML (as used in https://meta.codidact.com/posts/277346), but if we can give people some Markdown or an editor button to do it, that would be easier for users.

ArtOfCode- commented 3 years ago

https://discord.com/channels/634104110131445811/676843271762214932/800076549876350998

MoshiKoi commented 3 years ago

it wouldn't be shown by default and the user would have to click something to see it?

Why not just use <details> tags? That does pretty much exactly what you want.

EDIT: By that I mean is there a reason for favoring a dedicated spoilers widget instead of just using details (other than details being a bit less intuitive)

ArtOfCode- commented 3 years ago

@MoshiKoi @cellio did point that out:

If it's not easy then we can instead direct people to the details/summary HTML...

but there's no Markdown shortcut for it, and it's a much less commonly known HTML element. Markdown would be preferable.

cellio commented 3 years ago

Markdown would be preferable, but as discussed in Discord, it requires JavaScript to be enabled for both creation and reading. If JS is turned off, a reader won't be able to expand the spoiler. This means the content isn't available without JS, as opposed to the create case where the JS-avoiding user has to do some extra work (type HTML). While most people enable JS (and most web sites require it), we've been trying to have core stuff work even without JS, even if it's a little uglier. This would be a case where something (viewing content) doesn't work. Let's not do that.

We could either add a button to insert the HTML that works now (though we should talk about number of buttons, particularly on phones), or just tell people to use the details tag. Most people don't know about the tag, so if it's not already documented in our formatting help, we should add it there.

ArtOfCode- commented 3 years ago

Leading on from that: I've implemented spoilers as CSS-only, triggered on hover rather than on click. That means users without JS can still see spoilers, just wouldn't be able to create them without JS.

cellio commented 2 days ago

How would we go about using the spoiler CSS that Art wrote in posts on the site? Do we still need to implement some syntax, or is this a case of knowing to write raw HTML with the right class?