✨ update mobile styles for key-indicator-collection

owid · Feb 15, 2024 · f7a1cb6 · f7a1cb6
1 parent 9de5b77
commit f7a1cb6
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 12 deletions.
diff --git a/packages/@ourworldindata/utils/src/Util.ts b/packages/@ourworldindata/utils/src/Util.ts
@@ -1624,15 +1624,6 @@ export function traverseEnrichedBlocks(
                 traverseEnrichedBlocks(node, callback, spanCallback)
             })
         })
-        .with(
-            { type: "key-indicator-collection" },
-            (keyIndicatorCollection) => {
-                callback(keyIndicatorCollection)
-                keyIndicatorCollection.blocks.forEach((node) =>
-                    traverseEnrichedBlocks(node, callback, spanCallback)
-                )
-            }
-        )
         .with(
             {
                 type: "key-indicator",
@@ -1644,6 +1635,15 @@ export function traverseEnrichedBlocks(
                 })
             }
         )
+        .with(
+            { type: "key-indicator-collection" },
+            (keyIndicatorCollection) => {
+                callback(keyIndicatorCollection)
+                keyIndicatorCollection.blocks.forEach((node) =>
+                    traverseEnrichedBlocks(node, callback, spanCallback)
+                )
+            }
+        )
         .with(
             {
                 type: P.union(

diff --git a/site/gdocs/components/KeyIndicator.scss b/site/gdocs/components/KeyIndicator.scss
@@ -14,6 +14,9 @@
 
     .indicator-metadata {
         margin-bottom: 16px;
+        @include sm-only {
+            display: none;
+        }
     }
 
     .indicator-title {
@@ -119,4 +122,11 @@
             display: none;
         }
     }
+
+    .key-indicator-chart {
+        @include sm-only {
+            order: -1;
+            margin-bottom: 16px;
+        }
+    }
 }
diff --git a/site/gdocs/components/KeyIndicator.tsx b/site/gdocs/components/KeyIndicator.tsx
@@ -54,7 +54,7 @@ export default function KeyIndicator({
                 </a>
             </div>
             <Chart
-                className="col-start-5 span-cols-8 span-sm-cols-12 margin-0"
+                className="key-indicator-chart col-start-5 span-cols-8 span-sm-cols-12 margin-0"
                 d={{
                     url: linkedChart.resolvedUrl,
                     type: "chart",

diff --git a/site/gdocs/components/KeyIndicatorCollection.scss b/site/gdocs/components/KeyIndicatorCollection.scss
@@ -10,8 +10,11 @@
         border-top: 1px solid var(--border);
     }
 
-    .accordion-item h3 {
+    .accordion-item .accordion-item__heading {
         margin: 0;
+        @include sm-only {
+            display: none;
+        }
     }
 
     .accordion-item__button,

diff --git a/site/gdocs/components/KeyIndicatorCollection.tsx b/site/gdocs/components/KeyIndicatorCollection.tsx
@@ -125,7 +125,7 @@ function AccordionItem({
             })}
         >
             {/* desktop */}
-            <h3>
+            <h3 className="accordion-item__heading">
                 <button
                     id={headerId}
                     className="accordion-item__button"