From 7e6ffa085f97dc4688e2655fe2447743ab807e44 Mon Sep 17 00:00:00 2001 From: Peter Simonsson Date: Wed, 18 Jan 2023 15:30:46 +0000 Subject: Add checkmark symbol to checkbox (#22795) --- app/javascript/styles/mastodon/components.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/styles/mastodon/components.scss') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index ff368faaa..6a2fe4c0b 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -423,7 +423,7 @@ body > [data-popper-placement] { &.active { border-color: $highlight-text-color; - background: $highlight-text-color; + background: $highlight-text-color url("data:image/svg+xml;utf8,") center center no-repeat; } } } -- cgit From 54e798a5a05bbe0ef4145337093ec8f8a8196f77 Mon Sep 17 00:00:00 2001 From: Claire Date: Mon, 23 Jan 2023 17:42:58 +0100 Subject: Fix upload area display in single-column mode (#23217) --- app/javascript/styles/mastodon/components.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'app/javascript/styles/mastodon/components.scss') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 6a2fe4c0b..ed4e32440 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -4441,14 +4441,14 @@ a.status-card.compact:hover { align-items: center; background: rgba($base-overlay-background, 0.8); display: flex; - height: 100%; + height: 100vh; justify-content: center; left: 0; opacity: 0; - position: absolute; + position: fixed; top: 0; visibility: hidden; - width: 100%; + width: 100vw; z-index: 2000; * { -- cgit From e8cb3ee827d3bd20b0ad28dfc7358afaa43b4dad Mon Sep 17 00:00:00 2001 From: cadars Date: Mon, 6 Feb 2023 16:53:31 +0100 Subject: Add scrolling to Compare history modal (#23396) * Compare history modal: allow vertical scrolling * Update app/javascript/styles/mastodon/components.scss Co-authored-by: Claire --------- Co-authored-by: Claire --- app/javascript/styles/mastodon/components.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'app/javascript/styles/mastodon/components.scss') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index ed4e32440..493efea30 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -5798,6 +5798,7 @@ a.status-card.compact:hover { &__container { padding: 30px; pointer-events: all; + overflow-y: auto; } .status__content { -- cgit From 0c9d455ea5540e854c2d879cd1df015ea493f622 Mon Sep 17 00:00:00 2001 From: Nick Schonning Date: Sun, 12 Feb 2023 22:57:03 -0500 Subject: Upgrade to Stylelint 15 with Prettier (#23558) --- .prettierignore | 3 + app/javascript/styles/fonts/roboto-mono.scss | 9 +- app/javascript/styles/fonts/roboto.scss | 24 ++-- app/javascript/styles/mastodon-light/diff.scss | 31 +++-- app/javascript/styles/mastodon/accessibility.scss | 5 +- app/javascript/styles/mastodon/admin.scss | 23 +++- app/javascript/styles/mastodon/basics.scss | 6 +- app/javascript/styles/mastodon/components.scss | 126 ++++++++++++++------ app/javascript/styles/mastodon/emoji_picker.scss | 2 +- app/javascript/styles/mastodon/forms.scss | 48 ++++---- app/javascript/styles/mastodon/modal.scss | 4 +- app/javascript/styles/mastodon/polls.scss | 10 +- app/javascript/styles/mastodon/rtl.scss | 18 ++- app/javascript/styles/mastodon/statuses.scss | 2 +- app/javascript/styles/mastodon/variables.scss | 31 ++--- app/javascript/styles/mastodon/widgets.scss | 2 +- lib/assets/wordmark.light.css | 4 +- package.json | 6 +- stylelint.config.js | 2 - yarn.lock | 134 ++++++++++++++-------- 20 files changed, 311 insertions(+), 179 deletions(-) (limited to 'app/javascript/styles/mastodon/components.scss') diff --git a/.prettierignore b/.prettierignore index f72354a42..8279ac1a4 100644 --- a/.prettierignore +++ b/.prettierignore @@ -70,3 +70,6 @@ docker-compose.override.yml # Ignore locale files /app/javascript/mastodon/locales /config/locales + +# Ignore vendored CSS reset +app/javascript/styles/mastodon/reset.scss diff --git a/app/javascript/styles/fonts/roboto-mono.scss b/app/javascript/styles/fonts/roboto-mono.scss index 3802212a9..10dd63009 100644 --- a/app/javascript/styles/fonts/roboto-mono.scss +++ b/app/javascript/styles/fonts/roboto-mono.scss @@ -1,11 +1,12 @@ @font-face { font-family: mastodon-font-monospace; - src: - local('Roboto Mono'), + src: local('Roboto Mono'), url('../fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'), url('../fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'), - url('../fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'), - url('../fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') format('svg'); + url('../fonts/roboto-mono/robotomono-regular-webfont.ttf') + format('truetype'), + url('../fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') + format('svg'); font-weight: 400; font-display: swap; font-style: normal; diff --git a/app/javascript/styles/fonts/roboto.scss b/app/javascript/styles/fonts/roboto.scss index 657152380..672eab086 100644 --- a/app/javascript/styles/fonts/roboto.scss +++ b/app/javascript/styles/fonts/roboto.scss @@ -1,11 +1,11 @@ @font-face { font-family: mastodon-font-sans-serif; - src: - local('Roboto Italic'), + src: local('Roboto Italic'), url('../fonts/roboto/roboto-italic-webfont.woff2') format('woff2'), url('../fonts/roboto/roboto-italic-webfont.woff') format('woff'), url('../fonts/roboto/roboto-italic-webfont.ttf') format('truetype'), - url('../fonts/roboto/roboto-italic-webfont.svg#roboto-italic-webfont') format('svg'); + url('../fonts/roboto/roboto-italic-webfont.svg#roboto-italic-webfont') + format('svg'); font-weight: normal; font-display: swap; font-style: italic; @@ -13,12 +13,12 @@ @font-face { font-family: mastodon-font-sans-serif; - src: - local('Roboto Bold'), + src: local('Roboto Bold'), url('../fonts/roboto/roboto-bold-webfont.woff2') format('woff2'), url('../fonts/roboto/roboto-bold-webfont.woff') format('woff'), url('../fonts/roboto/roboto-bold-webfont.ttf') format('truetype'), - url('../fonts/roboto/roboto-bold-webfont.svg#roboto-bold-webfont') format('svg'); + url('../fonts/roboto/roboto-bold-webfont.svg#roboto-bold-webfont') + format('svg'); font-weight: bold; font-display: swap; font-style: normal; @@ -26,12 +26,12 @@ @font-face { font-family: mastodon-font-sans-serif; - src: - local('Roboto Medium'), + src: local('Roboto Medium'), url('../fonts/roboto/roboto-medium-webfont.woff2') format('woff2'), url('../fonts/roboto/roboto-medium-webfont.woff') format('woff'), url('../fonts/roboto/roboto-medium-webfont.ttf') format('truetype'), - url('../fonts/roboto/roboto-medium-webfont.svg#roboto-medium-webfont') format('svg'); + url('../fonts/roboto/roboto-medium-webfont.svg#roboto-medium-webfont') + format('svg'); font-weight: 500; font-display: swap; font-style: normal; @@ -39,12 +39,12 @@ @font-face { font-family: mastodon-font-sans-serif; - src: - local('Roboto'), + src: local('Roboto'), url('../fonts/roboto/roboto-regular-webfont.woff2') format('woff2'), url('../fonts/roboto/roboto-regular-webfont.woff') format('woff'), url('../fonts/roboto/roboto-regular-webfont.ttf') format('truetype'), - url('../fonts/roboto/roboto-regular-webfont.svg#roboto-regular-webfont') format('svg'); + url('../fonts/roboto/roboto-regular-webfont.svg#roboto-regular-webfont') + format('svg'); font-weight: normal; font-display: swap; font-style: normal; diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index c37100a28..01725cf96 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -152,7 +152,7 @@ html { } .compose-form__autosuggest-wrapper, -.poll__option input[type="text"], +.poll__option input[type='text'], .compose-form .spoiler-input__input, .compose-form__poll-wrapper select, .search__input, @@ -179,7 +179,9 @@ html { } .compose-form__poll-wrapper select { - background: $simple-background-color url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; + background: $simple-background-color + url("data:image/svg+xml;utf8,") + no-repeat right 8px center / auto 16px; } .compose-form__poll-wrapper, @@ -205,7 +207,9 @@ html { } .drawer__inner__mastodon { - background: $white url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto; + background: $white + url('data:image/svg+xml;utf8,') + no-repeat bottom / 100% auto; } // Change the colors used in compose-form @@ -332,11 +336,13 @@ html { color: $white; } -.language-dropdown__dropdown__results__item .language-dropdown__dropdown__results__item__common-name { +.language-dropdown__dropdown__results__item + .language-dropdown__dropdown__results__item__common-name { color: lighten($ui-base-color, 8%); } -.language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name { +.language-dropdown__dropdown__results__item.active + .language-dropdown__dropdown__results__item__common-name { color: darken($ui-base-color, 12%); } @@ -490,7 +496,8 @@ html { background: darken($ui-secondary-color, 10%); } -.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { +.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) + .react-toggle-track { background: lighten($ui-highlight-color, 10%); } @@ -522,10 +529,10 @@ html { } .simple_form { - input[type="text"], - input[type="number"], - input[type="email"], - input[type="password"], + input[type='text'], + input[type='number'], + input[type='email'], + input[type='password'], textarea { &:hover { border-color: lighten($ui-base-color, 12%); @@ -682,5 +689,7 @@ html { .mute-modal select { border: 1px solid lighten($ui-base-color, 8%); - background: $simple-background-color url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; + background: $simple-background-color + url("data:image/svg+xml;utf8,") + no-repeat right 8px center / auto 16px; } diff --git a/app/javascript/styles/mastodon/accessibility.scss b/app/javascript/styles/mastodon/accessibility.scss index c5bcb5941..deaa0afda 100644 --- a/app/javascript/styles/mastodon/accessibility.scss +++ b/app/javascript/styles/mastodon/accessibility.scss @@ -1,4 +1,7 @@ -$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange' 'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign' 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on' 'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default; +$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange' + 'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign' + 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on' + 'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default; %emoji-color-inversion { filter: invert(1); diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index 674fafbe9..d9e45fb10 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -1,4 +1,4 @@ -@use "sass:math"; +@use 'sass:math'; $no-columns-breakpoint: 600px; $sidebar-width: 240px; @@ -1131,7 +1131,10 @@ a.name-tag, @for $i from 0 through 10 { &--#{10 * $i} { - background-color: rgba($ui-highlight-color, 1 * (math.div(max(1, $i), 10))); + background-color: rgba( + $ui-highlight-color, + 1 * (math.div(max(1, $i), 10)) + ); } } } @@ -1220,7 +1223,12 @@ a.sparkline { .skeleton { background-color: lighten($ui-base-color, 8%); - background-image: linear-gradient(90deg, lighten($ui-base-color, 8%), lighten($ui-base-color, 12%), lighten($ui-base-color, 8%)); + background-image: linear-gradient( + 90deg, + lighten($ui-base-color, 8%), + lighten($ui-base-color, 12%), + lighten($ui-base-color, 8%) + ); background-size: 200px 100%; background-repeat: no-repeat; border-radius: 4px; @@ -1269,7 +1277,10 @@ a.sparkline { @for $i from 0 through 10 { &--#{10 * $i} { - background-color: rgba($ui-highlight-color, 1 * (math.div(max(1, $i), 10))); + background-color: rgba( + $ui-highlight-color, + 1 * (math.div(max(1, $i), 10)) + ); } } } @@ -1415,7 +1426,7 @@ a.sparkline { &::after { display: block; - content: ""; + content: ''; width: 50px; height: 21px; position: absolute; @@ -1809,7 +1820,7 @@ a.sparkline { &::after { position: absolute; - content: ""; + content: ''; width: 1px; background: $highlight-text-color; bottom: 0; diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index 413a1cdd6..1d08b12e5 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -14,7 +14,7 @@ body { font-weight: 400; color: $primary-text-color; text-rendering: optimizelegibility; - font-feature-settings: "kern"; + font-feature-settings: 'kern'; text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0%); -webkit-tap-highlight-color: transparent; @@ -31,7 +31,9 @@ body { // Droid Sans => Older Androids (<4.0) // Helvetica Neue => Older macOS <10.11 // $font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0) - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", $font-sans-serif, sans-serif; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', + Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + $font-sans-serif, sans-serif; } &.app-body { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 493efea30..11c28dbc1 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -387,7 +387,7 @@ body > [data-popper-placement] { .ellipsis { &::after { - content: "…"; + content: '…'; } } @@ -404,7 +404,7 @@ body > [data-popper-placement] { color: $highlight-text-color; } - input[type="checkbox"] { + input[type='checkbox'] { display: none; } @@ -423,7 +423,9 @@ body > [data-popper-placement] { &.active { border-color: $highlight-text-color; - background: $highlight-text-color url("data:image/svg+xml;utf8,") center center no-repeat; + background: $highlight-text-color + url("data:image/svg+xml;utf8,") + center center no-repeat; } } } @@ -647,7 +649,12 @@ body > [data-popper-placement] { margin: 5px; &__actions { - background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); + background: linear-gradient( + 180deg, + rgba($base-shadow-color, 0.8) 0, + rgba($base-shadow-color, 0.35) 80%, + transparent + ); display: flex; align-items: flex-start; justify-content: space-between; @@ -675,7 +682,12 @@ body > [data-popper-placement] { left: 0; right: 0; box-sizing: border-box; - background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); + background: linear-gradient( + 0deg, + rgba($base-shadow-color, 0.8) 0, + rgba($base-shadow-color, 0.35) 80%, + transparent + ); } } @@ -1080,8 +1092,13 @@ body > [data-popper-placement] { cursor: auto; @keyframes fade { - 0% { opacity: 0; } - 100% { opacity: 1; } + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } } opacity: 1; @@ -1827,11 +1844,11 @@ a.account__display-name { justify-content: center; flex-direction: column; scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* IE 10+ */ + -ms-overflow-style: none; /* IE 10+ */ * { scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* IE 10+ */ + -ms-overflow-style: none; /* IE 10+ */ } &::-webkit-scrollbar, @@ -2863,7 +2880,9 @@ $ui-header-height: 55px; } .drawer__inner__mastodon { - background: lighten($ui-base-color, 13%) url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto; + background: lighten($ui-base-color, 13%) + url('data:image/svg+xml;utf8,') + no-repeat bottom / 100% auto; flex: 1; min-height: 47px; display: none; @@ -2918,7 +2937,8 @@ $ui-header-height: 55px; overflow-y: auto; } - @supports (display: grid) { // hack to fix Chrome <57 + @supports (display: grid) { + // hack to fix Chrome <57 contain: strict; } @@ -2939,7 +2959,8 @@ $ui-header-height: 55px; } .scrollable.fullscreen { - @supports (display: grid) { // hack to fix Chrome <57 + @supports (display: grid) { + // hack to fix Chrome <57 contain: none; } } @@ -3043,7 +3064,8 @@ $ui-header-height: 55px; transition: background-color 0.2s ease; } -.react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track { +.react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) + .react-toggle-track { background-color: darken($ui-base-color, 10%); } @@ -3051,7 +3073,8 @@ $ui-header-height: 55px; background-color: darken($ui-highlight-color, 2%); } -.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track { +.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) + .react-toggle-track { background-color: $ui-highlight-color; } @@ -3646,7 +3669,7 @@ a.status-card.compact:hover { &::before { display: block; - content: ""; + content: ''; position: absolute; bottom: -13px; left: 0; @@ -3656,7 +3679,11 @@ a.status-card.compact:hover { pointer-events: none; height: 28px; z-index: 1; - background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%); + background: radial-gradient( + ellipse, + rgba($ui-highlight-color, 0.23) 0%, + rgba($ui-highlight-color, 0) 60% + ); } } @@ -4241,7 +4268,8 @@ a.status-card.compact:hover { align-items: center; justify-content: center; - @supports (display: grid) { // hack to fix Chrome <57 + @supports (display: grid) { + // hack to fix Chrome <57 contain: strict; } @@ -5747,7 +5775,9 @@ a.status-card.compact:hover { width: auto; outline: 0; font-family: inherit; - background: $simple-background-color url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; + background: $simple-background-color + url("data:image/svg+xml;utf8,") + no-repeat right 8px center / auto 16px; border: 1px solid darken($simple-background-color, 14%); border-radius: 4px; padding: 6px 10px; @@ -6154,7 +6184,12 @@ a.status-card.compact:hover { left: 0; right: 0; box-sizing: border-box; - background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent); + background: linear-gradient( + 0deg, + rgba($base-shadow-color, 0.85) 0, + rgba($base-shadow-color, 0.45) 60%, + transparent + ); padding: 0 15px; opacity: 0; transition: opacity 0.1s ease; @@ -6295,7 +6330,7 @@ a.status-card.compact:hover { } &::before { - content: ""; + content: ''; width: 50px; background: rgba($white, 0.35); border-radius: 4px; @@ -6365,7 +6400,7 @@ a.status-card.compact:hover { position: relative; &::before { - content: ""; + content: ''; width: 100%; background: rgba($white, 0.35); border-radius: 4px; @@ -6448,7 +6483,11 @@ a.status-card.compact:hover { } .scrollable .account-card__bio::after { - background: linear-gradient(to left, lighten($ui-base-color, 8%), transparent); + background: linear-gradient( + to left, + lighten($ui-base-color, 8%), + transparent + ); } .account-gallery__container { @@ -6509,7 +6548,7 @@ a.status-card.compact:hover { &::before, &::after { display: block; - content: ""; + content: ''; position: absolute; bottom: 0; left: 50%; @@ -6575,8 +6614,8 @@ a.status-card.compact:hover { text-overflow: ellipsis; cursor: pointer; - input[type="radio"], - input[type="checkbox"] { + input[type='radio'], + input[type='checkbox'] { display: none; } @@ -6635,9 +6674,17 @@ noscript { } @keyframes flicker { - 0% { opacity: 1; } - 30% { opacity: 0.75; } - 100% { opacity: 1; } + 0% { + opacity: 1; + } + + 30% { + opacity: 0.75; + } + + 100% { + opacity: 1; + } } @media screen and (max-width: 630px) and (max-height: 400px) { @@ -6658,7 +6705,9 @@ noscript { .navigation-bar { & > a:first-child { will-change: margin-top, margin-left, margin-right, width; - transition: margin-top $duration $delay, margin-left $duration ($duration + $delay), margin-right $duration ($duration + $delay); + transition: margin-top $duration $delay, + margin-left $duration ($duration + $delay), + margin-right $duration ($duration + $delay); } & > .navigation-bar__profile-edit { @@ -6669,15 +6718,12 @@ noscript { .navigation-bar__actions { & > .icon-button.close { will-change: opacity transform; - transition: - opacity $duration * 0.5 $delay, - transform $duration $delay; + transition: opacity $duration * 0.5 $delay, transform $duration $delay; } & > .compose__action-bar .icon-button { will-change: opacity transform; - transition: - opacity $duration * 0.5 $delay + $duration * 0.5, + transition: opacity $duration * 0.5 $delay + $duration * 0.5, transform $duration $delay; } } @@ -7677,7 +7723,11 @@ noscript { &.active { transition: all 100ms ease-in; transition-property: background-color, color; - background-color: mix(lighten($ui-base-color, 12%), $ui-highlight-color, 80%); + background-color: mix( + lighten($ui-base-color, 12%), + $ui-highlight-color, + 80% + ); .reactions-bar__item__count { color: lighten($highlight-text-color, 8%); @@ -7730,7 +7780,7 @@ noscript { &.unread { &::before { - content: ""; + content: ''; position: absolute; top: 0; left: 0; @@ -8258,14 +8308,14 @@ noscript { counter-increment: list-counter; &::before { - content: counter(list-counter) "."; + content: counter(list-counter) '.'; position: absolute; left: 0; } } ul > li::before { - content: ""; + content: ''; position: absolute; background-color: $darker-text-color; border-radius: 50%; diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss index 1042ddda8..0d7a7df2e 100644 --- a/app/javascript/styles/mastodon/emoji_picker.scss +++ b/app/javascript/styles/mastodon/emoji_picker.scss @@ -174,7 +174,7 @@ &:hover::before { z-index: -1; - content: ""; + content: ''; position: absolute; top: 0; left: 0; diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index 1841dc8bf..e4539deff 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -299,7 +299,7 @@ code { max-width: 100%; height: auto; border-radius: 4px; - background: url("images/void.png"); + background: url('images/void.png'); &:last-child { margin-bottom: 0; @@ -384,7 +384,7 @@ code { flex: 1 1 auto; } - input[type="checkbox"] { + input[type='checkbox'] { position: absolute; left: 0; top: 5px; @@ -400,12 +400,12 @@ code { border-radius: 4px; } - input[type="text"], - input[type="number"], - input[type="email"], - input[type="password"], - input[type="url"], - input[type="datetime-local"], + input[type='text'], + input[type='number'], + input[type='email'], + input[type='password'], + input[type='url'], + input[type='datetime-local'], textarea { box-sizing: border-box; font-size: 16px; @@ -443,11 +443,11 @@ code { } } - input[type="text"], - input[type="number"], - input[type="email"], - input[type="password"], - input[type="datetime-local"] { + input[type='text'], + input[type='number'], + input[type='email'], + input[type='password'], + input[type='datetime-local'] { &:focus:invalid:not(:placeholder-shown), &:required:invalid:not(:placeholder-shown) { border-color: lighten($error-red, 12%); @@ -459,11 +459,11 @@ code { color: lighten($error-red, 12%); } - input[type="text"], - input[type="number"], - input[type="email"], - input[type="password"], - input[type="datetime-local"], + input[type='text'], + input[type='number'], + input[type='email'], + input[type='password'], + input[type='datetime-local'], textarea, select { border-color: lighten($error-red, 12%); @@ -567,7 +567,9 @@ code { outline: 0; font-family: inherit; resize: vertical; - background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; + background: darken($ui-base-color, 10%) + url("data:image/svg+xml;utf8,") + no-repeat right 8px center / auto 16px; border: 1px solid darken($ui-base-color, 14%); border-radius: 4px; padding-left: 10px; @@ -607,7 +609,11 @@ code { right: 0; bottom: 1px; width: 5px; - background-image: linear-gradient(to right, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%)); + background-image: linear-gradient( + to right, + rgba(darken($ui-base-color, 10%), 0), + darken($ui-base-color, 10%) + ); } } } @@ -995,7 +1001,7 @@ code { flex: 1 1 auto; } - input[type="text"] { + input[type='text'] { background: transparent; border: 0; padding: 10px; diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss index a333926dd..6170877b2 100644 --- a/app/javascript/styles/mastodon/modal.scss +++ b/app/javascript/styles/mastodon/modal.scss @@ -1,5 +1,7 @@ .modal-layout { - background: $ui-base-color url('data:image/svg+xml;utf8,') repeat-x bottom fixed; + background: $ui-base-color + url('data:image/svg+xml;utf8,') + repeat-x bottom fixed; display: flex; flex-direction: column; height: 100vh; diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss index 03d2cb4b2..b30932e04 100644 --- a/app/javascript/styles/mastodon/polls.scss +++ b/app/javascript/styles/mastodon/polls.scss @@ -64,8 +64,8 @@ max-width: calc(100% - 45px - 25px); } - input[type="radio"], - input[type="checkbox"] { + input[type='radio'], + input[type='checkbox'] { display: none; } @@ -73,7 +73,7 @@ flex: 1 1 auto; } - input[type="text"] { + input[type='text'] { display: block; box-sizing: border-box; width: 100%; @@ -263,7 +263,9 @@ width: auto; outline: 0; font-family: inherit; - background: $simple-background-color url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; + background: $simple-background-color + url("data:image/svg+xml;utf8,") + no-repeat right 8px center / auto 16px; border: 1px solid darken($simple-background-color, 14%); border-radius: 4px; padding: 6px 10px; diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index 39f4653bb..e60087dab 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -229,8 +229,8 @@ body.rtl { padding-right: 0; } - .simple_form .check_boxes .checkbox input[type="checkbox"], - .simple_form .input.boolean input[type="checkbox"] { + .simple_form .check_boxes .checkbox input[type='checkbox'], + .simple_form .input.boolean input[type='checkbox'] { left: auto; right: 0; } @@ -268,12 +268,18 @@ body.rtl { &::after { right: auto; left: 0; - background-image: linear-gradient(to left, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%)); + background-image: linear-gradient( + to left, + rgba(darken($ui-base-color, 10%), 0), + darken($ui-base-color, 10%) + ); } } .simple_form select { - background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,") no-repeat left 8px center / auto 16px; + background: darken($ui-base-color, 10%) + url("data:image/svg+xml;utf8,") + no-repeat left 8px center / auto 16px; } .table th, @@ -320,11 +326,11 @@ body.rtl { } .fa-chevron-left::before { - content: "\F054"; + content: '\F054'; } .fa-chevron-right::before { - content: "\F053"; + content: '\F053'; } .column-back-button__icon { diff --git a/app/javascript/styles/mastodon/statuses.scss b/app/javascript/styles/mastodon/statuses.scss index ce71d11e4..a42f1f42c 100644 --- a/app/javascript/styles/mastodon/statuses.scss +++ b/app/javascript/styles/mastodon/statuses.scss @@ -138,7 +138,7 @@ a.button.logo-button { } .embed { - .status__content[data-spoiler="folded"] { + .status__content[data-spoiler='folded'] { .e-content { display: none; } diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss index 2f6c41d5f..7de25f8fd 100644 --- a/app/javascript/styles/mastodon/variables.scss +++ b/app/javascript/styles/mastodon/variables.scss @@ -1,18 +1,18 @@ // Commonly used web colors -$black: #000000; // Black -$white: #ffffff; // White -$success-green: #79bd9a !default; // Padua -$error-red: #df405a !default; // Cerise -$warning-red: #ff5050 !default; // Sunset Orange -$gold-star: #ca8f04 !default; // Dark Goldenrod +$black: #000000; // Black +$white: #ffffff; // White +$success-green: #79bd9a !default; // Padua +$error-red: #df405a !default; // Cerise +$warning-red: #ff5050 !default; // Sunset Orange +$gold-star: #ca8f04 !default; // Dark Goldenrod $red-bookmark: $warning-red; // Values from the classic Mastodon UI -$classic-base-color: #282c37; // Midnight Express -$classic-primary-color: #9baec8; // Echo Blue -$classic-secondary-color: #d9e1e8; // Pattens Blue -$classic-highlight-color: #6364ff; // Brand purple +$classic-base-color: #282c37; // Midnight Express +$classic-primary-color: #9baec8; // Echo Blue +$classic-secondary-color: #d9e1e8; // Pattens Blue +$classic-highlight-color: #6364ff; // Brand purple // Variables for defaults in UI $base-shadow-color: $black !default; @@ -23,10 +23,13 @@ $valid-value-color: $success-green !default; $error-value-color: $error-red !default; // Tell UI to use selected colors -$ui-base-color: $classic-base-color !default; // Darkest -$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest -$ui-primary-color: $classic-primary-color !default; // Lighter -$ui-secondary-color: $classic-secondary-color !default; // Lightest +$ui-base-color: $classic-base-color !default; // Darkest +$ui-base-lighter-color: lighten( + $ui-base-color, + 26% +) !default; // Lighter darkest +$ui-primary-color: $classic-primary-color !default; // Lighter +$ui-secondary-color: $classic-secondary-color !default; // Lightest $ui-highlight-color: $classic-highlight-color !default; // Variables for texts diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index 7a25d121b..ef7bfc6de 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -1,4 +1,4 @@ -@use "sass:math"; +@use 'sass:math'; .hero-widget { margin-bottom: 10px; diff --git a/lib/assets/wordmark.light.css b/lib/assets/wordmark.light.css index 9a601f972..b8c9993fd 100644 --- a/lib/assets/wordmark.light.css +++ b/lib/assets/wordmark.light.css @@ -1 +1,3 @@ -use { color: #000 !important; } +use { + color: #000 !important; +} diff --git a/package.json b/package.json index 96f1e7b0e..9fc84f01d 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "test": "${npm_execpath} run test:lint:js && ${npm_execpath} run test:jest", "test:lint": "${npm_execpath} run test:lint:js && ${npm_execpath} run test:lint:sass", "test:lint:js": "eslint --ext=js . --cache --report-unused-disable-directives", - "test:lint:sass": "stylelint \"**/*.{css,scss}\"", + "test:lint:sass": "stylelint \"**/*.{css,scss}\" && prettier --check \"**/*.{css,scss}\"", "test:jest": "cross-env NODE_ENV=test jest", "format": "prettier --write \"**/*.{json,yml}\"", "format-check": "prettier --check \"**/*.{json,yml}\"" @@ -157,8 +157,8 @@ "raf": "^3.4.1", "react-intl-translations-manager": "^5.0.3", "react-test-renderer": "^16.14.0", - "stylelint": "^14.16.1", - "stylelint-config-standard-scss": "^6.1.0", + "stylelint": "^15.1.0", + "stylelint-config-standard-scss": "^7.0.0", "webpack-dev-server": "^3.11.3", "yargs": "^17.6.2" }, diff --git a/stylelint.config.js b/stylelint.config.js index 0f8267a81..c8c07a05b 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -10,7 +10,6 @@ module.exports = { 'color-function-notation': null, 'color-hex-length': null, 'declaration-block-no-redundant-longhand-properties': null, - 'max-line-length': null, 'no-descending-specificity': null, 'no-duplicate-selectors': null, 'number-max-precision': 8, @@ -18,7 +17,6 @@ module.exports = { 'property-no-vendor-prefix': null, 'selector-class-pattern': null, 'selector-id-pattern': null, - 'string-quotes': null, 'value-keyword-case': null, 'value-no-vendor-prefix': null, diff --git a/yarn.lock b/yarn.lock index cd14ee89a..b94daa089 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1076,10 +1076,25 @@ resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== -"@csstools/selector-specificity@^2.0.2": - version "2.0.2" - resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36" - integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg== +"@csstools/css-parser-algorithms@^2.0.1": + version "2.0.1" + resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.0.1.tgz#ff02629c7c95d1f4f8ea84d5ef1173461610535e" + integrity sha512-B9/8PmOtU6nBiibJg0glnNktQDZ3rZnGn/7UmDfrm2vMtrdlXO3p7ErE95N0up80IRk9YEtB5jyj/TmQ1WH3dw== + +"@csstools/css-tokenizer@^2.0.1": + version "2.0.1" + resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-2.0.1.tgz#cb1e11752db57e69d9aa0e84c3105a25845d4055" + integrity sha512-sYD3H7ReR88S/4+V5VbKiBEUJF4FqvG+8aNJkxqoPAnbhFziDG22IDZc4+h+xA63SfgM+h15lq5OnLeCxQ9nPA== + +"@csstools/media-query-list-parser@^2.0.1": + version "2.0.1" + resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.0.1.tgz#d85a366811563a5d002755ed10e5212a1613c91d" + integrity sha512-X2/OuzEbjaxhzm97UJ+95GrMeT29d1Ib+Pu+paGLuRWZnWRK9sI9r3ikmKXPWGA1C4y4JEdBEFpp9jEqCvLeRA== + +"@csstools/selector-specificity@^2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.1.1.tgz#c9c61d9fe5ca5ac664e1153bb0aa0eba1c6d6308" + integrity sha512-jwx+WCqszn53YHOfvFMJJRd/B2GqkCBt+1MJSG6o5/s8+ytHMvDZXsJgUEWLk12UnLd7HYKac4BYU5i/Ron1Cw== "@emotion/babel-plugin@^11.7.1": version "11.9.2" @@ -3562,7 +3577,7 @@ cosmiconfig@^6.0.0: path-type "^4.0.0" yaml "^1.7.2" -cosmiconfig@^7.0.0, cosmiconfig@^7.1.0: +cosmiconfig@^7.0.0: version "7.1.0" resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6" integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA== @@ -3573,6 +3588,16 @@ cosmiconfig@^7.0.0, cosmiconfig@^7.1.0: path-type "^4.0.0" yaml "^1.10.0" +cosmiconfig@^8.0.0: + version "8.0.0" + resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-8.0.0.tgz#e9feae014eab580f858f8a0288f38997a7bebe97" + integrity sha512-da1EafcpH6b/TD8vDRaWV7xFINlHlF6zKsGwS1TsuVJTZRkquaS5HTMq7uq6h31619QjbsYl21gVDOm32KM1vQ== + dependencies: + import-fresh "^3.2.1" + js-yaml "^4.1.0" + parse-json "^5.0.0" + path-type "^4.0.0" + create-ecdh@^4.0.0: version "4.0.4" resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e" @@ -3718,6 +3743,14 @@ css-tree@1.0.0-alpha.39: mdn-data "2.0.6" source-map "^0.6.1" +css-tree@^2.3.1: + version "2.3.1" + resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20" + integrity sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw== + dependencies: + mdn-data "2.0.30" + source-map-js "^1.0.1" + css-what@^3.2.1: version "3.3.0" resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.3.0.tgz#10fec696a9ece2e591ac772d759aacabac38cd39" @@ -5734,7 +5767,7 @@ iferr@^0.1.5: resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501" integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE= -ignore@^5.2.0, ignore@^5.2.1: +ignore@^5.2.0, ignore@^5.2.4: version "5.2.4" resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324" integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ== @@ -7316,6 +7349,11 @@ md5.js@^1.3.4: inherits "^2.0.1" safe-buffer "^5.1.2" +mdn-data@2.0.30: + version "2.0.30" + resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc" + integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA== + mdn-data@2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b" @@ -8706,7 +8744,7 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.27, postcss@^7.0.32: source-map "^0.6.1" supports-color "^6.1.0" -postcss@^8.2.15, postcss@^8.4.19, postcss@^8.4.21: +postcss@^8.2.15, postcss@^8.4.21: version "8.4.21" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4" integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg== @@ -10029,7 +10067,7 @@ source-list-map@^2.0.0: resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34" integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw== -"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2: +"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== @@ -10426,39 +10464,39 @@ stylehacks@^4.0.0: postcss "^7.0.0" postcss-selector-parser "^3.0.0" -stylelint-config-recommended-scss@^8.0.0: - version "8.0.0" - resolved "https://registry.yarnpkg.com/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-8.0.0.tgz#1c1e93e619fe2275d4c1067928d92e0614f7d64f" - integrity sha512-BxjxEzRaZoQb7Iinc3p92GS6zRdRAkIuEu2ZFLTxJK2e1AIcCb5B5MXY9KOXdGTnYFZ+KKx6R4Fv9zU6CtMYPQ== +stylelint-config-recommended-scss@^9.0.0: + version "9.0.0" + resolved "https://registry.yarnpkg.com/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-9.0.0.tgz#e755cf3654f3a3a6d7bdf84fe0a814595754a386" + integrity sha512-5e9pn3Ztfncd8s9OqvvCW7tZpYe+vGmPi7VEXX7XEp+Kj38PnKCrvFCBL+hQ7rkD4d5QzjB3BxlFEyo/30UWUw== dependencies: postcss-scss "^4.0.2" - stylelint-config-recommended "^9.0.0" - stylelint-scss "^4.0.0" + stylelint-config-recommended "^10.0.1" + stylelint-scss "^4.4.0" -stylelint-config-recommended@^9.0.0: - version "9.0.0" - resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-9.0.0.tgz#1c9e07536a8cd875405f8ecef7314916d94e7e40" - integrity sha512-9YQSrJq4NvvRuTbzDsWX3rrFOzOlYBmZP+o513BJN/yfEmGSr0AxdvrWs0P/ilSpVV/wisamAHu5XSk8Rcf4CQ== +stylelint-config-recommended@^10.0.1: + version "10.0.1" + resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-10.0.1.tgz#25a8828acf6cde87dac6db2950c8c4ed82a69ae1" + integrity sha512-TQ4xQ48tW4QSlODcti7pgSRqBZcUaBzuh0jPpfiMhwJKBPkqzTIAU+IrSWL/7BgXlOM90DjB7YaNgFpx8QWhuA== -stylelint-config-standard-scss@^6.1.0: - version "6.1.0" - resolved "https://registry.yarnpkg.com/stylelint-config-standard-scss/-/stylelint-config-standard-scss-6.1.0.tgz#a6cddd2a9430578b92fc89726a59474d5548a444" - integrity sha512-iZ2B5kQT2G3rUzx+437cEpdcnFOQkwnwqXuY8Z0QUwIHQVE8mnYChGAquyKFUKZRZ0pRnrciARlPaR1RBtPb0Q== +stylelint-config-standard-scss@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/stylelint-config-standard-scss/-/stylelint-config-standard-scss-7.0.0.tgz#c7076bf5afa705d9e5ddc3ede39da7a684fa0f60" + integrity sha512-rHgydRJxN4Q9lDcwrLFoiFA3S8CRqsUcyBBCLwEMjIwzJViluFfsOKFPSomx6hScVQgQ4//Fx0hRKiSHyO0ihw== dependencies: - stylelint-config-recommended-scss "^8.0.0" - stylelint-config-standard "^29.0.0" + stylelint-config-recommended-scss "^9.0.0" + stylelint-config-standard "^30.0.1" -stylelint-config-standard@^29.0.0: - version "29.0.0" - resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-29.0.0.tgz#4cc0e0f05512a39bb8b8e97853247d3a95d66fa2" - integrity sha512-uy8tZLbfq6ZrXy4JKu3W+7lYLgRQBxYTUUB88vPgQ+ZzAxdrvcaSUW9hOMNLYBnwH+9Kkj19M2DHdZ4gKwI7tg== +stylelint-config-standard@^30.0.1: + version "30.0.1" + resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-30.0.1.tgz#a84d57c240c37f7db47023ab9d2e64c49090e1eb" + integrity sha512-NbeHOmpRQhjZh5XB1B/S4MLRWvz4xxAxeDBjzl0tY2xEcayNhLbaRGF0ZQzq+DQZLCcPpOHeS2Ru1ydbkhkmLg== dependencies: - stylelint-config-recommended "^9.0.0" + stylelint-config-recommended "^10.0.1" -stylelint-scss@^4.0.0: - version "4.2.0" - resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-4.2.0.tgz#e25fd390ee38a7e89fcfaec2a8f9dce2ec6ddee8" - integrity sha512-HHHMVKJJ5RM9pPIbgJ/XA67h9H0407G68Rm69H4fzFbFkyDMcTV1Byep3qdze5+fJ3c0U7mJrbj6S0Fg072uZA== +stylelint-scss@^4.4.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-4.4.0.tgz#87ce9d049eff1ce67cce788780fbfda63099017e" + integrity sha512-Qy66a+/30aylFhPmUArHhVsHOun1qrO93LGT15uzLuLjWS7hKDfpFm34mYo1ndR4MCo8W4bEZM1+AlJRJORaaw== dependencies: lodash "^4.17.21" postcss-media-query-parser "^0.2.3" @@ -10466,16 +10504,20 @@ stylelint-scss@^4.0.0: postcss-selector-parser "^6.0.6" postcss-value-parser "^4.1.0" -stylelint@^14.16.1: - version "14.16.1" - resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.16.1.tgz#b911063530619a1bbe44c2b875fd8181ebdc742d" - integrity sha512-ErlzR/T3hhbV+a925/gbfc3f3Fep9/bnspMiJPorfGEmcBbXdS+oo6LrVtoUZ/w9fqD6o6k7PtUlCOsCRdjX/A== +stylelint@^15.1.0: + version "15.1.0" + resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-15.1.0.tgz#24d7cbe06250ceca3b276393bfdeaaaba4356195" + integrity sha512-Tw8OyIiYhxnIHUzgoLlCyWgCUKsPYiP3TDgs7M1VbayS+q5qZly2yxABg+YPe/hFRWiu0cOtptCtpyrn1CrnYw== dependencies: - "@csstools/selector-specificity" "^2.0.2" + "@csstools/css-parser-algorithms" "^2.0.1" + "@csstools/css-tokenizer" "^2.0.1" + "@csstools/media-query-list-parser" "^2.0.1" + "@csstools/selector-specificity" "^2.1.1" balanced-match "^2.0.0" colord "^2.9.3" - cosmiconfig "^7.1.0" + cosmiconfig "^8.0.0" css-functions-list "^3.1.0" + css-tree "^2.3.1" debug "^4.3.4" fast-glob "^3.2.12" fastest-levenshtein "^1.0.16" @@ -10484,7 +10526,7 @@ stylelint@^14.16.1: globby "^11.1.0" globjoin "^0.1.4" html-tags "^3.2.0" - ignore "^5.2.1" + ignore "^5.2.4" import-lazy "^4.0.0" imurmurhash "^0.1.4" is-plain-object "^5.0.0" @@ -10494,7 +10536,7 @@ stylelint@^14.16.1: micromatch "^4.0.5" normalize-path "^3.0.0" picocolors "^1.0.0" - postcss "^8.4.19" + postcss "^8.4.21" postcss-media-query-parser "^0.2.3" postcss-resolve-nested-selector "^0.1.1" postcss-safe-parser "^6.0.0" @@ -10508,7 +10550,7 @@ stylelint@^14.16.1: svg-tags "^1.0.0" table "^6.8.1" v8-compile-cache "^2.3.0" - write-file-atomic "^4.0.2" + write-file-atomic "^5.0.0" stylis@4.0.13: version "4.0.13" @@ -11778,14 +11820,6 @@ wrappy@1: resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8= -write-file-atomic@^4.0.2: - version "4.0.2" - resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-4.0.2.tgz#a9df01ae5b77858a027fd2e80768ee433555fcfd" - integrity sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg== - dependencies: - imurmurhash "^0.1.4" - signal-exit "^3.0.7" - write-file-atomic@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-5.0.0.tgz#54303f117e109bf3d540261125c8ea5a7320fab0" -- cgit From 62c4aecf8f3cb1e2bf1d0d1611084a3406a7adc0 Mon Sep 17 00:00:00 2001 From: Christian Schmidt Date: Mon, 20 Feb 2023 08:11:23 +0100 Subject: Make larger part of status clickable (#23621) --- app/javascript/mastodon/components/status.jsx | 5 +++-- app/javascript/styles/mastodon/components.scss | 3 ++- 2 files changed, 5 insertions(+), 3 deletions(-) (limited to 'app/javascript/styles/mastodon/components.scss') diff --git a/app/javascript/mastodon/components/status.jsx b/app/javascript/mastodon/components/status.jsx index f02910f5a..2e2d96634 100644 --- a/app/javascript/mastodon/components/status.jsx +++ b/app/javascript/mastodon/components/status.jsx @@ -160,6 +160,7 @@ class Status extends ImmutablePureComponent { if (e) { e.preventDefault(); + e.stopPropagation(); } this._openProfile(proper); @@ -510,8 +511,8 @@ class Status extends ImmutablePureComponent { {prepend}
-
- +
+ {status.get('edited_at') && *} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 11c28dbc1..62e48eb3d 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1200,11 +1200,12 @@ body > [data-popper-placement] { .status__info { font-size: 15px; - margin-bottom: 10px; + padding-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; + cursor: pointer; } .status-check-box__status { -- cgit From d3b4d4d4f3ccee19f272c66e7c9acd803661e65b Mon Sep 17 00:00:00 2001 From: Claire Date: Mon, 20 Feb 2023 11:32:27 +0100 Subject: Change compose form checkbox to native input with `appearance: none` (#22949) --- .../features/compose/containers/sensitive_button_container.jsx | 2 -- app/javascript/styles/mastodon/components.scss | 8 +++----- 2 files changed, 3 insertions(+), 7 deletions(-) (limited to 'app/javascript/styles/mastodon/components.scss') diff --git a/app/javascript/mastodon/features/compose/containers/sensitive_button_container.jsx b/app/javascript/mastodon/features/compose/containers/sensitive_button_container.jsx index 1bcce5731..03f831d28 100644 --- a/app/javascript/mastodon/features/compose/containers/sensitive_button_container.jsx +++ b/app/javascript/mastodon/features/compose/containers/sensitive_button_container.jsx @@ -54,8 +54,6 @@ class SensitiveButton extends React.PureComponent { disabled={disabled} /> - - [data-popper-placement] { } input[type='checkbox'] { - display: none; - } - - .checkbox { + appearance: none; display: inline-block; position: relative; border: 1px solid $ui-primary-color; @@ -420,8 +417,9 @@ body > [data-popper-placement] { top: -1px; border-radius: 4px; vertical-align: middle; + cursor: inherit; - &.active { + &:checked { border-color: $highlight-text-color; background: $highlight-text-color url("data:image/svg+xml;utf8,") -- cgit From f4f91bc295fd423bdc81ca17f0f9491ed6cd897e Mon Sep 17 00:00:00 2001 From: Tim Lucas Date: Thu, 23 Feb 2023 22:58:42 +1100 Subject: Increase contrast of upload progress background (#23836) --- app/javascript/styles/mastodon-light/diff.scss | 4 ++++ app/javascript/styles/mastodon/components.scss | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) (limited to 'app/javascript/styles/mastodon/components.scss') diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index 01725cf96..58f161f81 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -258,6 +258,10 @@ html { border-color: $ui-base-color; } +.upload-progress__backdrop { + background: $ui-base-color; +} + // Change the background colors of statuses .focusable:focus { background: $ui-base-color; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 49a5bda34..583acfac0 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -4543,7 +4543,7 @@ a.status-card.compact:hover { width: 100%; height: 6px; border-radius: 6px; - background: $ui-base-lighter-color; + background: darken($simple-background-color, 8%); position: relative; margin-top: 5px; } -- cgit From a52ccd7ad98d7d60dffb520c0397ba8aa4c2eb9d Mon Sep 17 00:00:00 2001 From: Rodion Borisov Date: Thu, 9 Mar 2023 16:35:44 +0300 Subject: Center the text itself in upload area (#24029) --- app/javascript/styles/mastodon/components.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'app/javascript/styles/mastodon/components.scss') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 583acfac0..ecec71804 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -4509,6 +4509,7 @@ a.status-card.compact:hover { display: flex; align-items: center; justify-content: center; + text-align: center; color: $secondary-text-color; font-size: 18px; font-weight: 500; -- cgit From 0a9def5498d9630bb9ebf1585f76b2af5fad5169 Mon Sep 17 00:00:00 2001 From: mogamin <5103195+mgmn@users.noreply.github.com> Date: Tue, 21 Mar 2023 04:04:25 +0900 Subject: Fit the max-width of media in .prose to parent box (#24180) --- app/javascript/styles/mastodon/components.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'app/javascript/styles/mastodon/components.scss') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index ecec71804..9f6958b37 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -8249,11 +8249,13 @@ noscript { img { margin-top: 2em; margin-bottom: 2em; + max-width: 100%; } video { margin-top: 2em; margin-bottom: 2em; + max-width: 100%; } figure { -- cgit From ef127c964a60f365129bc97a2cb2fc6d12ba6407 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 25 Mar 2023 08:46:32 +0100 Subject: Change design of account rows in web UI (#24247) --- app/javascript/mastodon/components/account.jsx | 53 +++++++++++++++++++++++--- app/javascript/styles/mastodon/components.scss | 29 ++++++++++---- 2 files changed, 69 insertions(+), 13 deletions(-) (limited to 'app/javascript/styles/mastodon/components.scss') diff --git a/app/javascript/mastodon/components/account.jsx b/app/javascript/mastodon/components/account.jsx index 7aaa668fe..0ee0e4551 100644 --- a/app/javascript/mastodon/components/account.jsx +++ b/app/javascript/mastodon/components/account.jsx @@ -10,6 +10,9 @@ import { me } from '../initial_state'; import RelativeTimestamp from './relative_timestamp'; import Skeleton from 'mastodon/components/skeleton'; import { Link } from 'react-router-dom'; +import { counterRenderer } from 'mastodon/components/common_counter'; +import ShortNumber from 'mastodon/components/short_number'; +import Icon from 'mastodon/components/icon'; const messages = defineMessages({ follow: { id: 'account.follow', defaultMessage: 'Follow' }, @@ -23,6 +26,26 @@ const messages = defineMessages({ block: { id: 'account.block', defaultMessage: 'Block @{name}' }, }); +class VerifiedBadge extends React.PureComponent { + + static propTypes = { + link: PropTypes.string.isRequired, + verifiedAt: PropTypes.string.isRequired, + }; + + render () { + const { link } = this.props; + + return ( + + + + + ); + } + +} + class Account extends ImmutablePureComponent { static propTypes = { @@ -77,7 +100,11 @@ class Account extends ImmutablePureComponent {
- + +
+ + +
@@ -131,18 +158,32 @@ class Account extends ImmutablePureComponent { } } - let mute_expires_at; + let muteTimeRemaining; + if (account.get('mute_expires_at')) { - mute_expires_at =
; + muteTimeRemaining = <>· ; + } + + let verification; + + const firstVerifiedField = account.get('fields').find(item => !!item.get('verified_at')); + + if (firstVerifiedField) { + verification = <>· ; } return (
-
- {mute_expires_at} - +
+ +
+ +
+ + {verification} {muteTimeRemaining} +
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 9f6958b37..0893ea7d9 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1403,10 +1403,12 @@ body > [data-popper-placement] { text-decoration: none; font-size: 14px; - &--with-note { - strong { - display: inline; - } + .display-name { + margin-bottom: 4px; + } + + .display-name strong { + display: inline; } } @@ -1629,7 +1631,7 @@ a .account__avatar { .status__display-name, .account__display-name { - strong { + .display-name strong { color: $primary-text-color; } } @@ -1644,12 +1646,12 @@ a .account__avatar { .reply-indicator__display-name, .detailed-status__display-name, a.account__display-name { - &:hover strong { + &:hover .display-name strong { text-decoration: underline; } } -.account__display-name strong { +.account__display-name .display-name strong { display: block; overflow: hidden; text-overflow: ellipsis; @@ -7356,6 +7358,19 @@ noscript { } } +.verified-badge { + display: inline-flex; + align-items: center; + color: $valid-value-color; + gap: 4px; + + a { + color: inherit; + font-weight: 500; + text-decoration: none; + } +} + .trends { &__header { color: $dark-text-color; -- cgit From babd86e594bbdd6dcc512d522ccbb4b24c1355e3 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 27 Mar 2023 10:56:25 +0200 Subject: Refactor styles to use logical properties for positioning (#23944) --- app/javascript/styles/mastodon/about.scss | 4 +- app/javascript/styles/mastodon/accounts.scss | 16 +- app/javascript/styles/mastodon/admin.scss | 83 +++--- app/javascript/styles/mastodon/basics.scss | 2 +- app/javascript/styles/mastodon/components.scss | 334 ++++++++++++----------- app/javascript/styles/mastodon/containers.scss | 6 +- app/javascript/styles/mastodon/emoji_picker.scss | 10 +- app/javascript/styles/mastodon/forms.scss | 34 +-- app/javascript/styles/mastodon/modal.scss | 2 +- app/javascript/styles/mastodon/polls.scss | 2 +- app/javascript/styles/mastodon/rich_text.scss | 6 +- app/javascript/styles/mastodon/rtl.scss | 305 +-------------------- app/javascript/styles/mastodon/statuses.scss | 8 +- app/javascript/styles/mastodon/tables.scss | 22 +- app/javascript/styles/mastodon/widgets.scss | 16 +- 15 files changed, 279 insertions(+), 571 deletions(-) (limited to 'app/javascript/styles/mastodon/components.scss') diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index 0183c43d5..0f02563b4 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -28,14 +28,14 @@ $fluid-breakpoint: $maximum-width + 20px; position: relative; border-bottom: 1px solid lighten($ui-base-color, 8%); padding: 1em 1.75em; - padding-left: 3em; + padding-inline-start: 3em; font-weight: 500; counter-increment: list-counter; &::before { content: counter(list-counter); position: absolute; - left: 0; + inset-inline-start: 0; top: 50%; transform: translateY(-50%); background: $highlight-text-color; diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index c007eb4b5..af0d8b5ed 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -73,8 +73,8 @@ } .display-name { - margin-left: 15px; - text-align: left; + margin-inline-start: 15px; + text-align: start; i[data-hidden] { display: none; @@ -138,22 +138,22 @@ } .older { - float: left; - padding-left: 0; + float: inline-start; + padding-inline-start: 0; .fa { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } } .newer { - float: right; - padding-right: 0; + float: inline-end; + padding-inline-end: 0; .fa { display: inline-block; - margin-left: 5px; + margin-inline-start: 5px; } } diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index d54d6634d..accddc004 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -117,7 +117,7 @@ $content-width: 840px; text-overflow: ellipsis; i.fa { - margin-right: 5px; + margin-inline-end: 5px; } &:hover { @@ -186,7 +186,10 @@ $content-width: 840px; } .content { - padding: 55px 15px 20px 25px; + padding-top: 55px; + padding-bottom: 20px; + padding-inline-start: 25px; + padding-inline-end: 15px; @media screen and (max-width: $no-columns-breakpoint) { max-width: none; @@ -202,11 +205,12 @@ $content-width: 840px; flex-wrap: wrap; align-items: center; justify-content: space-between; - margin: -15px -15px 0 0; + margin-top: -15px; + margin-inline-end: -15px; & > * { margin-top: 15px; - margin-right: 15px; + margin-inline-end: 15px; } } @@ -385,7 +389,7 @@ $content-width: 840px; z-index: 10; width: 100%; height: calc(100% - 56px); - left: 0; + inset-inline-start: 0; bottom: 0; overflow-y: auto; background: $ui-base-color; @@ -470,10 +474,11 @@ body, .filters { display: flex; flex-wrap: wrap; + gap: 40px; .filter-subset { flex: 0 0 auto; - margin: 0 40px 20px 0; + margin-bottom: 20px; &:last-child { margin-bottom: 30px; @@ -485,7 +490,7 @@ body, li { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } } @@ -572,7 +577,7 @@ body, .activity-stream { flex: 2 0 0; - margin-right: 20px; + margin-inline-end: 20px; max-width: calc(100% - 60px); .entry { @@ -625,12 +630,12 @@ body, } .media-spoiler-toggle-buttons { - margin-left: auto; + margin-inline-start: auto; .button { overflow: visible; margin: 0 0 5px 5px; - float: right; + float: inline-end; } } } @@ -651,7 +656,7 @@ body, .special-action-button, .back-link { - text-align: right; + text-align: end; flex: 1 1 auto; } @@ -669,7 +674,7 @@ body, display: block; line-height: 20px; padding: 15px; - padding-left: 15px * 2 + 40px; + padding-inline-start: 15px * 2 + 40px; background: $ui-base-color; border-bottom: 1px solid darken($ui-base-color, 8%); position: relative; @@ -696,7 +701,7 @@ body, &__avatar { position: absolute; - left: 15px; + inset-inline-start: 15px; top: 15px; .avatar { @@ -764,7 +769,7 @@ a.name-tag, .avatar { display: block; margin: 0; - margin-right: 5px; + margin-inline-end: 5px; border-radius: 50%; } @@ -778,7 +783,7 @@ a.name-tag, .speech-bubble { margin-bottom: 20px; - border-left: 4px solid $ui-highlight-color; + border-inset-inline-start: 4px solid $ui-highlight-color; &.positive { border-left-color: $success-green; @@ -794,7 +799,7 @@ a.name-tag, &__bubble { padding: 16px; - padding-left: 14px; + padding-inline-start: 14px; font-size: 15px; line-height: 20px; border-radius: 4px 4px 4px 0; @@ -808,7 +813,7 @@ a.name-tag, &__owner { padding: 8px; - padding-left: 12px; + padding-inline-start: 12px; } time { @@ -832,7 +837,7 @@ a.name-tag, border: 0; &__avatar-wrapper { - margin-left: 0; + margin-inline-start: 0; } } @@ -841,7 +846,7 @@ a.name-tag, font-weight: 500; color: $darker-text-color; text-transform: uppercase; - text-align: right; + text-align: end; a { color: inherit; @@ -892,7 +897,7 @@ a.name-tag, &__icon { color: $dark-text-color; - margin-right: 4px; + margin-inline-end: 4px; font-weight: 500; } } @@ -1090,7 +1095,7 @@ a.name-tag, > h4 { position: sticky; - left: 0; + inset-inline-start: 0; } &__table { @@ -1102,7 +1107,7 @@ a.name-tag, &__date { white-space: nowrap; padding: 10px 0; - text-align: left; + text-align: start; min-width: 120px; &.retention__table__average { @@ -1160,7 +1165,7 @@ a.name-tag, &__total { display: block; - margin-right: 10px; + margin-inline-end: 10px; font-weight: 500; font-size: 28px; color: $primary-text-color; @@ -1262,7 +1267,7 @@ a.sparkline { } &__value { - text-align: right; + text-align: end; color: $darker-text-color; padding: 11px 10px; } @@ -1273,7 +1278,7 @@ a.sparkline { height: 8px; border-radius: 50%; background: $ui-highlight-color; - margin-right: 10px; + margin-inline-end: 10px; @for $i from 0 through 10 { &--#{10 * $i} { @@ -1309,7 +1314,7 @@ a.sparkline { } &__rules { - margin-left: 30px; + margin-inline-start: 30px; } } @@ -1431,7 +1436,7 @@ a.sparkline { height: 21px; position: absolute; bottom: 0; - right: 15px; + inset-inline-end: 15px; background: linear-gradient(to left, $ui-base-color, transparent); pointer-events: none; } @@ -1511,7 +1516,7 @@ a.sparkline { background: $ui-base-color; position: relative; padding: 15px; - padding-left: 15px * 2 + 40px; + padding-inline-start: 15px * 2 + 40px; border-bottom: 1px solid darken($ui-base-color, 8%); &:first-child { @@ -1531,7 +1536,7 @@ a.sparkline { &__avatar { position: absolute; - left: 15px; + inset-inline-start: 15px; top: 15px; border-radius: 4px; width: 40px; @@ -1547,7 +1552,7 @@ a.sparkline { .username { color: $primary-text-color; font-weight: 500; - margin-right: 5px; + margin-inline-end: 5px; a { color: inherit; @@ -1562,7 +1567,7 @@ a.sparkline { } time { - margin-left: 5px; + margin-inline-start: 5px; vertical-align: baseline; } } @@ -1597,8 +1602,8 @@ a.sparkline { &__actions { position: absolute; top: 15px; - right: 15px; - text-align: right; + inset-inline-end: 15px; + text-align: end; } } } @@ -1621,7 +1626,7 @@ a.sparkline { flex: 0 0 auto; width: 200px; padding: 15px; - padding-right: 0; + padding-inline-end: 0; .button { display: block; @@ -1657,7 +1662,7 @@ a.sparkline { } .section-skip-link { - float: right; + float: inline-end; a { color: $ui-highlight-color; @@ -1707,7 +1712,7 @@ a.sparkline { &__rules { list-style: disc; - padding-left: 15px; + padding-inline-start: 15px; margin-bottom: 20px; color: $darker-text-color; @@ -1796,7 +1801,7 @@ a.sparkline { li { counter-increment: step 1; - padding-left: 2.5rem; + padding-inline-start: 2.5rem; padding-bottom: 8px; position: relative; margin-bottom: 8px; @@ -1806,7 +1811,7 @@ a.sparkline { content: counter(step); font-size: 0.625rem; font-weight: 500; - left: 0; + inset-inline-start: 0; display: flex; justify-content: center; align-items: center; @@ -1825,7 +1830,7 @@ a.sparkline { background: $highlight-text-color; bottom: 0; top: calc(1.875rem + 1px); - left: 0.6875rem; + inset-inline-start: 0.6875rem; } &:last-child { diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index 1d08b12e5..a344c7fa4 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -267,7 +267,7 @@ button { overflow: hidden; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; z-index: -1000; } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 0893ea7d9..b9303f2ef 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -309,7 +309,7 @@ &__counter { display: inline-block; width: auto; - margin-left: 4px; + margin-inline-start: 4px; font-size: 12px; font-weight: 500; } @@ -413,7 +413,7 @@ body > [data-popper-placement] { width: 18px; height: 18px; flex: 0 0 auto; - margin-right: 10px; + margin-inline-end: 10px; top: -1px; border-radius: 4px; vertical-align: middle; @@ -465,7 +465,7 @@ body > [data-popper-placement] { .emoji-picker-dropdown { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; } .compose-form__autosuggest-wrapper { @@ -527,7 +527,7 @@ body > [data-popper-placement] { min-height: 100px; border-radius: 4px 4px 0 0; padding-bottom: 0; - padding-right: 10px + 22px; + padding-right: 10px + 22px; // Cannot use inline-end because of dir=auto resize: none; scrollbar-color: initial; @@ -536,7 +536,7 @@ body > [data-popper-placement] { } @media screen and (max-width: 600px) { - height: 100px !important; // prevent auto-resize textarea + height: 100px !important; // Prevent auto-resize textarea resize: vertical; } } @@ -605,7 +605,7 @@ body > [data-popper-placement] { &__uses { flex: 0 0 auto; - text-align: right; + text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -615,7 +615,7 @@ body > [data-popper-placement] { .autosuggest-account-icon, .autosuggest-emoji img { display: block; - margin-right: 8px; + margin-inline-end: 8px; width: 16px; height: 16px; } @@ -677,8 +677,8 @@ body > [data-popper-placement] { position: absolute; z-index: 2; bottom: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; box-sizing: border-box; background: linear-gradient( 0deg, @@ -737,7 +737,7 @@ body > [data-popper-placement] { .character-counter__wrapper { align-self: center; - margin-right: 4px; + margin-inline-end: 4px; } } @@ -826,7 +826,7 @@ body > [data-popper-placement] { } .reply-indicator__cancel { - float: right; + float: inline-end; line-height: 24px; } @@ -836,13 +836,13 @@ body > [data-popper-placement] { max-width: 100%; line-height: 24px; overflow: hidden; - padding-right: 25px; + padding-inline-end: 25px; text-decoration: none; } .reply-indicator__display-avatar { - float: left; - margin-right: 5px; + float: inline-start; + margin-inline-end: 5px; } .status__content--with-action { @@ -1159,7 +1159,7 @@ body > [data-popper-placement] { .notification__relative_time { color: $dark-text-color; - float: right; + float: inline-end; font-size: 14px; padding-bottom: 1px; } @@ -1344,7 +1344,7 @@ body > [data-popper-placement] { font-weight: 500; font-size: 12px; line-height: 17px; - margin-left: 6px; + margin-inline-start: 6px; } .reply-indicator__content { @@ -1389,7 +1389,7 @@ body > [data-popper-placement] { border-bottom: 0; .account__avatar-wrapper { - margin-left: 0; + margin-inline-start: 0; } } @@ -1452,7 +1452,7 @@ body > [data-popper-placement] { &-inline { display: inline-block; vertical-align: middle; - margin-right: 5px; + margin-inline-end: 5px; } &-composite { @@ -1461,7 +1461,7 @@ body > [data-popper-placement] { position: relative; & > div { - float: left; + float: inline-start; position: relative; box-sizing: border-box; } @@ -1475,7 +1475,7 @@ body > [data-popper-placement] { display: block; position: absolute; top: 50%; - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, -50%); color: $primary-text-color; text-shadow: 1px 1px 2px $base-shadow-color; @@ -1495,7 +1495,7 @@ a .account__avatar { &-overlay { position: absolute; bottom: 0; - right: 0; + inset-inline-end: 0; z-index: 1; } } @@ -1552,15 +1552,15 @@ a .account__avatar { .dropdown--active { .dropdown__content.dropdown__right { - left: 6px; - right: initial; + inset-inline-start: 6px; + inset-inline-end: initial; } &::after { bottom: initial; - margin-left: 11px; + margin-inline-start: 11px; margin-top: -7px; - right: initial; + inset-inline-end: initial; } } } @@ -1576,7 +1576,7 @@ a .account__avatar { text-decoration: none; overflow: hidden; flex: 0 1 100%; - border-right: 1px solid lighten($ui-base-color, 8%); + border-inset-inline-end: 1px solid lighten($ui-base-color, 8%); padding: 10px 0; border-bottom: 4px solid transparent; @@ -1616,8 +1616,8 @@ a .account__avatar { } .account-authorize__avatar { - float: left; - margin-right: 10px; + float: inline-start; + margin-inline-end: 10px; } .status__display-name, @@ -2089,7 +2089,7 @@ a.account__display-name { } &.right { - left: -9px; + inset-inline-start: -9px; &::before { transform: rotate(-90deg); @@ -2101,7 +2101,7 @@ a.account__display-name { } &.left { - right: -9px; + inset-inline-end: -9px; &::before { transform: rotate(90deg); @@ -2171,7 +2171,7 @@ a.account__display-name { vertical-align: top; .account__avatar { - margin-right: 5px; + margin-inline-end: 5px; border-radius: 50%; } @@ -2184,8 +2184,8 @@ a.account__display-name { display: block; line-height: 18px; max-width: 311px; - right: 0; - text-align: left; + inset-inline-end: 0; + text-align: start; z-index: 9999; & > ul { @@ -2199,12 +2199,12 @@ a.account__display-name { } &.dropdown__right { - right: 0; + inset-inline-end: 0; } &.dropdown__left { & > ul { - left: -98px; + inset-inline-start: -98px; } } @@ -2423,23 +2423,23 @@ $ui-header-height: 55px; .drawer { flex: 0 0 auto; padding: 10px; - padding-left: 5px; - padding-right: 5px; + padding-inline-start: 5px; + padding-inline-end: 5px; &:first-child { - padding-left: 10px; + padding-inline-start: 10px; } &:last-child { - padding-right: 10px; + padding-inline-end: 10px; } } .columns-area > div { .column, .drawer { - padding-left: 5px; - padding-right: 5px; + padding-inline-start: 5px; + padding-inline-end: 5px; } } } @@ -2486,7 +2486,7 @@ $ui-header-height: 55px; } span { - margin-left: 5px; + margin-inline-start: 5px; display: none; } } @@ -2528,7 +2528,7 @@ $ui-header-height: 55px; line-height: 18px; font-size: 16px; padding: 15px; - padding-right: 30px; + padding-inline-end: 30px; } .search__icon .fa { @@ -2596,7 +2596,7 @@ $ui-header-height: 55px; .navigation-panel { margin: 0; background: $ui-base-color; - border-left: 1px solid lighten($ui-base-color, 8%); + border-inset-inline-start: 1px solid lighten($ui-base-color, 8%); height: 100vh; } @@ -2668,7 +2668,7 @@ $ui-header-height: 55px; &__badge { position: absolute; - left: 9px; + inset-inline-start: 9px; top: -13px; background: $ui-highlight-color; border: 2px solid lighten($ui-base-color, 8%); @@ -2682,7 +2682,7 @@ $ui-header-height: 55px; &__issue-badge { position: absolute; - left: 11px; + inset-inline-start: 11px; bottom: 1px; display: block; background: $error-red; @@ -2738,7 +2738,7 @@ $ui-header-height: 55px; &__background { position: absolute; - left: 0; + inset-inline-start: 0; bottom: 0; height: 220px; width: auto; @@ -2864,7 +2864,7 @@ $ui-header-height: 55px; .drawer__inner { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; background: lighten($ui-base-color, 13%); box-sizing: border-box; padding: 0; @@ -2907,7 +2907,7 @@ $ui-header-height: 55px; .pseudo-drawer { background: lighten($ui-base-color, 13%); font-size: 13px; - text-align: left; + text-align: start; } .drawer__header { @@ -3010,7 +3010,7 @@ $ui-header-height: 55px; .column-back-button__icon { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } .column-back-button--slim { @@ -3023,7 +3023,7 @@ $ui-header-height: 55px; font-size: 16px; padding: 15px; position: absolute; - right: 0; + inset-inline-end: 0; top: -48px; } @@ -3088,7 +3088,7 @@ $ui-header-height: 55px; margin-top: auto; margin-bottom: auto; line-height: 0; - left: 8px; + inset-inline-start: 8px; opacity: 0; transition: opacity 0.25s ease; } @@ -3107,7 +3107,7 @@ $ui-header-height: 55px; margin-top: auto; margin-bottom: auto; line-height: 0; - right: 10px; + inset-inline-end: 10px; opacity: 1; transition: opacity 0.25s ease; } @@ -3119,7 +3119,7 @@ $ui-header-height: 55px; .react-toggle-thumb { position: absolute; top: 1px; - left: 1px; + inset-inline-start: 1px; width: 22px; height: 22px; border: 1px solid $ui-base-color; @@ -3131,7 +3131,7 @@ $ui-header-height: 55px; } .react-toggle--checked .react-toggle-thumb { - left: 27px; + inset-inline-start: 27px; border-color: $ui-highlight-color; } @@ -3185,7 +3185,7 @@ $ui-header-height: 55px; .column-link__icon { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } .column-link__badge { @@ -3279,7 +3279,7 @@ $ui-header-height: 55px; thead { position: absolute; - left: -9999px; + inset-inline-start: -9999px; } td { @@ -3383,9 +3383,9 @@ button.icon-button.active i.fa-retweet { &__actions { bottom: 0; - left: 0; + inset-inline-start: 0; position: absolute; - right: 0; + inset-inline-end: 0; top: 0; display: flex; justify-content: center; @@ -3491,7 +3491,7 @@ a.status-card { position: absolute; transform-origin: 50% 50%; top: 50%; - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, -50%); } } @@ -3558,7 +3558,7 @@ a.status-card.compact:hover { object-fit: fill; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; z-index: 0; background: $base-overlay-background; @@ -3673,8 +3673,8 @@ a.status-card.compact:hover { content: ''; position: absolute; bottom: -13px; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; margin: 0 auto; width: 60%; pointer-events: none; @@ -3709,11 +3709,12 @@ a.status-card.compact:hover { & > button { margin: 0; border: 0; - padding: 15px 0 15px 15px; + padding: 15px; + padding-inline-end: 0; color: inherit; background: transparent; font: inherit; - text-align: left; + text-align: start; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -3747,7 +3748,7 @@ a.status-card.compact:hover { } .column-header__links .text-btn { - margin-right: 10px; + margin-inline-end: 10px; } .column-header__button { @@ -3830,18 +3831,18 @@ a.status-card.compact:hover { } .column-header__setting-arrows { - float: right; + float: inline-end; .column-header__setting-btn { padding: 5px; &:first-child { - padding-right: 7px; + padding-inline-end: 7px; } &:last-child { - padding-left: 7px; - margin-left: 5px; + padding-inline-start: 7px; + margin-inline-start: 5px; } } } @@ -3868,7 +3869,7 @@ a.status-card.compact:hover { .column-header__icon { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } .loading-indicator { @@ -3879,7 +3880,7 @@ a.status-card.compact:hover { overflow: visible; position: absolute; top: 50%; - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; @@ -4015,7 +4016,7 @@ a.status-card.compact:hover { .spoiler-button { top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; position: absolute; @@ -4023,7 +4024,7 @@ a.status-card.compact:hover { &--minified { display: block; - left: 4px; + inset-inline-start: 4px; top: 4px; width: auto; height: auto; @@ -4140,12 +4141,12 @@ a.status-card.compact:hover { &__placeholder { color: $dark-text-color; - padding-left: 2px; + padding-inline-start: 2px; font-size: 12px; } &__value-container { - padding-left: 6px; + padding-inline-start: 6px; } &__multi-value { @@ -4242,7 +4243,7 @@ a.status-card.compact:hover { color: $darker-text-color; display: inline-block; margin-bottom: 14px; - margin-left: 8px; + margin-inline-start: 8px; vertical-align: middle; } @@ -4427,7 +4428,7 @@ a.status-card.compact:hover { .emoji-picker-dropdown__modifiers { position: absolute; top: 60px; - right: 11px; + inset-inline-end: 11px; cursor: pointer; } @@ -4435,7 +4436,7 @@ a.status-card.compact:hover { position: absolute; z-index: 4; top: -4px; - left: -8px; + inset-inline-start: -8px; background: $simple-background-color; border-radius: 4px; box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); @@ -4472,7 +4473,7 @@ a.status-card.compact:hover { display: flex; height: 100vh; justify-content: center; - left: 0; + inset-inline-start: 0; opacity: 0; position: fixed; top: 0; @@ -4497,9 +4498,9 @@ a.status-card.compact:hover { .upload-area__background { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; bottom: 0; - left: 0; + inset-inline-start: 0; z-index: -1; border-radius: 4px; background: $ui-base-color; @@ -4527,7 +4528,7 @@ a.status-card.compact:hover { .fa { font-size: 34px; - margin-right: 10px; + margin-inline-end: 10px; } span { @@ -4553,7 +4554,7 @@ a.status-card.compact:hover { .upload-progress__tracker { position: absolute; - left: 0; + inset-inline-start: 0; top: 0; height: 6px; background: $ui-highlight-color; @@ -4562,7 +4563,10 @@ a.status-card.compact:hover { .emoji-button { display: block; - padding: 5px 5px 2px 2px; + padding-top: 5px; + padding-bottom: 2px; + padding-inline-start: 2px; + padding-inline-end: 5px; outline: 0; cursor: pointer; @@ -4650,7 +4654,7 @@ a.status-card.compact:hover { display: flex; align-items: center; justify-content: center; - margin-right: 10px; + margin-inline-end: 10px; } .privacy-dropdown__option__content { @@ -4716,11 +4720,11 @@ a.status-card.compact:hover { } .emoji-mart-search { - padding-right: 10px; + padding-inline-end: 10px; } .emoji-mart-search-icon { - right: 10px + 5px; + inset-inline-end: 10px + 5px; } .emoji-mart-scroll { @@ -4773,7 +4777,7 @@ a.status-card.compact:hover { display: block; padding: 15px; - padding-right: 30px; + padding-inline-end: 30px; line-height: 18px; font-size: 16px; @@ -4809,7 +4813,7 @@ a.status-card.compact:hover { .fa { position: absolute; top: 16px; - right: 10px; + inset-inline-end: 10px; z-index: 2; display: inline-block; opacity: 0; @@ -4863,7 +4867,7 @@ a.status-card.compact:hover { .fa { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } } @@ -4882,7 +4886,7 @@ a.status-card.compact:hover { .fa { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } } @@ -4920,8 +4924,8 @@ a.status-card.compact:hover { .modal-root__overlay { position: fixed; top: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; bottom: 0; background: rgba($base-overlay-background, 0.7); transition: background 0.5s; @@ -4930,7 +4934,7 @@ a.status-card.compact:hover { .modal-root__container { position: fixed; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; box-sizing: border-box; @@ -4983,16 +4987,16 @@ a.status-card.compact:hover { .media-modal__closer { position: absolute; top: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; bottom: 0; } .media-modal__navigation { position: absolute; top: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; bottom: 0; pointer-events: none; transition: opacity 0.3s linear; @@ -5035,18 +5039,18 @@ a.status-card.compact:hover { } .media-modal__nav--left { - left: 0; + inset-inline-start: 0; } .media-modal__nav--right { - right: 0; + inset-inline-end: 0; } .media-modal__overlay { max-width: 600px; position: absolute; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; bottom: 0; margin: 0 auto; @@ -5133,14 +5137,14 @@ a.status-card.compact:hover { .media-modal__close { position: absolute; - right: 8px; + inset-inline-end: 8px; top: 8px; z-index: 100; } .media-modal__zoom-button { position: absolute; - right: 64px; + inset-inline-end: 64px; top: 8px; z-index: 100; pointer-events: auto; @@ -5174,7 +5178,7 @@ a.status-card.compact:hover { & > div { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; box-sizing: border-box; @@ -5270,7 +5274,7 @@ a.status-card.compact:hover { display: inline-block; max-width: 30px; max-height: auto; - margin-left: 10px; + margin-inline-start: 10px; } .boost-modal, @@ -5325,9 +5329,9 @@ a.status-card.compact:hover { & > div { flex: 1 1 auto; - text-align: right; + text-align: end; color: $lighter-text-color; - padding-right: 10px; + padding-inline-end: 10px; } .button { @@ -5530,7 +5534,7 @@ a.status-card.compact:hover { & > span { font-size: 17px; font-weight: 500; - margin-left: 10px; + margin-inline-start: 10px; } } @@ -5554,11 +5558,11 @@ a.status-card.compact:hover { } .emoji-mart-search { - padding-right: 10px; + padding-inline-end: 10px; } .emoji-mart-search-icon { - right: 10px + 5px; + inset-inline-end: 10px + 5px; } } @@ -5621,7 +5625,7 @@ a.status-card.compact:hover { .report-modal__comment { padding: 20px; - border-right: 1px solid $ui-secondary-color; + border-inset-inline-end: 1px solid $ui-secondary-color; max-width: 320px; p { @@ -5719,7 +5723,7 @@ a.status-card.compact:hover { } button:first-child { - margin-right: 10px; + margin-inline-end: 10px; } } } @@ -5783,7 +5787,7 @@ a.status-card.compact:hover { border: 1px solid darken($simple-background-color, 14%); border-radius: 4px; padding: 6px 10px; - padding-right: 30px; + padding-inline-end: 30px; } } @@ -5807,7 +5811,7 @@ a.status-card.compact:hover { &__label { color: $inverted-text-color; margin: 0; - margin-left: 8px; + margin-inline-start: 8px; } } } @@ -5818,7 +5822,7 @@ a.status-card.compact:hover { .report-modal__close { position: absolute; top: 10px; - right: 10px; + inset-inline-end: 10px; } } @@ -5869,7 +5873,7 @@ a.status-card.compact:hover { height: 3px; position: fixed; top: 0; - left: 0; + inset-inline-start: 0; z-index: 9999; } @@ -5879,7 +5883,7 @@ a.status-card.compact:hover { color: $primary-text-color; background: rgba($base-overlay-background, 0.5); bottom: 6px; - left: 6px; + inset-inline-start: 6px; padding: 2px 6px; border-radius: 2px; font-size: 11px; @@ -5912,7 +5916,7 @@ a.status-card.compact:hover { color: $dark-text-color; padding: 8px 18px; cursor: default; - border-right: 1px solid lighten($ui-base-color, 8%); + border-inset-inline-end: 1px solid lighten($ui-base-color, 8%); display: flex; flex-direction: column; align-items: center; @@ -5927,7 +5931,7 @@ a.status-card.compact:hover { &__list { list-style: none; padding: 4px 0; - padding-left: 8px; + padding-inline-start: 8px; display: flex; flex-direction: column; justify-content: center; @@ -5977,7 +5981,7 @@ a.status-card.compact:hover { border: 0; box-sizing: border-box; display: block; - float: left; + float: inline-start; position: relative; border-radius: 4px; overflow: hidden; @@ -6015,7 +6019,7 @@ a.status-card.compact:hover { object-fit: cover; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; z-index: 0; background: $base-overlay-background; @@ -6183,8 +6187,8 @@ a.status-card.compact:hover { position: absolute; z-index: 2; bottom: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; box-sizing: border-box; background: linear-gradient( 0deg, @@ -6212,7 +6216,7 @@ a.status-card.compact:hover { display: none; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; z-index: 4; @@ -6328,7 +6332,7 @@ a.status-card.compact:hover { &.active { overflow: visible; width: 50px; - margin-right: 16px; + margin-inline-end: 16px; } &::before { @@ -6339,7 +6343,7 @@ a.status-card.compact:hover { display: block; position: absolute; height: 4px; - left: 0; + inset-inline-start: 0; top: 50%; transform: translate(0, -50%); } @@ -6349,7 +6353,7 @@ a.status-card.compact:hover { position: absolute; height: 4px; border-radius: 4px; - left: 0; + inset-inline-start: 0; top: 50%; transform: translate(0, -50%); background: lighten($ui-highlight-color, 8%); @@ -6362,8 +6366,8 @@ a.status-card.compact:hover { width: 12px; height: 12px; top: 50%; - left: 0; - margin-left: -6px; + inset-inline-start: 0; + margin-inline-start: -6px; transform: translate(0, -50%); background: lighten($ui-highlight-color, 8%); box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); @@ -6434,7 +6438,7 @@ a.status-card.compact:hover { width: 12px; height: 12px; top: 10px; - margin-left: -6px; + margin-inline-start: -6px; background: lighten($ui-highlight-color, 8%); box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); @@ -6510,7 +6514,7 @@ a.status-card.compact:hover { &__icons { position: absolute; top: 50%; - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, -50%); font-size: 24px; } @@ -6553,7 +6557,7 @@ a.status-card.compact:hover { content: ''; position: absolute; bottom: 0; - left: 50%; + inset-inline-start: 50%; width: 0; height: 0; transform: translateX(-50%); @@ -6629,7 +6633,7 @@ a.status-card.compact:hover { width: 18px; height: 18px; flex: 0 0 auto; - margin-right: 10px; + margin-inline-end: 10px; top: -1px; border-radius: 50%; vertical-align: middle; @@ -6706,10 +6710,10 @@ noscript { .navigation-bar { & > a:first-child { - will-change: margin-top, margin-left, margin-right, width; + will-change: margin-top, margin-inline-start, margin-inline-end, width; transition: margin-top $duration $delay, - margin-left $duration ($duration + $delay), - margin-right $duration ($duration + $delay); + margin-inline-start $duration ($duration + $delay), + margin-inline-end $duration ($duration + $delay); } & > .navigation-bar__profile-edit { @@ -6891,7 +6895,7 @@ noscript { cursor: pointer; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; background: rgba($base-overlay-background, 0.5); @@ -7029,13 +7033,13 @@ noscript { width: 100%; height: 100%; top: 0; - left: 0; + inset-inline-start: 0; } &__preview { position: absolute; bottom: 10px; - right: 10px; + inset-inline-end: 10px; z-index: 2; cursor: move; transition: opacity 0.1s ease; @@ -7112,7 +7116,7 @@ noscript { &__info { position: absolute; top: 10px; - left: 10px; + inset-inline-start: 10px; } &__image { @@ -7155,7 +7159,7 @@ noscript { padding-top: 10px; gap: 8px; overflow: hidden; - margin-left: -2px; // aligns the pfp with content below + margin-inline-start: -2px; // aligns the pfp with content below &__buttons { display: flex; @@ -7383,7 +7387,7 @@ noscript { .fa { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } } @@ -7433,7 +7437,7 @@ noscript { flex: 0 0 auto; font-size: 24px; font-weight: 500; - text-align: right; + text-align: end; color: $secondary-text-color; text-decoration: none; } @@ -7538,7 +7542,7 @@ noscript { &__content { flex: 1 1 auto; padding: 10px 5px; - padding-right: 15px; + padding-inline-end: 15px; overflow: hidden; &__info { @@ -7551,7 +7555,7 @@ noscript { &__relative-time { font-size: 15px; color: $darker-text-color; - padding-left: 15px; + padding-inline-start: 15px; } &__names { @@ -7641,13 +7645,13 @@ noscript { display: block; font-weight: 500; margin-bottom: 10px; - padding-right: 18px; + padding-inline-end: 18px; } &__unread { position: absolute; top: 19px; - right: 19px; + inset-inline-end: 19px; display: block; background: $highlight-text-color; border-radius: 50%; @@ -7661,7 +7665,7 @@ noscript { color: $darker-text-color; position: absolute; bottom: 3px; - right: 0; + inset-inline-end: 0; } } @@ -7678,7 +7682,7 @@ noscript { flex-wrap: wrap; align-items: center; margin-top: 15px; - margin-left: -2px; + margin-inline-start: -2px; width: calc(100% - (90px - 33px)); &__item { @@ -7719,7 +7723,7 @@ noscript { font-size: 13px; font-weight: 500; text-align: center; - margin-left: 6px; + margin-inline-start: 6px; color: $darker-text-color; } @@ -7798,10 +7802,10 @@ noscript { content: ''; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; - border-left: 4px solid $highlight-text-color; + border-inset-inline-start: 4px solid $highlight-text-color; pointer-events: none; } } @@ -7810,7 +7814,7 @@ noscript { .picture-in-picture { position: fixed; bottom: 20px; - right: 20px; + inset-inline-end: 20px; width: 300px; &__footer { @@ -7836,7 +7840,7 @@ noscript { } .account__avatar { - margin-right: 10px; + margin-inline-end: 10px; } .display-name { @@ -7902,7 +7906,7 @@ noscript { &__close { position: absolute; top: 10px; - right: 10px; + inset-inline-end: 10px; } h2 { @@ -7937,7 +7941,7 @@ noscript { .search .fa { top: 10px; - right: 10px; + inset-inline-end: 10px; color: $dark-text-color; } @@ -8021,7 +8025,7 @@ noscript { object-fit: fill; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; z-index: 0; &--hidden { @@ -8107,7 +8111,7 @@ noscript { } .account__avatar-wrapper { - margin-left: 0; + margin-inline-start: 0; } .spacer { @@ -8327,7 +8331,7 @@ noscript { &::before { content: counter(list-counter) '.'; position: absolute; - left: 0; + inset-inline-start: 0; } } @@ -8339,13 +8343,13 @@ noscript { width: 0.375em; height: 0.375em; top: 0.5em; - left: 0.25em; + inset-inline-start: 0.25em; } ul > li, ol > li { position: relative; - padding-left: 1.75em; + padding-inline-start: 1.75em; } & > ul > li p { @@ -8478,7 +8482,7 @@ noscript { &__preview { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; object-fit: cover; @@ -8684,7 +8688,7 @@ noscript { } .account__avatar-wrapper { - margin-left: 0; + margin-inline-start: 0; } .account__relationship { diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index b49b93984..fb71ad034 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -18,7 +18,7 @@ .logo { height: 42px; - margin-right: 10px; + margin-inline-end: 10px; } a { @@ -73,7 +73,7 @@ .avatar { width: 40px; height: 40px; - margin-right: 10px; + margin-inline-end: 10px; img { width: 100%; @@ -101,6 +101,6 @@ display: block; font-size: 32px; line-height: 40px; - margin-left: 10px; + margin-inline-start: 10px; } } diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss index 0d7a7df2e..c7247c3a5 100644 --- a/app/javascript/styles/mastodon/emoji_picker.scss +++ b/app/javascript/styles/mastodon/emoji_picker.scss @@ -71,7 +71,7 @@ .emoji-mart-anchor-bar { position: absolute; bottom: -5px; - left: 0; + inset-inline-start: 0; width: 100%; height: 4px; background-color: $highlight-text-color; @@ -106,7 +106,7 @@ .emoji-mart-search { padding: 10px; - padding-right: 45px; + padding-inline-end: 45px; background: $simple-background-color; position: relative; @@ -114,7 +114,7 @@ font-size: 16px; font-weight: 400; padding: 7px 9px; - padding-right: 25px; + padding-inline-end: 25px; font-family: inherit; display: block; width: 100%; @@ -142,7 +142,7 @@ .emoji-mart-search-icon { position: absolute; top: 18px; - right: 45px + 5px; + inset-inline-end: 45px + 5px; z-index: 2; padding: 2px 5px 1px; border: 0; @@ -177,7 +177,7 @@ content: ''; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; background-color: rgba($ui-secondary-color, 0.7); diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index e4539deff..7d4bde5e9 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -54,12 +54,12 @@ code { .radio > label { position: relative; - padding-left: 28px; + padding-inline-start: 28px; input { position: absolute; top: -2px; - left: 0; + inset-inline-start: 0; } } } @@ -79,7 +79,7 @@ code { .label_input, .hint { - padding-left: 28px; + padding-inline-start: 28px; } .label_input__wrapper { @@ -89,7 +89,7 @@ code { label.checkbox { position: absolute; top: 2px; - left: 0; + inset-inline-start: 0; } label a { @@ -159,7 +159,7 @@ code { li { list-style: disc; - margin-left: 18px; + margin-inline-start: 18px; } } @@ -225,7 +225,7 @@ code { &.select .hint { margin-top: 6px; - margin-left: 150px; + margin-inline-start: 150px; } } @@ -380,13 +380,13 @@ code { width: auto; position: relative; padding-top: 5px; - padding-left: 25px; + padding-inline-start: 25px; flex: 1 1 auto; } input[type='checkbox'] { position: absolute; - left: 0; + inset-inline-start: 0; top: 5px; margin: 0; } @@ -517,10 +517,10 @@ code { font-weight: 500; outline: 0; margin-bottom: 10px; - margin-right: 10px; + margin-inline-end: 10px; &:last-child { - margin-right: 0; + margin-inline-end: 0; } &:active, @@ -572,8 +572,8 @@ code { no-repeat right 8px center / auto 16px; border: 1px solid darken($ui-base-color, 14%); border-radius: 4px; - padding-left: 10px; - padding-right: 30px; + padding-inline-start: 10px; + padding-inline-end: 30px; height: 41px; } @@ -588,7 +588,7 @@ code { &__append { position: absolute; - right: 3px; + inset-inline-end: 3px; top: 1px; padding: 10px; padding-bottom: 9px; @@ -606,7 +606,7 @@ code { display: block; position: absolute; top: 0; - right: 0; + inset-inline-end: 0; bottom: 1px; width: 5px; background-image: linear-gradient( @@ -780,7 +780,7 @@ code { li { display: inline-block; - margin-right: 10px; + margin-inline-end: 10px; } a { @@ -939,7 +939,7 @@ code { .actions { padding: 30px 0; - padding-right: 20px; + padding-inline-end: 20px; flex: 0 0 auto; } } @@ -992,7 +992,7 @@ code { border-radius: 4px; display: flex; align-items: center; - padding-right: 4px; + padding-inline-end: 4px; position: relative; top: 1px; transition: border-color 300ms linear; diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss index 6170877b2..29b1f162b 100644 --- a/app/javascript/styles/mastodon/modal.scss +++ b/app/javascript/styles/mastodon/modal.scss @@ -25,7 +25,7 @@ height: 100%; position: absolute; bottom: 0; - left: 0; + inset-inline-start: 0; } } } diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss index b30932e04..bdb87d7cf 100644 --- a/app/javascript/styles/mastodon/polls.scss +++ b/app/javascript/styles/mastodon/polls.scss @@ -269,7 +269,7 @@ border: 1px solid darken($simple-background-color, 14%); border-radius: 4px; padding: 6px 10px; - padding-right: 30px; + padding-inline-end: 30px; } .icon-button.disabled { diff --git a/app/javascript/styles/mastodon/rich_text.scss b/app/javascript/styles/mastodon/rich_text.scss index 35901984b..aa41e4ad3 100644 --- a/app/javascript/styles/mastodon/rich_text.scss +++ b/app/javascript/styles/mastodon/rich_text.scss @@ -13,8 +13,8 @@ } blockquote { - padding-left: 10px; - border-left: 3px solid $darker-text-color; + padding-inline-start: 10px; + border-inset-inline-start: 3px solid $darker-text-color; color: $darker-text-color; white-space: normal; @@ -40,7 +40,7 @@ ul, ol { - margin-left: 2em; + margin-inline-start: 2em; p { margin: 0; diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index e60087dab..726135c58 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -1,273 +1,30 @@ body.rtl { direction: rtl; - .column-header > button { - text-align: right; - padding-left: 0; - padding-right: 15px; - } - - .radio-button__input { - margin-right: 0; - margin-left: 10px; - } - - .display-name, - .announcements__item { - text-align: right; - } - - .announcements__item__range { - padding-right: 0; - padding-left: 18px; - } - .reactions-bar { - margin-left: auto; - margin-right: -2px; direction: rtl; } - .reactions-bar__item__count { - margin-left: 0; - margin-right: 6px; - } - - .announcements__pagination { - right: auto; - left: 0; - } - - .notification__message { - margin-left: 0; - margin-right: 68px; - } - .announcements__mastodon, .drawer__inner__mastodon > img { transform: scaleX(-1); } - .notification__favourite-icon-wrapper { - left: auto; - right: -26px; - } - - .column-link__icon, - .column-header__icon { - margin-right: 0; - margin-left: 5px; - } - - .compose-form .compose-form__buttons-wrapper .character-counter__wrapper { - margin-right: 0; - margin-left: 4px; - } - - .navigation-bar__profile { - margin-left: 0; - margin-right: 8px; - } - - .search__input { + .compose-form .autosuggest-textarea__textarea { padding-right: 10px; - padding-left: 30px; - } - - .search__icon .fa { - right: auto; - left: 10px; + padding-left: 10px + 22px; } .columns-area { direction: rtl; } - .column-header__buttons { - left: 0; - right: auto; - margin-left: 0; - margin-right: -15px; - } - - .column-inline-form .icon-button { - margin-left: 0; - margin-right: 5px; - } - - .column-header__links .text-btn { - margin-left: 10px; - margin-right: 0; - } - - .account__avatar-wrapper { - float: right; - } - - .column-header__back-button { - padding-left: 5px; - padding-right: 0; - } - - .column-header__setting-arrows { - float: left; - - .column-header__setting-btn { - &:first-child { - padding-left: 7px; - padding-right: 5px; - } - - &:last-child { - padding-right: 7px; - padding-left: 5px; - margin-right: 5px; - margin-left: 0; - } - } - } - - .setting-toggle__label { - margin-left: 0; - margin-right: 8px; - } - - .account__header__tabs__buttons > .icon-button { - margin-right: 0; - margin-left: 8px; - } - - .account__avatar-overlay-overlay { - right: auto; - left: 0; - } - - .column-back-button--slim-button { - right: auto; - left: 0; - } - - .status__action-bar { - &__counter { - margin-right: 0; - margin-left: 11px; - - .status__action-bar-button { - margin-right: 0; - margin-left: 4px; - } - } - } - - .privacy-dropdown__dropdown { - margin-left: 0; - margin-right: 40px; - } - - .privacy-dropdown__option__icon { - margin-left: 10px; - margin-right: 0; - } - - .picture-in-picture__header__account .display-name, - .detailed-status__display-name .display-name { - text-align: right; - } - - .detailed-status__display-avatar { - margin-right: 0; - margin-left: 10px; - } - - .picture-in-picture__header__account .account__avatar { - margin-right: 0; - margin-left: 10px; - } - - .icon-button__counter { - margin-left: 0; - margin-right: 4px; - } - - .notifications-permission-banner__close { - right: auto; - left: 10px; - } - - .detailed-status__favorites, - .detailed-status__reblogs { - margin-left: 0; - margin-right: 6px; - } - - .fa-ul { - margin-left: 2.14285714em; - } - - .fa-li { - left: auto; - right: -2.14285714em; - } - .admin-wrapper { direction: rtl; } - .admin-wrapper .sidebar ul a i.fa, - a.table-action-link i.fa { - margin-right: 0; - margin-left: 5px; - } - - .simple_form .check_boxes .checkbox label { - padding-left: 0; - padding-right: 25px; - } - - .simple_form .input.with_label.boolean label.checkbox { - padding-left: 25px; - padding-right: 0; - } - - .simple_form .check_boxes .checkbox input[type='checkbox'], - .simple_form .input.boolean input[type='checkbox'] { - left: auto; - right: 0; - } - - .simple_form .input.radio_buttons .radio { - left: auto; - right: 0; - } - - .simple_form .input.radio_buttons .radio > label { - padding-right: 28px; - padding-left: 0; - } - - .simple_form .input-with-append .input input { - padding-left: 142px; - padding-right: 0; - } - - .simple_form .input.boolean label.checkbox { - left: auto; - right: 0; - } - - .simple_form .input.boolean .label_input, - .simple_form .input.boolean .hint { - padding-left: 0; - padding-right: 28px; - } - .simple_form .label_input__append { - right: auto; - left: 3px; - &::after { - right: auto; - left: 0; background-image: linear-gradient( to left, rgba(darken($ui-base-color, 10%), 0), @@ -282,49 +39,6 @@ body.rtl { no-repeat left 8px center / auto 16px; } - .table th, - .table td { - text-align: right; - } - - .filters .filter-subset { - margin-right: 0; - margin-left: 45px; - } - - @media screen and (min-width: 631px) { - .column, - .drawer { - padding-left: 5px; - padding-right: 5px; - - &:first-child { - padding-left: 5px; - padding-right: 10px; - } - } - - .columns-area > div { - .column, - .drawer { - padding-left: 5px; - padding-right: 5px; - } - } - } - - .columns-area--mobile .column, - .columns-area--mobile .drawer { - padding-left: 0; - padding-right: 0; - } - - .card__bar .display-name { - margin-left: 0; - margin-right: 15px; - text-align: right; - } - .fa-chevron-left::before { content: '\F054'; } @@ -332,19 +46,4 @@ body.rtl { .fa-chevron-right::before { content: '\F053'; } - - .column-back-button__icon { - margin-right: 0; - margin-left: 5px; - } - - .simple_form .input.radio_buttons .radio > label input { - left: auto; - right: 0; - } - - .picture-in-picture { - right: auto; - left: 20px; - } } diff --git a/app/javascript/styles/mastodon/statuses.scss b/app/javascript/styles/mastodon/statuses.scss index a42f1f42c..6c9ea916a 100644 --- a/app/javascript/styles/mastodon/statuses.scss +++ b/app/javascript/styles/mastodon/statuses.scss @@ -97,7 +97,7 @@ width: 20px; height: auto; vertical-align: middle; - margin-right: 5px; + margin-inline-end: 5px; fill: $primary-text-color; } @@ -162,7 +162,7 @@ a.button.logo-button { min-height: 48px + 2px; &__avatar { - left: 15px; + inset-inline-start: 15px; top: 17px; .account__avatar { @@ -176,12 +176,12 @@ a.button.logo-button { } &__prepend { - margin-left: 48px + 15px * 2; + margin-inline-start: 48px + 15px * 2; padding-top: 15px; } &__prepend-icon-wrapper { - left: -32px; + inset-inline-start: -32px; } .media-gallery, diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss index b644b38f1..fb1ff0781 100644 --- a/app/javascript/styles/mastodon/tables.scss +++ b/app/javascript/styles/mastodon/tables.scss @@ -10,7 +10,7 @@ line-height: 18px; vertical-align: top; border-top: 1px solid $ui-base-color; - text-align: left; + text-align: start; background: darken($ui-base-color, 4%); } @@ -91,12 +91,12 @@ &:first-child { border-radius: 4px 0 0; - border-left: 1px solid darken($ui-base-color, 8%); + border-inset-inline-start: 1px solid darken($ui-base-color, 8%); } &:last-child { border-radius: 0 4px 0 0; - border-right: 1px solid darken($ui-base-color, 8%); + border-inset-inline-end: 1px solid darken($ui-base-color, 8%); } } } @@ -125,7 +125,7 @@ button.table-action-link, a.table-action-link { text-decoration: none; display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; padding: 0 10px; color: $darker-text-color; font-weight: 500; @@ -136,11 +136,11 @@ a.table-action-link { i.fa { font-weight: 400; - margin-right: 5px; + margin-inline-end: 5px; } &:first-child { - padding-left: 0; + padding-inline-start: 0; } } @@ -172,7 +172,7 @@ a.table-action-link { &__actions, &__content { padding: 8px 0; - padding-right: 16px; + padding-inline-end: 16px; flex: 1 1 auto; } } @@ -188,8 +188,8 @@ a.table-action-link { align-items: center; &__actions { - text-align: right; - padding-right: 16px - 5px; + text-align: end; + padding-inline-end: 16px - 5px; } } @@ -296,7 +296,7 @@ a.table-action-link { display: flex; justify-content: center; align-items: center; - margin-right: 10px; + margin-inline-end: 10px; .emojione { width: 32px; @@ -315,7 +315,7 @@ a.table-action-link { &__extra { flex: 0 0 auto; - text-align: right; + text-align: end; color: $darker-text-color; font-weight: 500; } diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index ef7bfc6de..1f69f0cf0 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -39,8 +39,8 @@ width: 20px; height: 20px; margin: -3px 0 0; - margin-left: 0.075em; - margin-right: 0.075em; + margin-inline-start: 0.075em; + margin-inline-end: 0.075em; } p { @@ -171,7 +171,7 @@ margin-bottom: 15px; .fa { - margin-right: 5px; + margin-inline-end: 5px; color: $darker-text-color; } } @@ -284,7 +284,7 @@ } .trends__item__current { - padding-right: 0; + padding-inline-end: 0; } } } @@ -309,7 +309,7 @@ padding: 10px; &:first-child { - text-align: left; + text-align: start; } } @@ -340,9 +340,9 @@ tbody td.accounts-table__extra { width: 120px; - text-align: right; + text-align: end; color: $darker-text-color; - padding-right: 16px; + padding-inline-end: 16px; a { text-decoration: none; @@ -363,7 +363,7 @@ tbody td.accounts-table__interrelationships { width: 21px; - padding-right: 16px; + padding-inline-end: 16px; } .fa { -- cgit From 68a192e7186733885b1d70160170c4772fab7242 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 30 Mar 2023 15:16:20 +0200 Subject: Change "direct message" nomenclature to "private mention" in web UI (#24248) --- app/javascript/mastodon/components/status.jsx | 7 ++++ .../mastodon/components/status_action_bar.jsx | 2 +- .../features/account/components/header.jsx | 2 +- .../mastodon/features/direct_timeline/index.jsx | 4 +- .../mastodon/features/getting_started/index.jsx | 2 +- .../features/status/components/action_bar.jsx | 2 +- .../features/status/components/detailed_status.jsx | 10 ++++- app/javascript/mastodon/features/status/index.jsx | 2 +- .../features/ui/components/navigation_panel.jsx | 2 +- app/javascript/mastodon/locales/af.json | 1 + app/javascript/mastodon/locales/an.json | 1 + app/javascript/mastodon/locales/ar.json | 1 + app/javascript/mastodon/locales/ast.json | 1 + app/javascript/mastodon/locales/be.json | 1 + app/javascript/mastodon/locales/bg.json | 1 + app/javascript/mastodon/locales/bn.json | 1 + app/javascript/mastodon/locales/br.json | 1 + app/javascript/mastodon/locales/bs.json | 1 + app/javascript/mastodon/locales/ca.json | 1 + app/javascript/mastodon/locales/ckb.json | 1 + app/javascript/mastodon/locales/co.json | 1 + app/javascript/mastodon/locales/cs.json | 1 + app/javascript/mastodon/locales/csb.json | 1 + app/javascript/mastodon/locales/cy.json | 1 + app/javascript/mastodon/locales/da.json | 1 + app/javascript/mastodon/locales/de.json | 1 + .../mastodon/locales/defaultMessages.json | 20 ++++++---- app/javascript/mastodon/locales/el.json | 1 + app/javascript/mastodon/locales/en-GB.json | 1 + app/javascript/mastodon/locales/en.json | 13 ++++--- app/javascript/mastodon/locales/eo.json | 1 + app/javascript/mastodon/locales/es-AR.json | 1 + app/javascript/mastodon/locales/es-MX.json | 1 + app/javascript/mastodon/locales/es.json | 1 + app/javascript/mastodon/locales/et.json | 1 + app/javascript/mastodon/locales/eu.json | 1 + app/javascript/mastodon/locales/fa.json | 1 + app/javascript/mastodon/locales/fi.json | 1 + app/javascript/mastodon/locales/fo.json | 1 + app/javascript/mastodon/locales/fr-QC.json | 1 + app/javascript/mastodon/locales/fr.json | 1 + app/javascript/mastodon/locales/fy.json | 1 + app/javascript/mastodon/locales/ga.json | 1 + app/javascript/mastodon/locales/gd.json | 1 + app/javascript/mastodon/locales/gl.json | 1 + app/javascript/mastodon/locales/he.json | 1 + app/javascript/mastodon/locales/hi.json | 1 + app/javascript/mastodon/locales/hr.json | 1 + app/javascript/mastodon/locales/hu.json | 1 + app/javascript/mastodon/locales/hy.json | 1 + app/javascript/mastodon/locales/id.json | 1 + app/javascript/mastodon/locales/ig.json | 1 + app/javascript/mastodon/locales/io.json | 1 + app/javascript/mastodon/locales/is.json | 1 + app/javascript/mastodon/locales/it.json | 1 + app/javascript/mastodon/locales/ja.json | 1 + app/javascript/mastodon/locales/ka.json | 1 + app/javascript/mastodon/locales/kab.json | 1 + app/javascript/mastodon/locales/kk.json | 1 + app/javascript/mastodon/locales/kn.json | 1 + app/javascript/mastodon/locales/ko.json | 1 + app/javascript/mastodon/locales/ku.json | 1 + app/javascript/mastodon/locales/kw.json | 1 + app/javascript/mastodon/locales/la.json | 1 + app/javascript/mastodon/locales/lt.json | 1 + app/javascript/mastodon/locales/lv.json | 1 + app/javascript/mastodon/locales/mk.json | 1 + app/javascript/mastodon/locales/ml.json | 1 + app/javascript/mastodon/locales/mr.json | 1 + app/javascript/mastodon/locales/ms.json | 1 + app/javascript/mastodon/locales/my.json | 1 + app/javascript/mastodon/locales/nl.json | 1 + app/javascript/mastodon/locales/nn.json | 1 + app/javascript/mastodon/locales/no.json | 1 + app/javascript/mastodon/locales/oc.json | 1 + app/javascript/mastodon/locales/pa.json | 1 + app/javascript/mastodon/locales/pl.json | 1 + app/javascript/mastodon/locales/pt-BR.json | 1 + app/javascript/mastodon/locales/pt-PT.json | 1 + app/javascript/mastodon/locales/ro.json | 1 + app/javascript/mastodon/locales/ru.json | 1 + app/javascript/mastodon/locales/sa.json | 1 + app/javascript/mastodon/locales/sc.json | 1 + app/javascript/mastodon/locales/sco.json | 1 + app/javascript/mastodon/locales/si.json | 1 + app/javascript/mastodon/locales/sk.json | 1 + app/javascript/mastodon/locales/sl.json | 1 + app/javascript/mastodon/locales/sq.json | 1 + app/javascript/mastodon/locales/sr-Latn.json | 1 + app/javascript/mastodon/locales/sr.json | 1 + app/javascript/mastodon/locales/sv.json | 1 + app/javascript/mastodon/locales/szl.json | 1 + app/javascript/mastodon/locales/ta.json | 1 + app/javascript/mastodon/locales/tai.json | 1 + app/javascript/mastodon/locales/te.json | 1 + app/javascript/mastodon/locales/th.json | 1 + app/javascript/mastodon/locales/tr.json | 1 + app/javascript/mastodon/locales/tt.json | 1 + app/javascript/mastodon/locales/ug.json | 1 + app/javascript/mastodon/locales/uk.json | 1 + app/javascript/mastodon/locales/ur.json | 1 + app/javascript/mastodon/locales/uz.json | 1 + app/javascript/mastodon/locales/vi.json | 1 + app/javascript/mastodon/locales/zgh.json | 1 + app/javascript/mastodon/locales/zh-CN.json | 1 + app/javascript/mastodon/locales/zh-HK.json | 1 + app/javascript/mastodon/locales/zh-TW.json | 1 + app/javascript/styles/mastodon-light/diff.scss | 10 ++++- app/javascript/styles/mastodon/components.scss | 45 +++++++++++++++++++++- 109 files changed, 191 insertions(+), 26 deletions(-) (limited to 'app/javascript/styles/mastodon/components.scss') diff --git a/app/javascript/mastodon/components/status.jsx b/app/javascript/mastodon/components/status.jsx index 2d200a55b..281e69874 100644 --- a/app/javascript/mastodon/components/status.jsx +++ b/app/javascript/mastodon/components/status.jsx @@ -386,6 +386,13 @@ class Status extends ImmutablePureComponent { account = status.get('account'); status = status.get('reblog'); + } else if (status.get('visibility') === 'direct') { + prepend = ( +
+
+ +
+ ); } else if (showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id'])) { const display_name_html = { __html: status.getIn(['account', 'display_name_html']) }; diff --git a/app/javascript/mastodon/components/status_action_bar.jsx b/app/javascript/mastodon/components/status_action_bar.jsx index 08e37e089..7b4031b68 100644 --- a/app/javascript/mastodon/components/status_action_bar.jsx +++ b/app/javascript/mastodon/components/status_action_bar.jsx @@ -14,7 +14,7 @@ const messages = defineMessages({ delete: { id: 'status.delete', defaultMessage: 'Delete' }, redraft: { id: 'status.redraft', defaultMessage: 'Delete & re-draft' }, edit: { id: 'status.edit', defaultMessage: 'Edit' }, - direct: { id: 'status.direct', defaultMessage: 'Direct message @{name}' }, + direct: { id: 'status.direct', defaultMessage: 'Privately mention @{name}' }, mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' }, mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' }, block: { id: 'account.block', defaultMessage: 'Block @{name}' }, diff --git a/app/javascript/mastodon/features/account/components/header.jsx b/app/javascript/mastodon/features/account/components/header.jsx index be6b17896..72eb7e6b6 100644 --- a/app/javascript/mastodon/features/account/components/header.jsx +++ b/app/javascript/mastodon/features/account/components/header.jsx @@ -28,7 +28,7 @@ const messages = defineMessages({ linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' }, account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' }, mention: { id: 'account.mention', defaultMessage: 'Mention @{name}' }, - direct: { id: 'account.direct', defaultMessage: 'Direct message @{name}' }, + direct: { id: 'account.direct', defaultMessage: 'Privately mention @{name}' }, unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' }, block: { id: 'account.block', defaultMessage: 'Block @{name}' }, mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' }, diff --git a/app/javascript/mastodon/features/direct_timeline/index.jsx b/app/javascript/mastodon/features/direct_timeline/index.jsx index e2667d8e9..5d4a7c49a 100644 --- a/app/javascript/mastodon/features/direct_timeline/index.jsx +++ b/app/javascript/mastodon/features/direct_timeline/index.jsx @@ -11,7 +11,7 @@ import ColumnHeader from 'mastodon/components/column_header'; import ConversationsListContainer from './containers/conversations_list_container'; const messages = defineMessages({ - title: { id: 'column.direct', defaultMessage: 'Direct messages' }, + title: { id: 'column.direct', defaultMessage: 'Private mentions' }, }); class DirectTimeline extends React.PureComponent { @@ -91,7 +91,7 @@ class DirectTimeline extends React.PureComponent { timelineId='direct' onLoadMore={this.handleLoadMore} prepend={
} - emptyMessage={} + emptyMessage={} /> diff --git a/app/javascript/mastodon/features/getting_started/index.jsx b/app/javascript/mastodon/features/getting_started/index.jsx index ee8a009ee..29659acc7 100644 --- a/app/javascript/mastodon/features/getting_started/index.jsx +++ b/app/javascript/mastodon/features/getting_started/index.jsx @@ -23,7 +23,7 @@ const messages = defineMessages({ settings_subheading: { id: 'column_subheading.settings', defaultMessage: 'Settings' }, community_timeline: { id: 'navigation_bar.community_timeline', defaultMessage: 'Local timeline' }, explore: { id: 'navigation_bar.explore', defaultMessage: 'Explore' }, - direct: { id: 'navigation_bar.direct', defaultMessage: 'Direct messages' }, + direct: { id: 'navigation_bar.direct', defaultMessage: 'Private mentions' }, bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' }, preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' }, follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' }, diff --git a/app/javascript/mastodon/features/status/components/action_bar.jsx b/app/javascript/mastodon/features/status/components/action_bar.jsx index 5cbe4984c..0c74c4cc4 100644 --- a/app/javascript/mastodon/features/status/components/action_bar.jsx +++ b/app/javascript/mastodon/features/status/components/action_bar.jsx @@ -13,7 +13,7 @@ const messages = defineMessages({ delete: { id: 'status.delete', defaultMessage: 'Delete' }, redraft: { id: 'status.redraft', defaultMessage: 'Delete & re-draft' }, edit: { id: 'status.edit', defaultMessage: 'Edit' }, - direct: { id: 'status.direct', defaultMessage: 'Direct message @{name}' }, + direct: { id: 'status.direct', defaultMessage: 'Privately mention @{name}' }, mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' }, reply: { id: 'status.reply', defaultMessage: 'Reply' }, reblog: { id: 'status.reblog', defaultMessage: 'Boost' }, diff --git a/app/javascript/mastodon/features/status/components/detailed_status.jsx b/app/javascript/mastodon/features/status/components/detailed_status.jsx index 8a2194450..e4e572026 100644 --- a/app/javascript/mastodon/features/status/components/detailed_status.jsx +++ b/app/javascript/mastodon/features/status/components/detailed_status.jsx @@ -6,7 +6,7 @@ import DisplayName from '../../../components/display_name'; import StatusContent from '../../../components/status_content'; import MediaGallery from '../../../components/media_gallery'; import { Link } from 'react-router-dom'; -import { injectIntl, defineMessages, FormattedDate } from 'react-intl'; +import { injectIntl, defineMessages, FormattedDate, FormattedMessage } from 'react-intl'; import Card from './card'; import ImmutablePureComponent from 'react-immutable-pure-component'; import Video from '../../video'; @@ -262,7 +262,13 @@ class DetailedStatus extends ImmutablePureComponent { return (
-
+
+ {status.get('visibility') === 'direct' && ( +
+
+ +
+ )}
diff --git a/app/javascript/mastodon/features/status/index.jsx b/app/javascript/mastodon/features/status/index.jsx index 358ad14c4..1d7cb685f 100644 --- a/app/javascript/mastodon/features/status/index.jsx +++ b/app/javascript/mastodon/features/status/index.jsx @@ -630,7 +630,7 @@ class Status extends ImmutablePureComponent { {ancestors} -
+
") no-repeat right 8px center / auto 16px; } + +.status__wrapper-direct { + background-color: rgba($ui-highlight-color, 0.1); + + &:focus { + background-color: rgba($ui-highlight-color, 0.15); + } +} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index b9303f2ef..6d20be541 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1244,7 +1244,7 @@ body > [data-popper-placement] { .status__prepend { padding: 16px; padding-bottom: 0; - display: flex; + display: inline-flex; gap: 10px; font-size: 15px; line-height: 22px; @@ -1262,6 +1262,18 @@ body > [data-popper-placement] { } } +.status__wrapper-direct { + background: mix($ui-base-color, $ui-highlight-color, 95%); + + &:focus { + background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%); + } + + .status__prepend { + color: $highlight-text-color; + } +} + .status__action-bar { display: flex; justify-content: space-between; @@ -1315,6 +1327,11 @@ body > [data-popper-placement] { .audio-player { margin-top: 16px; } + + .status__prepend { + padding: 0; + margin-bottom: 16px; + } } .detailed-status__meta { @@ -1333,6 +1350,32 @@ body > [data-popper-placement] { padding: 10px 0; } +.detailed-status__wrapper-direct { + .detailed-status, + .detailed-status__action-bar { + background: mix($ui-base-color, $ui-highlight-color, 95%); + } + + &:focus { + .detailed-status, + .detailed-status__action-bar { + background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%); + } + } + + .detailed-status__action-bar { + border-top-color: mix( + lighten($ui-base-color, 8%), + $ui-highlight-color, + 95% + ); + } + + .status__prepend { + color: $highlight-text-color; + } +} + .detailed-status__link { color: inherit; text-decoration: none; -- cgit From 46483ae849bc06ee74f4745f4564b213e742c51c Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 1 Apr 2023 09:27:23 +0200 Subject: Fix regressions from change in account row design in web UI (#24343) --- app/helpers/home_helper.rb | 2 +- app/javascript/mastodon/components/account.jsx | 30 ++++++++++++---------- .../mastodon/components/server_banner.jsx | 2 +- app/javascript/mastodon/features/about/index.jsx | 2 +- app/javascript/styles/mastodon/components.scss | 21 ++++++++------- 5 files changed, 32 insertions(+), 25 deletions(-) (limited to 'app/javascript/styles/mastodon/components.scss') diff --git a/app/helpers/home_helper.rb b/app/helpers/home_helper.rb index ea2196086..c5b83326d 100644 --- a/app/helpers/home_helper.rb +++ b/app/helpers/home_helper.rb @@ -8,7 +8,7 @@ module HomeHelper end def account_link_to(account, button = '', path: nil) - content_tag(:div, class: 'account') do + content_tag(:div, class: 'account account--minimal') do content_tag(:div, class: 'account__wrapper') do section = if account.nil? content_tag(:div, class: 'account__display-name') do diff --git a/app/javascript/mastodon/components/account.jsx b/app/javascript/mastodon/components/account.jsx index 0ee0e4551..a8a47ecac 100644 --- a/app/javascript/mastodon/components/account.jsx +++ b/app/javascript/mastodon/components/account.jsx @@ -1,4 +1,4 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import Avatar from './avatar'; @@ -13,6 +13,7 @@ import { Link } from 'react-router-dom'; import { counterRenderer } from 'mastodon/components/common_counter'; import ShortNumber from 'mastodon/components/short_number'; import Icon from 'mastodon/components/icon'; +import classNames from 'classnames'; const messages = defineMessages({ follow: { id: 'account.follow', defaultMessage: 'Follow' }, @@ -57,6 +58,7 @@ class Account extends ImmutablePureComponent { onMuteNotifications: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, hidden: PropTypes.bool, + minimal: PropTypes.bool, actionIcon: PropTypes.string, actionTitle: PropTypes.string, defaultAction: PropTypes.string, @@ -92,14 +94,14 @@ class Account extends ImmutablePureComponent { }; render () { - const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size } = this.props; + const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props; if (!account) { return ( -
+
-
+
@@ -113,10 +115,10 @@ class Account extends ImmutablePureComponent { if (hidden) { return ( - + <> {account.get('display_name')} {account.get('username')} - + ); } @@ -144,10 +146,10 @@ class Account extends ImmutablePureComponent { hidingNotificationsButton = ; } buttons = ( - + <> {hidingNotificationsButton} - + ); } else if (defaultAction === 'mute') { buttons = ; @@ -173,7 +175,7 @@ class Account extends ImmutablePureComponent { } return ( -
+
@@ -182,13 +184,15 @@ class Account extends ImmutablePureComponent {
- {verification} {muteTimeRemaining} + {!minimal && <> {verification} {muteTimeRemaining}}
-
- {buttons} -
+ {!minimal && ( +
+ {buttons} +
+ )}
); diff --git a/app/javascript/mastodon/components/server_banner.jsx b/app/javascript/mastodon/components/server_banner.jsx index c21e414b4..e5f5aa8ee 100644 --- a/app/javascript/mastodon/components/server_banner.jsx +++ b/app/javascript/mastodon/components/server_banner.jsx @@ -59,7 +59,7 @@ class ServerBanner extends React.PureComponent {

- +
diff --git a/app/javascript/mastodon/features/about/index.jsx b/app/javascript/mastodon/features/about/index.jsx index aa3d5b7f8..2804c4a21 100644 --- a/app/javascript/mastodon/features/about/index.jsx +++ b/app/javascript/mastodon/features/about/index.jsx @@ -123,7 +123,7 @@ class About extends React.PureComponent {

- +
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 6d20be541..32dcd59b6 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1427,15 +1427,6 @@ body > [data-popper-placement] { padding: 16px; border-bottom: 1px solid lighten($ui-base-color, 8%); - &.compact { - padding: 0; - border-bottom: 0; - - .account__avatar-wrapper { - margin-inline-start: 0; - } - } - .account__display-name { flex: 1 1 auto; display: flex; @@ -1455,6 +1446,18 @@ body > [data-popper-placement] { } } + &--minimal { + .account__display-name { + .display-name { + margin-bottom: 0; + } + + .display-name strong { + display: block; + } + } + } + &__note { white-space: nowrap; overflow: hidden; -- cgit From 2b113764117c9ab98875141bcf1758ba8be58173 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 1 Apr 2023 09:59:10 +0200 Subject: Change search pop-out in web UI (#24305) --- app/javascript/mastodon/actions/search.js | 45 +++- .../features/compose/components/search.jsx | 289 +++++++++++++++++---- .../features/compose/components/search_results.jsx | 2 +- .../compose/containers/search_container.js | 22 +- .../compose/containers/warning_container.jsx | 30 +-- .../mastodon/features/explore/results.jsx | 2 +- app/javascript/mastodon/locales/en.json | 2 +- app/javascript/mastodon/reducers/search.js | 9 +- app/javascript/mastodon/utils/hashtags.js | 47 ++++ app/javascript/styles/mastodon/components.scss | 88 ++++++- 10 files changed, 446 insertions(+), 90 deletions(-) create mode 100644 app/javascript/mastodon/utils/hashtags.js (limited to 'app/javascript/styles/mastodon/components.scss') diff --git a/app/javascript/mastodon/actions/search.js b/app/javascript/mastodon/actions/search.js index 666c6c223..56608f28b 100644 --- a/app/javascript/mastodon/actions/search.js +++ b/app/javascript/mastodon/actions/search.js @@ -14,6 +14,9 @@ export const SEARCH_EXPAND_REQUEST = 'SEARCH_EXPAND_REQUEST'; export const SEARCH_EXPAND_SUCCESS = 'SEARCH_EXPAND_SUCCESS'; export const SEARCH_EXPAND_FAIL = 'SEARCH_EXPAND_FAIL'; +export const SEARCH_RESULT_CLICK = 'SEARCH_RESULT_CLICK'; +export const SEARCH_RESULT_FORGET = 'SEARCH_RESULT_FORGET'; + export function changeSearch(value) { return { type: SEARCH_CHANGE, @@ -27,7 +30,7 @@ export function clearSearch() { }; } -export function submitSearch() { +export function submitSearch(type) { return (dispatch, getState) => { const value = getState().getIn(['search', 'value']); const signedIn = !!getState().getIn(['meta', 'me']); @@ -44,6 +47,7 @@ export function submitSearch() { q: value, resolve: signedIn, limit: 5, + type, }, }).then(response => { if (response.data.accounts) { @@ -130,3 +134,42 @@ export const expandSearchFail = error => ({ export const showSearch = () => ({ type: SEARCH_SHOW, }); + +export const openURL = routerHistory => (dispatch, getState) => { + const value = getState().getIn(['search', 'value']); + const signedIn = !!getState().getIn(['meta', 'me']); + + if (!signedIn) { + return; + } + + dispatch(fetchSearchRequest()); + + api(getState).get('/api/v2/search', { params: { q: value, resolve: true } }).then(response => { + if (response.data.accounts?.length > 0) { + dispatch(importFetchedAccounts(response.data.accounts)); + routerHistory.push(`/@${response.data.accounts[0].acct}`); + } else if (response.data.statuses?.length > 0) { + dispatch(importFetchedStatuses(response.data.statuses)); + routerHistory.push(`/@${response.data.statuses[0].account.acct}/${response.data.statuses[0].id}`); + } + + dispatch(fetchSearchSuccess(response.data, value)); + }).catch(err => { + dispatch(fetchSearchFail(err)); + }); +}; + +export const clickSearchResult = (q, type) => ({ + type: SEARCH_RESULT_CLICK, + + result: { + type, + q, + }, +}); + +export const forgetSearchResult = q => ({ + type: SEARCH_RESULT_FORGET, + q, +}); diff --git a/app/javascript/mastodon/features/compose/components/search.jsx b/app/javascript/mastodon/features/compose/components/search.jsx index 5d2d8d194..717ecea37 100644 --- a/app/javascript/mastodon/features/compose/components/search.jsx +++ b/app/javascript/mastodon/features/compose/components/search.jsx @@ -1,37 +1,17 @@ import React from 'react'; import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; -import Overlay from 'react-overlays/Overlay'; -import { searchEnabled } from '../../../initial_state'; +import { searchEnabled } from 'mastodon/initial_state'; import Icon from 'mastodon/components/icon'; +import classNames from 'classnames'; +import { HASHTAG_REGEX } from 'mastodon/utils/hashtags'; const messages = defineMessages({ placeholder: { id: 'search.placeholder', defaultMessage: 'Search' }, placeholderSignedIn: { id: 'search.search_or_paste', defaultMessage: 'Search or paste URL' }, }); -class SearchPopout extends React.PureComponent { - - render () { - const extraInformation = searchEnabled ? : ; - return ( -
-

- -
    -
  • #example
    • -
  • @username@domain
    • -
  • URL
    • -
  • URL
    • -
- - {extraInformation} -
- ); - } - -} - class Search extends React.PureComponent { static contextTypes = { @@ -41,9 +21,13 @@ class Search extends React.PureComponent { static propTypes = { value: PropTypes.string.isRequired, + recent: ImmutablePropTypes.orderedSet, submitted: PropTypes.bool, onChange: PropTypes.func.isRequired, onSubmit: PropTypes.func.isRequired, + onOpenURL: PropTypes.func.isRequired, + onClickSearchResult: PropTypes.func.isRequired, + onForgetSearchResult: PropTypes.func.isRequired, onClear: PropTypes.func.isRequired, onShow: PropTypes.func.isRequired, openInRoute: PropTypes.bool, @@ -53,44 +37,94 @@ class Search extends React.PureComponent { state = { expanded: false, + selectedOption: -1, + options: [], }; setRef = c => { this.searchForm = c; }; - handleChange = (e) => { - this.props.onChange(e.target.value); + handleChange = ({ target }) => { + const { onChange } = this.props; + + onChange(target.value); + + this._calculateOptions(target.value); }; - handleClear = (e) => { + handleClear = e => { + const { value, submitted, onClear } = this.props; + e.preventDefault(); - if (this.props.value.length > 0 || this.props.submitted) { - this.props.onClear(); + if (value.length > 0 || submitted) { + onClear(); + this.setState({ options: [], selectedOption: -1 }); } }; - handleKeyUp = (e) => { - if (e.key === 'Enter') { + handleKeyDown = (e) => { + const { selectedOption } = this.state; + const options = this._getOptions(); + + switch(e.key) { + case 'Escape': + e.preventDefault(); + this._unfocus(); + + break; + case 'ArrowDown': + e.preventDefault(); + + if (options.length > 0) { + this.setState({ selectedOption: Math.min(selectedOption + 1, options.length - 1) }); + } + + break; + case 'ArrowUp': + e.preventDefault(); + + if (options.length > 0) { + this.setState({ selectedOption: Math.max(selectedOption - 1, -1) }); + } + + break; + case 'Enter': e.preventDefault(); - this.props.onSubmit(); + if (selectedOption === -1) { + this._submit(); + } else if (options.length > 0) { + options[selectedOption].action(); + } + + this._unfocus(); - if (this.props.openInRoute) { - this.context.router.history.push('/search'); + break; + case 'Delete': + if (selectedOption > -1 && options.length > 0) { + const search = options[selectedOption]; + + if (typeof search.forget === 'function') { + e.preventDefault(); + search.forget(e); + } } - } else if (e.key === 'Escape') { - document.querySelector('.ui').parentElement.focus(); + + break; } }; handleFocus = () => { - this.setState({ expanded: true }); - this.props.onShow(); + const { onShow, singleColumn } = this.props; + + this.setState({ expanded: true, selectedOption: -1 }); + onShow(); - if (this.searchForm && !this.props.singleColumn) { + if (this.searchForm && !singleColumn) { const { left, right } = this.searchForm.getBoundingClientRect(); + if (left < 0 || right > (window.innerWidth || document.documentElement.clientWidth)) { this.searchForm.scrollIntoView(); } @@ -98,21 +132,148 @@ class Search extends React.PureComponent { }; handleBlur = () => { - this.setState({ expanded: false }); + this.setState({ expanded: false, selectedOption: -1 }); }; findTarget = () => { return this.searchForm; }; + handleHashtagClick = () => { + const { router } = this.context; + const { value, onClickSearchResult } = this.props; + + const query = value.trim().replace(/^#/, ''); + + router.history.push(`/tags/${query}`); + onClickSearchResult(query, 'hashtag'); + }; + + handleAccountClick = () => { + const { router } = this.context; + const { value, onClickSearchResult } = this.props; + + const query = value.trim().replace(/^@/, ''); + + router.history.push(`/@${query}`); + onClickSearchResult(query, 'account'); + }; + + handleURLClick = () => { + const { router } = this.context; + const { onOpenURL } = this.props; + + onOpenURL(router.history); + }; + + handleStatusSearch = () => { + this._submit('statuses'); + }; + + handleAccountSearch = () => { + this._submit('accounts'); + }; + + handleRecentSearchClick = search => { + const { router } = this.context; + + if (search.get('type') === 'account') { + router.history.push(`/@${search.get('q')}`); + } else if (search.get('type') === 'hashtag') { + router.history.push(`/tags/${search.get('q')}`); + } + }; + + handleForgetRecentSearchClick = search => { + const { onForgetSearchResult } = this.props; + + onForgetSearchResult(search.get('q')); + }; + + _unfocus () { + document.querySelector('.ui').parentElement.focus(); + } + + _submit (type) { + const { onSubmit, openInRoute } = this.props; + const { router } = this.context; + + onSubmit(type); + + if (openInRoute) { + router.history.push('/search'); + } + } + + _getOptions () { + const { options } = this.state; + + if (options.length > 0) { + return options; + } + + const { recent } = this.props; + + return recent.toArray().map(search => ({ + label: search.get('type') === 'account' ? `@${search.get('q')}` : `#${search.get('q')}`, + + action: () => this.handleRecentSearchClick(search), + + forget: e => { + e.stopPropagation(); + this.handleForgetRecentSearchClick(search); + }, + })); + } + + _calculateOptions (value) { + const trimmedValue = value.trim(); + const options = []; + + if (trimmedValue.length > 0) { + const couldBeURL = trimmedValue.startsWith('https://') && !trimmedValue.includes(' '); + + if (couldBeURL) { + options.push({ key: 'open-url', label: , action: this.handleURLClick }); + } + + const couldBeHashtag = (trimmedValue.startsWith('#') && trimmedValue.length > 1) || trimmedValue.match(HASHTAG_REGEX); + + if (couldBeHashtag) { + options.push({ key: 'go-to-hashtag', label: #{trimmedValue.replace(/^#/, '')} }} />, action: this.handleHashtagClick }); + } + + const couldBeUsername = trimmedValue.match(/^@?[a-z0-9_-]+(@[^\s]+)?$/i); + + if (couldBeUsername) { + options.push({ key: 'go-to-account', label: @{trimmedValue.replace(/^@/, '')} }} />, action: this.handleAccountClick }); + } + + const couldBeStatusSearch = searchEnabled; + + if (couldBeStatusSearch) { + options.push({ key: 'status-search', label: {trimmedValue} }} />, action: this.handleStatusSearch }); + } + + const couldBeUserSearch = true; + + if (couldBeUserSearch) { + options.push({ key: 'account-search', label: {trimmedValue} }} />, action: this.handleAccountSearch }); + } + } + + this.setState({ options }); + } + render () { - const { intl, value, submitted } = this.props; - const { expanded } = this.state; + const { intl, value, submitted, recent } = this.props; + const { expanded, options, selectedOption } = this.state; const { signedIn } = this.context.identity; + const hasValue = value.length > 0 || submitted; return ( -
+
@@ -130,15 +291,41 @@ class Search extends React.PureComponent {
- - {({ props, placement }) => ( -
-
- + +
+ {options.length === 0 && ( + <> +

+ +
+ {recent.size > 0 ? this._getOptions().map(({ label, action, forget }, i) => ( + + + )) : ( +
+ +
+ )}
-
+ )} - + + {options.length > 0 && ( + <> +

+ +
+ {options.map(({ key, label, action }, i) => ( + + ))} +
+ + )} +
); } diff --git a/app/javascript/mastodon/features/compose/components/search_results.jsx b/app/javascript/mastodon/features/compose/components/search_results.jsx index 78da3ca27..1dccd950c 100644 --- a/app/javascript/mastodon/features/compose/components/search_results.jsx +++ b/app/javascript/mastodon/features/compose/components/search_results.jsx @@ -77,7 +77,7 @@ class SearchResults extends ImmutablePureComponent { count += results.get('accounts').size; accounts = (
-
+
{results.get('accounts').map(accountId => )} diff --git a/app/javascript/mastodon/features/compose/containers/search_container.js b/app/javascript/mastodon/features/compose/containers/search_container.js index 392bd0f56..3ee55fae5 100644 --- a/app/javascript/mastodon/features/compose/containers/search_container.js +++ b/app/javascript/mastodon/features/compose/containers/search_container.js @@ -4,12 +4,16 @@ import { clearSearch, submitSearch, showSearch, -} from '../../../actions/search'; + openURL, + clickSearchResult, + forgetSearchResult, +} from 'mastodon/actions/search'; import Search from '../components/search'; const mapStateToProps = state => ({ value: state.getIn(['search', 'value']), submitted: state.getIn(['search', 'submitted']), + recent: state.getIn(['search', 'recent']), }); const mapDispatchToProps = dispatch => ({ @@ -22,14 +26,26 @@ const mapDispatchToProps = dispatch => ({ dispatch(clearSearch()); }, - onSubmit () { - dispatch(submitSearch()); + onSubmit (type) { + dispatch(submitSearch(type)); }, onShow () { dispatch(showSearch()); }, + onOpenURL (routerHistory) { + dispatch(openURL(routerHistory)); + }, + + onClickSearchResult (q, type) { + dispatch(clickSearchResult(q, type)); + }, + + onForgetSearchResult (q) { + dispatch(forgetSearchResult(q)); + }, + }); export default connect(mapStateToProps, mapDispatchToProps)(Search); diff --git a/app/javascript/mastodon/features/compose/containers/warning_container.jsx b/app/javascript/mastodon/features/compose/containers/warning_container.jsx index 3c6ed483d..e99f5dacd 100644 --- a/app/javascript/mastodon/features/compose/containers/warning_container.jsx +++ b/app/javascript/mastodon/features/compose/containers/warning_container.jsx @@ -3,36 +3,12 @@ import { connect } from 'react-redux'; import Warning from '../components/warning'; import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; -import { me } from '../../../initial_state'; - -const buildHashtagRE = () => { - try { - const HASHTAG_SEPARATORS = '_\\u00b7\\u200c'; - const ALPHA = '\\p{L}\\p{M}'; - const WORD = '\\p{L}\\p{M}\\p{N}\\p{Pc}'; - return new RegExp( - '(?:^|[^\\/\\)\\w])#((' + - '[' + WORD + '_]' + - '[' + WORD + HASHTAG_SEPARATORS + ']*' + - '[' + ALPHA + HASHTAG_SEPARATORS + ']' + - '[' + WORD + HASHTAG_SEPARATORS +']*' + - '[' + WORD + '_]' + - ')|(' + - '[' + WORD + '_]*' + - '[' + ALPHA + ']' + - '[' + WORD + '_]*' + - '))', 'iu', - ); - } catch { - return /(?:^|[^/)\w])#(\w*[a-zA-Z·]\w*)/i; - } -}; - -const APPROX_HASHTAG_RE = buildHashtagRE(); +import { me } from 'mastodon/initial_state'; +import { HASHTAG_PATTERN_REGEX } from 'mastodon/utils/hashtags'; const mapStateToProps = state => ({ needsLockWarning: state.getIn(['compose', 'privacy']) === 'private' && !state.getIn(['accounts', me, 'locked']), - hashtagWarning: state.getIn(['compose', 'privacy']) !== 'public' && APPROX_HASHTAG_RE.test(state.getIn(['compose', 'text'])), + hashtagWarning: state.getIn(['compose', 'privacy']) !== 'public' && HASHTAG_PATTERN_REGEX.test(state.getIn(['compose', 'text'])), directMessageWarning: state.getIn(['compose', 'privacy']) === 'direct', }); diff --git a/app/javascript/mastodon/features/explore/results.jsx b/app/javascript/mastodon/features/explore/results.jsx index 27132f132..9725cf35c 100644 --- a/app/javascript/mastodon/features/explore/results.jsx +++ b/app/javascript/mastodon/features/explore/results.jsx @@ -105,7 +105,7 @@ class Results extends React.PureComponent {
- +
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index 3bdba3b1d..3d59fa01d 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -530,7 +530,7 @@ "search_popout.tips.status": "post", "search_popout.tips.text": "Simple text returns matching display names, usernames and hashtags", "search_popout.tips.user": "user", - "search_results.accounts": "People", + "search_results.accounts": "Profiles", "search_results.all": "All", "search_results.hashtags": "Hashtags", "search_results.nothing_found": "Could not find anything for these search terms", diff --git a/app/javascript/mastodon/reducers/search.js b/app/javascript/mastodon/reducers/search.js index d3e71da9d..e545f430c 100644 --- a/app/javascript/mastodon/reducers/search.js +++ b/app/javascript/mastodon/reducers/search.js @@ -6,13 +6,15 @@ import { SEARCH_FETCH_SUCCESS, SEARCH_SHOW, SEARCH_EXPAND_SUCCESS, + SEARCH_RESULT_CLICK, + SEARCH_RESULT_FORGET, } from '../actions/search'; import { COMPOSE_MENTION, COMPOSE_REPLY, COMPOSE_DIRECT, } from '../actions/compose'; -import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable'; +import { Map as ImmutableMap, List as ImmutableList, OrderedSet as ImmutableOrderedSet, fromJS } from 'immutable'; const initialState = ImmutableMap({ value: '', @@ -21,6 +23,7 @@ const initialState = ImmutableMap({ results: ImmutableMap(), isLoading: false, searchTerm: '', + recent: ImmutableOrderedSet(), }); export default function search(state = initialState, action) { @@ -61,6 +64,10 @@ export default function search(state = initialState, action) { case SEARCH_EXPAND_SUCCESS: const results = action.searchType === 'hashtags' ? fromJS(action.results.hashtags) : action.results[action.searchType].map(item => item.id); return state.updateIn(['results', action.searchType], list => list.concat(results)); + case SEARCH_RESULT_CLICK: + return state.update('recent', set => set.add(fromJS(action.result))); + case SEARCH_RESULT_FORGET: + return state.update('recent', set => set.filterNot(result => result.get('q') === action.q)); default: return state; } diff --git a/app/javascript/mastodon/utils/hashtags.js b/app/javascript/mastodon/utils/hashtags.js new file mode 100644 index 000000000..358ce37f5 --- /dev/null +++ b/app/javascript/mastodon/utils/hashtags.js @@ -0,0 +1,47 @@ +const HASHTAG_SEPARATORS = '_\\u00b7\\u200c'; +const ALPHA = '\\p{L}\\p{M}'; +const WORD = '\\p{L}\\p{M}\\p{N}\\p{Pc}'; + +const buildHashtagPatternRegex = () => { + try { + return new RegExp( + '(?:^|[^\\/\\)\\w])#((' + + '[' + WORD + '_]' + + '[' + WORD + HASHTAG_SEPARATORS + ']*' + + '[' + ALPHA + HASHTAG_SEPARATORS + ']' + + '[' + WORD + HASHTAG_SEPARATORS +']*' + + '[' + WORD + '_]' + + ')|(' + + '[' + WORD + '_]*' + + '[' + ALPHA + ']' + + '[' + WORD + '_]*' + + '))', 'iu', + ); + } catch { + return /(?:^|[^/)\w])#(\w*[a-zA-Z·]\w*)/i; + } +}; + +const buildHashtagRegex = () => { + try { + return new RegExp( + '^((' + + '[' + WORD + '_]' + + '[' + WORD + HASHTAG_SEPARATORS + ']*' + + '[' + ALPHA + HASHTAG_SEPARATORS + ']' + + '[' + WORD + HASHTAG_SEPARATORS +']*' + + '[' + WORD + '_]' + + ')|(' + + '[' + WORD + '_]*' + + '[' + ALPHA + ']' + + '[' + WORD + '_]*' + + '))$', 'iu', + ); + } catch { + return /^(\w*[a-zA-Z·]\w*)$/i; + } +}; + +export const HASHTAG_PATTERN_REGEX = buildHashtagPatternRegex(); + +export const HASHTAG_REGEX = buildHashtagRegex(); diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 32dcd59b6..6681aa75c 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -4816,6 +4816,86 @@ a.status-card.compact:hover { .search { margin-bottom: 10px; position: relative; + + &__popout { + box-sizing: border-box; + display: none; + position: absolute; + inset-inline-start: 0; + margin-top: -2px; + width: 100%; + background: $ui-base-color; + border-radius: 0 0 4px 4px; + box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); + z-index: 2; + font-size: 13px; + padding: 15px 5px; + + h4 { + text-transform: uppercase; + color: $dark-text-color; + font-weight: 500; + padding: 0 10px; + margin-bottom: 10px; + } + + &__menu { + &__message { + color: $dark-text-color; + padding: 0 10px; + } + + &__item { + display: block; + box-sizing: border-box; + width: 100%; + border: 0; + font: inherit; + background: transparent; + color: $darker-text-color; + padding: 10px; + cursor: pointer; + border-radius: 4px; + text-align: start; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + + &--flex { + display: flex; + justify-content: space-between; + } + + .icon-button { + transition: none; + } + + &:hover, + &:focus, + &:active, + &.selected { + background: $ui-highlight-color; + color: $primary-text-color; + + .icon-button { + color: $primary-text-color; + } + } + + mark { + background: transparent; + font-weight: 700; + color: $primary-text-color; + } + } + } + } + + &.active { + .search__popout { + display: block; + } + } } .search__input { @@ -6695,10 +6775,6 @@ a.status-card.compact:hover { border-radius: 0; } -.search-popout { - @include search-popout; -} - noscript { text-align: center; @@ -7985,6 +8061,10 @@ noscript { padding: 10px; } + .search__popout { + border: 1px solid lighten($ui-base-color, 8%); + } + .search .fa { top: 10px; inset-inline-end: 10px; -- cgit From fa98363a2789f23e110312f23bf4c00234dcd59a Mon Sep 17 00:00:00 2001 From: Rubicon Rowe Date: Tue, 4 Apr 2023 17:41:05 +0800 Subject: Fix inconsistent radius in drawer (#24407) --- app/javascript/styles/mastodon/components.scss | 3 +++ 1 file changed, 3 insertions(+) (limited to 'app/javascript/styles/mastodon/components.scss') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 6681aa75c..160211dd1 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2963,6 +2963,8 @@ $ui-header-height: 55px; margin-bottom: 10px; display: flex; flex-direction: row; + border-radius: 4px; + overflow: hidden; a { transition: background 100ms ease-in; @@ -7046,6 +7048,7 @@ noscript { .drawer__pager { height: 50vh; + border-radius: 4px; } .drawer__inner { -- cgit From 45848d654709678ba35d9e97e0b3df3e3916cd75 Mon Sep 17 00:00:00 2001 From: Claire Date: Tue, 4 Apr 2023 16:48:34 +0200 Subject: Fix styling regressions from RTL layout refactor (#24415) --- app/javascript/styles/mastodon/accounts.scss | 4 ++-- app/javascript/styles/mastodon/admin.scss | 6 +++--- app/javascript/styles/mastodon/components.scss | 24 ++++++++++++------------ app/javascript/styles/mastodon/rich_text.scss | 2 +- app/javascript/styles/mastodon/rtl.scss | 12 ++++++++++++ app/javascript/styles/mastodon/tables.scss | 4 ++-- 6 files changed, 32 insertions(+), 20 deletions(-) (limited to 'app/javascript/styles/mastodon/components.scss') diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index af0d8b5ed..90775ee42 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -138,7 +138,7 @@ } .older { - float: inline-start; + float: left; padding-inline-start: 0; .fa { @@ -148,7 +148,7 @@ } .newer { - float: inline-end; + float: right; padding-inline-end: 0; .fa { diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index accddc004..c92191ea2 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -635,7 +635,7 @@ body, .button { overflow: visible; margin: 0 0 5px 5px; - float: inline-end; + float: right; } } } @@ -783,7 +783,7 @@ a.name-tag, .speech-bubble { margin-bottom: 20px; - border-inset-inline-start: 4px solid $ui-highlight-color; + border-inline-start: 4px solid $ui-highlight-color; &.positive { border-left-color: $success-green; @@ -1662,7 +1662,7 @@ a.sparkline { } .section-skip-link { - float: inline-end; + float: right; a { color: $ui-highlight-color; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 160211dd1..a4d7a6192 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -826,7 +826,7 @@ body > [data-popper-placement] { } .reply-indicator__cancel { - float: inline-end; + float: right; line-height: 24px; } @@ -841,7 +841,7 @@ body > [data-popper-placement] { } .reply-indicator__display-avatar { - float: inline-start; + float: left; margin-inline-end: 5px; } @@ -1159,7 +1159,7 @@ body > [data-popper-placement] { .notification__relative_time { color: $dark-text-color; - float: inline-end; + float: right; font-size: 14px; padding-bottom: 1px; } @@ -1507,7 +1507,7 @@ body > [data-popper-placement] { position: relative; & > div { - float: inline-start; + float: left; position: relative; box-sizing: border-box; } @@ -1622,7 +1622,7 @@ a .account__avatar { text-decoration: none; overflow: hidden; flex: 0 1 100%; - border-inset-inline-end: 1px solid lighten($ui-base-color, 8%); + border-inline-end: 1px solid lighten($ui-base-color, 8%); padding: 10px 0; border-bottom: 4px solid transparent; @@ -1662,7 +1662,7 @@ a .account__avatar { } .account-authorize__avatar { - float: inline-start; + float: left; margin-inline-end: 10px; } @@ -2642,7 +2642,7 @@ $ui-header-height: 55px; .navigation-panel { margin: 0; background: $ui-base-color; - border-inset-inline-start: 1px solid lighten($ui-base-color, 8%); + border-inline-start: 1px solid lighten($ui-base-color, 8%); height: 100vh; } @@ -3879,7 +3879,7 @@ a.status-card.compact:hover { } .column-header__setting-arrows { - float: inline-end; + float: right; .column-header__setting-btn { padding: 5px; @@ -5753,7 +5753,7 @@ a.status-card.compact:hover { .report-modal__comment { padding: 20px; - border-inset-inline-end: 1px solid $ui-secondary-color; + border-inline-end: 1px solid $ui-secondary-color; max-width: 320px; p { @@ -6044,7 +6044,7 @@ a.status-card.compact:hover { color: $dark-text-color; padding: 8px 18px; cursor: default; - border-inset-inline-end: 1px solid lighten($ui-base-color, 8%); + border-inline-end: 1px solid lighten($ui-base-color, 8%); display: flex; flex-direction: column; align-items: center; @@ -6109,7 +6109,7 @@ a.status-card.compact:hover { border: 0; box-sizing: border-box; display: block; - float: inline-start; + float: left; position: relative; border-radius: 4px; overflow: hidden; @@ -7930,7 +7930,7 @@ noscript { inset-inline-start: 0; width: 100%; height: 100%; - border-inset-inline-start: 4px solid $highlight-text-color; + border-inline-start: 4px solid $highlight-text-color; pointer-events: none; } } diff --git a/app/javascript/styles/mastodon/rich_text.scss b/app/javascript/styles/mastodon/rich_text.scss index aa41e4ad3..c77c23bc4 100644 --- a/app/javascript/styles/mastodon/rich_text.scss +++ b/app/javascript/styles/mastodon/rich_text.scss @@ -14,7 +14,7 @@ blockquote { padding-inline-start: 10px; - border-inset-inline-start: 3px solid $darker-text-color; + border-inline-start: 3px solid $darker-text-color; color: $darker-text-color; white-space: normal; diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index 726135c58..8d3d32665 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -19,10 +19,22 @@ body.rtl { direction: rtl; } + .account__avatar-wrapper { + float: right; + } + + .column-header__setting-arrows { + float: left; + } + .admin-wrapper { direction: rtl; } + .react-swipeable-view-container > * { + direction: rtl; + } + .simple_form .label_input__append { &::after { background-image: linear-gradient( diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss index fb1ff0781..49e5bbf9f 100644 --- a/app/javascript/styles/mastodon/tables.scss +++ b/app/javascript/styles/mastodon/tables.scss @@ -91,12 +91,12 @@ &:first-child { border-radius: 4px 0 0; - border-inset-inline-start: 1px solid darken($ui-base-color, 8%); + border-inline-start: 1px solid darken($ui-base-color, 8%); } &:last-child { border-radius: 0 4px 0 0; - border-inset-inline-end: 1px solid darken($ui-base-color, 8%); + border-inline-end: 1px solid darken($ui-base-color, 8%); } } } -- cgit From cd14f712ad9f5a6ebdbec8c9b87740cd76d949e7 Mon Sep 17 00:00:00 2001 From: Nick Schonning Date: Wed, 5 Apr 2023 03:04:08 -0400 Subject: Enable Stylelint property-no-unknown (#24404) --- app/javascript/styles/mastodon/components.scss | 1 - stylelint.config.js | 15 ++++++++++++++- 2 files changed, 14 insertions(+), 2 deletions(-) (limited to 'app/javascript/styles/mastodon/components.scss') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index a4d7a6192..c24d61f89 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2941,7 +2941,6 @@ $ui-header-height: 55px; width: 85%; height: 100%; pointer-events: none; - user-drag: none; user-select: none; } diff --git a/stylelint.config.js b/stylelint.config.js index c8c07a05b..cdb10c02e 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -13,7 +13,6 @@ module.exports = { 'no-descending-specificity': null, 'no-duplicate-selectors': null, 'number-max-precision': 8, - 'property-no-unknown': null, 'property-no-vendor-prefix': null, 'selector-class-pattern': null, 'selector-id-pattern': null, @@ -23,4 +22,18 @@ module.exports = { 'scss/dollar-variable-empty-line-before': null, 'scss/no-global-function-names': null, }, + overrides: [ + { + 'files': ['app/javascript/styles/mailer.scss'], + rules: { + 'property-no-unknown': [ + true, + { + ignoreProperties: [ + '/^mso-/', + ] }, + ], + }, + }, + ], }; -- cgit From 9ef9974ff207fe91291c81c7a9b9bb83e0df8e16 Mon Sep 17 00:00:00 2001 From: Christian Schmidt Date: Fri, 7 Apr 2023 15:44:31 +0200 Subject: Fix loading spinner + infinite scroll for private mentions (#24446) --- .../features/direct_timeline/components/conversations_list.jsx | 4 ++-- app/javascript/mastodon/features/direct_timeline/index.jsx | 2 ++ app/javascript/styles/mastodon/components.scss | 1 + 3 files changed, 5 insertions(+), 2 deletions(-) (limited to 'app/javascript/styles/mastodon/components.scss') diff --git a/app/javascript/mastodon/features/direct_timeline/components/conversations_list.jsx b/app/javascript/mastodon/features/direct_timeline/components/conversations_list.jsx index 27e9a593f..04c404e1d 100644 --- a/app/javascript/mastodon/features/direct_timeline/components/conversations_list.jsx +++ b/app/javascript/mastodon/features/direct_timeline/components/conversations_list.jsx @@ -55,10 +55,10 @@ export default class ConversationsList extends ImmutablePureComponent { }, 300, { leading: true }); render () { - const { conversations, onLoadMore, ...other } = this.props; + const { conversations, isLoading, onLoadMore, ...other } = this.props; return ( - + {conversations.map(item => (
} + alwaysPrepend emptyMessage={} /> diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index c24d61f89..0fee136cf 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -4339,6 +4339,7 @@ a.status-card.compact:hover { .follow_requests-unlocked_explanation { background: darken($ui-base-color, 4%); contain: initial; + flex-grow: 0; } .error-column { -- cgit