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

UX: Very long tag names should truncate

This commit is contained in:
Kris 2018-01-22 17:14:40 -05:00
parent 2437b0d531
commit 99cabd071a
3 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/assets/stylesheets/common/base/tagging.scss
View File

@ -17,6 +17,7 @@
width: 300px; width: 300px;
margin-bottom: 1em; margin-bottom: 1em;
float: left; float: left;
vertical-align: middle;
.discourse-tag { .discourse-tag {
font-size: $font-0; font-size: $font-0;
@ -24,6 +25,8 @@
.tag-count { .tag-count {
font-size: $font-down-1; font-size: $font-down-1;
vertical-align: middle;
line-height: $line-height-small;
} }
} }
@ -34,7 +37,6 @@
.bullet + .topic-header-extra { .bullet + .topic-header-extra {
display: block; display: block;
line-height: $line-height-medium;
} }
.box + .topic-header-extra { .box + .topic-header-extra {
@ -77,16 +79,26 @@ $tag-color: $primary-medium;
.discourse-tag-count { .discourse-tag-count {
font-size: $font-down-1; font-size: $font-down-1;
color: $tag-color; color: $tag-color;
line-height: $line-height-small;
vertical-align: middle;
} }
.select2-result-label .discourse-tag { .select2-result-label .discourse-tag {
margin-right: 0; margin-right: 0;
} }
.discourse-tag {
max-width: 14em;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
.discourse-tag { .discourse-tag {
padding: 0; padding: 4px;
margin: 0 5px 0 0; margin: 0;
color: $tag-color; color: $tag-color;
&:visited, &:hover { &:visited, &:hover {
@ -121,7 +133,6 @@ $tag-color: $primary-medium;
} }
.d-header .topic-header-extra { .d-header .topic-header-extra {
display: inline-block;
.discourse-tags { .discourse-tags {
display: inline-block; display: inline-block;
font-size: $font-down-1; font-size: $font-down-1;
@ -130,7 +141,6 @@ $tag-color: $primary-medium;
} }
.select2-container-multi .select2-choices .select2-search-choice.discourse-tag-select2 { .select2-container-multi .select2-choices .select2-search-choice.discourse-tag-select2 {
padding-top: 5px;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
border: 0; border: 0;
@ -194,6 +204,7 @@ header .discourse-tag {color: $tag-color }
margin: 5px 0; margin: 5px 0;
ul.select2-choices { ul.select2-choices {
max-height: 30px; max-height: 30px;
padding-left: 10px;
overflow-y: auto; overflow-y: auto;
} }
} }

2
app/assets/stylesheets/common/components/badges.scss
View File

@ -65,7 +65,7 @@
&.bullet { //bullet category style &.bullet { //bullet category style
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
margin-right: 5px; margin-right: 12px;
.extra-info-wrapper & { .extra-info-wrapper & {
margin-top: .25em; margin-top: .25em;

9
app/assets/stylesheets/vendor/select2.scss vendored
View File

@ -441,7 +441,7 @@ html[dir="rtl"] .select2-container-multi .select2-choices li
.select2-container-multi .select2-choices .select2-search-field input { .select2-container-multi .select2-choices .select2-search-field input {
margin: 1px 0; margin: 1px 0;
padding-left: 0;
font-family: sans-serif; font-family: sans-serif;
font-size: 1em; font-size: 1em;
color: #666; color: #666;
@ -461,11 +461,10 @@ html[dir="rtl"] .select2-container-multi .select2-choices li
} }
.select2-container-multi .select2-choices .select2-search-choice { .select2-container-multi .select2-choices .select2-search-choice {
padding: 3px 5px 3px 18px; padding: 0 0 0 12px;
margin: 3px 0 3px 5px; margin: 0;
position: relative; position: relative;
line-height: 13px;
color: #333; color: #333;
cursor: default; cursor: default;
border: 1px solid #aaaaaa; border: 1px solid #aaaaaa;
@ -503,7 +502,7 @@ html[dir="rtl"] .select2-container-multi .select2-choices .select2-search-choice
height: 13px; height: 13px;
position: absolute; position: absolute;
right: 3px; right: 3px;
top: 4px; top: 8px;
font-size: 1px; font-size: 1px;
outline: none; outline: none;