Content
Feature SDS-197: Document and implement proper mobile behaviour for Sub Header component (OP Primer)
View differences
Updated by Parimal Satyal over 1 year ago
**Context**
We're increasingly using the [Primer Sub Header](https://qa.openproject-edge.com/lookbook/pages/patterns/sub_header) component in different pages. This provides the user with a toolbar with additional actions related to the objets contained below. Most pages have a very limited number of elements on the sub header; they work just as well in mobile devices. In others, some Meetings index pages, there are too many and it all appears squished.
This feature seeks to define mobile behaviour at a component level in order to avoid case-by-base overrides as much as possible.
**Acceptance criteria**
The Sub Header adapts to mobile screens:
* The actions on the left side always turn into icon buttons without labels
* If there are badges (notably on the 'Filter' tab), these will be displayed
* Currently, three types of actions have been identified:
* Search (on mobile, the currently implementation takes the full length when clicked)
* Filter
* Segmented controls
* If there were no actions on the left side of the Sub Header on desktop, this space will remain empty on mobile too
* The right-side action (usually a primary add "+ {Object} button) will remain in its full form. It will not go into icon-only mode.
* All actions that do not have a visible label need a title or ARIA label for accessibilty
**Future Considerations**
* Once we implement quick filters, this will challenge the current design since it'll add a lot more elements:
* ###57964
**Tasks**
* [ ] Mobile behaviour for the Sub header is defined and agreed upon
* [ ] The LookBook documentation is updated with code examples
* [ ] The mobile behaviour is implemented as documented in all relevant pages (see below)
**Where it's relevant**
* Project list
* Notification center
* Meetings mobile subheader
* Members list
* Administration settings:
* Users and Permissions → Users
* Authentication → OAuth Applications
* Authentication → SAML providers
* Authentication → OpenID providers
* Files → External files storages
* ...
* Notification center
**Why we need this**
To avoid crowded/squished sub-headers like this in mobile:
<img class="image_resized op-uc-image op-uc-image_inline" style="width:398px;" src="https://community.openproject.org/api/v3/attachments/264138/content">
And go towards something like this:
<img class="image_resized op-uc-image op-uc-image_inline" style="width:467px;" src="/api/v3/attachments/310839/content">
And from this:
<img class="image_resized op-uc-image op-uc-image_inline" style="width:368px;" src="/api/v3/attachments/314831/content">
To this:
<img class="image_resized op-uc-image op-uc-image_inline" style="width:375px;" src="/api/v3/attachments/314833/content">
We're increasingly using the [Primer Sub Header](https://qa.openproject-edge.com/lookbook/pages/patterns/sub_header) component in different pages. This provides the user with a toolbar with additional actions related to the objets contained below. Most pages have a very limited number of elements on the sub header; they work just as well in mobile devices. In others, some Meetings index pages, there are too many and it all appears squished.
This feature seeks to define mobile behaviour at a component level in order to avoid case-by-base overrides as much as possible.
**Acceptance criteria**
The Sub Header adapts to mobile screens:
* The actions on the left side always turn into icon buttons without labels
* If there are badges (notably on the 'Filter' tab), these will be displayed
* Search (on mobile, the currently implementation takes the full length when clicked)
* Filter
* Segmented controls
* If there were no actions on the left side of the Sub Header on desktop, this space will remain empty on mobile too
* All actions that do not have a visible label need a title or ARIA label for accessibilty
**Future Considerations**
* Once we implement quick filters, this will challenge the current design since it'll add a lot more elements:
* ###57964
**Tasks**
* [ ] Mobile behaviour for the Sub header is defined and agreed upon
* [ ] The LookBook documentation is updated with code examples
* [ ] The mobile behaviour is implemented as documented in all relevant pages (see below)
**Where it's relevant**
* Project list
* Notification center
* Meetings mobile subheader
* Members list
* Administration settings:
* Users and Permissions → Users
* Authentication → OAuth Applications
* Authentication → SAML providers
* Authentication → OpenID providers
* Files → External files storages
* ...
* Notification center
**Why we need this**
To avoid crowded/squished sub-headers like this in mobile:
<img class="image_resized op-uc-image op-uc-image_inline" style="width:398px;" src="https://community.openproject.org/api/v3/attachments/264138/content">
And go towards something like this:
<img class="image_resized op-uc-image op-uc-image_inline" style="width:467px;" src="/api/v3/attachments/310839/content">
And from this:
<img class="image_resized op-uc-image op-uc-image_inline" style="width:368px;" src="/api/v3/attachments/314831/content">
To this:
<img class="image_resized op-uc-image op-uc-image_inline" style="width:375px;" src="/api/v3/attachments/314833/content">