mirrors
/
mastodon-glitch
mirror of https://github.com/glitch-soc/mastodon
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Change inner borders in media galleries in web UI 

Port a3215c0f88 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
pull/2843/head
Eugen Rochko 2024-09-11 09:29:18 +02:00 committed by Claire
parent eb28472ded
commit 196b141af5
2 changed files with 59 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/flavours/glitch/components/media_gallery.jsx
View File

@ -312,7 +312,7 @@ class MediaGallery extends PureComponent {
const style = {}; const style = {};
const computedClass = classNames('media-gallery', { 'full-width': fullwidth }); const computedClass = classNames('media-gallery', `media-gallery--layout-${size}`, { 'full-width': fullwidth });
if (this.isStandaloneEligible()) { // TODO: cropImages setting if (this.isStandaloneEligible()) { // TODO: cropImages setting
style.aspectRatio = `${this.props.media.getIn([0, 'meta', 'small', 'aspect'])}`; style.aspectRatio = `${this.props.media.getIn([0, 'meta', 'small', 'aspect'])}`;

58
app/javascript/flavours/glitch/styles/components.scss
View File

@ -7359,6 +7359,64 @@ img.modal-warning {
inset-inline-start: 8px; inset-inline-start: 8px;
display: flex; display: flex;
gap: 2px; gap: 2px;
&--layout-2 {
.media-gallery__item:nth-child(1) {
border-end-end-radius: 0;
border-start-end-radius: 0;
}
.media-gallery__item:nth-child(2) {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
}
&--layout-3 {
.media-gallery__item:nth-child(1) {
border-end-end-radius: 0;
border-start-end-radius: 0;
}
.media-gallery__item:nth-child(2) {
border-start-start-radius: 0;
border-end-start-radius: 0;
border-end-end-radius: 0;
}
.media-gallery__item:nth-child(3) {
border-start-start-radius: 0;
border-end-start-radius: 0;
border-start-end-radius: 0;
}
}
&--layout-4 {
.media-gallery__item:nth-child(1) {
border-end-end-radius: 0;
border-start-end-radius: 0;
border-end-start-radius: 0;
}
.media-gallery__item:nth-child(2) {
border-start-start-radius: 0;
border-end-start-radius: 0;
border-end-end-radius: 0;
}
.media-gallery__item:nth-child(3) {
border-start-start-radius: 0;
border-start-end-radius: 0;
border-end-start-radius: 0;
border-end-end-radius: 0;
}
.media-gallery__item:nth-child(4) {
border-start-start-radius: 0;
border-end-start-radius: 0;
border-start-end-radius: 0;
}
}
} }
.media-gallery__alt__label, .media-gallery__alt__label,