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 {
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@include ellipsis;
}
}
.bar-container {
@ -861,9 +859,7 @@ table#user-badges {
.value-list {
.value {
padding: 0.125em 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include ellipsis;
display: flex;
&:last-child {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -245,9 +245,7 @@
.topic-link {
color: $header_primary;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include ellipsis;
}
.topic-statuses {
.d-icon {
@ -275,9 +273,7 @@
flex: 0 1 auto;
min-width: 1px;
.badge-wrapper {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@include ellipsis;
}
}
.badge-wrapper {
@ -305,9 +301,7 @@
flex: 1 0 0%; // unit on flex-basis is required for IE11
.discourse-tags {
color: $header_primary-high;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@include ellipsis;
.discourse-tag {
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;
border: 1px solid $primary-low;
border-radius: 0.25em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@include ellipsis;
.icon {
display: flex;
@ -376,9 +368,7 @@ $mobile-avatar-height: 1.532em;
}
span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@include ellipsis;
}
}

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

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

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

@ -115,8 +115,6 @@
line-height: $line-height-large;
}
.badge-wrapper {
overflow: hidden;
text-overflow: ellipsis;
&.bar,
&.bullet {
color: $primary;
@ -143,8 +141,6 @@
span.badge-category {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
}
div.discourse-tags {
@ -341,9 +337,7 @@ div.menu-links-header {
span.d-label {
display: block;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@include ellipsis;
}
@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 {
position: absolute;
z-index: z("base");
overflow: hidden;
font-size: $font-down-1;
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
text-overflow: ellipsis;
max-width: 100%;
@include ellipsis;
max-width: 690px;
padding: 5px 0;
.inner-box {
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: normal;
white-space: nowrap;
@include ellipsis;
.album-title {
width: 100%;

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

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

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

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

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

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

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

@ -53,9 +53,7 @@
font-size: $font-0;
margin-right: 8px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include ellipsis;
vertical-align: middle;
a {
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;
align-items: center;
span:not(.badge) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@include ellipsis;
}
}
ul {

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

@ -143,8 +143,6 @@
dd {
padding: 0;
margin: 0 15px 0 0;
overflow: hidden;
text-overflow: ellipsis;
color: $primary;
&.groups {
@ -182,9 +180,7 @@
h2 {
font-weight: normal;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include ellipsis;
}
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,
h3 {
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include ellipsis;
}
h1,
h2 {
@ -201,9 +199,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
}
.website-name a,
.location span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@include ellipsis;
color: $primary;
}
.location {
@ -226,17 +222,11 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
display: flex;
align-items: flex-start;
.user-badge {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include ellipsis;
background: $primary-very-low;
border: 1px solid $primary-low;
color: $primary;
}
.badge-display-name {
overflow: hidden;
text-overflow: ellipsis;
}
.more-user-badges {
a {
@extend .user-badge;

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

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

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

@ -66,18 +66,14 @@
}
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include ellipsis;
display: block;
}
.name {
font-size: $font-0;
max-width: 400px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include ellipsis;
}
.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;
color: $primary;
padding: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@include ellipsis;
max-width: 100%;
}

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

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

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

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

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

@ -124,16 +124,12 @@
}
h1 {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include ellipsis;
}
.location-and-website {
display: flex;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@include ellipsis;
.user-profile-location {
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;
}
button {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include ellipsis;
}
}
}

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

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

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

@ -8,9 +8,7 @@
// some protection for text-only site titles
.title {
max-width: 75%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include ellipsis;
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
// 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;
outline: none;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include ellipsis;
width: 100%;
text-align: left;
}