fix image expansion
This commit is contained in:
@@ -1735,18 +1735,19 @@ body.sidebar-right-hidden .global-sidebar-right {
|
|||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* When image is expanded: switch to flex column so image height pushes metadata below it */
|
/* When image is expanded: flex column so metadata stays below the image */
|
||||||
body.layout-modern .item-layout-container .item-main-content:has(.embed-responsive.is-expanded) {
|
body.layout-modern .item-layout-container .item-main-content:has(.embed-responsive.is-expanded) {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Prevent flex children from shrinking inside the fixed-height container —
|
/* flex-shrink: 0 prevents children from compressing to fit the fixed-height container.
|
||||||
without this they compress to fit and the image overflows visually */
|
align-self: center overrides the grid-mode "align-self: start" rules — in flex-column
|
||||||
|
"start" means left, not top, so we explicitly center instead. */
|
||||||
body.layout-modern .item-layout-container .item-main-content:has(.embed-responsive.is-expanded) > * {
|
body.layout-modern .item-layout-container .item-main-content:has(.embed-responsive.is-expanded) > * {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
width: 100%;
|
align-self: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.layout-modern .item-layout-container .item-main-content ._204863 {
|
body.layout-modern .item-layout-container .item-main-content ._204863 {
|
||||||
|
|||||||
@@ -8166,7 +8166,24 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
if (expandOnClick) {
|
if (expandOnClick) {
|
||||||
const wrapper = elfe.closest('.embed-responsive');
|
const wrapper = elfe.closest('.embed-responsive');
|
||||||
if (wrapper) {
|
if (wrapper) {
|
||||||
wrapper.classList.toggle('is-expanded');
|
// If already expanded, always allow collapsing
|
||||||
|
if (wrapper.classList.contains('is-expanded')) {
|
||||||
|
wrapper.classList.remove('is-expanded');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Only expand if the image is actually being clipped (not fully visible).
|
||||||
|
// Compare the image's rendered height to its natural height —
|
||||||
|
// if rendered >= natural, the image already fits fully in the box.
|
||||||
|
const img = wrapper.querySelector('img#f0ck-image');
|
||||||
|
if (img && img.complete && img.naturalHeight > 0) {
|
||||||
|
const rendered = img.getBoundingClientRect();
|
||||||
|
// Allow a 2px tolerance for subpixel rounding
|
||||||
|
if (rendered.height + 2 >= img.naturalHeight) {
|
||||||
|
// Fully visible — do nothing (no expand needed, no modal)
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
wrapper.classList.add('is-expanded');
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
openImageModal(elfe.href);
|
openImageModal(elfe.href);
|
||||||
|
|||||||
Reference in New Issue
Block a user