hide element names if windowWidth < 1000 to prevent text overflow

janosh · Jun 3, 2022 · 905d932 · 905d932
1 parent 54084ed
commit 905d932
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 14 deletions.
diff --git a/src/lib/PeriodicTable.svelte b/src/lib/PeriodicTable.svelte
@@ -7,7 +7,7 @@
   import ColorCustomizer from './ColorCustomizer.svelte'
   import elements from './periodic-table-data'
 
-  export let showNames = true
+  export let show_names = true
   export let active_element: Element | null = null
 
   export let heatmap: keyof Element | false = false
@@ -25,7 +25,7 @@
     <ChemicalElement
       {element}
       on:mouseenter={() => (active_element = element)}
-      showName={showNames}
+      showName={show_names}
       style="grid-column: {element.column}; grid-row: {element.row};"
       {color}
     />

diff --git a/src/routes/index.svelte b/src/routes/index.svelte
@@ -6,31 +6,35 @@
   import { Element } from '../types'
 
   let selected_heatmap: (keyof Element)[] = []
+  let windowWidth: number
 
-  const heatmap_options = [
-    [`atomic_mass`, `Atomic Mass`],
-    [`atomic_radius`, `Atomic Radius`],
-    [`electronegativity`, `Electronegativity`],
-    [`density`, `Density`],
-    [`boiling_point`, `Boiling Point`],
-    [`melting_point`, `Melting Point`],
-    [`year`, `Year of Discovery`],
-  ].map(([value, label]) => ({ value, label }))
+  const heatmap_options: Record<string, keyof Element> = {
+    'Atomic Mass': `atomic_mass`,
+    'Atomic Radius': `atomic_radius`,
+    Electronegativity: `electronegativity`,
+    Density: `density`,
+    'Boiling Point': `boiling_point`,
+    'Melting Point': `melting_point`,
+    'Year of Discovery': `year`,
+  }
+  $: heatmap_name = heatmap_options[selected_heatmap[0]] ?? null
 </script>
 
+<svelte:window bind:innerWidth={windowWidth} />
+
 <GitHubCorner href="https://github.com/janosh/periodic-table" />
 
 <main>
   <h1>Periodic Table of Elements</h1>
 
   <Select
-    options={heatmap_options}
+    options={Object.keys(heatmap_options)}
     maxSelect={1}
-    bind:selectedValues={selected_heatmap}
+    bind:selected={selected_heatmap}
     placeholder="Select a heat map"
   />
 
-  <Table showNames heatmap={selected_heatmap[0] ?? false} />
+  <Table showNames={windowWidth > 1000} {heatmap_name} />
 </main>
 
 <footer>