The following layout options are available for the different widgets:
Visualization
Sizes
Table view
1-2, 1-3, 2-2, 2-3, 3-2, 3-3
Pie Chart
1-2, 1-3, 2-2, 2-3, 3-2, 3-3
Line Chart
1-2, 1-3, 2-2, 2-3, 3-2, 3-3
Bar Chart
1-2, 1-3, 2-2, 2-3, 3-2, 3-3
Single value
1-1, 2-2
Admin Info
1-2, 1-3, 2-2, 2-3, 3-2, 3-3
Quicklinks
1-2, 1-3, 2-2, 2-3, 3-2, 3-3
Notifications
1-2, 1-3, 2-2, 2-3, 3-2, 3-3
Copilot Job Engine
1-2, 1-3, 2-2, 2-3, 3-2, 3-3
Bookmark List
1-2, 1-3, 2-2, 2-3, 3-2, 3-3
The grid is responsive and organised in rows (based on Markus proposal). The rows have three heights x1, x2 and x3 which allows for longer/taller widgets to be placed in a single row. This also means that if there is a tall widget x3 then next to it in the same row can be placed x1 + x2 or x1 + x1 + x1. See the example:
The widgets follow exact proportions for height and width where:
x1 is 147 px
x2 is 147x2 + 10 = 304 px
x3 is 147x3 + 10x2 = 461 px
The space between the widgets is 10 px. The default and most common case estimated for the Dashboards width is 1250 px.
If the widgets have more content than the space allows, then there are scrollbars inside the widget (both vertical and horizontal).
The layout options for the rows in the modal are meant to be more diverse and possible to organise half of the row into a second row below. Each row has 8 slots horizontally + the space between them. That is why in the estimations of the widgets height and width the spacing is included. You can see all row versions here:
heigpa
commented
1 month ago
https://www.figma.com/design/kTxowT29eCHwNh5NspDGGu/Pimcore-Components?t=xywRrqMHCiPAQmQS-0
The following layout options are available for the different widgets:
The grid is responsive and organised in rows (based on Markus proposal). The rows have three heights x1, x2 and x3 which allows for longer/taller widgets to be placed in a single row. This also means that if there is a tall widget x3 then next to it in the same row can be placed x1 + x2 or x1 + x1 + x1. See the example:
The widgets follow exact proportions for height and width where: x1 is 147 px x2 is 147x2 + 10 = 304 px x3 is 147x3 + 10x2 = 461 px
The space between the widgets is 10 px. The default and most common case estimated for the Dashboards width is 1250 px.
If the widgets have more content than the space allows, then there are scrollbars inside the widget (both vertical and horizontal).
The layout options for the rows in the modal are meant to be more diverse and possible to organise half of the row into a second row below. Each row has 8 slots horizontally + the space between them. That is why in the estimations of the widgets height and width the spacing is included. You can see all row versions here: