mirror of
https://github.com/discourse/discourse.git
synced 2024-11-25 07:51:36 +08:00
1cbc65ba79
Why this change? Before this change, the `GroupNotificationsButton` is rendered in the template of `userPrivateMessages` route based on a conditional that checks if the `isGroup` property is true. However, the `isGroup` property is determined based on the child route that is rendered. However, this leads to "jankiness" in the UI because the `GroupNotificationsButton` will be rendered once the route is entered even if the model for the child route has not been resolved yet. What is the solution? In order to avoid this, we move the rendering of the `GroupNotificationsButton` into the template of the `userPrivateMessages.group` route and rely on the `in-element` helper to render it into the right spot in the template of the `userPrivateMessages` route.
198 lines
4.1 KiB
SCSS
198 lines
4.1 KiB
SCSS
.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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.user-nav-messages-dropdown {
|
|
// manage long group names
|
|
max-width: 20vw;
|
|
min-width: 7em;
|
|
.select-kit-selected-name,
|
|
.name {
|
|
@include ellipsis;
|
|
}
|
|
.name {
|
|
min-width: 0;
|
|
}
|
|
}
|
|
|
|
.category-breadcrumb {
|
|
width: auto;
|
|
padding-top: var(--navigation-secondary-padding-top);
|
|
@include breakpoint(extra-large) {
|
|
font-size: var(--font-down-1);
|
|
}
|
|
> li {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.navigation-controls {
|
|
padding-top: var(--navigation-secondary-padding-top);
|
|
flex-wrap: nowrap;
|
|
@include breakpoint(extra-large) {
|
|
font-size: var(--font-down-1);
|
|
}
|
|
|
|
span {
|
|
display: inline-flex;
|
|
}
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 0;
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.solo-preference {
|
|
grid-column-start: 1;
|
|
grid-column-end: -1;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|