mirror of
https://github.com/discourse/discourse.git
synced 2025-02-25 18:55:32 -06:00
UX: Implement new top-level nav on admin plugin pages (#27126)
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.
---------
Co-authored-by: Ella <ella.estigoy@gmail.com>
This commit is contained in:
Martin Brennan
GitHub
parent
47523fa57c
commit
2ed8f96e67
@ -26,10 +26,6 @@ export default class AdminPluginConfigPage extends Component {
|
||||
|
||||
<template>
|
||||
<div class="admin-plugin-config-page">
|
||||
{{#if this.adminPluginNavManager.isTopMode}}
|
||||
<AdminPluginConfigTopNav />
|
||||
{{/if}}
|
||||
|
||||
<DBreadcrumbsContainer />
|
||||
|
||||
<DBreadcrumbsItem as |linkClass|>
|
||||
@ -56,6 +52,10 @@ export default class AdminPluginConfigPage extends Component {
|
||||
|
||||
<AdminPluginConfigMetadata @plugin={{@plugin}} />
|
||||
|
||||
{{#if this.adminPluginNavManager.isTopMode}}
|
||||
<AdminPluginConfigTopNav />
|
||||
{{/if}}
|
||||
|
||||
<div class="admin-plugin-config-page__content">
|
||||
<div class={{this.mainAreaClasses}}>
|
||||
<AdminPluginConfigArea>
|
||||
|
||||
@ -16,9 +16,9 @@ export default class AdminPluginConfigTopNav extends Component {
|
||||
}
|
||||
|
||||
<template>
|
||||
<div class="admin-controls">
|
||||
<div class="admin-nav-submenu">
|
||||
<HorizontalOverflowNav
|
||||
class="nav-pills action-list main-nav nav plugin-nav"
|
||||
class="plugin-nav admin-plugin-config-page__top-nav"
|
||||
>
|
||||
{{#each this.adminPluginNavManager.currentConfigNav.links as |navLink|}}
|
||||
<NavItem
|
||||
|
||||
@ -74,6 +74,13 @@ $mobile-breakpoint: 700px;
|
||||
}
|
||||
|
||||
.admin-contents {
|
||||
--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);
|
||||
|
||||
position: relative;
|
||||
.nav-stacked {
|
||||
@media screen and (max-width: 700px) {
|
||||
|
||||
@ -13,27 +13,33 @@
|
||||
grid-template-columns: 0.25fr repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
.admin-plugins-list__row {
|
||||
grid-template-columns: 0.25fr repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.admin-plugins-list {
|
||||
&__name-details {
|
||||
grid-column-start: 2;
|
||||
grid-column-end: -1;
|
||||
}
|
||||
|
||||
&__settings {
|
||||
grid-row: 2;
|
||||
grid-column-start: 4;
|
||||
text-align: right;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&__version {
|
||||
grid-row: 2;
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
&__enabled {
|
||||
grid-row: 2;
|
||||
grid-column-start: 2;
|
||||
@ -97,6 +103,64 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__metadata {
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.admin-nav-submenu {
|
||||
background: transparent;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
|
||||
.horizontal-overflow-nav {
|
||||
background: transparent;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-plugin-config-page__top-nav {
|
||||
--active-border-width: var(--space-1);
|
||||
|
||||
width: auto !important;
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
font-size: var(--font-down-0);
|
||||
padding: var(--space-2) var(--space-3)
|
||||
calc(0.5rem + var(--active-border-width));
|
||||
|
||||
&:hover {
|
||||
color: var(--quaternary);
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--quaternary);
|
||||
background-color: transparent;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-width: 0;
|
||||
border-bottom: var(--active-border-width) solid var(--quaternary);
|
||||
padding-bottom: var(--space-2);
|
||||
}
|
||||
}
|
||||
|
||||
.has-sidebar-page & {
|
||||
@include breakpoint(large) {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admin-plugins .admin-container {
|
||||
|
||||
@ -1,79 +1,85 @@
|
||||
@mixin bordered-horizontal-nav($border-width) {
|
||||
li {
|
||||
flex: 1 1 auto;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
|
||||
a {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border-bottom: var(--user-navigation__border-width) solid transparent;
|
||||
padding: calc(0.75em + var(--user-navigation__border-width)) 0.5em 0.75em;
|
||||
transition: color 0.25s;
|
||||
|
||||
@include breakpoint(extra-large) {
|
||||
font-size: var(--font-0);
|
||||
}
|
||||
|
||||
span {
|
||||
line-height: normal;
|
||||
@include ellipsis;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: transparent;
|
||||
color: var(--quaternary);
|
||||
border-bottom: var(--user-navigation__border-width) solid
|
||||
var(--quaternary-low);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--quaternary);
|
||||
background: transparent;
|
||||
border-bottom: var(--user-navigation__border-width) solid
|
||||
var(--quaternary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bordered-nav-pills {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
.d-icon {
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
|
||||
&.main-nav {
|
||||
@include breakpoint(medium) {
|
||||
li {
|
||||
.d-icon {
|
||||
font-size: var(--font-up-1);
|
||||
margin: 0;
|
||||
}
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-sidebar-page & {
|
||||
@include breakpoint(large) {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-user-wrapper {
|
||||
.user-navigation {
|
||||
--user-navigation__border-width: 4px;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
|
||||
.nav-pills {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
.d-icon {
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
|
||||
&.main-nav {
|
||||
@include breakpoint(medium) {
|
||||
li {
|
||||
.d-icon {
|
||||
font-size: var(--font-up-1);
|
||||
margin: 0;
|
||||
}
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-sidebar-page & {
|
||||
@include breakpoint(large) {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
flex: 1 1 auto;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
|
||||
a {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border-bottom: var(--user-navigation__border-width) solid transparent;
|
||||
padding: calc(0.75em + var(--user-navigation__border-width)) 0.5em
|
||||
0.75em;
|
||||
transition: color 0.25s;
|
||||
|
||||
@include breakpoint(extra-large) {
|
||||
font-size: var(--font-0);
|
||||
}
|
||||
|
||||
span {
|
||||
line-height: normal;
|
||||
@include ellipsis;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: transparent;
|
||||
color: var(--quaternary);
|
||||
border-bottom: var(--user-navigation__border-width) solid
|
||||
var(--quaternary-low);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--quaternary);
|
||||
background: transparent;
|
||||
border-bottom: var(--user-navigation__border-width) solid
|
||||
var(--quaternary);
|
||||
}
|
||||
}
|
||||
}
|
||||
@include bordered-nav-pills;
|
||||
@include bordered-horizontal-nav(var(--user-navigation__border-width));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.d-breadcrumbs {
|
||||
display: flex;
|
||||
margin: 1em 0 0.5em 0;
|
||||
margin: var(--space-2) 0 var(--space-4) 0;
|
||||
|
||||
&__item {
|
||||
list-style-type: none;
|
||||
@ -13,7 +13,9 @@
|
||||
|
||||
li:not(:last-child) a::after {
|
||||
display: inline;
|
||||
padding: 0 0.25em;
|
||||
padding: 0 var(--space-1);
|
||||
margin-right: var(--space-1);
|
||||
font-size: var(--font-down-1);
|
||||
content: ">";
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user