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

View File

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

View File

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

View File

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