Replace Gridster with CSS flex grids

[YtvwlD]

This is an attempt to upstream the changes I did to chaosdorf/dashpi in 2017. I don't know whether this can or should be merged but I figured it might be useful. (The commits should probably be squashed.)

What it does: Replaces Gridster with a few lines of CSS.

New features: widgets scale when the window size changes
Lost features: drag&drop, widgets more than two columns wide, widgets more than one row high

This requires adjustments to the dashboards, but affects just the sample project.

[kinow]

Sounds like a good plan. I've been using CSS flex grids with Vue and Vuetify, and it works well, and has good compatibility with browsers.

@YtvwlD could you rebase your branch and resolve conflicts? Then if that works similarly to Gridster we can merge it and release with 1.2.

[YtvwlD]

I have rebased this onto current master.

[kinow]

Thanks a lot for fixing it so quickly @YtvwlD !

I've just finished the retroactive changelog: https://github.com/Smashing/smashing/blob/master/CHANGELOG.md

There are quite a few changes not released yet. I will cut 1.2.0 as-is first, and leave it in RubyGems for a while (1 month or more I guess?) to see if there's any issue reported.

And in the meantime will review this one, check why Travis failed, and hopefully merge and prepare 1.3.0 with it.

Thanks!
Bruno

[kinow]

@YtvwlD I've just rebased the PR, and added an extra commit that should fix the build on Travis.

[kinow]

This is a good PoC, but cannot be merged yet.

I think we just need to work on other options for drag n' drop. The multiple columns/rows could be achieved too I think, with just CSS (I think).

At the moment I get a scrollbar on Ffox and Chromium. Maybe because of the legend in one of the graphs. And some extra space in the widget with buzzwords.

[kinow]

Build failed only on 2.2.7, wihch is not a biggie now, as we can work around the other issues before worrying about this one.

[kinow]

Posted on Gitter today, an alternative to Grister: https://github.com/hootsuite/grid

[rompic]

there is also https://github.com/gridstack/gridstack.js

[kinow]

Rebased, and removed the <center> tag. I think that's the element that was causing the x-scrollbar