Generalize columns

[greimel]

closes #37. This is based on @fonsp 's suggestion in #37.

You can now display any number of columns using Columns(a, b, c, d, e). Columns will have equal width by default.

You can change the width using Columns(a, b, c, widths = [30, 20, 50]) (widths will be normalized to sum to 100 internally), and you can also customize the gap between columns.

Unfortunately, I couldn't figure out how to make text boxes fill the whole column:

The warning box is just as wide as the text.

Any ideas how to make the box fill up the whole column?

[greimel]

@fonsp Is DivElement considered public API and/or stable? Is it safe to use it here?

[eford]

1. It would be nice to hear from @fonsp before deciding whether we can expect this to be robust to future versions of PlutoUI.
2. Since the existing implementation does result in text boxes having the correct size, there is some motivation for keeping the original implementation. Is there a problem that this PR solves that outweights that?

[fonsp]

Hey all! Yes you can use it, and you should use it! I think I will eventually put it in a separate package, but I will make sure that PlutoTeachingTools does not break (it is API included in PlutoUI semver).

[fonsp]

Ah sorry I did not look at the code properly:

Using PlutoRunner as a dependency will not work, but you can use PlutoUI.ExperimentalLayout.Div, which works the same.

[fonsp]

About the change in layout: I highly recommend using PlutoUI.ExperimentalLayout.Div instead of the current solution with HTML, because it is much more general! It allows placing interactive elements inside layouts, and much more.

I'm sure that the difference in size with text boxes can be fixed using the new code, maybe you could share a screenshot to show the difference that you notice?

Having both methods in the same package might be quite confusing when users try to make these more complex layouts with interactive elements and such.

[greimel]

thanks @fonsp

It works now as intended. (I had too many "display: flex")

[eford]

Is there a reason to use using here instead of import?

[greimel]

you should only use import if you extend a function.

(This consistent with the rest of the package.)

[greimel]

@eford do you approve these changes?

If so, I'd merge and tag a new release so that I can use these changes for my course material.

(These changes are a strict improvement. The problem about width of boxes was solved.)

[eford]

Thanks. Merged from phone. I can do a new version later today.

[greimel]

Thanks, I've registered a new version.