Split up plots into columns in vp reports

[voisey]

Works towards closing https://github.com/NNPDF/nnpdf/issues/268. So far it works for the 'PDF plots' section of the vp-comparefits report (https://vp.nnpdf.science/KbFpz1hOQwKsPbFVaDtqew==/pdf_report_report.html), i.e. for the PDF plots and the effective exponents. Personally I think it's much more readable with this formatting and the PDF plots page being shorter is certainly nicer. I think the same formatting should be applied to the other plots in the report too: namely distances, arc lengths, training-validation splits, and positivity plots. Let me know if you have any thoughts

[voisey]

The reason only certain plots have been affected is because some are tagged with @figuregen while some are tagged with @figure. @Zaharid, would it be sensible to edit savefig so that the figures tagged with @figure are put in columns too?

[voisey]

@scarrazza @Zaharid I wasn't totally clear on the outcome of yesterday's discussion on this. Is this ready to be reviewed/merged or is there something else you'd like to be done?

[scarrazza]

@voisey, fine by me from a conceptual point of view.

[Zaharid]

I think we should merge this more or less as is.

A few more general points:

• The report template looks old. It is probably time for an update.
  • We probably want a validphys specific report template. That's https://github.com/NNPDF/nnpdf/issues/65
• This should probably be responsive, and use some CSS grid stuff (or maybe the bootstrap flexbox thing which is far easier to use honestly).

[Zaharid]

It would probably better to add a class instead of a style tag to these reports. And then set the set the style for the class in the css file.

[Zaharid]

@voisey probably we could look into this https://primer.style/css/objects/grid#inline-block-grids we are already using this css style so adding the right classes should do the trick.

[voisey]

On your last point @Zaharid, do you mean that we can ditch the float business altogether and use d-inline-block instead? I don't really understand how this would work practically. Should something like:

<p class="d-inline-block col-2 p-2">
    <img class="width-full avatar" src="..." alt="..." />
</p>

work in our case?

[voisey]

Either way, I've put the styling I used in a CSS class

[voisey]

Regarding your first point in https://github.com/NNPDF/reportengine/pull/33#issuecomment-618404402, where did this file come from?

[Zaharid]

@voisey there is this https://github.com/NNPDF/reportengine/tree/master/src/reportengine/styles the CSS style is some old version of Primer CSS that @scarrazza got. The template is a pandoc template minimally adapted to work with the style.

[voisey]

Can we merge this and then open an issue about updating the styles?

[Zaharid]

Ok I'm going to stop trying to "improve" this. It is already an improvement. Thanks!

[voisey]

Haha, sure. You're welcome!