mirror of
https://github.com/opf/openproject.git
synced 2026-06-14 03:30:14 +00:00
Parimal Satyal
62 lines
2.9 KiB
Plaintext
62 lines
2.9 KiB
Plaintext
The <strong>SidePanel</strong> is right-side pane that is used to show information relevant to the current page. This information normally concerns the contents of the entire page and can generally directly be modified or adjusted via the SidePanel.
|
|
|
|
A good example is a meeting occurrence; the SidePanel is used to show key meeting details (time, location, duration...), status, a list of participants and attachments.
|
|
|
|
<%= embed Patterns::LayoutPreview, :default %>
|
|
|
|
## Anatomy
|
|
|
|
The SidePanel consists of a series of sections (or just one section). Each section has a fixed format and contains:
|
|
|
|
- A section header
|
|
- with counter (optional)
|
|
- An action button or more icon (optional)
|
|
- Content slot
|
|
- An action link (optional)
|
|
- A divider at the end
|
|
|
|
These sections are stacked vertically.
|
|
|
|
The content slot can take a number of different types of content and is relatively free. However, the content has to make sense in visual and semantic hierarchy. It's also best to make sure all objects are aligned to the left edge of the panel.
|
|
|
|
The content of the SidePanel should always be secondary to the main content area.
|
|
|
|
## Best practices
|
|
|
|
**Do**
|
|
|
|
- Do use the SidePanel for contextual information on the page
|
|
- Ensure that elements on a SidePanel respect the hierarchy of the page and elements in other SidePanels (the content in each SidePanel should roughly be at the same hierarchical and visual level)
|
|
- Use `color-fg-subtle` if the text is meant to be helpful guideline text or a caption; use `color-fg-default` for key information.
|
|
|
|
**Don't**
|
|
|
|
- Do not use it as a way to create columns
|
|
- Do not make a certain section too long, compared to others. If necessary, use a 'Show more' link to expand it (eg. Participant list in a meeting occurence )
|
|
|
|
## Used in
|
|
|
|
Some pages where the SidePanel is used:
|
|
|
|
- Meeting occurrence (displays meeting details, meeting status, participants and attachments)
|
|
- Project overview (displays project attributes)
|
|
- Project list
|
|
- Some admin index pages (eg. SAML or OpenID provider details page; file storage details page)
|
|
|
|
## Mobile considerations
|
|
|
|
By default, SidePanel move to the bottom of the main content area on mobile. However, there are other considerations to keep in mind:
|
|
|
|
- Some sections have to be moved to the top if they contain critical information (eg. the meeting details for a meeting occurence go to the top). This can be done via tha surrounding Layout component
|
|
- Sections can be simplified (certain actions hidden) or indeed completely left out on mobile if they are judged to be not critical on smaller screens
|
|
|
|
## Technical notes
|
|
|
|
To move the SidePanel the right side from its default left position, you have to wrap it into the `with_sidebar` slot of the `Primer::Alpha::Layout` component.
|
|
|
|
<%= embed Patterns::LayoutPreview, :default, panels: %i[source] %>
|
|
|
|
## Examples
|
|
|
|
For detailed examples have a look at the other [preview examples](/lookbook/inspect/primer/open_project/side_panel/default) of the component.
|