discourse/app/assets/stylesheets/mobile/new-user.scss
Kris f7f0ca801b
UX: improve nav for user messages on small screens (#19362)
This prevents long inbox names from causing issues in the dropdown on /my/messages and tries a new mobile layout that makes better use of the available space:
2022-12-08 08:51:26 +08:00

126 lines
2.1 KiB
SCSS

.new-user-wrapper {
.user-navigation {
width: 100%;
.nav-pills {
overflow-x: auto;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
}
// For backwards compatibility with legacy design
.user-secondary-navigation {
margin-top: 1.5em;
}
.user-navigation-secondary {
font-size: var(--font-up-1);
.nav-pills {
flex-wrap: nowrap;
li {
flex: 1 0 auto;
}
}
}
.user-messages-page & {
.user-navigation-secondary {
display: grid;
grid-template-areas:
"dropdown controls"
"nav-pills nav-pills";
grid-template-columns: 1fr auto;
font-size: var(--font-up-1);
gap: 0.5em;
.category-breadcrumb {
grid-area: dropdown;
}
.horizontal-overflow-nav {
grid-area: nav-pills;
}
.navigation-controls {
grid-area: controls;
font-size: var(--font-down-2);
.btn {
padding: 0.5em 1em;
}
.d-button-label,
.select-kit-header-wrapper .name {
display: none;
}
.d-icon {
margin: 0;
}
}
.user-nav-messages-dropdown {
max-width: unset;
}
.combo-box-header {
font-size: var(--font-0);
}
}
tbody {
border-top-width: 1px;
}
.user-content {
margin: 0;
table {
margin-top: -1px; // align under nav border
}
}
}
.user-nav-dropdown-list-item {
flex-direction: column;
}
.user-nav-dropdown-chevron {
margin-left: auto;
}
.user-nav-dropdown-button {
width: 100%;
}
.user-nav-dropdown-submenu {
box-sizing: border-box;
position: relative;
top: 0;
box-shadow: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
padding: 0.5em 0 1em 1.65em;
li a {
box-sizing: border-box;
padding: 0.75em 1em;
width: 100%;
@include ellipsis;
}
}
#navigation-bar {
flex-wrap: nowrap;
}
}
.new-user-content-wrapper {
.user-content {
margin-top: 2em;
}
}