Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Fixed image widths for before/after slider

Browse source 
refs https://github.com/TryGhost/Team/issues/1249

Instead of attempting to calculate teh width of the container, we leave
one image to fill up space naturally as the browser allows it, and then
use that to set the width of the secondary image.
This commit is contained in:
Fabien egg O'Carroll 2021-12-15 16:25:54 +02:00
parent acd0223f5b
commit 16c6e535be
2 changed files with 4 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
core/frontend/src/cards/css/before-after.css
View file

@ -10,9 +10,8 @@
left: 0;
}
.kg-before-after-card img {
.kg-before-after-card .kg-before-after-card-image-before img {
max-width: none;
width: unset;
}
.kg-before-after-card input {

12
core/frontend/src/cards/js/before-after.js
View file

@ -2,14 +2,10 @@
const beforeAfterCards = [...document.querySelectorAll('.kg-before-after-card')];
for (let card of beforeAfterCards) {
const isFullWidth = card.classList.contains('kg-width-full');
const input = card.querySelector('input');
const overlay = card.querySelector('.kg-before-after-card-image-before');
const button = card.querySelector('.kg-before-after-card-slider-button');
const images = [...card.querySelectorAll('img')];
const smallestImageWidth = Math.min(
...images.map(img => parseInt(img.getAttribute('width')))
);
function updateSlider() {
overlay.setAttribute('style', `width: ${input.value}%`);
@ -17,11 +13,9 @@
}
function updateDimensions() {
const containerWidth = parseInt(getComputedStyle(card).getPropertyValue('width'));
const width = isFullWidth ? containerWidth : Math.min(smallestImageWidth, containerWidth);
for (let image of images) {
image.setAttribute('style', `width: ${width.toString()}px;`);
}
const imageWidth = getComputedStyle(images[0]).getPropertyValue('width');
images[1].setAttribute('style', `width: ${imageWidth}`);
}
input.addEventListener('input', function () {