Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-01-22 16:46:28 +01:00
Code Issues Projects Releases Packages Wiki Activity

Somehow this kinda works

Browse source
This commit is contained in:
Lim Chee Aun 2023-08-01 18:20:54 +08:00
parent 72ff229dfb
commit c30eaee4e2
2 changed files with 4 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/media.jsx
View file

@ -121,7 +121,6 @@ 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
@ -143,7 +142,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
return ( return (
<Parent <Parent
ref={parentRef} ref={parentRef}
class={`media media-image ${fixedWidth ? 'media-fixed-width' : ''}`} class={`media media-image`}
onClick={onClick} onClick={onClick}
data-orientation={orientation} data-orientation={orientation}
style={ style={
@ -245,7 +244,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' : ''}

9
src/components/status.css
View file

@ -597,15 +597,10 @@
display: inline-block; display: inline-block;
max-width: 100% !important; max-width: 100% !important;
min-width: 44px; min-width: 44px;
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); */ width: min(fit-content, 100%);
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'] {