UX: Implement new top-level nav on admin plugin pages #27126
Conversation
This uses a new nav style with the heirarchy:
```
Breadcrumbs
|- Title
|- Description
|- Third-Level Navigation
```
The navigation bar uses the transparent red-underlined
buttons similar to the user activity page.
Over time all admin pages will use this, but this starts
with the new plugin show page.
martin-brennan
changed the title
| <HorizontalOverflowNav | ||
| class="nav-pills action-list main-nav nav plugin-nav" | ||
| class="plugin-nav admin-plugin-config-page__top-nav" |
There was a problem hiding this comment.
Does including the page name in the class name mean we'll need to duplicate the CSS for each page?
There was a problem hiding this comment.
Yeah I think maybe admin-plugin-config-page will change at some point, we might want a more generic way of representing this, but for now I think it's OK since it's only affecting these plugin pages.
| .user-navigation { | ||
| --user-navigation__border-width: 4px; | ||
| border-bottom: 1px solid var(--primary-low); | ||
| @mixin bordered-horizontal-nav($border-width) { |
There was a problem hiding this comment.
I instinctively like this. Seems like its a good step towards more consistent UI. 👍
| --space-1: 0.25rem; | ||
| --space-2: calc(0.25rem * 2); | ||
| --space-3: calc(0.25rem * 3); | ||
| --space-4: calc(0.25rem * 4); | ||
| --space-5: calc(0.25rem * 5); | ||
| --space-6: calc(0.25rem * 6); |
There was a problem hiding this comment.
Nice! Wonder if we should define this globally?
There was a problem hiding this comment.
That would be great! It would allow us to achieve consistent spacing across all our elements. I'll put up a separate PR for that.
@Drenmi I don't think so, themes tend not to touch the admin area (they shouldn't, we don't want them to). @ellaestigoy might have some thoughts on it though and the other comments for CSS that you've left. |
This uses a new nav style with the heirarchy:
The navigation bar uses the transparent red-underlined
buttons similar to the user activity page.
Over time all admin pages will use this, but this starts
with the new plugin show page.