✨ enhance explorer tiles CSS, add tag icon support

owid · Feb 14, 2024 · 38875ca · 38875ca
1 parent f048003
commit 38875ca
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/packages/@ourworldindata/components/src/styles/colors.scss b/packages/@ourworldindata/components/src/styles/colors.scss
@@ -11,6 +11,7 @@ $amber: #f7c020;
 $blue-100: #002147;
 $blue-90: #1d3d63;
 $blue-60: #577291;
+$blue-55: #46688f;
 $blue-50: #6e87a2;
 $blue-40: #98a9bd;
 $blue-30: #a4b6ca;

diff --git a/site/gdocs/components/ExplorerTiles.scss b/site/gdocs/components/ExplorerTiles.scss
@@ -22,33 +22,41 @@
             color: $accent-vermillion;
             border-color: $accent-vermillion;
         }
-        @include md-down {
+        @include sm-only {
             justify-self: start;
             margin-top: 16px;
             order: 4;
-        }
-        @include sm-only {
             text-align: center;
             width: 100%;
         }
     }
     .explorer-tiles-grid {
         row-gap: var(--grid-gap);
+        @include md-down {
+            grid-template-rows: repeat(2, 1fr);
+            column-gap: var(--grid-gap);
+        }
     }
     .explorer-tile {
-        height: 130px;
         background-image: url("/explorer-thumbnail.webp");
         background-size: cover;
-        position: relative;
+        padding: 16px;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+    .explorer-tile__icon {
+        background-color: $blue-55;
+        border-radius: 50%;
+        width: 40px;
+        height: 40px;
     }
     .explorer-tile__text-container {
-        position: absolute;
-        bottom: 16px;
-        left: 16px;
+        width: 100%;
+        margin-top: 18px;
     }
     .explorer-tile__title,
     .explorer-tile__suffix {
-        display: inline;
         margin: 0;
     }
     .explorer-tile__title {

diff --git a/site/gdocs/components/ExplorerTiles.tsx b/site/gdocs/components/ExplorerTiles.tsx
@@ -14,13 +14,22 @@ function ExplorerTile({ url }: { url: string }) {
     if (!linkedChart) {
         return null
     }
+    const icon = linkedChart.tags[0] ? (
+        <img
+            height={40}
+            width={40}
+            src={`/images/tag-icons/${linkedChart.tags[0].name}.svg`}
+            className="explorer-tile__icon"
+        />
+    ) : null
+
     return (
         <a
             className="explorer-tile span-cols-3 span-md-cols-6"
             href={linkedChart.resolvedUrl}
         >
+            {icon}
             <div className="explorer-tile__text-container">
-                {/* TODO: add tag icon img */}
                 <p className="h3-bold explorer-tile__title">
                     {linkedChart.title}
                 </p>
@@ -46,13 +55,13 @@ export function ExplorerTiles({
                 {title}
             </h2>
             <a
-                className="span-cols-4 col-start-9 col-md-start-1 span-md-cols-12 body-3-medium explorer-tiles__cta"
+                className="span-cols-4 col-start-9 span-md-cols-5 col-md-start-8 col-sm-start-1 span-sm-cols-12 body-3-medium explorer-tiles__cta"
                 href="/charts"
             >
                 See all our charts and explorers{" "}
                 <FontAwesomeIcon icon={faArrowRight} />
             </a>
-            <p className="body-2-regular explorer-tiles__subtitle span-cols-8 span-md-cols-12">
+            <p className="body-2-regular explorer-tiles__subtitle span-cols-8 span-md-cols-7 span-sm-cols-12">
                 {subtitle}
             </p>
             <div className="span-cols-12 grid explorer-tiles-grid">