enhance(search): show entities as comma-separated list

owid · Apr 15, 2024 · 6424fce · 6424fce
1 parent 250bc91
commit 6424fce
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 20 deletions.
diff --git a/site/search/Search.scss b/site/search/Search.scss
@@ -321,20 +321,19 @@
 }
 
 .search-results__chart-hit-entities {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 4px;
     list-style: none;
-    font-size: 0.7em;
+    font-size: 0.8em;
 
     li {
-        background-color: $blue-10;
-        padding: 4px 8px;
-        border-radius: 12px;
-        color: $blue-90;
+        display: inline;
+        color: $blue-50;
 
-        svg {
-            margin-right: 4px;
+        &::after {
+            content: ", ";
+        }
+
+        &:last-child::after {
+            content: "";
         }
     }
 }

diff --git a/site/search/SearchPanel.tsx b/site/search/SearchPanel.tsx
@@ -41,11 +41,7 @@ import {
 } from "./searchTypes.js"
 import { EXPLORERS_ROUTE_FOLDER } from "../../explorer/ExplorerConstants.js"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
-import {
-    faHeartBroken,
-    faLocationDot,
-    faSearch,
-} from "@fortawesome/free-solid-svg-icons"
+import { faHeartBroken, faSearch } from "@fortawesome/free-solid-svg-icons"
 import {
     DEFAULT_SEARCH_PLACEHOLDER,
     getIndexName,
@@ -118,7 +114,7 @@ function ChartHit({ hit }: { hit: IChartHit }) {
         [hit.slug, entities]
     )
     const previewUrl = queryStr
-        ? `/grapher/thumbnail/${hit.slug}${queryStr}`
+        ? `/grapher/thumbnail/${hit.slug}${queryStr}` // TODO extract to .env
         : `${BAKED_GRAPHER_URL}/exports/${hit.slug}.svg`
 
     useEffect(() => {
@@ -163,10 +159,7 @@ function ChartHit({ hit }: { hit: IChartHit }) {
             {entities.length > 0 && (
                 <ul className="search-results__chart-hit-entities">
                     {entities.map((entity) => (
-                        <li key={entity}>
-                            <FontAwesomeIcon icon={faLocationDot} />
-                            {entity}
-                        </li>
+                        <li key={entity}>{entity}</li>
                     ))}
                 </ul>
             )}