From a6207d243b03f3d8a72f9d1d12ee0569f58987d2 Mon Sep 17 00:00:00 2001 From: Claire Date: Sun, 7 May 2023 13:37:47 +0200 Subject: [PATCH 1/7] New Crowdin updates (#2202) * New translations en.json (Russian) [ci skip] * New translations en.json (Russian) [ci skip] --- app/javascript/flavours/glitch/locales/ru.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/javascript/flavours/glitch/locales/ru.json b/app/javascript/flavours/glitch/locales/ru.json index 030d0e6c51..0e75a6158a 100644 --- a/app/javascript/flavours/glitch/locales/ru.json +++ b/app/javascript/flavours/glitch/locales/ru.json @@ -1,4 +1,6 @@ { + "about.fork_disclaimer": "Glitch-soc - это бесплатное программное обеспечение с открытым исходным кодом, обращенное от Mastodon.", + "account.add_account_note": "Добавить заметку для @{name}", "empty_column.follow_recommendations": "Похоже, у нас нет предложений для вас. Вы можете попробовать поискать людей, которых уже знаете, или изучить актуальные хэштеги.", "follow_recommendations.done": "Готово", "follow_recommendations.heading": "Подпишитесь на людей, чьи посты вы бы хотели видеть. Вот несколько предложений.", From 6f64c79ca446f7b68966bae838e5bfccdf0e3f15 Mon Sep 17 00:00:00 2001 From: Claire Date: Sun, 7 May 2023 15:04:59 +0200 Subject: [PATCH 2/7] Fix SCSS linting issues (#2207) * Disable font-family-no-missing-generic-family-keyword for font-awesome accessibility icons * Run stylelint --fix * Avoid `@extend` directives with doodle modal CSS * Drop use of `@extend` for notification cleanup buttons SCSS * Run prettier on SCSS --- .../components/notification_purge_buttons.jsx | 9 ++-- .../flavours/glitch/styles/accessibility.scss | 4 +- .../flavours/glitch/styles/accounts.scss | 4 +- .../flavours/glitch/styles/admin.scss | 4 +- .../glitch/styles/components/about.scss | 2 +- .../glitch/styles/components/accounts.scss | 2 +- .../glitch/styles/components/columns.scss | 10 ++-- .../glitch/styles/components/doodle.scss | 4 -- .../glitch/styles/components/drawer.scss | 2 +- .../glitch/styles/components/lists.scss | 4 +- .../styles/components/local_settings.scss | 2 +- .../glitch/styles/components/misc.scss | 8 +-- .../glitch/styles/components/modal.scss | 22 ++++---- .../styles/components/single_column.scss | 2 +- .../flavours/glitch/styles/containers.scss | 6 +-- .../flavours/glitch/styles/dashboard.scss | 2 +- .../flavours/glitch/styles/forms.scss | 2 +- .../flavours/glitch/styles/modal.scss | 2 +- .../flavours/glitch/styles/statuses.scss | 2 +- .../flavours/glitch/styles/tables.scss | 2 +- app/javascript/styles/fonts/roboto-mono.scss | 3 +- app/javascript/styles/mailer.scss | 2 +- app/javascript/styles/mastodon/accounts.scss | 4 +- app/javascript/styles/mastodon/admin.scss | 4 +- .../styles/mastodon/components.scss | 54 +++++++++---------- .../styles/mastodon/containers.scss | 6 +-- app/javascript/styles/mastodon/dashboard.scss | 2 +- app/javascript/styles/mastodon/forms.scss | 2 +- app/javascript/styles/mastodon/modal.scss | 2 +- app/javascript/styles/mastodon/statuses.scss | 2 +- app/javascript/styles/mastodon/tables.scss | 2 +- 31 files changed, 88 insertions(+), 90 deletions(-) diff --git a/app/javascript/flavours/glitch/components/notification_purge_buttons.jsx b/app/javascript/flavours/glitch/components/notification_purge_buttons.jsx index 1d807bc233..9d1139a051 100644 --- a/app/javascript/flavours/glitch/components/notification_purge_buttons.jsx +++ b/app/javascript/flavours/glitch/components/notification_purge_buttons.jsx @@ -11,6 +11,7 @@ import PropTypes from 'prop-types'; import { defineMessages, injectIntl } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import Icon from 'flavours/glitch/components/icon'; +import classNames from 'classnames'; const messages = defineMessages({ btnAll : { id: 'notification_purge.btn_all', defaultMessage: 'Select\nall' }, @@ -36,19 +37,19 @@ class NotificationPurgeButtons extends ImmutablePureComponent { //className='active' return (
- - - -
diff --git a/app/javascript/flavours/glitch/styles/accessibility.scss b/app/javascript/flavours/glitch/styles/accessibility.scss index c7fc74b2ad..68f4f8f1e2 100644 --- a/app/javascript/flavours/glitch/styles/accessibility.scss +++ b/app/javascript/flavours/glitch/styles/accessibility.scss @@ -24,9 +24,11 @@ $emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange' position: absolute; content: '\F00C'; font-size: 50%; - font-family: FontAwesome; inset-inline-end: -0.55em; top: -0.44em; + + /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- this is an icon font, this can't use a generic font */ + font-family: FontAwesome; } } diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss index 6268135a6c..d10169e02a 100644 --- a/app/javascript/flavours/glitch/styles/accounts.scss +++ b/app/javascript/flavours/glitch/styles/accounts.scss @@ -33,7 +33,7 @@ border-radius: 4px 4px 0 0; } - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { height: 200px; } } @@ -162,7 +162,7 @@ color: lighten($inverted-text-color, 10%); } - @media screen and (max-width: 700px) { + @media screen and (width <= 700px) { padding: 30px 20px; .page { diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index 58223143f2..2adee62d6b 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -1377,7 +1377,7 @@ a.sparkline { } } - @media screen and (max-width: 930px) { + @media screen and (width <= 930px) { grid-template-columns: minmax(0, 1fr); } } @@ -1663,7 +1663,7 @@ a.sparkline { } } - @media screen and (max-width: 800px) { + @media screen and (width <= 800px) { border: 0; &__item { diff --git a/app/javascript/flavours/glitch/styles/components/about.scss b/app/javascript/flavours/glitch/styles/components/about.scss index 7058274736..ba55282969 100644 --- a/app/javascript/flavours/glitch/styles/components/about.scss +++ b/app/javascript/flavours/glitch/styles/components/about.scss @@ -136,7 +136,7 @@ margin-bottom: 20px; } - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { display: block; h4 { diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 77bbcc6401..d2d29f5969 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -281,7 +281,7 @@ .notification__message { margin-inline-start: 42px; - padding-top:8px; + padding-top: 8px; padding-inline-start: 26px; cursor: default; color: $darker-text-color; diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index f9a5720e51..2404578df9 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -79,7 +79,7 @@ $ui-header-height: 55px; display: none; } - @media screen and (min-width: 320px) { + @media screen and (width >= 320px) { .logo--wordmark { display: block; } @@ -205,7 +205,7 @@ $ui-header-height: 55px; &:last-child { padding: 0; - padding-inline-end: 15px;; + padding-inline-end: 15px; } } @@ -441,9 +441,7 @@ $ui-header-height: 55px; align-items: stretch; justify-content: space-around; - button { - @extend .column-header__button; - + .column-header__button { background: transparent; text-align: center; padding: 10px 5px; @@ -809,7 +807,7 @@ $ui-header-height: 55px; background: lighten($ui-base-color, 4%); } - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { font-size: 16px; } } diff --git a/app/javascript/flavours/glitch/styles/components/doodle.scss b/app/javascript/flavours/glitch/styles/components/doodle.scss index c3b67da4a5..eb053c14db 100644 --- a/app/javascript/flavours/glitch/styles/components/doodle.scss +++ b/app/javascript/flavours/glitch/styles/components/doodle.scss @@ -1,8 +1,6 @@ $doodle-background: #d9e1e8; .doodle-modal { - @extend .boost-modal; - width: unset; } @@ -16,8 +14,6 @@ $doodle-background: #d9e1e8; } .doodle-modal__action-bar { - @extend .boost-modal__action-bar; - .filler { flex-grow: 1; margin: 0; diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index 9e0286beae..af637b69be 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -229,7 +229,7 @@ cursor: inherit; } - @media screen and (min-height: 640px) { + @media screen and (height >= 640px) { display: block; } } diff --git a/app/javascript/flavours/glitch/styles/components/lists.scss b/app/javascript/flavours/glitch/styles/components/lists.scss index d00a1941b3..e173016b67 100644 --- a/app/javascript/flavours/glitch/styles/components/lists.scss +++ b/app/javascript/flavours/glitch/styles/components/lists.scss @@ -6,7 +6,7 @@ width: 380px; overflow: hidden; - @media screen and (max-width: 420px) { + @media screen and (width <= 420px) { width: 90%; } @@ -60,7 +60,7 @@ width: 380px; overflow: hidden; - @media screen and (max-width: 420px) { + @media screen and (width <= 420px) { width: 90%; } diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss index dee42bfdd9..cb0b401b49 100644 --- a/app/javascript/flavours/glitch/styles/components/local_settings.scss +++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss @@ -125,7 +125,7 @@ margin-bottom: 10px; } -@media screen and (max-width: 630px) { +@media screen and (width <= 630px) { .glitch.local-settings__navigation { width: 40px; flex-shrink: 0; diff --git a/app/javascript/flavours/glitch/styles/components/misc.scss b/app/javascript/flavours/glitch/styles/components/misc.scss index f419144648..d6666acd23 100644 --- a/app/javascript/flavours/glitch/styles/components/misc.scss +++ b/app/javascript/flavours/glitch/styles/components/misc.scss @@ -827,7 +827,7 @@ body > [data-popper-placement] { overflow: hidden; } -@media screen and (min-width: 631px) { +@media screen and (width >= 631px) { .columns-area { padding: 0; } @@ -1134,19 +1134,19 @@ body > [data-popper-placement] { } } - @media screen and (max-height: 810px) { + @media screen and (height <= 810px) { .trends__item:nth-of-type(3) { display: none; } } - @media screen and (max-height: 720px) { + @media screen and (height <= 720px) { .trends__item:nth-of-type(2) { display: none; } } - @media screen and (max-height: 670px) { + @media screen and (height <= 670px) { display: none; } diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index 354e5a04fc..c68c5fc53d 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -115,7 +115,7 @@ text-align: center; } -@media screen and (max-width: 550px) { +@media screen and (width <= 550px) { .onboarding-modal { width: 100%; height: 100%; @@ -382,7 +382,7 @@ } } -@media screen and (max-width: 320px) and (max-height: 600px) { +@media screen and (width <= 320px) and (height <= 600px) { .onboarding-modal__page p { font-size: 14px; line-height: 20px; @@ -413,6 +413,7 @@ margin-inline-start: 10px; } +.doodle-modal, .boost-modal, .confirmation-modal, .report-modal, @@ -485,6 +486,7 @@ } } +.doodle-modal__action-bar, .boost-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar, @@ -560,7 +562,7 @@ font-weight: 700; margin-bottom: 15px; - @media screen and (max-height: 800px) { + @media screen and (height <= 800px) { font-size: 22px; } } @@ -747,7 +749,7 @@ display: flex; border-top: 1px solid $ui-secondary-color; - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { flex-wrap: wrap; overflow-y: auto; } @@ -758,7 +760,7 @@ box-sizing: border-box; width: 50%; - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { width: 100%; } } @@ -775,13 +777,13 @@ color: $highlight-text-color; } - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { max-height: 10vh; } } .focal-point-modal__content { - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { max-height: 40vh; } } @@ -877,7 +879,7 @@ } } - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { padding: 10px; max-width: 100%; order: 2; @@ -1152,7 +1154,7 @@ background: lighten($ui-base-color, 4%); } - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { font-size: 16px; } } @@ -1233,7 +1235,7 @@ } } - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { img, video { max-height: 100%; diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss index 6563fa47b5..2f8f7e2dd2 100644 --- a/app/javascript/flavours/glitch/styles/components/single_column.scss +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -94,7 +94,7 @@ } } -@media screen and (min-width: 600px) { +@media screen and (width >= 600px) { .tabs-bar__link { span { display: inline; diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index d75ccecee9..4d3d4c546c 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -2,7 +2,7 @@ width: 700px; margin: 0 auto; - @media screen and (max-width: 740px) { + @media screen and (width <= 740px) { width: 100%; margin: 0; } @@ -44,7 +44,7 @@ margin-top: 40px; box-sizing: border-box; - @media screen and (max-width: 400px) { + @media screen and (width <= 400px) { width: 100%; margin-top: 0; padding: 20px; @@ -64,7 +64,7 @@ margin-bottom: 10px; border-bottom: 1px solid $ui-base-color; - @media screen and (max-width: 440px) { + @media screen and (width <= 440px) { width: 100%; margin: 0; padding: 20px; diff --git a/app/javascript/flavours/glitch/styles/dashboard.scss b/app/javascript/flavours/glitch/styles/dashboard.scss index f25765d1da..bc34c6ec0a 100644 --- a/app/javascript/flavours/glitch/styles/dashboard.scss +++ b/app/javascript/flavours/glitch/styles/dashboard.scss @@ -59,7 +59,7 @@ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-gap: 10px; - @media screen and (max-width: 1350px) { + @media screen and (width <= 1350px) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index f69e8f2767..dbc89a7039 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -723,7 +723,7 @@ code { } } - @media screen and (max-width: 740px) and (min-width: 441px) { + @media screen and (width <= 740px) and (width >= 441px) { margin-top: 40px; } diff --git a/app/javascript/flavours/glitch/styles/modal.scss b/app/javascript/flavours/glitch/styles/modal.scss index 29b1f162b4..0b7220b21d 100644 --- a/app/javascript/flavours/glitch/styles/modal.scss +++ b/app/javascript/flavours/glitch/styles/modal.scss @@ -30,7 +30,7 @@ } } -@media screen and (max-width: 600px) { +@media screen and (width <= 600px) { .account-header { margin-top: 0; } diff --git a/app/javascript/flavours/glitch/styles/statuses.scss b/app/javascript/flavours/glitch/styles/statuses.scss index 77e9d38bdd..02c6538636 100644 --- a/app/javascript/flavours/glitch/styles/statuses.scss +++ b/app/javascript/flavours/glitch/styles/statuses.scss @@ -59,7 +59,7 @@ } } - @media screen and (max-width: 740px) { + @media screen and (width <= 740px) { .detailed-status, .status, .load-more { diff --git a/app/javascript/flavours/glitch/styles/tables.scss b/app/javascript/flavours/glitch/styles/tables.scss index 0c730f1a79..b583d3d8ea 100644 --- a/app/javascript/flavours/glitch/styles/tables.scss +++ b/app/javascript/flavours/glitch/styles/tables.scss @@ -357,7 +357,7 @@ a.table-action-link { } } - @media screen and (max-width: 870px) { + @media screen and (width <= 870px) { .accounts-table tbody td.optional { display: none; } diff --git a/app/javascript/styles/fonts/roboto-mono.scss b/app/javascript/styles/fonts/roboto-mono.scss index 66f3eed9f8..5a7b87dc10 100644 --- a/app/javascript/styles/fonts/roboto-mono.scss +++ b/app/javascript/styles/fonts/roboto-mono.scss @@ -3,8 +3,7 @@ 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.ttf') format('truetype'), url('~fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') format('svg'); font-weight: 400; diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss index 18fe522eb2..a12f74fc02 100644 --- a/app/javascript/styles/mailer.scss +++ b/app/javascript/styles/mailer.scss @@ -547,7 +547,7 @@ ul.rules-list { } } -@media (max-width: 697px) { +@media (width <= 697px) { .email-container, .col-1, .col-2, diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index 853d7f70d1..8b7b634071 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -33,7 +33,7 @@ border-radius: 4px 4px 0 0; } - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { height: 200px; } } @@ -158,7 +158,7 @@ color: lighten($inverted-text-color, 10%); } - @media screen and (max-width: 700px) { + @media screen and (width <= 700px) { padding: 30px 20px; .page { diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index acb4baf4f7..a439b0e392 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -1371,7 +1371,7 @@ a.sparkline { } } - @media screen and (max-width: 930px) { + @media screen and (width <= 930px) { grid-template-columns: minmax(0, 1fr); } } @@ -1657,7 +1657,7 @@ a.sparkline { } } - @media screen and (max-width: 800px) { + @media screen and (width <= 800px) { border: 0; &__item { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index d1d54d0f05..49875524da 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -514,7 +514,7 @@ body > [data-popper-placement] { outline: 0; } - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { font-size: 16px; } } @@ -535,7 +535,7 @@ body > [data-popper-placement] { all: unset; } - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { height: 100px !important; // Prevent auto-resize textarea resize: vertical; } @@ -2413,7 +2413,7 @@ $ui-header-height: 55px; display: none; } - @media screen and (min-width: 320px) { + @media screen and (width >= 320px) { .logo--wordmark { display: block; } @@ -2525,7 +2525,7 @@ $ui-header-height: 55px; overflow: hidden; } -@media screen and (min-width: 631px) { +@media screen and (width >= 631px) { .columns-area { padding: 0; } @@ -2585,7 +2585,7 @@ $ui-header-height: 55px; &:hover, &:focus, &:active { - @media screen and (min-width: 631px) { + @media screen and (width >= 631px) { background: lighten($ui-base-color, 14%); border-bottom-color: lighten($ui-base-color, 14%); } @@ -2602,7 +2602,7 @@ $ui-header-height: 55px; } } -@media screen and (min-width: 600px) { +@media screen and (width >= 600px) { .tabs-bar__link { span { display: inline; @@ -2825,7 +2825,7 @@ $ui-header-height: 55px; color: $darker-text-color; } - @media screen and (min-width: 600px) { + @media screen and (width >= 600px) { padding: 40px; } } @@ -2935,7 +2935,7 @@ $ui-header-height: 55px; height: 36px; color: $dark-text-color; - @media screen and (min-width: 600px) { + @media screen and (width >= 600px) { display: flex; } } @@ -2987,7 +2987,7 @@ $ui-header-height: 55px; position: sticky; background: $ui-base-color; - @media screen and (min-width: 600) { + @media screen and (width >= 600) { padding: 0 40px; } @@ -3255,7 +3255,7 @@ $ui-header-height: 55px; user-select: none; } - @media screen and (min-height: 640px) { + @media screen and (height >= 640px) { display: block; } } @@ -3604,19 +3604,19 @@ $ui-header-height: 55px; } } - @media screen and (max-height: 810px) { + @media screen and (height <= 810px) { .trends__item:nth-of-type(3) { display: none; } } - @media screen and (max-height: 720px) { + @media screen and (height <= 720px) { .trends__item:nth-of-type(2) { display: none; } } - @media screen and (max-height: 670px) { + @media screen and (height <= 670px) { display: none; } @@ -3700,7 +3700,7 @@ $ui-header-height: 55px; margin-bottom: 20px; } - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { font-size: 16px; } } @@ -4496,7 +4496,7 @@ a.status-card.compact:hover { background: lighten($ui-base-color, 4%); } - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { font-size: 16px; } } @@ -5831,7 +5831,7 @@ a.status-card.compact:hover { font-weight: 700; margin-bottom: 15px; - @media screen and (max-height: 800px) { + @media screen and (height <= 800px) { font-size: 22px; } } @@ -6018,7 +6018,7 @@ a.status-card.compact:hover { display: flex; border-top: 1px solid $ui-secondary-color; - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { flex-wrap: wrap; overflow-y: auto; } @@ -6029,7 +6029,7 @@ a.status-card.compact:hover { box-sizing: border-box; width: 50%; - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { width: 100%; } } @@ -6051,13 +6051,13 @@ a.status-card.compact:hover { color: $inverted-text-color; } - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { max-height: 10vh; } } .focal-point-modal__content { - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { max-height: 40vh; } } @@ -6108,7 +6108,7 @@ a.status-card.compact:hover { } } - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { padding: 10px; max-width: 100%; order: 2; @@ -7136,7 +7136,7 @@ noscript { } } -@media screen and (max-width: 630px) and (max-height: 400px) { +@media screen and (width <= 630px) and (height <= 400px) { $duration: 400ms; $delay: 100ms; @@ -7266,7 +7266,7 @@ noscript { background: lighten($ui-base-color, 4%); } - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { font-size: 16px; } } @@ -7357,7 +7357,7 @@ noscript { width: 380px; overflow: hidden; - @media screen and (max-width: 420px) { + @media screen and (width <= 420px) { width: 90%; } @@ -7412,7 +7412,7 @@ noscript { width: 380px; overflow: hidden; - @media screen and (max-width: 420px) { + @media screen and (width <= 420px) { width: 90%; } @@ -7511,7 +7511,7 @@ noscript { } } - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { img, video { max-height: 100%; @@ -9068,7 +9068,7 @@ noscript { margin-bottom: 20px; } - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { display: block; h4 { diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index fb71ad034a..3d646da239 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -2,7 +2,7 @@ width: 700px; margin: 0 auto; - @media screen and (max-width: 740px) { + @media screen and (width <= 740px) { width: 100%; margin: 0; } @@ -44,7 +44,7 @@ margin-top: 40px; box-sizing: border-box; - @media screen and (max-width: 400px) { + @media screen and (width <= 400px) { width: 100%; margin-top: 0; padding: 20px; @@ -64,7 +64,7 @@ margin-bottom: 10px; border-bottom: 1px solid $ui-base-color; - @media screen and (max-width: 440px) { + @media screen and (width <= 440px) { width: 100%; margin: 0; padding: 20px; diff --git a/app/javascript/styles/mastodon/dashboard.scss b/app/javascript/styles/mastodon/dashboard.scss index f25765d1da..bc34c6ec0a 100644 --- a/app/javascript/styles/mastodon/dashboard.scss +++ b/app/javascript/styles/mastodon/dashboard.scss @@ -59,7 +59,7 @@ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-gap: 10px; - @media screen and (max-width: 1350px) { + @media screen and (width <= 1350px) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index dc52bcd87d..d17303b854 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -722,7 +722,7 @@ code { } } - @media screen and (max-width: 740px) and (min-width: 441px) { + @media screen and (width <= 740px) and (width >= 441px) { margin-top: 40px; } diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss index 29b1f162b4..0b7220b21d 100644 --- a/app/javascript/styles/mastodon/modal.scss +++ b/app/javascript/styles/mastodon/modal.scss @@ -30,7 +30,7 @@ } } -@media screen and (max-width: 600px) { +@media screen and (width <= 600px) { .account-header { margin-top: 0; } diff --git a/app/javascript/styles/mastodon/statuses.scss b/app/javascript/styles/mastodon/statuses.scss index 6c9ea916a2..590d03fb8d 100644 --- a/app/javascript/styles/mastodon/statuses.scss +++ b/app/javascript/styles/mastodon/statuses.scss @@ -63,7 +63,7 @@ } } - @media screen and (max-width: 740px) { + @media screen and (width <= 740px) { .detailed-status, .status, .load-more { diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss index 49e5bbf9fc..38cfc87271 100644 --- a/app/javascript/styles/mastodon/tables.scss +++ b/app/javascript/styles/mastodon/tables.scss @@ -361,7 +361,7 @@ a.table-action-link { } } - @media screen and (max-width: 870px) { + @media screen and (width <= 870px) { .accounts-table tbody td.optional { display: none; } From 9b597486798d40c6b016f6cbae4a3183893b66ee Mon Sep 17 00:00:00 2001 From: Claire Date: Sun, 7 May 2023 15:06:15 +0200 Subject: [PATCH 3/7] Fix rubocop warnings (#2206) --- .rubocop_todo.yml | 3 +++ app/services/post_status_service.rb | 18 ++++++++++-------- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/.rubocop_todo.yml b/.rubocop_todo.yml index 26c89ca780..9deba6642a 100644 --- a/.rubocop_todo.yml +++ b/.rubocop_todo.yml @@ -225,6 +225,8 @@ Lint/Void: # Configuration parameters: AllowedMethods, AllowedPatterns, CountRepeatedAttributes. Metrics/AbcSize: Max: 150 + Exclude: + - 'app/serializers/initial_state_serializer.rb' # Configuration parameters: CountBlocks, Max. Metrics/BlockNesting: @@ -247,6 +249,7 @@ Metrics/ModuleLength: - 'app/helpers/jsonld_helper.rb' - 'app/models/concerns/account_interactions.rb' - 'app/models/concerns/has_user_settings.rb' + - 'lib/sanitize_ext/sanitize_config.rb' # Configuration parameters: Max, CountKeywordArgs, MaxOptionalParameters. Metrics/ParameterLists: diff --git a/app/services/post_status_service.rb b/app/services/post_status_service.rb index 74ec47a33b..8f5f91ec78 100644 --- a/app/services/post_status_service.rb +++ b/app/services/post_status_service.rb @@ -64,14 +64,16 @@ class PostStatusService < BaseService def fill_blank_text! return unless @text.blank? && @options[:spoiler_text].present? - if @media&.any?(&:video?) || @media&.any?(&:gifv?) - @text = '📹' - elsif @media&.any?(&:audio?) - @text = '🎵' - elsif @media&.any?(&:image?) - @text = '🖼' - else - @text = '.' + @text = begin + if @media&.any?(&:video?) || @media&.any?(&:gifv?) + '📹' + elsif @media&.any?(&:audio?) + '🎵' + elsif @media&.any?(&:image?) + '🖼' + else + '.' + end end end From 3fb7fe14c625b0e797429843a0275b6ae3fdf5a1 Mon Sep 17 00:00:00 2001 From: Claire Date: Sun, 7 May 2023 18:22:25 +0200 Subject: [PATCH 4/7] Fix some of the Javascript linting issues, as well as bugs and unneeded divergences with upstream (#2208) * Run eslint --fix * Fix linting issues in video player and reduce divergences with upstream This includes a behavior change of not auto-looping videos anymore. I don't remember loops being ever intended, and they have been removed from upstream a while ago, but we somehow missed the change. * Fix lint issues in `app/javascript/flavours/glitch/selectors/index.js` Those were basically caused by dead code that isn't present upstream, so that brings us closer to upstream as well. * Fix linting issue and bug in streaming/index.js * Fix linting issues in config/webpack/shared.js * Fix unused import in flavours/glitch/features/ui/index.js * Fix linting issues and reduce divergences from upstream in flavours/glitch/features/ui/components/video_modal.jsx * Fix linting issues in flavours/glitch/reducers * Fix linting issues in glitch-soc onboarding modal * Fix linting issues in flavours/glitch/features/ui/components/navigation_panel.jsx * Remove dead code for unused local setting navbar_under * Fix various linting issues * Fix linting issues in flavours/glitch/components/scrollable_list.jsx and reduce divergences with upstream --- .../glitch/components/scrollable_list.jsx | 47 ++++++++++++------- .../features/compose/components/options.jsx | 4 -- .../compose/containers/options_container.js | 2 - .../features/status/components/card.jsx | 3 +- .../status/components/detailed_status.jsx | 3 +- .../containers/detailed_status_container.js | 2 - .../features/ui/components/columns_area.jsx | 3 +- .../components/deprecated_settings_modal.jsx | 2 +- .../ui/components/navigation_panel.jsx | 6 +-- .../ui/components/onboarding_modal.jsx | 14 +++--- .../features/ui/components/video_modal.jsx | 6 +-- .../flavours/glitch/features/ui/index.jsx | 19 +++----- .../flavours/glitch/features/video/index.jsx | 17 +++---- .../flavours/glitch/reducers/compose.js | 1 + .../glitch/reducers/local_settings.js | 1 - .../flavours/glitch/selectors/index.js | 3 +- .../glitch/styles/components/columns.scss | 25 ---------- config/webpack/shared.js | 7 ++- config/webpack/translationRunner.js | 2 +- streaming/index.js | 3 +- 20 files changed, 68 insertions(+), 102 deletions(-) diff --git a/app/javascript/flavours/glitch/components/scrollable_list.jsx b/app/javascript/flavours/glitch/components/scrollable_list.jsx index fc7dc989d0..c1f511b48d 100644 --- a/app/javascript/flavours/glitch/components/scrollable_list.jsx +++ b/app/javascript/flavours/glitch/components/scrollable_list.jsx @@ -90,15 +90,19 @@ class ScrollableList extends PureComponent { lastScrollWasSynthetic = false; scrollToTopOnMouseIdle = false; + _getScrollingElement = () => { + if (this.props.bindToDocument) { + return (document.scrollingElement || document.body); + } else { + return this.node; + } + }; + setScrollTop = newScrollTop => { if (this.getScrollTop() !== newScrollTop) { this.lastScrollWasSynthetic = true; - if (this.props.bindToDocument) { - document.scrollingElement.scrollTop = newScrollTop; - } else { - this.node.scrollTop = newScrollTop; - } + this._getScrollingElement().scrollTop = newScrollTop; } }; @@ -106,6 +110,7 @@ class ScrollableList extends PureComponent { if (this.mouseIdleTimer === null) { return; } + clearTimeout(this.mouseIdleTimer); this.mouseIdleTimer = null; }; @@ -113,13 +118,13 @@ class ScrollableList extends PureComponent { handleMouseMove = throttle(() => { // As long as the mouse keeps moving, clear and restart the idle timer. this.clearMouseIdleTimer(); - this.mouseIdleTimer = - setTimeout(this.handleMouseIdle, MOUSE_IDLE_DELAY); + this.mouseIdleTimer = setTimeout(this.handleMouseIdle, MOUSE_IDLE_DELAY); if (!this.mouseMovedRecently && this.getScrollTop() === 0) { // Only set if we just started moving and are scrolled to the top. this.scrollToTopOnMouseIdle = true; } + // Save setting this flag for last, so we can do the comparison above. this.mouseMovedRecently = true; }, MOUSE_IDLE_DELAY / 2); @@ -134,6 +139,7 @@ class ScrollableList extends PureComponent { if (this.scrollToTopOnMouseIdle && !this.props.preventScroll) { this.setScrollTop(0); } + this.mouseMovedRecently = false; this.scrollToTopOnMouseIdle = false; }; @@ -141,6 +147,7 @@ class ScrollableList extends PureComponent { componentDidMount () { this.attachScrollListener(); this.attachIntersectionObserver(); + attachFullscreenListener(this.onFullScreenChange); // Handle initial scroll position @@ -156,15 +163,15 @@ class ScrollableList extends PureComponent { }; getScrollTop = () => { - return this.props.bindToDocument ? document.scrollingElement.scrollTop : this.node.scrollTop; + return this._getScrollingElement().scrollTop; }; getScrollHeight = () => { - return this.props.bindToDocument ? document.scrollingElement.scrollHeight : this.node.scrollHeight; + return this._getScrollingElement().scrollHeight; }; getClientHeight = () => { - return this.props.bindToDocument ? document.scrollingElement.clientHeight : this.node.clientHeight; + return this._getScrollingElement().clientHeight; }; updateScrollBottom = (snapshot) => { @@ -173,11 +180,7 @@ class ScrollableList extends PureComponent { this.setScrollTop(newScrollTop); }; - cacheMediaWidth = (width) => { - if (width && this.state.cachedMediaWidth != width) this.setState({ cachedMediaWidth: width }); - }; - - getSnapshotBeforeUpdate (prevProps, prevState) { + getSnapshotBeforeUpdate (prevProps) { const someItemInserted = React.Children.count(prevProps.children) > 0 && React.Children.count(prevProps.children) < React.Children.count(this.props.children) && this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props); @@ -198,10 +201,17 @@ class ScrollableList extends PureComponent { } } + cacheMediaWidth = (width) => { + if (width && this.state.cachedMediaWidth !== width) { + this.setState({ cachedMediaWidth: width }); + } + }; + componentWillUnmount () { this.clearMouseIdleTimer(); this.detachScrollListener(); this.detachIntersectionObserver(); + detachFullscreenListener(this.onFullScreenChange); } @@ -210,10 +220,13 @@ class ScrollableList extends PureComponent { }; attachIntersectionObserver () { - this.intersectionObserverWrapper.connect({ + let nodeOptions = { root: this.node, rootMargin: '300% 0px', - }); + }; + + this.intersectionObserverWrapper + .connect(this.props.bindToDocument ? {} : nodeOptions); } detachIntersectionObserver () { diff --git a/app/javascript/flavours/glitch/features/compose/components/options.jsx b/app/javascript/flavours/glitch/features/compose/components/options.jsx index 19ead2f217..cedb906ca0 100644 --- a/app/javascript/flavours/glitch/features/compose/components/options.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/options.jsx @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { defineMessages, injectIntl } from 'react-intl'; -import spring from 'react-motion/lib/spring'; import Toggle from 'react-toggle'; import { connect } from 'react-redux'; @@ -16,7 +15,6 @@ import LanguageDropdown from '../containers/language_dropdown_container'; import ImmutablePureComponent from 'react-immutable-pure-component'; // Utils. -import Motion from '../../ui/util/optional_motion'; import { pollLimits } from 'flavours/glitch/initial_state'; // Messages. @@ -125,7 +123,6 @@ class ComposerOptions extends ImmutablePureComponent { advancedOptions: ImmutablePropTypes.map, disabled: PropTypes.bool, allowMedia: PropTypes.bool, - hasMedia: PropTypes.bool, allowPoll: PropTypes.bool, hasPoll: PropTypes.bool, intl: PropTypes.object.isRequired, @@ -190,7 +187,6 @@ class ComposerOptions extends ImmutablePureComponent { contentType, disabled, allowMedia, - hasMedia, allowPoll, hasPoll, onChangeAdvancedOption, diff --git a/app/javascript/flavours/glitch/features/compose/containers/options_container.js b/app/javascript/flavours/glitch/features/compose/containers/options_container.js index 19a90ac8b6..5b7ccc06b8 100644 --- a/app/javascript/flavours/glitch/features/compose/containers/options_container.js +++ b/app/javascript/flavours/glitch/features/compose/containers/options_container.js @@ -9,7 +9,6 @@ import { import { openModal } from 'flavours/glitch/actions/modal'; function mapStateToProps (state) { - const spoilersAlwaysOn = state.getIn(['local_settings', 'always_show_spoilers_field']); const poll = state.getIn(['compose', 'poll']); const media = state.getIn(['compose', 'media_attachments']); const pending_media = state.getIn(['compose', 'pending_media_attachments']); @@ -18,7 +17,6 @@ function mapStateToProps (state) { resetFileKey: state.getIn(['compose', 'resetFileKey']), hasPoll: !!poll, allowMedia: !poll && (media ? media.size + pending_media < 4 && !media.some(item => ['video', 'audio'].includes(item.get('type'))) : pending_media < 4), - hasMedia: media && !!media.size, allowPoll: !(media && !!media.size), showContentTypeChoice: state.getIn(['local_settings', 'show_content_type_choice']), contentType: state.getIn(['compose', 'content_type']), diff --git a/app/javascript/flavours/glitch/features/status/components/card.jsx b/app/javascript/flavours/glitch/features/status/components/card.jsx index 7e834b2dc1..0d5f781a02 100644 --- a/app/javascript/flavours/glitch/features/status/components/card.jsx +++ b/app/javascript/flavours/glitch/features/status/components/card.jsx @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import Immutable from 'immutable'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { FormattedMessage } from 'react-intl'; -import punycode from 'punycode'; import classnames from 'classnames'; import { decode as decodeIDNA } from 'flavours/glitch/utils/idna'; import Icon from 'flavours/glitch/components/icon'; @@ -164,7 +163,7 @@ export default class Card extends React.PureComponent { } render () { - const { card, compact, defaultWidth } = this.props; + const { card, compact } = this.props; const { width, embedded, revealed } = this.state; if (card === null) { diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx b/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx index cfe6c965ed..3f5b119444 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx @@ -122,9 +122,8 @@ class DetailedStatus extends ImmutablePureComponent { render () { const status = (this.props.status && this.props.status.get('reblog')) ? this.props.status.get('reblog') : this.props.status; - const { expanded, onToggleHidden, settings, pictureInPicture, intl } = this.props; const outerStyle = { boxSizing: 'border-box' }; - const { compact } = this.props; + const { compact, pictureInPicture, expanded, onToggleHidden, settings } = this.props; if (!status) { return null; diff --git a/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js b/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js index e5e0659876..25517a9f78 100644 --- a/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js +++ b/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js @@ -18,8 +18,6 @@ import { muteStatus, unmuteStatus, deleteStatus, - hideStatus, - revealStatus, } from 'flavours/glitch/actions/statuses'; import { initMuteModal } from 'flavours/glitch/actions/mutes'; import { initBlockModal } from 'flavours/glitch/actions/blocks'; diff --git a/app/javascript/flavours/glitch/features/ui/components/columns_area.jsx b/app/javascript/flavours/glitch/features/ui/components/columns_area.jsx index 3b3b0d58f7..458f48cde0 100644 --- a/app/javascript/flavours/glitch/features/ui/components/columns_area.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/columns_area.jsx @@ -50,7 +50,6 @@ export default class ColumnsArea extends ImmutablePureComponent { columns: ImmutablePropTypes.list.isRequired, singleColumn: PropTypes.bool, children: PropTypes.node, - navbarUnder: PropTypes.bool, openSettings: PropTypes.func, }; @@ -136,7 +135,7 @@ export default class ColumnsArea extends ImmutablePureComponent { }; render () { - const { columns, children, singleColumn, navbarUnder, openSettings } = this.props; + const { columns, children, singleColumn, openSettings } = this.props; const { renderComposePanel } = this.state; if (singleColumn) { diff --git a/app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.jsx index 5a1c1ee1b5..3face11463 100644 --- a/app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.jsx @@ -64,7 +64,7 @@ class DeprecatedSettingsModal extends React.PureComponent {
+ {/* eslint-disable-next-line jsx-a11y/no-onchange */} 0 && options.map((opt) => { let optionId = `${id}--${opt.value}`; return ( -