Fix css for 'sphinx_copybutton'

[s-weigand]

Changed CSS so 'sphinx_copybutton' will look properly out of the box.

• Moved padding: 0.4em; from .input_area, .output_area to its child pre
• Added padding: 0.4em; to other .input_area, .output_area child elements, to keep the styling consistent
• Added sphinx_copybutton to the docs
• Tested output for alabaster and sphinx_rtd_theme

Before:

After:

After sphinx_rtd_theme:

closes #333

[mgeier]

Thanks a lot for this PR, and sorry for the late reply!

As long as the extension is not properly supported on most themes (or at least on the RTD theme), I hesitate to enable it in the nbsphinx docs (because they are available for many themes).

What about just adding the CSS fixes?

[s-weigand]

Some remarks after working on this:

1. Changing styles without changing styles and by hand doing side by side compares is a tedious job and I found this service helpfull for the job (5k screenshot compares/month free for open source and you could just upload the full pages from the docs).
2. IMHO it would be more handy to move the css to an actual *.css file for linting + autocomplete and just read it to a string in the package (same would be good for the RST and LaTeX templates).

Just some ideas 😄

[s-weigand]

Hmmm looks like 'Python 2.7 + latest Sphinx' has some problems with hashlib on mac 😵
Maybe deleting the cache will help.

[mgeier]

I've fixed the Travis-CI failure in #363.

[mgeier]

Changing styles without changing styles and by hand doing side by side compares is a tedious job and I found this service helpfull for the job (5k screenshot compares/month free for open source and you could just upload the full pages from the docs).

I'm only open to free-and-unlimited-for-open-source services.

I don't like if there is a hard limit. Though admittedly, 5k seems quite a lot.

Anyway, I have no clue how much work it would be to set something like this up.

IMHO it would be more handy to move the css to an actual *.css file for linting + autocomplete and just read it to a string in the package (same would be good for the RST and LaTeX templates).

Yes, I agree.
The files don't even have to be read into a string, there should be officially supported ways to include those files in the Sphinx build process. I didn't really look into that, though.

I started with everything in one file, when everything was still small. Now I think it is a good idea to make separate files at some point, I just didn't really have the motivation to do so.

If you like, you can make a PR!

[s-weigand]

Hmmm repology is down atm, which is why the tests fail.
With the CSS as is atm, the style of some warning boxes changes, but I can't reproduce the warnings.

$ jupyter lab --version
1.2.4

Is it a IPython or nbconvert thing?

[mgeier]

Repology seems to be up again (repology/repology-webapp#101)!

With the CSS as is atm, the style of some warning boxes changes, but I can't reproduce the warnings.

That's not a problem.

JupyterLab and the Classic Notebook don't display anything in this case, but nbsphinx does.
IMHO it's nice to see that something is wrong. But it will happen quite rarely and the styling of these warnings is not important.

[mgeier]

Thanks for the updates!

Please note my attempted CSS changes there: https://github.com/choldgraf/sphinx-copybutton/pull/45

[mgeier]

Thanks for the updates!

Now this PR is nicely compact, I like it.

I think I will wait until sphinx_copybutton makes a new release and will merge this PR afterwards.

[mgeier]

Thanks!

There's still a problem with the placement of prompts, see #349 (comment).

[mgeier]

Thanks for the update! Now the only thing that's missing is setting the prompt padding to 0.3rem.

Here is the current rendered version, using the latest release of sphinx_copybutton: https://155-46379698-gh.circle-artifacts.com/0/html/code-cells.html

[mgeier]

Thanks a lot for your work!

[s-weigand]

Thanks for all the detailed reviews 😄
Next I might look into pulling the template strings into separate files, with the proper extension.

[mgeier]

Cool, I'm looking forward to this!

BTW, I've re-based all theme branches to see if the copy button works.
See https://nbsphinx.readthedocs.io/en/latest/usage.html#HTML-Themes for a list of themes.

I've found some issues in a few themes: #376

But all in all it looks great in most themes!