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

UX: Truncate long category names in sidebar (#17203)

This commit is contained in:
Alan Guo Xiang Tan 2022-06-24 10:28:35 +08:00 committed by GitHub
parent 4199ada1ce
commit 7b2ad1b931
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/discourse/app/templates/components/sidebar/section-link.hbs
View File

@ -7,7 +7,9 @@
@current-when={{@currentWhen}}
@title={{@title}}
>
{{@content}}
<span class="sidebar-section-link-content-text">
{{@content}}
</span>
{{#if @badgeText}}
<span class="sidebar-section-link-content-badge">

24
app/assets/stylesheets/common/base/sidebar.scss
View File

@ -84,13 +84,11 @@
.sidebar-section-link-wrapper {
margin-left: 1.5em;
display: flex;
align-items: center;
}
.sidebar-section-link {
flex: 1 1 0;
display: flex;
align-items: center;
padding: 0.25em 0.5em;
color: var(--primary-high);
font-size: var(--font-down-1);
@ -104,8 +102,24 @@
font-weight: bold;
}
.badge-wrapper {
font-size: 100%;
.sidebar-section-link-content-badge {
width: 30%;
text-align: right;
}
.sidebar-section-link-content-text {
width: 70%;
.badge-wrapper {
font-size: 100%;
width: 100%;
.category-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}