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

Another aspect ratio style fix

Browse source
This commit is contained in:
Lim Chee Aun 2023-08-02 17:41:00 +08:00
parent 88accb2a78
commit 1887a34fc5
2 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/media.jsx
View file

@ -116,12 +116,16 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
if (smaller) setImageSmallerThanParent(smaller); if (smaller) setImageSmallerThanParent(smaller);
}, [width, height]); }, [width, height]);
const maxAspectHeight = window.innerHeight * 0.33; const maxAspectHeight =
window.innerHeight * (orientation === 'portrait' ? 0.45 : 0.33);
const maxHeight = orientation === 'portrait' ? 0 : 160;
const mediaStyles = { const mediaStyles = {
'--width': `${width}px`, '--width': `${width}px`,
'--height': `${height}px`, '--height': `${height}px`,
// Calculate '--aspectWidth' based on aspect ratio calculated from '--width' and '--height', max height has to be 160px // Calculate '--aspectWidth' based on aspect ratio calculated from '--width' and '--height', max height has to be 160px
'--aspectWidth': `${(width / height) * Math.max(160, maxAspectHeight)}px`, '--aspectWidth': `${
(width / height) * Math.max(maxHeight, maxAspectHeight)
}px`,
aspectRatio: `${width} / ${height}`, aspectRatio: `${width} / ${height}`,
}; };

13
src/components/status.css
View file

@ -618,16 +618,21 @@
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'] {
width: auto; /* width: auto;
height: min(var(--height), 45vh); height: min(var(--height), 45vh);
max-height: none; max-height: none; */
max-height: min(var(--height), 45vh);
} }
.status.large .media-container.media-eq1 { .status.large .media-container.media-eq1 {
max-height: min(var(--height), 60vh); max-height: min(var(--height), 60vh);
} }
.status.large .media-container.media-eq1 .media[data-orientation='portrait'] { .status.large .media-container.media-eq1 .media {
height: min(var(--height), 60vh); width: min(var(--width), 100%);
max-height: min(var(--height), 80vh);
} }
/* .status.large .media-container.media-eq1 .media[data-orientation='portrait'] {
height: min(var(--height), 60vh);
} */
.status-carousel .status .media-container.media-eq1 .media { .status-carousel .status .media-container.media-eq1 .media {
width: min(var(--width), 100%); width: min(var(--width), 100%);
height: auto; height: auto;