Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: update navigation-container scaling & wrapping (#15372)

This commit is contained in:
Kris 2021-12-20 17:08:03 -05:00 committed by GitHub
parent 491f020771
commit 07436e9d8c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/assets/stylesheets/common/base/_topic-list.scss
View File

@ -1,16 +1,6 @@
// Topic list navigation & controls // Topic list navigation & controls
.list-controls { .list-controls {
.btn {
&:not(:first-child) {
margin-left: 0.5em;
}
}
.notifications-button {
margin-left: 0.5em;
}
a.badge-category { a.badge-category {
padding: 3px 12px; padding: 3px 12px;
font-size: $font-up-1; font-size: $font-up-1;
@ -22,6 +12,7 @@
border: 1px solid var(--primary-medium); border: 1px solid var(--primary-medium);
font-size: $font-0; font-size: $font-0;
transition: none; transition: none;
height: 100%;
&:focus { &:focus {
border-color: var(--tertiary); border-color: var(--tertiary);
} }
@ -41,14 +32,15 @@
} }
.category-breadcrumb { .category-breadcrumb {
display: block; display: flex;
flex-wrap: wrap;
gap: var(--nav-space) 0; // used if the breadcrumb dropdowns wrap
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0 0 var(--nav-space) 0;
> li { > li {
// only target the top-level li, not dropdowns // only target the top-level li, not dropdowns
display: flex; display: flex;
float: left;
margin-right: 0.5em; margin-right: 0.5em;
margin-bottom: 0; margin-bottom: 0;
} }
@ -64,10 +56,18 @@
.navigation-controls { .navigation-controls {
display: flex; display: flex;
flex-wrap: wrap;
align-items: stretch; align-items: stretch;
margin-bottom: var(--nav-space); margin-bottom: var(--nav-space);
gap: var(--nav-space) 0; // used if the buttons wrap
> * { > * {
white-space: nowrap; white-space: nowrap;
&:not(:last-child) {
margin-right: 0.5em;
}
}
.select-kit-header {
height: 100%;
} }
@include breakpoint(mobile-large) { @include breakpoint(mobile-large) {
.edit-category { .edit-category {

4
app/assets/stylesheets/desktop/topic-list.scss
View File

@ -183,13 +183,9 @@ button.dismiss-read {
.category-breadcrumb { .category-breadcrumb {
// only target the top-level li, not dropdowns // only target the top-level li, not dropdowns
> li {
height: 100%;
}
.select-kit { .select-kit {
align-self: stretch; align-self: stretch;
height: 100%; height: 100%;
margin-bottom: var(--nav-space);
} }
} }

23
app/assets/stylesheets/mobile/topic-list.scss
View File

@ -88,19 +88,18 @@
margin-left: 0; margin-left: 0;
} }
ol.category-breadcrumb { .category-breadcrumb {
margin: 0 -3px 5px -3px; width: 100%;
display: flex; gap: 0.5em;
flex-wrap: wrap; li {
flex: 1 1 100%;
li.select-kit {
flex: 1 1 33%; flex: 1 1 33%;
margin: 0 3px 5px 3px; margin: 0;
.select-kit-header .selected-name { details {
max-width: 80vw; width: 100%;
.badge-wrapper { }
max-width: 100%; .name,
} .category-name {
@include ellipsis;
} }
} }
} }