🎨 add grid areas

equinor · Jan 24, 2025 · d54b21d · d54b21d
1 parent d7f33ca
commit d54b21d
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 20 deletions.
diff --git a/web/core/Carousel/Carousel.tsx b/web/core/Carousel/Carousel.tsx
@@ -233,7 +233,7 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
     video: 'flex gap-3 lg:gap-12 w-full h-full overflow-y-hidden no-scrollbar',
     image: `${
       displayMode === 'single'
-        ? 'grid transition-transform ease-scroll delay-0 duration-[800ms]'
+        ? `grid transition-transform ease-scroll delay-0 duration-[800ms]`
         : 'flex gap-3 md:gap-8 w-full h-full overflow-y-hidden no-scrollbar'
     }`,
     event: `flex gap-3 lg:gap-6 w-full h-full overflow-y-hidden no-scrollbar`,
@@ -341,9 +341,9 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
         mx-auto
         ${
           variant === 'image' && displayMode === 'single'
-            ? 'grid grid-flow-row'
-            : 'px-6 lg:px-layout-sm flex flex-col sm:flex-col-reverse max-w-viewport'
-            }
+            ? 'grid grid-cols-1 grid-rows-auto carousel-top-bottom-grid-area'
+            : 'px-6 lg:px-layout-sm flex flex-col-reverse max-w-viewport'
+        }
         
         `,
         className,
@@ -354,13 +354,26 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
         role="group"
         aria-labelledby={controlsId}
         className={`
+          grid
+          grid-cols-[80px_auto_150px]
+          grid-rows-1
+          carousel-controls-grid-area
+          pt-6
+          lg:pt-2
+          pb-2
+          ${items.length === 3 ? 'lg:hidden' : ''}
+          ${internalAutoRotation ? 'justify-between' : 'justify-end'}
           ${
-          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-1 row-end-1 sm:row-start-2 sm:row-end-2'
-            : ''
-        } pt-2 sm:pt-6 pb-2 ${items.length === 3 ? 'lg:hidden' : ''} flex ${
-          internalAutoRotation ? 'justify-between' : 'justify-end'
-        }`}
+            variant === 'image' && displayMode === 'single'
+              ? `
+            mx-auto
+            [grid-area:top]
+            lg:[grid-area:bottom]
+            w-[var(--image-carousel-card-w-sm)] 
+            md:w-[var(--image-carousel-card-w-md)] 
+            lg:w-[var(--image-carousel-card-w-lg)]`
+              : ''
+          }`}
       >
         <div id={controlsId} className="sr-only">
           <FormattedMessage id="carousel_controls" defaultMessage="Carousel controls" />
@@ -375,9 +388,10 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
             }}
             paused={pauseAutoRotation}
             useTimer
+            className="[grid-area:left]"
           />
         )}
-        <div className="flex gap-3 items-center">
+        <div className="[grid-area:right] flex gap-3 items-center">
           <MediaButton
             title={`Go to previous`}
             aria-controls={carouselItemsId}

diff --git a/web/core/Carousel/CarouselImageItem.tsx b/web/core/Carousel/CarouselImageItem.tsx
@@ -18,7 +18,17 @@ type CarouselImageItemProps = {
 } & HTMLAttributes<HTMLLIElement>
 
 export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProps>(function CarouselImageItem(
-  { active = false, image, caption, attribution, displayMode = 'single', className = '', action, captionPositionUnderImage, ...rest },
+  {
+    active = false,
+    image,
+    caption,
+    attribution,
+    displayMode = 'single',
+    className = '',
+    action,
+    captionPositionUnderImage,
+    ...rest
+  },
   ref,
 ) {
   return (
@@ -46,7 +56,13 @@ export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProp
         ${
           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 
+            [grid-area:bottom]
+            lg:[grid-area:top]`
         }
         `,
         className,
@@ -57,11 +73,23 @@ export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProp
           <Image maxWidth={1420} image={image as ImageWithAlt} fill className="rounded-md" />
           <GridLinkArrow action={action} variant="circle" />
           <figcaption
-            className={`${
-              active ? 'block' : 'hidden'
-            } ${
-              captionPositionUnderImage ? '-bottom-[110px] sm:-bottom-[158px] mb-auto min-w-full max-w-full sm:min-w-[40%] sm:max-w-[60%] lg:left-16' : 'bottom-0 lg:left-8'
-            } absolute left-4 right-4 lg:right-8 mb-12 lg:mb-8
+            className={`
+              ${active ? 'block' : 'hidden'} 
+              ${
+                captionPositionUnderImage
+                  ? `
+                -bottom-[198px] 
+                sm:-bottom-[158px] 
+                mb-4 
+                min-w-full
+                max-w-full
+                sm:min-w-[40%] 
+                sm:max-w-[60%] 
+                lg:left-16
+                lg:w-[calc(100%-80px-150px)]
+                `
+                  : 'bottom-0 lg:left-8'
+              } absolute left-4 right-4 lg:right-8 mb-12 lg:mb-8
              `}
           >
             <div
@@ -71,8 +99,24 @@ export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProp
                   : 'bg-spruce-wood-70/75 text-slate-80  px-8 pt-6 w-fit flex flex-col max-w-text',
               )}
             >
-              {caption && <span className={`${captionPositionUnderImage ? 'text-sm line-clamp-1 sm:line-clamp-1' : 'text-lg'} ${attribution ? 'pb-2' : 'pb-14'}`}>{caption}</span>}
-              {attribution && <span className={`${captionPositionUnderImage ? 'line-clamp-3' : 'text-lg'} text-sm line-clamp-3 ${caption ? 'pb-8' : 'pb-16'}`}>{attribution}</span>}
+              {caption && (
+                <span
+                  className={`${captionPositionUnderImage ? 'text-sm line-clamp-1 sm:line-clamp-1' : 'text-lg'} ${
+                    attribution ? 'pb-2' : 'pb-14'
+                  }`}
+                >
+                  {caption}
+                </span>
+              )}
+              {attribution && (
+                <span
+                  className={`${captionPositionUnderImage ? 'line-clamp-3' : 'text-lg'} text-sm line-clamp-3 ${
+                    caption ? 'pb-8' : 'pb-16'
+                  }`}
+                >
+                  {attribution}
+                </span>
+              )}
             </div>
           </figcaption>
         </figure>

diff --git a/web/styles/tailwind.css b/web/styles/tailwind.css
@@ -125,6 +125,15 @@
       clip-path var(--modal-transition-duration) var(--modal-transition-easing), display 0.7s allow-discrete,
       overlay 0.7s allow-discrete;
   }
+  /* Carousel */
+  .carousel-top-bottom-grid-area {
+    grid-template-areas:
+      'top'
+      'bottom';
+  }
+  .carousel-controls-grid-area {
+    grid-template-areas: 'left center right';
+  }
 }
 
 @layer utilities {