mirror of
https://github.com/discourse/discourse.git
synced 2024-11-25 07:51:36 +08:00
a6c787345c
Trying out changes to reduce the number of nav items in the experimental horizontal user nav. These changes should only appear with the redesigned_user_page_nav_enabled feature flag. 1. Created a new "Tracking" route. This combines some tracking-related settings from Notifications and Category and Tag tracking (which were separate tabs previously). Don't love the layout yet, but it's something that we can work on. 2. Moved some user-related settings out of Notifications and to the Users tab. These seem more user-related to me, and it's nice that we can associate enabling messages with the setting to limit who can send messages. 3. Moved the App tab (lists app permissions) to be within the Security tab. It's very similar to Recently Used Devices.
210 lines
4.4 KiB
SCSS
210 lines
4.4 KiB
SCSS
.new-user-wrapper {
|
|
margin-top: -15px; // temp, can remove margin from sibling element after nav finalized
|
|
.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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-navigation-primary {
|
|
[class*="horizontal-overflow-nav__scroll"] {
|
|
font-size: var(--font-up-1);
|
|
.d-icon {
|
|
margin-top: 0.15em; // minor alignment
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-navigation-secondary {
|
|
--user-navigation__border-width: 2px;
|
|
--navigation-secondary-padding-top: 0.5em;
|
|
position: relative;
|
|
display: flex;
|
|
min-width: 0;
|
|
margin: 0;
|
|
gap: 0 0.5em;
|
|
border-bottom: 1px solid var(--primary-low);
|
|
|
|
.select-kit .select-kit-header {
|
|
height: 100%;
|
|
padding: 0.5em 1em;
|
|
}
|
|
|
|
.category-breadcrumb {
|
|
padding-top: var(--navigation-secondary-padding-top);
|
|
@include breakpoint(large) {
|
|
font-size: var(--font-down-1);
|
|
}
|
|
> li {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.navigation-controls {
|
|
padding-top: var(--navigation-secondary-padding-top);
|
|
flex-wrap: nowrap;
|
|
@include breakpoint(large) {
|
|
font-size: var(--font-down-1);
|
|
}
|
|
}
|
|
|
|
.nav-pills {
|
|
flex: 1 1 auto;
|
|
font-size: var(--font-down-1);
|
|
justify-content: flex-start;
|
|
padding-top: var(--navigation-secondary-padding-top);
|
|
|
|
li {
|
|
flex: 1 0 auto;
|
|
|
|
a {
|
|
padding: 0.5em 0.5em
|
|
calc(0.5em + var(--user-navigation__border-width));
|
|
|
|
span {
|
|
text-overflow: unset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
[class*="horizontal-overflow-nav__scroll"] {
|
|
padding-top: var(--navigation-secondary-padding-top);
|
|
}
|
|
}
|
|
|
|
.user-nav-dropdown-button {
|
|
background: transparent;
|
|
}
|
|
|
|
.user-nav-dropdown-submenu {
|
|
background: var(--secondary);
|
|
list-style-type: none;
|
|
margin: 0;
|
|
|
|
li a {
|
|
padding: 0.5em 1em;
|
|
color: var(--primary);
|
|
|
|
.discourse-no-touch & {
|
|
&:hover {
|
|
background: var(--highlight-medium);
|
|
color: currentColor;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
background: var(--tertiary-low);
|
|
color: currentColor;
|
|
}
|
|
|
|
&:first-of-type {
|
|
padding-top: 0.5em;
|
|
}
|
|
&:last-of-type {
|
|
padding-bottom: 0.5em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 0;
|
|
margin: 1em 0;
|
|
}
|
|
}
|
|
|
|
.user-preferences-tracking-page {
|
|
.user-preferences .form-vertical {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.user-preferences_tracking-topics-wrapper {
|
|
margin-bottom: 3em;
|
|
.control-label {
|
|
margin-bottom: 1em;
|
|
}
|
|
}
|
|
|
|
.user-preferences_tracking-categories-tags-wrapper {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
|
|
gap: 2em;
|
|
.control-group {
|
|
width: 100%;
|
|
min-width: 16em;
|
|
}
|
|
}
|