tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change inner borders in media galleries in web UI (#31852)

Browse Source
This commit is contained in:
Eugen Rochko 2024-09-11 09:29:18 +02:00 committed by GitHub
parent 9e12fa254e
commit a3215c0f88
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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/mastodon/components/media_gallery.jsx
View File

@ -327,7 +327,7 @@ class MediaGallery extends PureComponent {
} }
return ( return (
<div className='media-gallery' style={style} ref={this.handleRef}> <div className={`media-gallery media-gallery--layout-${size}`} style={style} ref={this.handleRef}>
{(!visible || uncached) && ( {(!visible || uncached) && (
<div className={classNames('spoiler-button', { 'spoiler-button--click-thru': uncached })}> <div className={classNames('spoiler-button', { 'spoiler-button--click-thru': uncached })}>
{spoilerButton} {spoilerButton}

58
app/javascript/styles/mastodon/components.scss
View File

@ -6953,6 +6953,64 @@ a.status-card {
grid-template-columns: 50% 50%; grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%; grid-template-rows: 50% 50%;
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__item { .media-gallery__item {