Automatic layout of widgets

[edasque]

I find it difficult to lay out widgets (mine & third parties) in a way that's going to work across screen sizes (as I move from laptop to laptop on a desk connected to screen, to my desktop, back, etc).

Would a framework like jQuery Masonry (http://masonry.desandro.com) or something similar be an effective way for Uebersicht to effectively auto-layout the widgets on a screen like a magazine? So as to give each as much space as they need while auto-arranging them so they all fit?

(Not married to jQuery Masonry, obviously, just suggesting an approach using a masonry type approach).

[evanfuture]

Once webkit has switched on support for CSS Grid, I'd say that would be the best thing to use. It seems a bit complicated at first, but it's very powerful, and flexible.

[perryprog]

Progress!

It may be possible to get this working at this point.

[hawkrives]

I think the last time I tried this, there was an extra level of <div> wrappers that threw me off – I almost think we'd need display: subgrid support for this to work.

In a grid, only direct children are grid items and can be positioned on the grid. We can mark one of those items as subgrid, and then the subgrid’s children will be like regular items for the main grid. This is pretty hard to explain with words so we’ll follow up with some examples in the next section.

from http://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/, which links to three other blog posts in the first paragraph.

The current DOM structure for the widgets is something like .widgets div #widget-$ID, if I recall correctly. The styles defined on a widget are only applied within the unclassed, un-ID'd div element, which makes it hard to target it. Furthermore, it seems like you'd almost want some graphical way to configure the .widgets grid, so that you-the-user could move the widgets around without editing their code.

That's all just me thinking out loud.

[edasque]

Would these provide automatic layout? Ideally the widget would render off-canvas, Ubersicht would figure out its size and then the layout would be automatic, not explicit.