Leatherface/mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-12-11 14:30:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] fix: Fix direction of media gallery arrows

Browse Source 
Port 9896bed85f to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion
2025-06-11 17:17:14 +02:00
committed by Claire
parent 1a732157d4
commit 180754a14e
3 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/flavours/glitch/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/flavours/glitch/styles/components.scss
View File

@@ -6087,6 +6087,7 @@ a.status-card {
position: absolute;
top: 0;
bottom: 0;
transform: scaleX(var(--text-x-direction));
&:hover,
&:focus,
@@ -6095,11 +6096,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/flavours/glitch/styles/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;
}
}