From 1887a34fc5def3e5461ce97a3242694400e6f31d Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 2 Aug 2023 17:41:00 +0800
Subject: [PATCH] Another aspect ratio style fix
---
src/components/media.jsx | 8 ++++++--
src/components/status.css | 13 +++++++++----
2 files changed, 15 insertions(+), 6 deletions(-)
diff --git a/src/components/media.jsx b/src/components/media.jsx
index 9f0361cd..da67646b 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -116,12 +116,16 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
if (smaller) setImageSmallerThanParent(smaller);
}, [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 = {
'--width': `${width}px`,
'--height': `${height}px`,
// 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}`,
};
diff --git a/src/components/status.css b/src/components/status.css
index 2a31a424..971d415f 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -618,16 +618,21 @@
max-height: min(var(--height), 33vh);
}
.status .media-container.media-eq1 .media[data-orientation='portrait'] {
- width: auto;
+ /* width: auto;
height: min(var(--height), 45vh);
- max-height: none;
+ max-height: none; */
+ max-height: min(var(--height), 45vh);
}
.status.large .media-container.media-eq1 {
max-height: min(var(--height), 60vh);
}
-.status.large .media-container.media-eq1 .media[data-orientation='portrait'] {
- height: min(var(--height), 60vh);
+.status.large .media-container.media-eq1 .media {
+ 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 {
width: min(var(--width), 100%);
height: auto;