Fix heading spacing in left column of sticky-right block (#3680)

* Fix heading spacing in left column of sticky-right block * Fix md breakpoint
owid · Jun 14, 2024 · b630d4a · b630d4a
1 parent f5071dd
commit b630d4a
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 27 deletions.
diff --git a/site/css/grid.scss b/site/css/grid.scss
@@ -157,3 +157,14 @@ $grid-responsive: (lg, md, sm);
         }
     }
 }
+
+// Custom helpers
+.grid-row-start-2 {
+    grid-row-start: 2;
+}
+
+.grid-md-row-start-auto {
+    @include breakpoint-max(md) {
+        grid-row-start: auto;
+    }
+}
diff --git a/site/gdocs/components/ArticleBlock.tsx b/site/gdocs/components/ArticleBlock.tsx
@@ -8,7 +8,7 @@ import PullQuote from "./PullQuote.js"
 import Recirc from "./Recirc.js"
 import List from "./List.js"
 import NumberedList from "./NumberedList.js"
-import Image from "./Image.js"
+import Image, { ImageParentContainer } from "./Image.js"
 import {
     get,
     OwidEnrichedGdocBlock,
@@ -46,6 +46,7 @@ import { Socials } from "./Socials.js"
 export type Container =
     | "default"
     | "sticky-right-left-column"
+    | "sticky-right-left-heading-column"
     | "sticky-right-right-column"
     | "sticky-left-left-column"
     | "sticky-left-right-column"
@@ -124,6 +125,9 @@ const layouts: { [key in Container]: Layouts} = {
         ["default"]: "span-cols-5 col-start-1 span-md-cols-12",
         ["prominent-link"]: "grid grid-cols-5 span-cols-5 span-md-cols-10 grid-md-cols-10 span-sm-cols-12 grid-sm-cols-12",
     },
+    ["sticky-right-left-heading-column"]: {
+        ["default"]: "span-cols-5 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1"
+    },
     ["sticky-right-right-column"]: {
         ["chart"]: "span-cols-7 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1",
         ["explorer"]: "span-cols-7 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1",
@@ -255,7 +259,7 @@ export default function ArticleBlock({
                     smallFilename={block.smallFilename}
                     alt={block.alt}
                     hasOutline={block.hasOutline}
-                    containerType={containerType}
+                    containerType={containerType as ImageParentContainer}
                 />
                 {block.caption ? (
                     <figcaption
@@ -433,40 +437,67 @@ export default function ArticleBlock({
                 d={block}
             />
         ))
-        .with({ type: "sticky-right" }, (block) => (
-            <div className={getLayout("sticky-right", containerType)}>
-                <div
-                    className={getLayout(
-                        "sticky-right-left-column",
-                        containerType
-                    )}
-                >
-                    {block.left.map((item, i) => (
+        .with({ type: "sticky-right" }, (block) => {
+            const firstBlock = block.left[0]
+            let separateHeading = null
+            let left = block.left
+            if (
+                firstBlock?.type === "heading" &&
+                block.right[0]?.type !== "chart-story"
+            ) {
+                separateHeading = firstBlock
+                left = block.left.slice(1)
+            }
+            return (
+                <div className={getLayout("sticky-right", containerType)}>
+                    {separateHeading && (
                         <ArticleBlock
-                            key={i}
-                            b={item}
-                            containerType="sticky-right-left-column"
+                            b={separateHeading}
+                            containerType="sticky-right-left-heading-column"
                         />
-                    ))}
-                </div>
-                <div
-                    className={getLayout(
-                        "sticky-right-right-column",
-                        containerType
                     )}
-                >
-                    <div className="sticky-column-wrapper grid grid-cols-7 span-cols-7 grid-md-cols-12 span-md-cols-12">
-                        {block.right.map((item, i) => (
+                    <div
+                        className={cx(
+                            getLayout(
+                                "sticky-right-left-column",
+                                containerType
+                            ),
+                            { "grid-row-start-2": separateHeading }
+                        )}
+                    >
+                        {left.map((item, i) => (
                             <ArticleBlock
                                 key={i}
                                 b={item}
-                                containerType="sticky-right-right-column"
+                                containerType="sticky-right-left-column"
                             />
                         ))}
                     </div>
+                    <div
+                        className={cx(
+                            getLayout(
+                                "sticky-right-right-column",
+                                containerType
+                            ),
+                            {
+                                "grid-row-start-2 grid-md-row-start-auto":
+                                    separateHeading,
+                            }
+                        )}
+                    >
+                        <div className="sticky-column-wrapper grid grid-cols-7 span-cols-7 grid-md-cols-12 span-md-cols-12">
+                            {block.right.map((item, i) => (
+                                <ArticleBlock
+                                    key={i}
+                                    b={item}
+                                    containerType="sticky-right-right-column"
+                                />
+                            ))}
+                        </div>
+                    </div>
                 </div>
-            </div>
-        ))
+            )
+        })
         .with({ type: "sticky-left" }, (block) => (
             <div className={getLayout("sticky-left", containerType)}>
                 <div

diff --git a/site/gdocs/components/Image.tsx b/site/gdocs/components/Image.tsx
@@ -32,7 +32,7 @@ const gridSpan7 = generateResponsiveSizes(7)
 const gridSpan8 = generateResponsiveSizes(8)
 
 export type ImageParentContainer =
-    | Container
+    | Exclude<Container, "sticky-right-left-heading-column">
     | "thumbnail"
     | "full-width"
     | "span-5"