✨ (gdocs) update key indicator collection design on mobile

owid · Feb 1, 2024 · 31770ac · 31770ac
1 parent e00db80
commit 31770ac
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 14 deletions.
diff --git a/site/gdocs/components/KeyIndicatorCollection.scss b/site/gdocs/components/KeyIndicatorCollection.scss
@@ -21,23 +21,37 @@
         margin: 0;
     }
 
-    .accordion-item__header {
-        background-color: $white;
+    .accordion-item__button,
+    .accordion-item__link-mobile {
+        display: block;
         width: 100%;
+        background-color: $white;
         text-align: left;
+    }
+
+    .accordion-item__button {
         padding: 16px 24px;
     }
 
-    .accordion-item--open .accordion-item__header {
+    .accordion-item__link-mobile {
+        padding: 12px 24px;
+        line-height: 1.2;
+    }
+
+    .accordion-item__link-mobile:active .title {
+        text-decoration: underline;
+    }
+
+    .accordion-item--open .accordion-item__button {
         background-color: $blue-20;
     }
 
-    .accordion-item--closed .accordion-item__header:hover {
+    .accordion-item--closed .accordion-item__button:hover {
         background-color: $blue-5;
     }
 
     .accordion-item--closed
-        .accordion-item__header:hover
+        .accordion-item__button:hover
         .key-indicator-header__icon {
         opacity: 1;
         transition: opacity 0s;
@@ -84,6 +98,52 @@
         cursor: default;
     }
 
+    @include sm-up {
+        .accordion-item__link-mobile {
+            display: none;
+        }
+
+        svg[data-icon="arrow-right"] {
+            display: none;
+        }
+    }
+
+    @include sm-only {
+        .accordion-item:first-of-type::after {
+            content: "More featured indicators";
+            @include h5-black-caps;
+            display: block;
+            margin: 24px 24px 16px 24px;
+            color: $blue-60;
+        }
+
+        .accordion-item:nth-of-type(2) {
+            border-top: 1px solid $border;
+        }
+
+        .accordion-item__button {
+            padding-bottom: 0;
+        }
+
+        .accordion-item--closed .accordion-item__button {
+            display: none;
+        }
+
+        .accordion-item--open .accordion-item__button {
+            background-color: $blue-5;
+        }
+
+        .accordion-item--closed .key-indicator-header__source {
+            display: block;
+            margin-left: 0;
+            margin-top: 2px;
+        }
+
+        svg[data-icon="plus"] {
+            display: none;
+        }
+    }
+
     // update <KeyIndicator /> styles
     .key-indicator {
         margin-bottom: 0;

diff --git a/site/gdocs/components/KeyIndicatorCollection.tsx b/site/gdocs/components/KeyIndicatorCollection.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react"
 import cx from "classnames"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
-import { faPlus } from "@fortawesome/free-solid-svg-icons"
+import { faArrowRight, faPlus } from "@fortawesome/free-solid-svg-icons"
 
 import {
     EnrichedBlockKeyIndicatorCollection,
@@ -12,7 +12,6 @@ import {
     joinTitleFragments,
     urlToSlug,
 } from "@ourworldindata/utils"
-import { makeDateRange } from "@ourworldindata/components"
 
 import { useLinkedChart, useLinkedIndicator } from "../utils.js"
 import KeyIndicator from "./KeyIndicator.js"
@@ -108,7 +107,7 @@ function AccordionItem({
             <h3>
                 <button
                     id={headerId}
-                    className="accordion-item__header"
+                    className="accordion-item__button"
                     onClick={() => {
                         if (isOpen) {
                             close()
@@ -137,6 +136,14 @@ function AccordionItem({
                     {header}
                 </button>
             </h3>
+            {!isOpen && (
+                <a
+                    className="accordion-item__link-mobile"
+                    href="https://ourworldindata.org/grapher/life-expectancy"
+                >
+                    {header}
+                </a>
+            )}
             <div
                 id={contentId}
                 className="accordion-item__content"
@@ -167,12 +174,14 @@ function KeyIndicatorHeader({
     if (!linkedChart) return null
     if (!linkedIndicator) return null
 
-    const source = capitalize(
-        joinTitleFragments(
-            linkedIndicator.attributionShort,
-            linkedIndicator.titleVariant
+    const source =
+        block.source ||
+        capitalize(
+            joinTitleFragments(
+                linkedIndicator.attributionShort,
+                linkedIndicator.titleVariant
+            )
         )
-    )
 
     return (
         <div
@@ -181,7 +190,7 @@ function KeyIndicatorHeader({
             })}
         >
             <div className="key-indicator-header__title col-start-1 span-cols-11">
-                {linkedIndicator.title}
+                <span className="title">{linkedIndicator.title}</span>
                 {source && (
                     <span className="key-indicator-header__source">
                         {source}
@@ -190,7 +199,10 @@ function KeyIndicatorHeader({
             </div>
             {!isContentVisible && (
                 <div className="key-indicator-header__icon col-start-12 span-cols-1">
+                    {/* desktop */}
                     <FontAwesomeIcon icon={faPlus} />
+                    {/* mobile */}
+                    <FontAwesomeIcon icon={faArrowRight} />
                 </div>
             )}
         </div>