Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove <details> / <summary> css #290

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

genericallyterrible
Copy link
Contributor

@genericallyterrible genericallyterrible commented Feb 15, 2024

Copy link

Try this Pull Request!

Open Julia and type:

julia> import Pkg
julia> Pkg.activate(temp=true)
julia> Pkg.add(url="https://github.com/genericallyterrible/PlutoUI.jl", rev="details-css")
julia> using PlutoUI

Or run this code in your browser: Run with binder

@rgouveiamendes
Copy link

Thank you for this implementation!
I wonder if the <summary> could not allow Markdown content instead of a String. For example, you could like to format part of the sentence with italics.
Actually, in several notebooks I am doing it defining this function:

begin
	struct Foldable{MD}
	    title::MD
	    content::MD
	end
	
	function Base.show(io, mime::MIME"text/html", fld::Foldable)
	    write(io,"<details><summary>")
	    show(io, mime, fld.title)
	    write(io,"</summary><p>")
	    show(io, mime, fld.content)
	    write(io,"</p></details>")
	end
end

In my case, both parts are usually Markdown. But now that I saw the details() function in action, new uses came to my mind! Thank you!

@genericallyterrible
Copy link
Contributor Author

Initially I had hoped to allow arbitrary @md/@htl strings, but couldn't guarantee good default behavior for headings/non-inline elements.

image

After a little noodling I've prototyped a pretty simple solution.

image

I'll turn your suggestion into an issue and start a new PR for that feature specifically. Thanks for the extra push to try again!

@genericallyterrible
Copy link
Contributor Author

With v0.19.39 released this should be ready to go, yeah?

Binder doesn't seem to be on the latest Pluto version so it doesn't show up right, but after updating Pluto everything looks good with this branch locally (for all the good that does 🙄) in Firefox and Chrome.

@rgouveiamendes
Copy link

Great! Looking forward to the merge!
Is there any particular reason why you prefer display: inline-block; to display: inline-flex;? The difference I see is the position of the triangle at the top or bottom of the block. I prefer it at the top. It seems more natural. Just saying... But I can change this particular behaviour to suit my taste! Thank you very much, once again!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants