TOC covers notebook content

StefanKarpinski commented 3 years ago

Looking at https://glenhertz.github.io/dft/dft.jl.html (cc @glenhertz), I see this:

If I make the window really wide it eventually doesn't cover it, but it's really absurdly wide and I don't even have enough space on my laptop screen to make it that wide. Same issue in both Safari and Chrome.

GlenHertz commented 3 years ago

Can the TOC and main column be percentages of the total width? It seems that the left margin is fixed (and blank) which isn't optimal in this case for usage of screen space.

pfitzseb commented 3 years ago

Maybe it'd make sense to inject the TOC further up in the dom (as a sibling to pluto-notebook); styling this better should be almost trivial then. Much less of a clean solution than just re-using a floating cell output though.

fonsp commented 3 years ago

Thanks! The problem here is that the notebook is centered in "print view" (used in static exports), and pushed to the left in "edit view". The ToC was only designed for the latter

disberd commented 3 years ago

A very hacky solution for anyone who finds the need to share static notebooks and keep the ToC without disrupting normal content is to add a cell with the following code:

html"""
<style>

#launch_binder {
    display: none;
}

body.disable_ui main {
        max-width : 95%;
    }

@media screen and (min-width: 1081px) {
    body.disable_ui main {
        margin-left : 10px;
        max-width : 72%;
        align-self: flex-start;
    }
}
</style>
"""

The codes was basically copied and adapted from https://github.com/fonsp/Pluto.jl/blob/e202a76363ccdbffb7c85f43ad76c7a76c0ba9b6/frontend/editor.css#L51-L81

This hides the Edit or Run in binder button and resize the main tag to basically fit most of the visible browser space. The width of 1081 is the same one that triggers the ToC to disappear from the side.

Here how it looks on the static export:

JuliaPluto / PlutoUI.jl

TOC covers notebook content #111