WIP: moved buttons #2610

still missing working autoplay, making it toggle between the modes and styling the text correctly
equinor · Dec 6, 2024 · dc55cb8 · dc55cb8
1 parent 493fbe1
commit dc55cb8
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 38 deletions.
diff --git a/web/core/Carousel/Carousel.tsx b/web/core/Carousel/Carousel.tsx
@@ -358,9 +358,9 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
           variant === 'image' && displayMode === 'single'
             ? 'w-[var(--image-carousel-card-w-sm)] md:w-[var(--image-carousel-card-w-md)] lg:w-[var(--image-carousel-card-w-lg)] mx-auto col-start-1 col-end-1 row-start-2 row-end-2'
             : ''
-        } pt-6 pb-2 ${items.length === 3 ? 'lg:hidden' : ''} flex ${
+        }  pb-2 ${items.length === 3 ? 'lg:hidden' : ''} flex ${
           internalAutoRotation ? 'justify-between' : 'justify-end'
-        }`}
+        } absolute bottom-10 left-0 right-0 z-10 min-w-0 mx-layout-sm`} 
       >
         <div id={controlsId} className="sr-only">
           <FormattedMessage id="carousel_controls" defaultMessage="Carousel controls" />

diff --git a/web/core/Carousel/CarouselImageItem.tsx b/web/core/Carousel/CarouselImageItem.tsx
@@ -16,7 +16,6 @@ type CarouselImageItemProps = {
   captionPositionUnderImage?: boolean
   action?: LinkData
 } & HTMLAttributes<HTMLLIElement>
-
 export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProps>(function CarouselImageItem(
   {
     active = false,
@@ -40,53 +39,34 @@ export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProp
       aria-roledescription="slide"
       className={envisTwMerge(
         `
-        aspect-4/5
-        md:aspect-video
         relative
         h-full
-        ${
-          displayMode === 'single'
-            ? `
-        transition-opacity
-        duration-1000
-        ease-[ease]`
-            : 'shrink-0'
-        }
+        ${displayMode === 'single' ? 'transition-opacity duration-1000 ease-[ease]' : 'shrink-0'}
         ${!active && displayMode === 'single' ? 'opacity-30' : ''}
         ${
           displayMode === 'scroll'
             ? 'w-[80%] snap-center scroll-ml-6'
-            : 'w-[var(--image-carousel-card-w-sm)] md:w-[var(--image-carousel-card-w-md)] lg:w-[var(--image-carousel-card-w-lg)] ms-2 me-2 col-start-1 col-end-1 row-start-1 row-end-1'
+            : 'w-[var(--image-carousel-card-w-sm)] md:w-[var(--image-carousel-card-w-md)] lg:w-[var(--image-carousel-card-w-lg)] ms-2 me-2'
         }
         `,
         className,
       )}
     >
-      {caption || attribution ? (
-        <figure className="relative w-full h-full">
-          <Image maxWidth={1420} image={image as ImageWithAlt} fill className="rounded-md" />
-          <figcaption
-            className={`${
-              active ? 'block' : 'hidden'
-            } absolute bottom-0 left-4 right-4 lg:left-8 lg:right-8 mb-4 lg:mb-8`}
-          >
-            <div
-              className={`bg-spruce-wood-70/75 text-slate-80 px-8 pt-6 w-fit flex flex-col max-w-text ${
-                attribution ? 'pb-4' : 'pb-6'
-              }`}
-            >
-              {caption && <span className={`text-lg ${attribution ? 'pb-3' : ''}`}>{caption}</span>}
-              {attribution && <span className="text-sm">{attribution}</span>}
-            </div>
+      {/* Image Section */}
+      <div className="relative w-full aspect-4/5 md:aspect-video">
+        <Image maxWidth={1420} image={image as ImageWithAlt} fill className="rounded-md" />
+        <GridLinkArrow action={action} variant="circle" />
+      </div>
+
+      {/* Caption Section */}
+      {(caption || attribution) && (
+        <figure className="relative w-full mt-4 ml-10">
+          <figcaption className="bg-spruce-wood-70/75 text-slate-80 px-4 py-2 rounded-md flex flex-col">
+            {caption && <span className="text-lg">{caption}</span>}
+            {attribution && <span className="text-sm mt-2">{attribution}</span>}
           </figcaption>
-          <GridLinkArrow action={action} variant='circle' />
         </figure>
-      ) : (
-        <>
-          <Image maxWidth={1420} image={image as ImageWithAlt} fill className="rounded-md" />
-          <GridLinkArrow action={action} variant='circle' />
-        </>
       )}
     </li>
-  )
-})
+  );
+});