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

Adding a text-overflow: ellipsis; mixin and related cleanup

This commit is contained in:
Kris 2019-11-06 14:00:29 -05:00
parent 1aa96a5da4
commit b066a4128d
31 changed files with 61 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -313,9 +313,7 @@ $mobile-breakpoint: 700px;
} }
td.x-value { td.x-value {
max-width: 0; max-width: 0;
overflow: hidden; @include ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
} }
} }
.bar-container { .bar-container {
@ -861,9 +859,7 @@ table#user-badges {
.value-list { .value-list {
.value { .value {
padding: 0.125em 0; padding: 0.125em 0;
white-space: nowrap; @include ellipsis;
overflow: hidden;
text-overflow: ellipsis;
display: flex; display: flex;
&:last-child { &:last-child {

4
app/assets/stylesheets/common/admin/admin_report_counters.scss
View File

@ -37,9 +37,7 @@
&.title { &.title {
text-align: left; text-align: left;
text-overflow: ellipsis; @include ellipsis;
overflow: hidden;
white-space: nowrap;
.d-icon { .d-icon {
color: $primary-low-mid; color: $primary-low-mid;

15
app/assets/stylesheets/common/admin/admin_report_table.scss
View File

@ -2,9 +2,7 @@
&.two-columns { &.two-columns {
.table .admin-report-table-cell:first-child, .table .admin-report-table-cell:first-child,
.table .admin-report-table-header:first-child { .table .admin-report-table-header:first-child {
text-overflow: ellipsis; @include ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: left; text-align: left;
width: 80%; width: 80%;
} }
@ -32,8 +30,7 @@
outline: none; outline: none;
background: none; background: none;
padding: 3px 8px; padding: 3px 8px;
overflow: hidden; @include ellipsis;
text-overflow: ellipsis;
} }
&.is-current-sort { &.is-current-sort {
@ -106,9 +103,7 @@
} }
.admin-report-table-cell.term { .admin-report-table-cell.term {
text-overflow: ellipsis; @include ellipsis;
overflow: hidden;
white-space: nowrap;
} }
} }
@ -132,9 +127,7 @@
.admin-report-table-cell.post, .admin-report-table-cell.post,
.admin-report-table-cell.edit_reason { .admin-report-table-cell.edit_reason {
text-overflow: ellipsis; @include ellipsis;
overflow: hidden;
white-space: nowrap;
} }
} }

6
app/assets/stylesheets/common/admin/customize.scss
View File

@ -589,7 +589,11 @@
.category, .category,
.external_url, .external_url,
.post { .post {
text-overflow: ellipsis; @include ellipsis;
max-width: 100px;
@include breakpoint(tablet) {
max-width: 100%;
}
} }
&.grid tr.admin-list-item { &.grid tr.admin-list-item {

8
app/assets/stylesheets/common/admin/emails.scss
View File

@ -15,16 +15,12 @@
} }
.username div { .username div {
max-width: 180px; max-width: 180px;
white-space: nowrap; @include ellipsis;
overflow: hidden;
text-overflow: ellipsis;
} }
.addresses p { .addresses p {
margin: 2px 0; margin: 2px 0;
max-width: 200px; max-width: 200px;
white-space: nowrap; @include ellipsis;
overflow: hidden;
text-overflow: ellipsis;
} }
} }

4
app/assets/stylesheets/common/admin/users.scss
View File

@ -102,10 +102,8 @@
.admin-users-list { .admin-users-list {
td.username { td.username {
white-space: nowrap; @include ellipsis;
overflow-wrap: break-word; overflow-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
} }
@media screen and (max-width: 970px) and (min-width: 768px) { @media screen and (max-width: 970px) and (min-width: 768px) {
td.username { td.username {

15
app/assets/stylesheets/common/base/category-list.scss
View File

@ -7,8 +7,7 @@
.category-name { .category-name {
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
overflow: hidden; @include ellipsis;
text-overflow: ellipsis;
vertical-align: text-top; vertical-align: text-top;
line-height: $line-height-medium; line-height: $line-height-medium;
} }
@ -109,8 +108,6 @@
color: dark-light-choose($primary-medium, $secondary-high); color: dark-light-choose($primary-medium, $secondary-high);
.overflow { .overflow {
max-height: 6em; max-height: 6em;
overflow: hidden;
text-overflow: ellipsis;
} }
} }
@ -122,7 +119,6 @@
text-align: center; text-align: center;
color: $primary; color: $primary;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
} }
.subcategories { .subcategories {
@ -131,9 +127,7 @@
.subcategory { .subcategory {
display: flex; display: flex;
align-items: center; align-items: center;
overflow: hidden; @include ellipsis;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 1em; margin-right: 1em;
margin-bottom: 0.6em; margin-bottom: 0.6em;
.subcategory-image-placeholder { .subcategory-image-placeholder {
@ -142,8 +136,7 @@
} }
.subcategory-link { .subcategory-link {
min-width: 0; min-width: 0;
overflow: hidden; @include ellipsis;
text-overflow: ellipsis;
} }
.logo img { .logo img {
display: inline-block; display: inline-block;
@ -166,7 +159,6 @@
font-size: $font-up-2; font-size: $font-up-2;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
} }
.category-box-heading { .category-box-heading {
@ -192,7 +184,6 @@
.overflow { .overflow {
max-height: 3em; max-height: 3em;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
} }
.d-icon { .d-icon {
margin-right: 0.15em; margin-right: 0.15em;

12
app/assets/stylesheets/common/base/compose.scss
View File

@ -122,9 +122,7 @@
} }
.action-title { .action-title {
white-space: nowrap; @include ellipsis;
overflow: hidden;
text-overflow: ellipsis;
} }
.topic-link, .topic-link,
@ -136,9 +134,7 @@
.username { .username {
margin-right: 5px; margin-right: 5px;
max-width: 100px; max-width: 100px;
overflow: hidden; @include ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
display: none; display: none;
} }
@ -358,9 +354,7 @@
a { a {
padding: 5px; padding: 5px;
display: block; display: block;
white-space: nowrap; @include ellipsis;
overflow: hidden;
text-overflow: ellipsis;
span.username { span.username {
color: $primary; color: $primary;

4
app/assets/stylesheets/common/base/emoji.scss
View File

@ -106,10 +106,8 @@ sup img.emoji {
} }
.emoji-picker .info { .emoji-picker .info {
text-overflow: ellipsis; @include ellipsis;
padding-left: 8px; padding-left: 8px;
white-space: nowrap;
overflow: hidden;
font-weight: 700; font-weight: 700;
max-width: 125px; max-width: 125px;
} }

20
app/assets/stylesheets/common/base/header.scss
View File

@ -245,9 +245,7 @@
.topic-link { .topic-link {
color: $header_primary; color: $header_primary;
display: block; display: block;
white-space: nowrap; @include ellipsis;
overflow: hidden;
text-overflow: ellipsis;
} }
.topic-statuses { .topic-statuses {
.d-icon { .d-icon {
@ -275,9 +273,7 @@
flex: 0 1 auto; flex: 0 1 auto;
min-width: 1px; min-width: 1px;
.badge-wrapper { .badge-wrapper {
overflow: hidden; @include ellipsis;
white-space: nowrap;
text-overflow: ellipsis;
} }
} }
.badge-wrapper { .badge-wrapper {
@ -305,9 +301,7 @@
flex: 1 0 0%; // unit on flex-basis is required for IE11 flex: 1 0 0%; // unit on flex-basis is required for IE11
.discourse-tags { .discourse-tags {
color: $header_primary-high; color: $header_primary-high;
overflow: hidden; @include ellipsis;
white-space: nowrap;
text-overflow: ellipsis;
.discourse-tag { .discourse-tag {
display: inline; // tags need to stay inline in order for them to truncate display: inline; // tags need to stay inline in order for them to truncate
} }
@ -357,9 +351,7 @@ $mobile-avatar-height: 1.532em;
padding: 0 5px; padding: 0 5px;
border: 1px solid $primary-low; border: 1px solid $primary-low;
border-radius: 0.25em; border-radius: 0.25em;
overflow: hidden; @include ellipsis;
white-space: nowrap;
text-overflow: ellipsis;
.icon { .icon {
display: flex; display: flex;
@ -376,9 +368,7 @@ $mobile-avatar-height: 1.532em;
} }
span { span {
overflow: hidden; @include ellipsis;
white-space: nowrap;
text-overflow: ellipsis;
} }
} }

4
app/assets/stylesheets/common/base/lightbox.scss
View File

@ -47,9 +47,7 @@ $meta-element-margin: 6px;
.filename { .filename {
margin: $meta-element-margin; margin: $meta-element-margin;
overflow: hidden; @include ellipsis;
white-space: nowrap;
text-overflow: ellipsis;
} }
.d-icon { .d-icon {

8
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -115,8 +115,6 @@
line-height: $line-height-large; line-height: $line-height-large;
} }
.badge-wrapper { .badge-wrapper {
overflow: hidden;
text-overflow: ellipsis;
&.bar, &.bar,
&.bullet { &.bullet {
color: $primary; color: $primary;
@ -143,8 +141,6 @@
span.badge-category { span.badge-category {
max-width: 100px; max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
} }
div.discourse-tags { div.discourse-tags {
@ -341,9 +337,7 @@ div.menu-links-header {
span.d-label { span.d-label {
display: block; display: block;
max-width: 130px; max-width: 130px;
overflow: hidden; @include ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
} }
@include breakpoint(mobile-medium) { @include breakpoint(mobile-medium) {

9
app/assets/stylesheets/common/base/onebox.scss
View File

@ -562,21 +562,18 @@ aside.onebox.twitterstatus .onebox-body {
.outer-box { .outer-box {
position: absolute; position: absolute;
z-index: z("base"); z-index: z("base");
overflow: hidden;
font-size: $font-down-1; font-size: $font-down-1;
color: #fff; color: #fff;
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
text-overflow: ellipsis; @include ellipsis;
max-width: 100%; max-width: 690px;
padding: 5px 0; padding: 5px 0;
.inner-box { .inner-box {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; @include ellipsis;
word-wrap: normal;
white-space: nowrap;
.album-title { .album-title {
width: 100%; width: 100%;

7
app/assets/stylesheets/common/base/reviewables.scss
View File

@ -284,7 +284,6 @@
.reviewed-by { .reviewed-by {
display: flex; display: flex;
align-items: center; align-items: center;
white-space: nowrap;
} }
.user-flag-percentage { .user-flag-percentage {
@ -309,8 +308,7 @@
&.user a, &.user a,
&.reviewed-by a { &.reviewed-by a {
max-width: 150px; max-width: 150px;
overflow: hidden; @include ellipsis;
text-overflow: ellipsis;
} }
} }
@ -327,8 +325,7 @@
padding: 0.5em 1em 0.5em 0; padding: 0.5em 1em 0.5em 0;
} }
@include breakpoint("mobile-large") { @include breakpoint("mobile-large") {
overflow: hidden; @include ellipsis;
text-overflow: ellipsis;
padding-right: 0.5em; padding-right: 0.5em;
} }
} }

8
app/assets/stylesheets/common/base/search-menu.scss
View File

@ -153,9 +153,7 @@
.name, .name,
.slug { .slug {
white-space: nowrap; @include ellipsis;
overflow: hidden;
text-overflow: ellipsis;
} }
.name { .name {
@ -207,9 +205,7 @@
.username, .username,
.name { .name {
white-space: nowrap; @include ellipsis;
overflow: hidden;
text-overflow: ellipsis;
} }
.username { .username {

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

@ -71,9 +71,7 @@ $tag-color: $primary-medium;
.discourse-tag { .discourse-tag {
max-width: 14em; max-width: 14em;
display: inline-block; display: inline-block;
white-space: nowrap; @include ellipsis;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle; vertical-align: middle;
} }

4
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -53,9 +53,7 @@
font-size: $font-0; font-size: $font-0;
margin-right: 8px; margin-right: 8px;
display: inline-block; display: inline-block;
white-space: nowrap; @include ellipsis;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle; vertical-align: middle;
a { a {
color: dark-light-choose($primary-high, $secondary-low); color: dark-light-choose($primary-high, $secondary-low);

4
app/assets/stylesheets/common/base/topic.scss
View File

@ -220,9 +220,7 @@ a.badge-category {
display: flex; display: flex;
align-items: center; align-items: center;
span:not(.badge) { span:not(.badge) {
overflow: hidden; @include ellipsis;
white-space: nowrap;
text-overflow: ellipsis;
} }
} }
ul { ul {

6
app/assets/stylesheets/common/base/user.scss
View File

@ -143,8 +143,6 @@
dd { dd {
padding: 0; padding: 0;
margin: 0 15px 0 0; margin: 0 15px 0 0;
overflow: hidden;
text-overflow: ellipsis;
color: $primary; color: $primary;
&.groups { &.groups {
@ -182,9 +180,7 @@
h2 { h2 {
font-weight: normal; font-weight: normal;
max-width: 100%; max-width: 100%;
white-space: nowrap; @include ellipsis;
overflow: hidden;
text-overflow: ellipsis;
} }
h3 { h3 {

16
app/assets/stylesheets/common/components/user-card.scss
View File

@ -119,9 +119,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
h2, h2,
h3 { h3 {
margin: 0; margin: 0;
white-space: nowrap; @include ellipsis;
overflow: hidden;
text-overflow: ellipsis;
} }
h1, h1,
h2 { h2 {
@ -201,9 +199,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
} }
.website-name a, .website-name a,
.location span { .location span {
overflow: hidden; @include ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
color: $primary; color: $primary;
} }
.location { .location {
@ -226,17 +222,11 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
.user-badge { .user-badge {
white-space: nowrap; @include ellipsis;
overflow: hidden;
text-overflow: ellipsis;
background: $primary-very-low; background: $primary-very-low;
border: 1px solid $primary-low; border: 1px solid $primary-low;
color: $primary; color: $primary;
} }
.badge-display-name {
overflow: hidden;
text-overflow: ellipsis;
}
.more-user-badges { .more-user-badges {
a { a {
@extend .user-badge; @extend .user-badge;

4
app/assets/stylesheets/common/components/user-info.scss
View File

@ -24,9 +24,7 @@
} }
.name-line { .name-line {
white-space: nowrap; @include ellipsis;
overflow: hidden;
text-overflow: ellipsis;
} }
.username a { .username a {

8
app/assets/stylesheets/common/components/user-stream-item.scss
View File

@ -66,18 +66,14 @@
} }
.title { .title {
white-space: nowrap; @include ellipsis;
overflow: hidden;
text-overflow: ellipsis;
display: block; display: block;
} }
.name { .name {
font-size: $font-0; font-size: $font-0;
max-width: 400px; max-width: 400px;
white-space: nowrap; @include ellipsis;
overflow: hidden;
text-overflow: ellipsis;
} }
.edit-reason { .edit-reason {

6
app/assets/stylesheets/common/foundation/mixins.scss
View File

@ -57,6 +57,12 @@ $breakpoints: (
} }
} }
@mixin ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
// //
// -------------------------------------------------- // --------------------------------------------------

4
app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
View File

@ -78,9 +78,7 @@
font-size: $font-0; font-size: $font-0;
color: $primary; color: $primary;
padding: 0; padding: 0;
overflow: hidden; @include ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%; max-width: 100%;
} }

4
app/assets/stylesheets/common/select-kit/select-kit.scss
View File

@ -71,9 +71,7 @@
text-align: left; text-align: left;
flex: 0 1 auto; flex: 0 1 auto;
padding: 1px 0; padding: 1px 0;
text-overflow: ellipsis; @include ellipsis;
white-space: nowrap;
overflow: hidden;
color: inherit; color: inherit;
} }

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

@ -80,9 +80,7 @@
color: dark-light-choose($primary-medium, $secondary-high); color: dark-light-choose($primary-medium, $secondary-high);
} }
.title { .title {
white-space: nowrap; @include ellipsis;
overflow: hidden;
text-overflow: ellipsis;
flex: 0 1 auto; flex: 0 1 auto;
} }
.topic-statuses { .topic-statuses {

8
app/assets/stylesheets/desktop/user.scss
View File

@ -124,16 +124,12 @@
} }
h1 { h1 {
max-width: 100%; max-width: 100%;
white-space: nowrap; @include ellipsis;
overflow: hidden;
text-overflow: ellipsis;
} }
.location-and-website { .location-and-website {
display: flex; display: flex;
max-width: 100%; max-width: 100%;
overflow: hidden; @include ellipsis;
white-space: nowrap;
text-overflow: ellipsis;
.user-profile-location { .user-profile-location {
margin-right: 1em; margin-right: 1em;
} }

4
app/assets/stylesheets/mobile/components/user-card.scss
View File

@ -28,9 +28,7 @@ $avatar_width: 120px;
border-left: 0.5em solid transparent; border-left: 0.5em solid transparent;
} }
button { button {
white-space: nowrap; @include ellipsis;
overflow: hidden;
text-overflow: ellipsis;
} }
} }
} }

4
app/assets/stylesheets/mobile/compose.scss
View File

@ -71,9 +71,7 @@
} }
.draft-text { .draft-text {
width: calc(100% - 40px); width: calc(100% - 40px);
white-space: nowrap; @include ellipsis;
overflow: hidden;
text-overflow: ellipsis;
} }
} }

4
app/assets/stylesheets/mobile/header.scss
View File

@ -8,9 +8,7 @@
// some protection for text-only site titles // some protection for text-only site titles
.title { .title {
max-width: 75%; max-width: 75%;
white-space: nowrap; @include ellipsis;
overflow: hidden;
text-overflow: ellipsis;
-webkit-animation: fadein 0.5s; -webkit-animation: fadein 0.5s;
animation: fadein 0.5s; animation: fadein 0.5s;
// This acts as a placeholder if for some reason the small logo takes a while // This acts as a placeholder if for some reason the small logo takes a while

4
plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
View File

@ -198,9 +198,7 @@
border: 0; border: 0;
outline: none; outline: none;
flex: 1; flex: 1;
white-space: nowrap; @include ellipsis;
overflow: hidden;
text-overflow: ellipsis;
width: 100%; width: 100%;
text-align: left; text-align: left;
} }