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

Handle tiny images & fix layout

Browse source 
Honestly there's just too many possibilities
This commit is contained in:
Lim Chee Aun 2024-06-11 14:46:29 +08:00
parent 17a3939061
commit c0c7fdd6e1
2 changed files with 37 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/components/media.jsx
View file

@ -362,21 +362,29 @@ function Media({
naturalWidth &&
naturalHeight
) {
const naturalAspectRatio = (
naturalWidth / naturalHeight
).toFixed(2);
const displayAspectRatio = (
clientWidth / clientHeight
).toFixed(2);
const similarThreshold = 0.05;
const minDimension = 88;
if (
naturalAspectRatio === displayAspectRatio ||
Math.abs(naturalAspectRatio - displayAspectRatio) <
similarThreshold
naturalWidth < minDimension ||
naturalHeight < minDimension
) {
$media.dataset.hasNaturalAspectRatio = true;
$media.dataset.hasSmallDimension = true;
} else {
const naturalAspectRatio = (
naturalWidth / naturalHeight
).toFixed(2);
const displayAspectRatio = (
clientWidth / clientHeight
).toFixed(2);
const similarThreshold = 0.05;
if (
naturalAspectRatio === displayAspectRatio ||
Math.abs(naturalAspectRatio - displayAspectRatio) <
similarThreshold
) {
$media.dataset.hasNaturalAspectRatio = true;
}
// $media.dataset.aspectRatios = `${naturalAspectRatio} ${displayAspectRatio}`;
}
// $media.dataset.aspectRatios = `${naturalAspectRatio} ${displayAspectRatio}`;
}
}
}}

24
src/components/status.css
View file

@ -1074,6 +1074,11 @@
&[data-has-natural-aspect-ratio] {
--media-radius: 4px;
}
&[data-has-small-dimension] img {
object-fit: contain;
image-rendering: pixelated;
}
}
.status .media-container.media-eq1 .media[data-orientation='portrait'] {
/* width: auto;
@ -1349,22 +1354,27 @@ body:has(#modal-container .carousel) .status .media img:hover {
background-color: var(--outline-color);
}
.status.large .media-large-container {
.status .media-large-container {
width: 100%;
max-width: 100%;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-direction: row;
/* align-items: center;
justify-content: center; */
column-gap: 8px;
flex-wrap: wrap;
text-align: center;
.media[data-has-small-dimension] {
width: auto !important;
}
figure {
justify-content: center;
flex-direction: column;
figcaption {
text-align: center;
flex-grow: 0 !important;
flex-basis: auto !important;
align-self: flex-start !important;
}
}
}