Enhancement of the visualisation page scroll
As Joe,
I want to scroll the whole visualisation page but make the table/chart menu bar and the table row headers sticky,
So that I can navigate through the data table cells to see as much as possible of the table while still keeping (only) the most important page features visible.
General specifications
- When the layout and content of the table/chart imply more cells/space in width than the page width allows, then one horizontal scroll is applied to the page.
- When the layout and content of the table/chart imply more cells/space in height than the page height allows, then one vertical scroll is applied to the page.
- We avoid 2 horizontal or vertical scroll bars at any time.
- The microdata view should be adapted accordingly.
- The normal page scroll bars should be used (TBD with JS team and challenged with the scroll bars proposed in Helmes' wireframes).
Wireframe designs
Wireframes and CSS styles are available in Figma here.
Note: Use a logged session of Figma in order to access the CSS detailed information.
References:
Horizontal scroll journey
-
The page header and filter area progressively move to the left/right and disappears. -
The toolbar menu and the table header with the title and subtitle are sticky on the left (ltr)/right (rtl) side of the browser window. It means they progressively move to the left/right until reaching the left/right border of the browser window (respecting the page margin) and stick there. -
Also the row header column(s) are sticky on the left (ltr)/right (rtl) side of the browser window. It/they move(s) to the left/right until reaching the left/right border of the browser window and stick(s) there, unless there is not enough space for the remaining data columns (e.g. mobile mode), in which case it/they keep(s) scrolling. -
A "fast-forward left" (resp. right) button appears when the user has scrolled to the point where toolbar menu is fixed to the left/right. Using this button, the user can quickly go back to the initial horizontal scroll position. -
The horizontal scroll ends when the most right/left column is fully shown right/left-aligned on the page. -
Once the user is back to the initial horizontal scroll position, then the "fast-forward left" (/right) button disappears.
Vertical scroll journey
-
The page header progressively moves to the top and disappears. -
The filter area is sticky on the top side of the browser window. It means it progressively moves to the top until reaching the top border of the browser window (respecting the page margin) and sticks there, unless there is not enough space for all filters, in which case it continues scrolling until its lower border touches the lower end of the browser window. -
The toolbar menu, the table header with the title and subtitle and the table column headers are sticky on the top side of the browser window. It means they progressively move to the top until reaching the top border of the browser window (respecting the page margin) and stick there, unless there is not enough space for the remaining data rows (e.g. mobile mode), in which case they keep scrolling. -
A "fast-forward top" button appears when the user has scrolled to the point where toolbar menu is fixed to the top. Using this button, the user can quickly go back to the initial vertical scroll position. -
The vertical scroll ends when the page footer is fully shown bottom-aligned on the page. -
Once the user is back to the initial vertical scroll position, then the "fast-forward top" button disappears.
Note: we maintain the condition that only one filter can be opened at any time.