💄 (gdocs) minor css updates

owid · Feb 5, 2024 · 11d8e0d · 11d8e0d
1 parent 6c2c41a
commit 11d8e0d
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 48 deletions.
diff --git a/site/gdocs/components/Chart.scss b/site/gdocs/components/Chart.scss
@@ -5,7 +5,7 @@ figure.chart {
         // 50px is the height of the header on mobile
         // 1rem is additional padding
         height: calc(100vh - 50px - 1rem);
-        max-height: 680px;
+        max-height: 640px;
     }
 }
 

diff --git a/site/gdocs/components/KeyIndicatorCollection.scss b/site/gdocs/components/KeyIndicatorCollection.scss
@@ -1,11 +1,12 @@
 .key-indicator-collection {
     $duration: 0.4s; // keep in sync with HEIGHT_ANIMATION_DURATION_IN_SECONDS in KeyIndicatorCollection.tsx
-    $border: $blue-20;
 
-    margin: 0 -24px;
+    --border: #{$blue-20};
+
+    margin: 24px -24px;
 
     .accordion-item + .accordion-item {
-        border-top: 1px solid $border;
+        border-top: 1px solid var(--border);
     }
 
     .accordion-item h3 {
@@ -22,16 +23,36 @@
     .accordion-item__button {
         background-color: $blue-5;
         padding: 16px 24px;
+
+        @include sm-only {
+            padding-bottom: 0;
+        }
+    }
+
+    // on desktop, show a clickable header that opens the accordion
+    .accordion-item--closed .accordion-item__button {
+        @include sm-only {
+            display: none;
+        }
     }
 
+    // on mobile, show an anchor that links to the datapage
     .accordion-item__link-mobile {
         background-color: $white;
         padding: 12px 24px;
         line-height: 1.2;
+
+        @include sm-up {
+            display: none;
+        }
     }
 
     .accordion-item--open .accordion-item__button {
         background-color: $blue-20;
+
+        @include sm-only {
+            background-color: $blue-5;
+        }
     }
 
     .accordion-item--closed .accordion-item__button:hover {
@@ -47,7 +68,6 @@
     .key-indicator-header {
         display: flex;
         justify-content: space-between;
-        align-items: center;
         gap: 8px;
     }
 
@@ -56,14 +76,30 @@
         color: $blue-50;
         margin-right: 8px;
         vertical-align: baseline;
+
+        @include sm-only {
+            display: none;
+        }
     }
 
     .key-indicator-header__title {
         @include body-2-semibold;
         color: $blue-90;
+        margin-right: 8px;
+
+        @include sm-only {
+            line-height: 1.2;
+        }
+    }
+
+    .accordion-item--closed .key-indicator-header__title {
+        @include sm-only {
+            margin-left: 0;
+        }
     }
 
-    .accordion-item__link-mobile:active .key-indicator-header__title {
+    .accordion-item__link-mobile:active:not(:hover)
+        .key-indicator-header__title {
         text-decoration: underline;
         text-underline-offset: 4px;
     }
@@ -72,7 +108,13 @@
         @include body-3-medium;
         display: inline-block;
         color: $blue-50;
-        margin-left: 8px;
+    }
+
+    .accordion-item--closed .key-indicator-header__source {
+        @include sm-only {
+            display: block;
+            margin-top: 2px;
+        }
     }
 
     .key-indicator-header__icon {
@@ -85,6 +127,20 @@
         }
     }
 
+    // hidden on mobile
+    .key-indicator-header__icon[data-icon="plus"] {
+        @include sm-only {
+            display: none;
+        }
+    }
+
+    // hidden on desktop
+    .key-indicator-header__icon[data-icon="arrow-right"] {
+        @include sm-up {
+            display: none;
+        }
+    }
+
     button {
         border: 0;
         padding: 0;
@@ -96,58 +152,29 @@
         cursor: default;
     }
 
-    @include sm-up {
-        .accordion-item__link-mobile {
-            display: none;
-        }
-
-        .key-indicator-header__icon[data-icon="arrow-right"] {
-            display: none;
-        }
-    }
-
     @include sm-only {
+        --border: #{$blue-10};
+
         .accordion-item:first-of-type::after {
             content: "More featured indicators";
             @include h5-black-caps;
             display: block;
-            margin: 24px 24px 16px 24px;
+            margin: 24px 24px 16px;
             color: $blue-60;
         }
 
         .accordion-item:nth-of-type(2) {
-            border-top: 1px solid $border;
+            border-top: 1px solid var(--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;
-        }
-
-        .key-indicator-header__tab-icon {
-            display: none;
-        }
-
-        .key-indicator-header__icon[data-icon="plus"] {
-            display: none;
+        .accordion-item:last-of-type {
+            border-bottom: 1px solid var(--border);
         }
     }
 
     // update <KeyIndicator /> styles
     .key-indicator {
+        margin-top: 0;
         margin-bottom: 0;
         .indicator-title {
             display: none;

diff --git a/site/gdocs/components/KeyIndicatorCollection.tsx b/site/gdocs/components/KeyIndicatorCollection.tsx
@@ -114,6 +114,7 @@ function AccordionItem({
                 "accordion-item--closed": !isOpen,
             })}
         >
+            {/* desktop */}
             <h3>
                 <button
                     id={headerId}
@@ -146,6 +147,7 @@ function AccordionItem({
                     {header}
                 </button>
             </h3>
+            {/* mobile */}
             {!isOpen && (
                 <a
                     className="accordion-item__link-mobile"
@@ -195,11 +197,7 @@ function KeyIndicatorHeader({
     const source = capitalize(block.source || linkedIndicator.source)
 
     return (
-        <div
-            className={cx("key-indicator-header", {
-                "key-indicator-header--content-visible": isContentVisible,
-            })}
-        >
+        <div className="key-indicator-header">
             <div>
                 <FontAwesomeIcon
                     icon={tabIconMap[activeTab]}