The goal of this story is to implement the new info panel for the new DM Preview based on this epic mockups. This side panel will contain info and versions.
- Use info panel taglib, but adjust to needs of DM Preview
- Take versions out of dropdown to give visibility
- Position info panel all the way to the right.
Info Panel in DM Preview follows the guideline from Lexicon https://lexicondesign.io/docs/satellites/Sidebar/infopanel.html
The panel will contain info, versions
320 px wide
With 16px gutter
Info Panel Opened
Info Panel behavior
Sidebar always enters the screen from the right side of the viewport. It pushes the container in large viewports and slides over the container in small viewports. It usually shows detailed information for an element, without requiring the user to navigate deeper.
When side panel slides over the container, instead of pushing it
On viewport sizes less than 768px in width, the “Info Panel” slides over the container, instead of pushing it.
The sidebar adjusts to the maximum height of the viewport: