From c2373758ee7eff2f5cfd77ddff57469f0e4600e6 Mon Sep 17 00:00:00 2001
From: taazust5 <stefan.zurkinden@swisscom.com>
Date: Wed, 18 Sep 2024 14:37:40 +0200
Subject: [PATCH] feat(swiper): limit swiper image height

---
 app/components/ch/demo/CarouselExample.vue    |   6 -
 app/components/ch/demo/SlideshowExample.vue   |   8 +-
 .../stories/components/Carousel.stories.mdx   | 120 ----------------
 .../stories/components/Slideshow.stories.mdx  | 133 +++++-------------
 app/pages/detailPageSimple.vue                |  18 ---
 app/pages/detailPressRelease.vue              |  18 ---
 css/components/carousel.postcss               |  10 ++
 7 files changed, 44 insertions(+), 269 deletions(-)

diff --git a/app/components/ch/demo/CarouselExample.vue b/app/components/ch/demo/CarouselExample.vue
index b605d6f4..25a80c69 100644
--- a/app/components/ch/demo/CarouselExample.vue
+++ b/app/components/ch/demo/CarouselExample.vue
@@ -66,12 +66,6 @@
         <Card type="default">
           <template v-slot:image>
             <picture>
-              <source
-                :srcset="slide.source.srcset"
-                :height="slide.source.height"
-                :width="slide.source.width"
-                :media="slide.source.media"
-              />
               <img
                 :src="slide.image.src"
                 :alt="slide.image.alt"
diff --git a/app/components/ch/demo/SlideshowExample.vue b/app/components/ch/demo/SlideshowExample.vue
index 35401963..5028673b 100644
--- a/app/components/ch/demo/SlideshowExample.vue
+++ b/app/components/ch/demo/SlideshowExample.vue
@@ -5,7 +5,7 @@
     <swiper
       :breakpoints="breakpoints"
       :speed="500"
-      :autoHeight="true"
+      :autoHeight="false"
       :loop="loop"
       :keyboard="{
         enabled: true,
@@ -33,12 +33,6 @@
       >
         <figure>
           <picture>
-            <source
-              :srcset="slide.source.srcset"
-              :height="slide.source.height"
-              :width="slide.source.width"
-              :media="slide.source.media"
-            />
             <img
               :src="slide.image.src"
               :alt="slide.image.alt"
diff --git a/app/components/stories/components/Carousel.stories.mdx b/app/components/stories/components/Carousel.stories.mdx
index 78a38170..1cbd109d 100644
--- a/app/components/stories/components/Carousel.stories.mdx
+++ b/app/components/stories/components/Carousel.stories.mdx
@@ -98,12 +98,6 @@ If the number of images is relatively low (below 6), use the `bullets` variant.
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=29',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           title: 'Card title',
           description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
           footerInfo: 'Dienstleistungen & Produkte',
@@ -115,12 +109,6 @@ If the number of images is relatively low (below 6), use the `bullets` variant.
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=28',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           title: 'Card title',
           description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
           footerInfo: 'Dienstleistungen & Produkte',
@@ -132,12 +120,6 @@ If the number of images is relatively low (below 6), use the `bullets` variant.
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=1045',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           title: 'Card title',
           description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
           footerInfo: 'Dienstleistungen & Produkte',
@@ -149,12 +131,6 @@ If the number of images is relatively low (below 6), use the `bullets` variant.
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=29',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           title: 'Card title',
           description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
           footerInfo: 'Dienstleistungen & Produkte',
@@ -166,12 +142,6 @@ If the number of images is relatively low (below 6), use the `bullets` variant.
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=28',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           title: 'Card title',
           description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
           footerInfo: 'Dienstleistungen & Produkte',
@@ -200,12 +170,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=29',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           title: 'Card title',
           description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
           footerInfo: 'Dienstleistungen & Produkte',
@@ -217,12 +181,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=28',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           title: 'Card title',
           description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
           footerInfo: 'Dienstleistungen & Produkte',
@@ -234,12 +192,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=1045',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           title: 'Card title',
           description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
           footerInfo: 'Dienstleistungen & Produkte',
@@ -251,12 +203,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=29',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           title: 'Card title',
           description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
           footerInfo: 'Dienstleistungen & Produkte',
@@ -268,12 +214,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=28',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           title: 'Card title',
           description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
           footerInfo: 'Dienstleistungen & Produkte',
@@ -285,12 +225,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=1045',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           title: 'Card title',
           description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
           footerInfo: 'Dienstleistungen & Produkte',
@@ -302,12 +236,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=29',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           title: 'Card title',
           description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
           footerInfo: 'Dienstleistungen & Produkte',
@@ -319,12 +247,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=28',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           title: 'Card title',
           description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
           footerInfo: 'Dienstleistungen & Produkte',
@@ -336,12 +258,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=28',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           title: 'Card title',
           description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
           footerInfo: 'Dienstleistungen & Produkte',
@@ -353,12 +269,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=28',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           title: 'Card title',
           description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
           footerInfo: 'Dienstleistungen & Produkte',
@@ -370,12 +280,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=28',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           title: 'Card title',
           description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
           footerInfo: 'Dienstleistungen & Produkte',
@@ -387,12 +291,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=28',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           title: 'Card title',
           description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
           footerInfo: 'Dienstleistungen & Produkte',
@@ -423,12 +321,6 @@ The recommended background colors for carousels are the following: `bg--default`
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=29',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           title: 'Card title',
           description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
           footerInfo: 'Dienstleistungen & Produkte',
@@ -440,12 +332,6 @@ The recommended background colors for carousels are the following: `bg--default`
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=28',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           title: 'Card title',
           description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
           footerInfo: 'Dienstleistungen & Produkte',
@@ -457,12 +343,6 @@ The recommended background colors for carousels are the following: `bg--default`
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=1045',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           title: 'Card title',
           description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
           footerInfo: 'Dienstleistungen & Produkte',
diff --git a/app/components/stories/components/Slideshow.stories.mdx b/app/components/stories/components/Slideshow.stories.mdx
index d3387c4d..67b6b4f9 100644
--- a/app/components/stories/components/Slideshow.stories.mdx
+++ b/app/components/stories/components/Slideshow.stories.mdx
@@ -1,16 +1,12 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
 import SlideshowExample from '../../ch/demo/SlideshowExample.vue'
 
-<Meta
-  title="Components/Slideshow"
-  component={SlideshowExample}
-/>
+<Meta title="Components/Slideshow" component={SlideshowExample} />
 
 export const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { SlideshowExample},
-  template:
-    `
+  components: { SlideshowExample },
+  template: `
     <div class="container">
       <SlideshowExample
         :breakpoints="breakpoints"
@@ -28,6 +24,7 @@ Slideshows are used to display a collection of images. This component is similar
 Slideshows are built with https://swiperjs.com/. Check the documentation for specific topics, like lazy loading if you have a large list of pictures.
 
 ## Bullets as pagination
+
 If the number of images is relatively low (around 5), use the `bullets` variant.
 
 <Canvas>
@@ -44,17 +41,11 @@ If the number of images is relatively low (around 5), use the `bullets` variant.
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=29',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           caption: {
             title: 'Image one title',
             description: 'Image one description',
-            copyright: 'Photograph name'
-          }
+            copyright: 'Photograph name',
+          },
         },
         {
           image: {
@@ -63,16 +54,10 @@ If the number of images is relatively low (around 5), use the `bullets` variant.
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=28',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           caption: {
             title: 'Image two, title without description',
-            copyright: 'Photograph name'
-          }
+            copyright: 'Photograph name',
+          },
         },
         {
           image: {
@@ -81,18 +66,12 @@ If the number of images is relatively low (around 5), use the `bullets` variant.
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=1045',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           caption: {
             description: 'Image three, description only',
-            copyright: 'Photograph name'
-          }
-        }
-      ]
+            copyright: 'Photograph name',
+          },
+        },
+      ],
     }}
   >
     {Template.bind({})}
@@ -100,6 +79,7 @@ If the number of images is relatively low (around 5), use the `bullets` variant.
 </Canvas>
 
 ## Fraction as pagination
+
 If the number of images is higher than 5, it's better to use the `fraction` variant.
 
 <Canvas>
@@ -116,16 +96,10 @@ If the number of images is higher than 5, it's better to use the `fraction` vari
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=29',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           caption: {
             title: 'Image title',
-            copyright: 'Photograph name'
-          }
+            copyright: 'Photograph name',
+          },
         },
         {
           image: {
@@ -134,17 +108,12 @@ If the number of images is higher than 5, it's better to use the `fraction` vari
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=28',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           caption: {
             title: 'Image title with potentially long description',
-            description: 'Example of a very long textual description, the caption is displayed on several lines, the slideshow height is adapted automatically. Example of a very long textual description. ',
-            copyright: 'Photograph name'
-          }
+            description:
+              'Example of a very long textual description, the caption is displayed on several lines, the slideshow height is adapted automatically. Example of a very long textual description. ',
+            copyright: 'Photograph name',
+          },
         },
         {
           image: {
@@ -153,16 +122,10 @@ If the number of images is higher than 5, it's better to use the `fraction` vari
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=10',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           caption: {
             title: 'Image title',
-            copyright: 'Photograph name'
-          }
+            copyright: 'Photograph name',
+          },
         },
         {
           image: {
@@ -171,16 +134,10 @@ If the number of images is higher than 5, it's better to use the `fraction` vari
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=11',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           caption: {
             title: 'Image title',
-            copyright: 'Photograph name'
-          }
+            copyright: 'Photograph name',
+          },
         },
         {
           image: {
@@ -189,16 +146,10 @@ If the number of images is higher than 5, it's better to use the `fraction` vari
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=114',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           caption: {
             title: 'Image title',
-            copyright: 'Photograph name'
-          }
+            copyright: 'Photograph name',
+          },
         },
         {
           image: {
@@ -207,16 +158,10 @@ If the number of images is higher than 5, it's better to use the `fraction` vari
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=128',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           caption: {
             title: 'Image title',
-            copyright: 'Photograph name'
-          }
+            copyright: 'Photograph name',
+          },
         },
         {
           image: {
@@ -225,16 +170,10 @@ If the number of images is higher than 5, it's better to use the `fraction` vari
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=15',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           caption: {
             title: 'Image title',
-            copyright: 'Photograph name'
-          }
+            copyright: 'Photograph name',
+          },
         },
         {
           image: {
@@ -243,18 +182,12 @@ If the number of images is higher than 5, it's better to use the `fraction` vari
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=177',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           caption: {
             title: 'Image title',
-            copyright: 'Photograph name'
-          }
-        }
-      ]
+            copyright: 'Photograph name',
+          },
+        },
+      ],
     }}
   >
     {Template.bind({})}
diff --git a/app/pages/detailPageSimple.vue b/app/pages/detailPageSimple.vue
index 53c93317..eb433f70 100644
--- a/app/pages/detailPageSimple.vue
+++ b/app/pages/detailPageSimple.vue
@@ -946,12 +946,6 @@ export default {
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=29',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           caption: {
             title: 'Image one title',
             description: 'Image one description',
@@ -965,12 +959,6 @@ export default {
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=28',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           caption: {
             title: 'Image two, title without description',
             copyright: 'Photograph name',
@@ -983,12 +971,6 @@ export default {
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=1045',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           caption: {
             description: 'Image three, description only',
             copyright: 'Photograph name',
diff --git a/app/pages/detailPressRelease.vue b/app/pages/detailPressRelease.vue
index e26c45a4..a2b65880 100644
--- a/app/pages/detailPressRelease.vue
+++ b/app/pages/detailPressRelease.vue
@@ -236,12 +236,6 @@ export default {
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=29',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           caption: {
             title: 'Image one title',
             description: 'Image one description',
@@ -255,12 +249,6 @@ export default {
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=28',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           caption: {
             title: 'Image two, title without description',
             copyright: 'Photograph name'
@@ -273,12 +261,6 @@ export default {
             height: '768',
             alt: 'image name',
           },
-          source: {
-            srcset: 'https://picsum.photos/2048/1152/?image=1045',
-            width: '2048',
-            height: '1152',
-            media: '(min-width: 1024px)',
-          },
           caption: {
             description: 'Image three, description only',
             copyright: 'Photograph name'
diff --git a/css/components/carousel.postcss b/css/components/carousel.postcss
index dba9eaad..74c2d0be 100644
--- a/css/components/carousel.postcss
+++ b/css/components/carousel.postcss
@@ -251,6 +251,16 @@
   height: auto;
   position: relative;
   transition-property: transform;
+  img {
+    @apply mx-auto;
+    @apply !w-auto;
+    @apply max-h-[30rem] sm:max-h-[35rem] md:max-h-[40rem] lg:max-h-[48rem];
+  }
+  .card {
+    img {
+      @apply !w-full;
+    }
+  }
 }
 .swiper-slide-invisible-blank {
   visibility: hidden;