mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-17 07:41:35 +03:00
Code Issues Projects Releases Packages Wiki Activity

Nicer radius for multi-media container

Browse source
This commit is contained in:
Lim Chee Aun 2023-01-23 20:35:15 +08:00
parent 56b6552d65
commit cdb5435796
2 changed files with 30 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/components/status.css
View file

@ -325,12 +325,40 @@
min-height: 160px;
max-height: 60vh;
}
.status .media {
.status .media-container .media {
border-radius: 8px;
overflow: hidden;
min-height: 80px;
border: 1px solid var(--outline-color);
}
/* Special media borders */
.status .media-container.media-eq2 .media:first-of-type {
border-radius: 8px 0 0 8px;
}
.status .media-container.media-eq2 .media:last-of-type {
border-radius: 0 8px 8px 0;
}
.status .media-container.media-eq3 .media:first-of-type {
border-radius: 8px 0 0 8px;
}
.status .media-container.media-eq3 .media:nth-of-type(2) {
border-radius: 0 8px 0 0;
}
.status .media-container.media-eq3 .media:last-of-type {
border-radius: 0 0 8px 0;
}
.status .media-container.media-eq4 .media:first-of-type {
border-radius: 8px 0 0 0;
}
.status .media-container.media-eq4 .media:nth-of-type(2) {
border-radius: 0 8px 0 0;
}
.status .media-container.media-eq4 .media:nth-of-type(3) {
border-radius: 0 0 0 8px;
}
.status .media-container.media-eq4 .media:last-of-type {
border-radius: 0 0 8px 0;
}
.status .media:only-child {
grid-area: span 2 / span 2;
}

2
src/components/status.jsx
View file

@ -391,7 +391,7 @@ function Status({
)}
{!!mediaAttachments.length && (
<div
class={`media-container ${
class={`media-container media-eq${mediaAttachments.length} ${
mediaAttachments.length > 2 ? 'media-gt2' : ''
} ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`}
>