From 8bc1487823d52bcf6b3731e80f9f3f8ac49150e4 Mon Sep 17 00:00:00 2001
From: Fabian Greimel <fabgrei@gmail.com>
Date: Wed, 2 Oct 2024 17:23:49 +0200
Subject: [PATCH] use PlutoUI.ExperimentalLayout.Div

---
 src/PlutoTeachingTools.jl |  2 +-
 src/present.jl            | 33 +++++++++++++++++++++++++++++----
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/PlutoTeachingTools.jl b/src/PlutoTeachingTools.jl
index 02776b5..263c51c 100644
--- a/src/PlutoTeachingTools.jl
+++ b/src/PlutoTeachingTools.jl
@@ -1,6 +1,6 @@
 module PlutoTeachingTools
 
-using Pluto.PlutoRunner: DivElement
+using PlutoUI.ExperimentalLayout: Div
 using Markdown: @md_str, MD, Admonition, LaTeX
 using HypertextLiteral: @htl, @htl_str
 using Downloads: download # used in robustlocalresouce.jl
diff --git a/src/present.jl b/src/present.jl
index 3789389..6a1d858 100644
--- a/src/present.jl
+++ b/src/present.jl
@@ -18,6 +18,31 @@ function Base.show(io, mime::MIME"text/html", fld::Foldable)
     return nothing
 end
 
+"""
+
+    Columns(cols...; widths, gap)
+
+Displays (any number of) columns nicely in Pluto. 
+
+* `widths` should sum to 100
+* `gap` in percent
+
+### Examples
+```julia
+# three columns
+Columns(
+    almost(md"here"),
+    almost(md"there"),
+    md"bla bla bla"
+)
+
+# 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
@@ -25,20 +50,20 @@ function Columns(cols...; widths=nothing, gap=2)
         widths = fill(100 / ncols, ncols)
     end
     if gap > 0 # adjust widths if gaps are desired
-        widths = widths / sum(widths) * (100 - gap * ngaps)
+        widths = widths / sum(widths) * (sum(widths) - gap * ngaps)
     end
 
     columns = [
-        DivElement(; children=[cols[i]], style="display: flex; flex: 0 1 $(widths[i])%") for
+        Div([cols[i]], style=Dict("flex" => "0 1 $(widths[i])%")) for
         i in 1:ncols
     ]
-    the_gap = DivElement(; children=[], style="display: flex; flex: 0 0 $gap%")
+   the_gap = Div([], style=Dict("flex" => "0 0 $gap%"))
 
     # 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)]
 
-    return DivElement(; children, style="display: flex; flex-direction: row;")
+    return Div(children, style=Dict("display" => "flex", "flex-direction" => "row"))
 end
 
 # for backwards compatibility