OpenSource/mastodon
OpenSource/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2024-12-22 17:35:40 +01:00
Code Issues Projects Releases Packages 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 (
<div className='media-gallery' style={style} ref={this.handleRef}>
<div className={`media-gallery media-gallery--layout-${size}`} style={style} ref={this.handleRef}>
{(!visible || uncached) && (
<div className={classNames('spoiler-button', { 'spoiler-button--click-thru': uncached })}>
{spoilerButton}

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

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