Skip to content

Commit

Permalink
Merge pull request #51 from greimel/columns
Browse files Browse the repository at this point in the history
Generalize `columns`
  • Loading branch information
eford authored Oct 4, 2024
2 parents 562dd11 + 6d715bc commit c6facca
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 60 deletions.
2 changes: 1 addition & 1 deletion Project.toml
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
name = "PlutoTeachingTools"
uuid = "661c6b06-c737-4d37-b85c-46df65de6f69"
authors = ["Eric Ford <[email protected]> and contributors"]
version = "0.3.0"
version = "0.3.1"

[deps]
Downloads = "f43a241f-c20a-4ad4-852c-f6b1247861c6"
Expand Down
12 changes: 9 additions & 3 deletions example.jl
Original file line number Diff line number Diff line change
Expand Up @@ -295,13 +295,18 @@ md"""
"""

# ╔═╡ fc5789dd-4b86-4007-9771-a6246235fd73
TwoColumn(md"Left col", md"Right col")
Columns(md"Left col", md"Right col")

# ╔═╡ 2881e5de-f6b7-47c0-a794-3e0fa57b712b
ThreeColumn(md"Left col", md"Middle col", md"Right col")
Columns(md"Left col", md"Middle col", md"Right col")

# ╔═╡ c22f7f6a-171d-4379-86c9-1781875cf0a4
md"""
You can customize the widths of the columns.
"""

# ╔═╡ 0e1e62a6-3b78-4415-89fe-fa17279fddbf
TwoColumnWideLeft(md"Left col", md"Right col")
Columns(md"Left col", md"Right col"; widths=[33, 66])

# ╔═╡ f43beea9-7a7e-4ee6-8ae6-350640c426aa
TwoColumnWideRight(md"Left col", md"Right col")
Expand Down Expand Up @@ -957,6 +962,7 @@ version = "17.4.0+2"
# ╟─d7593309-3462-4dba-8275-c2eb76b4c3fe
# ╠═fc5789dd-4b86-4007-9771-a6246235fd73
# ╠═2881e5de-f6b7-47c0-a794-3e0fa57b712b
# ╟─c22f7f6a-171d-4379-86c9-1781875cf0a4
# ╠═0e1e62a6-3b78-4415-89fe-fa17279fddbf
# ╠═f43beea9-7a7e-4ee6-8ae6-350640c426aa
# ╠═44d651d3-ce42-4061-b193-da7c31efed8e
Expand Down
3 changes: 2 additions & 1 deletion src/PlutoTeachingTools.jl
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
module PlutoTeachingTools

using PlutoUI.ExperimentalLayout: Div
using Markdown: @md_str, MD, Admonition, LaTeX
using HypertextLiteral: @htl, @htl_str
using Downloads: download # used in robustlocalresouce.jl
Expand Down Expand Up @@ -31,7 +32,7 @@ export display_msg_if_fail
include("present.jl")
export present_button
export Foldable
export TwoColumn, ThreeColumn
export Columns, TwoColumn, ThreeColumn
export TwoColumnWideLeft, TwoColumnWideRight
export ChooseDisplayMode # combines present_button and WidthOverDocs

Expand Down
102 changes: 47 additions & 55 deletions src/present.jl
Original file line number Diff line number Diff line change
Expand Up @@ -8,71 +8,63 @@ end

Foldable(title, content) = details(title, content)

