Allow multiple plugins to be displayed horizontally

[Zenoo]

Most of the plugins don't take up the whole page's width.
Being able to display everything in 2 columns instead of one would allow for a more compact display of information, and less wasted space.

[lowlighter]

Maybe config_display: large would suit your needs ?

It looks like:

You can also play with multiple images with align="right" and align="left" with a custom width on your <img> tags on your profile markdown to make it render colum

Large display is not the default because when you're on a mobile, the svg width is scaled down to match device width, so a double column svg will be harder to read on small screens, unlike the second solution where the right-aligned image will be put under the left aligned one

[Zenoo]

I'd be happy to try to whip up a PR for this if you could guide me to where the changes should be made

[lowlighter]

Nice 👍 !

Before starting to code, I think the best would be to check first if it's actually possible to make responsive stuff using media queries and css grids in an embed svg in GitHub. You could try to make a simple svg with media queries or css grids in it, embed the image in a markdown file and see whether it reacts to screen size changes or if nothing happens.

If it does works, you can read section below for some explanations about where to look 🙂

---

All CSS is located in source/templates/classic/style.css so you can edit it to add more rules. Currently display size is handled through an additional .large class on <svg> root element with additional svg.large rules

The root <svg> element is located in source/templates/classic/image.svg in case you need to edit the attributes of root svg like classes or width. Plugins templates are located in source/templates/classic/partials which are EJS files (basically html files with JS templating).

To test in dev, the easiest is to setup a local server. Finally, you can confirm that it works on GitHub using Zenoo/metrics@branch-name in a test workflow and checking the output

A side note on why config_display: large extends the image horizontally rather than creating a new column.
It's because using 2-columns layout introduces other challenges, since each plugin has a different/variable height so we would need to keep layout balanced, and since order is customizable by user too through config_order option, it would be hard to respect it I think

[Zenoo]

After testing, media queries inside the SVG file work. Not against the screen size, but against the <img> element size.
So as long as we tell the <img> tag to fill its parent width, everything should work.

I'll try that later today

[lowlighter]

Nice, that's really good news 👍

[Zenoo]

The problem I'm facing right now is that using either flexbox or css grids leaves some obvious gaps in the display:

I will try another solution with column-count