fix: Oops broken template string

kiosion · Nov 5, 2023 · 73b20a0 · 73b20a0
1 parent 5be9f57
commit 73b20a0
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/svelte-app/src/components/portable-text/image-carousel.svelte b/svelte-app/src/components/portable-text/image-carousel.svelte
@@ -15,7 +15,8 @@
     dialog: HTMLDialogElement,
     currentIndex = 0;
 
-  const scrollIntoView = () =>
+  const carouselMaxHeight = 402,
+    scrollIntoView = () =>
       imageElements[currentIndex]?.scrollIntoView({
         behavior: 'smooth',
         block: 'nearest',
@@ -45,7 +46,6 @@
   $: values = images.map((image) => {
     const crop = getCrop(image),
       baseUrl = urlFor(image.asset._ref),
-      carouselMaxHeight = 402,
       carouselDimensions = {
         width: carouselMaxHeight * (crop.width / crop.height),
         height: carouselMaxHeight
@@ -71,10 +71,10 @@
         <button
           class="focusOutline-sm"
           style={`
-            aspect-ratio: {image.crop.width} / {image.crop.height};
+            aspect-ratio: ${image.crop.width} / ${image.crop.height};
             width: ${image.carouselDimensions.width}px;
             height: ${image.carouselDimensions.height}px;
-            max-height: 402px;
+            max-height: ${carouselMaxHeight}px;
           `}
           on:click={() => {
             currentIndex = i;
@@ -93,14 +93,14 @@
               draggable="false"
               alt={i.toString()}
               class="opacity-0"
-              style="max-height: 402px;"
+              style="max-height: {carouselMaxHeight}px;"
             />
           {:else}
             <img
               src={image.srcUrl}
               draggable="false"
               alt={i.toString()}
-              style="max-height: 402px;"
+              style="max-height: {carouselMaxHeight}px;"
               bind:this={imageElements[i]}
               in:receive={{ key: i, duration: BASE_ANIMATION_DURATION }}
               out:send={{ key: i, duration: BASE_ANIMATION_DURATION }}