ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Remove console logs, fix up down scaling

This commit is contained in:
Lorenz Padberg 2024-05-03 15:00:21 +02:00
parent 9752867dd4
commit 581fc9ff69
1 changed files with 2 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/components/ui/WagtailImage.vue
View File

@ -48,32 +48,20 @@ const updateDimensions = () => {
height.value = clientHeight; height.value = clientHeight;
} }
calculateBackgroundHeight(); calculateBackgroundHeight();
console.log('sizes ', width.value, height.value);
}; };
const calculateBackgroundHeight = () => { const calculateBackgroundHeight = () => {
// calculate the hight of the background so, that you see a gray box of correct height before image is loaded // calculate the hight of the background so, that you see a gray box of correct height before image is loaded
console.log('calculateBackgrondHeight');
if (width.value) { if (width.value) {
const scalingFactor = width.value / props.originalWidth; const scalingFactor = width.value / props.originalWidth;
scaledHeight.value = Math.round(props.originalHeight * scalingFactor); scaledHeight.value = Math.round(props.originalHeight * scalingFactor);
if (height.value > 3 && height.value < scaledHeight.value && imgElement.value) {
// if parents height is limited and smaller than the scaled height
const { clientHeight } = imgElement.value.parentElement;
backgroundHeight.value = `${clientHeight}px`;
console.log('calculateBackgrondHeight a', backgroundHeight.value);
return;
}
if (width.value) { if (width.value) {
backgroundHeight.value = `${scaledHeight.value}px`; backgroundHeight.value = `${scaledHeight.value}px`;
console.log('calculateBackgrondHeight b ', backgroundHeight.value);
return; return;
} }
} }
backgroundHeight.value = '100%'; backgroundHeight.value = '100%';
console.log('calculateBackgrondHeight c', backgroundHeight.value);
}; };
const handleLoad = () => { const handleLoad = () => {
@ -111,8 +99,10 @@ onBeforeUnmount(() => {
.wagtail-image { .wagtail-image {
overflow: hidden; overflow: hidden;
height: 100%;
&__background { &__background {
max-height: 100%;
background-color: $color-silver-light; background-color: $color-silver-light;
} }