"""
struct TwoColumn{L,R}
left::L
right::R
end
Columns(cols...; widths, gap)
function Base.show(io, mime::MIME"text/html", tc::TwoColumn)
write(io, """<div style="display: flex;"><div style="flex: 49%;">""")
show(io, mime, tc.left)
write(io, """</div><div style="flex: 2%;">""")
write(io, """</div><div style="flex: 49%;">""")
show(io, mime, tc.right)
write(io, """</div></div>""")
return nothing
end
Displays (any number of) columns nicely in Pluto.
struct TwoColumnWideLeft{L,R}
left::L
right::R
end
* `widths` should sum to 100
* `gap` in percent
function Base.show(io, mime::MIME"text/html", tc::TwoColumnWideLeft)
write(io, """<div style="display: flex;"><div style="flex: 65%;">""")
show(io, mime, tc.left)
write(io, """</div><div style="flex: 2%;">""")
write(io, """</div><div style="flex: 33%;">""")
show(io, mime, tc.right)
write(io, """</div></div>""")
return nothing
end
### Examples
```julia
# three columns
Columns(
almost(md"here"),
almost(md"there"),
md"bla bla bla"
)
struct TwoColumnWideRight{L,R}
left::L
right::R
end
# two columns with customization
Columns(
almost(md"here"), almost(md"there"),
widths = [40, 60], gap = 2
)
```
"""
function Columns(cols...; widths=nothing, gap=2)
ncols = length(cols)
ngaps = ncols - 1
if isnothing(widths)
widths = fill(100 / ncols, ncols)
end
if gap > 0 # adjust widths if gaps are desired
widths = widths / sum(widths) * (sum(widths) - gap * ngaps)
end

function Base.show(io, mime::MIME"text/html", tc::TwoColumnWideRight)
write(io, """<div style="display: flex;"><div style="flex: 33%;">""")
show(io, mime, tc.left)
write(io, """</div><div style="flex: 2%;">""")
write(io, """</div><div style="flex: 65%;">""")
show(io, mime, tc.right)
write(io, """</div></div>""")
return nothing
end
columns = [
Div([cols[i]], style=Dict("flex" => "0 1 $(widths[i])%")) for
i in 1:ncols
]
the_gap = Div([], style=Dict("flex" => "0 0 $gap%"))

struct ThreeColumn{L,C,R}
left::L
center::C
right::R
end
# insert gaps between columns
# i.e. [a, b, c] ==> [a, gap, b, gap, c]
children = vec([reshape(columns, 1, :); fill(the_gap, 1, ncols)])[1:(end - 1)]

function Base.show(io, mime::MIME"text/html", tc::ThreeColumn)
write(io, """<div style="display: flex;"><div style="flex: 32%;">""")
show(io, mime, tc.left)
write(io, """</div><div style="flex: 2%;">""")
write(io, """</div><div style="flex: 32%;">""")
show(io, mime, tc.center)
write(io, """</div><div style="flex: 2%;">""")
write(io, """</div><div style="flex: 32%;">""")
show(io, mime, tc.right)
write(io, """</div></div>""")
return nothing
return Div(children, style=Dict("display" => "flex", "flex-direction" => "row"))
end

# for backwards compatibility
TwoColumn(a, b; kwargs...) = Columns(a, b; kwargs...)

ThreeColumn(a, b, c; kwargs...) = Columns(a, b, c; kwargs...)

TwoColumnWideLeft(a, b; kwargs...) = Columns(a, b; widths=[66, 34], kwargs...)

TwoColumnWideRight(a, b; kwargs...) = Columns(a, b; widths=[34, 66], kwargs...)

""" Provides checkbox to toggle full width and present mode. """
function ChooseDisplayMode(;
wide::Bool=false, present::Bool=false, lang::AbstractLanguage=default_language[]
Expand Down

2 comments on commit c6facca

@greimel
Copy link
Collaborator

@greimel greimel commented on c6facca Oct 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JuliaRegistrator register()

@JuliaRegistrator
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Registration pull request created: JuliaRegistries/General/116592

Tip: Release Notes

Did you know you can add release notes too? Just add markdown formatted text underneath the comment after the text
"Release notes:" and it will be added to the registry PR, and if TagBot is installed it will also be added to the
release that TagBot creates. i.e.

@JuliaRegistrator register

Release notes:

## Breaking changes

- blah

To add them here just re-invoke and the PR will be updated.

Tagging

After the above pull request is merged, it is recommended that a tag is created on this repository for the registered package version.

This will be done automatically if the Julia TagBot GitHub Action is installed, or can be done manually through the github interface, or via:

git tag -a v0.3.1 -m "<description of version>" c6facca8e7b233f0ba477921281f4a2727a0a070
git push origin v0.3.1

Please sign in to comment.