mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-24 18:25:41 +03:00
Code Issues Projects Releases Packages 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`, '--height': `${height}px`,
aspectRatio: `${width} / ${height}`, aspectRatio: `${width} / ${height}`,
}; };
const fixedWidth = width > height * 2;
if (isImage) { if (isImage) {
// Note: type: unknown might not have width/height // Note: type: unknown might not have width/height
@ -142,7 +143,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
return ( return (
<Parent <Parent
ref={parentRef} ref={parentRef}
class={`media media-image`} class={`media media-image ${fixedWidth ? 'media-fixed-width' : ''}`}
onClick={onClick} onClick={onClick}
data-orientation={orientation} data-orientation={orientation}
style={ style={
@ -244,7 +245,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
<Parent <Parent
class={`media media-${isGIF ? 'gif' : 'video'} ${ class={`media media-${isGIF ? 'gif' : 'video'} ${
autoGIFAnimate ? 'media-contain' : '' autoGIFAnimate ? 'media-contain' : ''
}`} } ${fixedWidth ? 'media-fixed-width' : ''}`}
data-orientation={orientation} data-orientation={orientation}
data-formatted-duration={formattedDuration} data-formatted-duration={formattedDuration}
data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''} data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''}

7
src/components/status.css
View file

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