nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Adjustments to prevent layout shift

Browse source
This commit is contained in:
Lim Chee Aun 2023-08-01 14:26:22 +08:00
parent 48a5fc6327
commit b1b1ed0f3f
2 changed files with 10 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/media.jsx
View file

@ -121,6 +121,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
'--height': `${height}px`,
aspectRatio: `${width} / ${height}`,
};
const fixedWidth = width > height * 2;
if (isImage) {
// Note: type: unknown might not have width/height
@ -142,7 +143,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
return (
<Parent
ref={parentRef}
class={`media media-image`}
class={`media media-image ${fixedWidth ? 'media-fixed-width' : ''}`}
onClick={onClick}
data-orientation={orientation}
style={
@ -244,7 +245,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
<Parent
class={`media media-${isGIF ? 'gif' : 'video'} ${
autoGIFAnimate ? 'media-contain' : ''
}`}
} ${fixedWidth ? 'media-fixed-width' : ''}`}
data-orientation={orientation}
data-formatted-duration={formattedDuration}
data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''}

7
src/components/status.css
View file

@ -600,6 +600,12 @@
width: auto;
min-height: 44px;
/* width: min(var(--width), 100%); */
/* max-height: min(var(--height), 33vh); */
height: min(160px, var(--height), 33vh);
}
.status .media-container.media-eq1 .media.media-fixed-width {
width: min(var(--width), 100%);
height: auto;
max-height: min(var(--height), 33vh);
}
.status .media-container.media-eq1 .media[data-orientation='portrait'] {
@ -694,6 +700,7 @@
width: 100%;
height: 100%;
object-fit: cover;
vertical-align: middle;
}
.status .media {
cursor: pointer;