Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Change media reordering design in the compose form in web UI (#32093)

Browse source
This commit is contained in:
Eugen Rochko 2024-09-27 17:09:39 +02:00 • committed by GitHub
parent cdd7526531
commit 11a12e56b3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 423 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -653,19 +653,39 @@ body > [data-popper-placement] {
}
&__uploads {
display: flex;
gap: 8px;
padding: 0 12px;
flex-wrap: wrap;
align-self: stretch;
align-items: flex-start;
align-content: flex-start;
justify-content: center;
aspect-ratio: 3/2;
}
.media-gallery {
gap: 8px;
}
&__upload {
flex: 1 1 0;
min-width: calc(50% - 8px);
position: relative;
cursor: grab;
&.dragging {
opacity: 0;
}
&.overlay {
height: 100%;
border-radius: 8px;
pointer-events: none;
}
&__drag-handle {
position: absolute;
top: 50%;
inset-inline-start: 0;
transform: translateY(-50%);
color: $white;
background: transparent;
border: 0;
padding: 8px 3px;
cursor: grab;
}
&__actions {
display: flex;
@ -686,8 +706,7 @@ body > [data-popper-placement] {
&__thumbnail {
width: 100%;
height: 144px;
border-radius: 6px;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
@ -7098,30 +7117,30 @@ a.status-card {
gap: 2px;
&--layout-2 {
.media-gallery__item:nth-child(1) {
& > .media-gallery__item:nth-child(1) {
border-end-end-radius: 0;
border-start-end-radius: 0;
}
.media-gallery__item:nth-child(2) {
& > .media-gallery__item:nth-child(2) {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
}
&--layout-3 {
.media-gallery__item:nth-child(1) {
& > .media-gallery__item:nth-child(1) {
border-end-end-radius: 0;
border-start-end-radius: 0;
}
.media-gallery__item:nth-child(2) {
& > .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) {
& > .media-gallery__item:nth-child(3) {
border-start-start-radius: 0;
border-end-start-radius: 0;
border-start-end-radius: 0;
@ -7129,26 +7148,26 @@ a.status-card {
}
&--layout-4 {
.media-gallery__item:nth-child(1) {
& > .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) {
& > .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) {
& > .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) {
& > .media-gallery__item:nth-child(4) {
border-start-start-radius: 0;
border-end-start-radius: 0;
border-start-end-radius: 0;