show PeriodicTable on element detail pages

janosh · Sep 16, 2022 · b7d1313 · b7d1313
1 parent 65fdc41
commit b7d1313
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 58 deletions.
diff --git a/src/app.css b/src/app.css
@@ -14,7 +14,7 @@
 }
 body {
   background: var(--page-bg);
-  padding: 6vh 6vw;
+  padding: 6vh 3vw;
   font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
   margin: auto;
   color: #eee;

diff --git a/src/lib/BohrAtom.svelte b/src/lib/BohrAtom.svelte
@@ -81,6 +81,9 @@
 </svg>
 
 <style>
+  svg {
+    overflow: visible;
+  }
   g.shell {
     animation: spin-right linear infinite;
   }

diff --git a/src/lib/ElementStats.svelte b/src/lib/ElementStats.svelte
@@ -2,14 +2,13 @@
   import { pretty_num } from './labels'
   import { last_element } from './stores'
 
-  export let padding = `1vw 2vw`
   export let style = ``
 
   $: element = $last_element // used to decide whether to show user tip to hover an element tile
 </script>
 
 {#if element}
-  <div style:padding {style}>
+  <div {style}>
     <h2>
       {element.number} - {element.name} <small>{element.category}</small>
     </h2>
@@ -64,7 +63,7 @@
     grid-column: 1 / -1;
     font-size: min(3vw, 3em);
     white-space: nowrap;
-    margin-top: 0;
+    margin: 0;
     align-self: end;
   }
   div > h2 > small {

diff --git a/src/lib/ElementTile.svelte b/src/lib/ElementTile.svelte
@@ -6,6 +6,7 @@
 
   export let element: ChemicalElement
   export let bg_color: string | null
+  export let show_symbol = true
   export let show_number = true
   export let show_name = true
   export let value: number | undefined = undefined
@@ -26,9 +27,11 @@
       {element.number}
     </span>
   {/if}
-  <span class="symbol">
-    {element.symbol}
-  </span>
+  {#if show_symbol}
+    <span class="symbol">
+      {element.symbol}
+    </span>
+  {/if}
   {#if value}
     <span class="value">
       {pretty_num(value)}
@@ -50,12 +53,16 @@
     place-content: center;
     border-radius: var(--elem-tile-border-radius, 0.1vw);
     color: white;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
   }
   div.element-tile.last-active {
     filter: brightness(110%);
   }
   div.element-tile.active {
     filter: brightness(110%);
+    border: 1px solid white;
   }
   div.element-tile span {
     line-height: 1em;

diff --git a/src/lib/PeriodicTable.svelte b/src/lib/PeriodicTable.svelte
@@ -1,77 +1,69 @@
 <script lang="ts">
-  import BohrAtom from './BohrAtom.svelte'
   import elements from './element-data.ts'
   import ElementPhoto from './ElementPhoto.svelte'
-  import ElementStats from './ElementStats.svelte'
   import ElementTile from './ElementTile.svelte'
-  import ScatterPlot from './ScatterPlot.svelte'
-  import { active_element, color_scale, heatmap, last_element } from './stores'
-  import TableInset from './TableInset.svelte'
+  import { active_element, color_scale } from './stores'
+  import type { ChemicalElement } from './types'
 
   export let show_names = true
-  export let show_active_elem_stats = true
-  export let show_active_elem_bohr_model = true
+  export let show_numbers = true
+  export let show_symbols = true
+  export let show_photo = true
+  export let heatmap: keyof ChemicalElement | null = null
+  export let style = ``
+  export let disabled = false
+
+  $: set_active_element = (element: ChemicalElement | null) => () => {
+    if (disabled) return
+    $active_element = element
+  }
 
   let window_width: number
 </script>
 
 <svelte:window bind:innerWidth={window_width} />
 
-<div class="periodic-table">
-  <TableInset>
-    {#if $heatmap}
-      <ScatterPlot
-        ylim={[0, null]}
-        on_hover_point={(point) => ($active_element = point[2])}
-        x_label_y={42}
-      />
-    {:else if show_active_elem_stats}
-      <ElementStats />
-    {/if}
-  </TableInset>
-
-  {#if show_active_elem_bohr_model && $last_element && window_width > 1300}
-    {@const { shells, name, symbol } = $last_element}
-    <a href="/bohr-atoms">
-      <BohrAtom {shells} name="Bohr Model of {name}" {symbol} />
-    </a>
-  {/if}
+<div class="periodic-table" {style}>
+  <slot name="inset" />
 
   {#each elements as element}
-    {@const value = element[$heatmap]}
+    {@const value = element[heatmap]}
     {@const heatmap_color = value ? $color_scale?.(value) : `transparent`}
-    {@const bg_color = $heatmap ? heatmap_color : null}
+    {@const bg_color = heatmap ? heatmap_color : null}
     <a
       href={element.name.toLowerCase()}
       style="grid-column: {element.column}; grid-row: {element.row};"
-      on:mouseenter={() => ($active_element = element)}
-      on:mouseleave={() => ($active_element = null)}
+      on:mouseenter={set_active_element(element)}
+      on:mouseleave={set_active_element(null)}
     >
-      <ElementTile {element} show_name={show_names} {value} {bg_color} />
+      <ElementTile
+        {element}
+        show_name={show_names}
+        show_number={show_numbers}
+        show_symbol={show_symbols}
+        {value}
+        {bg_color}
+      />
     </a>
   {/each}
   <!-- provide vertical offset for lathanices + actinides -->
   <div class="spacer" />
 
-  <ElementPhoto style="grid-column: 1 / span 2; grid-row: 9 / span 2;" />
+  {#if show_photo}
+    <ElementPhoto style="grid-column: 1 / span 2; grid-row: 9 / span 2;" />
+  {/if}
 </div>
 
 <style>
   div.periodic-table {
     display: grid;
     grid-template-columns: repeat(18, 1fr);
     gap: min(0.2vw, 3pt);
-    min-width: 600px;
     position: relative;
-    margin: 2em auto 4em;
   }
   div.spacer {
-    height: 24pt;
     grid-row: 8;
-  }
-  a[href='/bohr-atoms'] {
-    position: absolute;
-    bottom: 90%;
-    right: 10%;
+    grid-column: 1;
+    aspect-ratio: 2;
   }
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
+  import BohrAtom from '$lib/BohrAtom.svelte'
   import ColorCustomizer from '$lib/ColorCustomizer.svelte'
   import EasterEgg from '$lib/EasterEgg.svelte'
+  import ElementStats from '$lib/ElementStats.svelte'
   import PeriodicTable from '$lib/PeriodicTable.svelte'
   import PropertySelect from '$lib/PropertySelect.svelte'
-  import { heatmap } from '$lib/stores'
+  import ScatterPlot from '$lib/ScatterPlot.svelte'
+  import { active_element, heatmap, last_element } from '$lib/stores'
+  import TableInset from '$lib/TableInset.svelte'
   import '../app.css'
 
   let window_width: number
@@ -27,7 +31,29 @@
   style:transform="rotateX({x_angle}deg) rotateY({y_angle}deg)"
   class="auto-rotate-{auto_rotate}"
 >
-  <PeriodicTable show_names={window_width > 1000} />
+  {#if $last_element && window_width > 1300}
+    {@const { shells, name, symbol } = $last_element}
+    <a href="/bohr-atoms">
+      <BohrAtom {shells} name="Bohr Model of {name}" {symbol} />
+    </a>
+  {/if}
+  <PeriodicTable
+    show_names={window_width > 1000}
+    heatmap={$heatmap}
+    style="margin: 2em auto 4em;"
+  >
+    <TableInset slot="inset">
+      {#if $heatmap}
+        <ScatterPlot
+          ylim={[0, null]}
+          on_hover_point={(point) => ($active_element = point[2])}
+          x_label_y={42}
+        />
+      {:else}
+        <ElementStats --font-size="1vw" />
+      {/if}
+    </TableInset>
+  </PeriodicTable>
 
   {#if !$heatmap}
     <ColorCustomizer collapsible={false} />
@@ -67,4 +93,9 @@
       transform: rotateX(360deg) rotateY(360deg);
     }
   }
+  a[href='/bohr-atoms'] {
+    position: absolute;
+    bottom: 92%;
+    right: 10%;
+  }
 </style>
diff --git a/src/routes/[slug]/+page.svelte b/src/routes/[slug]/+page.svelte
@@ -3,6 +3,7 @@
   import ElementPhoto from '$lib/ElementPhoto.svelte'
   import ElementStats from '$lib/ElementStats.svelte'
   import { element_property_labels, heatmap_labels, pretty_num } from '$lib/labels'
+  import PeriodicTable from '$lib/PeriodicTable.svelte'
   import PropertySelect from '$lib/PropertySelect.svelte'
   import ScatterPlot from '$lib/ScatterPlot.svelte'
   import { active_element } from '$lib/stores'
@@ -61,7 +62,17 @@
   />
 </section>
 
-<section class="orbitals">
+<section class="grid">
+  <PeriodicTable
+    show_names={false}
+    show_numbers={false}
+    show_symbols={false}
+    show_active_elem_stats={false}
+    show_photo={false}
+    disabled={true}
+    style="width: 100%; grid-area: ptable; max-width: 400px;"
+  />
+
   <ElementStats style="grid-area: stats;" />
 
   <table style="grid-area: table;">
@@ -121,29 +132,30 @@
       grid-template-columns: 1fr 2fr;
     }
   }
-  section.orbitals {
-    margin: 2em auto;
+  section.grid {
+    margin: 4em auto;
     display: grid;
     gap: 1em 2em;
     place-items: center;
     grid-template-areas:
       'stats'
+      'ptable'
       'table'
       'bohr'
       'summary';
   }
   @media (min-width: 700px) {
-    section.orbitals {
+    section.grid {
       grid-template-areas:
         'stats stats'
         'table bohr'
-        'summary summary';
+        'summary ptable';
     }
   }
   @media (min-width: 800px) {
-    section.orbitals {
+    section.grid {
       grid-template-areas:
-        'stats stats stats'
+        'stats stats ptable'
         'table bohr summary';
     }
   }

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,7 +1,7 @@
 import { sveltekit } from '@sveltejs/kit/vite'
+import type { UserConfig } from 'vite'
 
-/** @type {import('vite').UserConfig} */
-export default {
+const vite_config: UserConfig = {
   plugins: [sveltekit()],
 
   server: {
@@ -12,3 +12,4 @@ export default {
     port: 3000,
   },
 }
+export default vite_config