techhub/mastodon
2
0
Fork 0
Code Activity

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
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 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 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 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--next' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='chevron-right' icon={ChevronRightIcon} /></button>;
const content = media.map((image, idx) => {
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;
top: 0;
bottom: 0;
transform: scaleX(var(--text-x-direction));
&:hover,
&:focus,
@@ -5858,11 +5859,11 @@ a.status-card {
}
}
.media-modal__nav--left {
.media-modal__nav--prev {
inset-inline-start: 0;
}
.media-modal__nav--right {
.media-modal__nav--next {
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);
--on-input-color: #{$secondary-text-color};
}
body {
// Variable for easily inverting directional UI elements,
--text-x-direction: 1;
&.rtl {
--text-x-direction: -1;
}
}