gitea/nas
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 17

fix: Fix direction of media gallery arrows (#35014)

Browse source
This commit is contained in:
diondiondion 2025-06-11 17:17:14 +02:00 • committed by GitHub
parent 2c828748a3
commit 9896bed85f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 14 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/javascript/mastodon/features/ui/components/media_modal.jsx
View file

@ -168,8 +168,8 @@ class MediaModal extends ImmutablePureComponent {
const index = this.getIndex(); const index = this.getIndex();
const leftNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><Icon id='chevron-left' icon={ChevronLeftIcon} /></button>; const leftNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--prev' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><Icon id='chevron-left' icon={ChevronLeftIcon} /></button>;
const rightNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='chevron-right' icon={ChevronRightIcon} /></button>; const rightNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--next' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='chevron-right' icon={ChevronRightIcon} /></button>;
const content = media.map((image, idx) => { const content = media.map((image, idx) => {
const width = image.getIn(['meta', 'original', 'width']) || null; const width = image.getIn(['meta', 'original', 'width']) || null;

5
app/javascript/styles/mastodon/components.scss
View file

@ -5850,6 +5850,7 @@ a.status-card {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
transform: scaleX(var(--text-x-direction));
&:hover, &:hover,
&:focus, &:focus,
@ -5858,11 +5859,11 @@ a.status-card {
} }
} }
.media-modal__nav--left { .media-modal__nav--prev {
inset-inline-start: 0; inset-inline-start: 0;
} }
.media-modal__nav--right { .media-modal__nav--next {
inset-inline-end: 0; inset-inline-end: 0;
} }

9
app/javascript/styles/mastodon/css_variables.scss
View file

@ -35,3 +35,12 @@
--input-background-color: var(--surface-variant-background-color); --input-background-color: var(--surface-variant-background-color);
--on-input-color: #{$secondary-text-color}; --on-input-color: #{$secondary-text-color};
} }
body {
// Variable for easily inverting directional UI elements,
--text-x-direction: 1;
&.rtl {
--text-x-direction: -1;
}
}