The dashboard is currently designed to use a grid layout with 3 columns and a variable number of rows, based on the number of panels. The row height is evenly split to 100% / n_rowsto use all the available height with no scrollbars, up to the point where the min-height of the panel is reached. After that point a scrollbar appears on the right.
This ensures that for most layouts there are 1-3 rows with equal height and no scrollbars and that layouts with 10+ panels are still supported through the scrollbar (which appears automatically).
However, since the number of columns is fixed, in a 4-panels layout there will be 3 panels on the first row and one on the second, instead of 2 panels per row.
For 1- and 2-panels layouts there will also be 3 columns, meaning that the panels will always take 33% of the width instead of 100% and 50+50% respectively.
In order to handle these cases, the number of columns should become variable and either capped to a max of 3 columns or to an unbound limit determined by the max-width of the panels.
Desirable layouts based on the number of panels are:
panels
rows/cols
1
1/1
2
2/1
3
3/1 or 1/3 or 2/2
4
2/2
5
2/3
6
2/3
7
3/3 or 2/4
8
3/3 or 2/4
9
3/3
However, whenever a panel is added, it could be added in a new column or a new row, and I don't think this can be determined with CSS only, based on the number of panels.
For example, if we only have 1 panel and want to add a second one, we want to add a new row. When we add a third, we might add yet another row (i.e. a 3/1 layout), or a new column (i.e. 2/2), or remove the second row and add two columns (i.e. 1/3).
With 4 panels, if we try to fill all the available columns before adding new rows (like we are currently doing), we will end up with a 2/3 layout with 3 panels on the first row and just 1 on the second. If we add new rows we will end up with a 4/1 layout unless we cap the maximum number of rows, but once the row limit is reached the panels will be added to the right as new column creating an horizontal scrollbar.
If this cannot be achieved with pure CSS, we will have to implement it in JS. In addition, the panel layout might change depending on the size of the viewport. For example, with 6 panels, a 2/3 layout might be preferable on a computer screen (landscape) whereas on a tablet held in portrait mode a 3/2 layout might be better.
If we use JS we can perform calculations to determine the optimal number of rows and columns based on the panel number, the size of the viewport the min/maxheight/width of the panels, and any other constraint we might want to add.
Another option is to create different CSS classes for different panel layouts with different configurations of rows and columns and use VueJS to apply the right class based on the number of panels. This can also be combined with media queries to handle constrains dictated by the viewport size (which is not directly accessible from VueJS). IOW, if we have 4 panels, VueJS could apply class="four-panels" which specifies a 2/2 grid layout, updating the class dynamically whenever panels are added or removed.
Yet another option is to find an external library to handle the layout, assuming it lets us specify the constrains we need.
One advantage of improving the panel layout handling is that we might be able to simplify a bit the fullscreen panels handling by simply hiding all the other panels and let the only remaining one take up all the available space (which is similar to what we are already doing).
The dashboard is currently designed to use a grid layout with 3 columns and a variable number of rows, based on the number of panels. The row height is evenly split to
100% / n_rowsto use all the available height with no scrollbars, up to the point where themin-heightof the panel is reached. After that point a scrollbar appears on the right.This ensures that for most layouts there are 1-3 rows with equal height and no scrollbars and that layouts with 10+ panels are still supported through the scrollbar (which appears automatically).
However, since the number of columns is fixed, in a 4-panels layout there will be 3 panels on the first row and one on the second, instead of 2 panels per row.
For 1- and 2-panels layouts there will also be 3 columns, meaning that the panels will always take 33% of the width instead of 100% and 50+50% respectively.
In order to handle these cases, the number of columns should become variable and either capped to a max of 3 columns or to an unbound limit determined by the
max-widthof the panels.Desirable layouts based on the number of panels are:
However, whenever a panel is added, it could be added in a new column or a new row, and I don't think this can be determined with CSS only, based on the number of panels.
For example, if we only have 1 panel and want to add a second one, we want to add a new row. When we add a third, we might add yet another row (i.e. a 3/1 layout), or a new column (i.e. 2/2), or remove the second row and add two columns (i.e. 1/3).
With 4 panels, if we try to fill all the available columns before adding new rows (like we are currently doing), we will end up with a 2/3 layout with 3 panels on the first row and just 1 on the second. If we add new rows we will end up with a 4/1 layout unless we cap the maximum number of rows, but once the row limit is reached the panels will be added to the right as new column creating an horizontal scrollbar.
If this cannot be achieved with pure CSS, we will have to implement it in JS. In addition, the panel layout might change depending on the size of the viewport. For example, with 6 panels, a 2/3 layout might be preferable on a computer screen (landscape) whereas on a tablet held in portrait mode a 3/2 layout might be better.
If we use JS we can perform calculations to determine the optimal number of rows and columns based on the panel number, the size of the viewport the
min/maxheight/widthof the panels, and any other constraint we might want to add.Another option is to create different CSS classes for different panel layouts with different configurations of rows and columns and use VueJS to apply the right class based on the number of panels. This can also be combined with media queries to handle constrains dictated by the viewport size (which is not directly accessible from VueJS). IOW, if we have 4 panels, VueJS could apply
class="four-panels"which specifies a 2/2gridlayout, updating theclassdynamically whenever panels are added or removed.Yet another option is to find an external library to handle the layout, assuming it lets us specify the constrains we need.
One advantage of improving the panel layout handling is that we might be able to simplify a bit the fullscreen panels handling by simply hiding all the other panels and let the only remaining one take up all the available space (which is similar to what we are already doing).
For reference, the current implementation is (partly) defined here: https://github.com/overthesun/simoc-web/blob/12a23f8ac47bfeafda226ce7db6d11f56072366c/src/components/dashboard/Main.vue#L189-L197