various sizing tweaks

Author: freeman-lab

components/minimap.js

@@ -8,7 +8,7 @@ const projection = geoAlbersUsa().scale(1300).translate([487.5, 305])
 
 const Minimap = ({ data, states }) => {
   return (
-    <Box sx={{ pl: [0, 0, 8, 8] }}>
+    <Box sx={{ pt: [2, 0, 0, 0], pl: [0, 0, 8, 8] }}>
       <Box
         as='svg'
         viewBox='0 0 975 500'

components/project.js

@@ -11,6 +11,7 @@ const Project = ({
   year,
   zoom,
   states,
+  id,
   height = 140,
   showStates = true,
   showStartDate = true,
@@ -38,9 +39,10 @@ const Project = ({
     opacity: zoom === 'far' ? 1 : 0,
   })
 
-  const { number, id, name } = data
+  const { number, name } = data
 
   useEffect(() => {
+    const { id } = data
     if (showStates && !states) return
     const prefix =
       'https://storage.googleapis.com/carbonplan-research/offset-fires/grist/projects/'
@@ -90,28 +92,34 @@ const Project = ({
           >
             {number}
           </Box>
-          <Box as='span' sx={{ pl: [2], fontSize: [3, 4, 4, 5] }}>
+          <Box as='span' sx={{ pl: [2], fontSize: [3, 4, 4, 4] }}>
             {name}
           </Box>
         </Box>
       )}
       <Box
+        id={id}
         sx={{
           mt: [2],
           mb: [4],
           position: 'relative',
           borderRadius: '1px',
           height: [
             'auto',
-            stretch ? 'calc(100% - 72px)' : 'auto',
-            stretch ? 'calc(100% - 72px)' : 'auto',
-            stretch ? 'calc(100% - 72px)' : 'auto',
+            stretch ? 'calc(100% - 68px)' : 'auto',
+            stretch ? 'calc(100% - 68px)' : 'auto',
+            stretch ? 'calc(100% - 68px)' : 'auto',
           ],
           border: ({ colors }) =>
             border ? `solid 1px ${colors.muted}` : 'none',
         }}
       >
-        <Box as='svg' viewBox={`0 0 400 ${height}`} sx={{ mb: '-4px' }}>
+        <Box
+          id={id + '-svg'}
+          as='svg'
+          viewBox={`0 0 400 ${height}`}
+          sx={{ mb: '-4px' }}
+        >
           <animated.g transform={transform}>
             <g strokeLinejoin='round' strokeLinecap='round'>
               <path
@@ -206,9 +214,11 @@ const Project = ({
                 }}
               >
                 {metadata &&
-                ((100 * metadata?.burned_acreage) / metadata?.acreage < 1
-                  ? '<1%'
-                  : format('.0%')(metadata?.burned_acreage / metadata?.acreage))}
+                  ((100 * metadata?.burned_acreage) / metadata?.acreage < 1
+                    ? '<1%'
+                    : format('.0%')(
+                        metadata?.burned_acreage / metadata?.acreage
+                      ))}
               </Box>
             </Box>
           )}

package-lock.json

@@ -6,8 +6,8 @@ import { json } from 'd3-fetch'
 import { geoPath, geoAlbersUsa } from 'd3-geo'
 import { scaleLinear } from 'd3-scale'
 import { feature } from 'topojson-client'
-import Project from '../../components/project'
-import Layout from '../../components/layout'
+import Project from '../../../components/project'
+import Layout from '../../../components/layout'
 
 const projection = geoAlbersUsa().scale(1300).translate([487.5, 305])
 const years = [2020, 2030, 2040, 2050, 2060, 2070, 2080, 2090]

pages/embed/future-risk.js pages/embed/offset-fires/future-risk.js

@@ -1,10 +1,10 @@
 import { useState, useEffect } from 'react'
 import { Box, Flex } from 'theme-ui'
 import { Row, Column, Slider } from '@carbonplan/components'
-import Layout from '../../components/layout'
-import Minimap from '../../components/minimap'
-import Project from '../../components/project'
-import useStates from '../../components/use-states'
+import Layout from '../../../components/layout'
+import Minimap from '../../../components/minimap'
+import Project from '../../../components/project'
+import useStates from '../../../components/use-states'
 
 const projects = [
   {
@@ -55,6 +55,27 @@ const Index = () => {
   const [sliderChanging, setSliderChanging] = useState(false)
   const states = useStates()
 
+  useEffect(() => {
+    const resize = () => {
+      if (document.body.clientWidth > 641) {
+        const target = document.getElementById('project-0')
+        const targetSvg = document.getElementById('project-0-svg')
+        const ref1 = document.getElementById('project-1')
+        const ref2 = document.getElementById('project-2')
+        const offset = 68
+        const newHeight = offset + ref1.offsetHeight + ref2.offsetHeight
+        const newSvgHeight = (0.5 * ((newHeight - 48) - targetSvg.clientHeight))
+        target.style.height = newHeight + 'px'
+        targetSvg.style.marginTop = newSvgHeight + 'px'
+      } else {
+        const target = document.getElementById('project-0')
+        target.style.height = 'auto'
+      }
+    }
+    resize()
+    window.onresize = resize
+  }, [])
+
   return (
     <Layout embed='medium'>
       <Box sx={{ width: '100%', height: '100%', bg: 'background', p: [5] }}>
@@ -95,6 +116,7 @@ const Index = () => {
         <Row columns={[1, 3, 3, 3]}>
           <Column start={1} width={[1, 2, 2, 2]}>
             <Project
+              id={'project-0'}
               data={projects[0]}
               states={states}
               year={year}
@@ -105,12 +127,15 @@ const Index = () => {
           </Column>
           <Column start={[1, 3, 3, 3]} width={1}>
             <Project
+              id={'project-1'}
               data={projects[1]}
               states={states}
               year={year}
               zoom={zoom}
+
             />
             <Project
+              id={'project-2'}
               data={projects[2]}
               states={states}
               year={year}
@@ -288,7 +313,7 @@ const Index = () => {
                   textTransform: 'uppercase',
                   fontFamily: 'heading',
                   letterSpacing: 'smallcaps',
-                  mt: [5, '-2px', '-2px', '-2px'],
+                  mt: [6, '-2px', '-2px', '7px'],
                   pr: [2],
                 }}
               >
@@ -309,7 +334,7 @@ const Index = () => {
                   textTransform: 'uppercase',
                   fontFamily: 'body',
                   letterSpacing: 'smallcaps',
-                  mt: ['20px', '-14px', '-14px', '-14px'],
+                  mt: ['36px', '-14px', '-14px', '-14px'],
                   px: [2],
                   fontSize: [5, 5, 5, 6],
                   transition: 'color 0.15s',
@@ -337,7 +362,7 @@ const Index = () => {
                   textTransform: 'uppercase',
                   fontFamily: 'body',
                   letterSpacing: 'smallcaps',
-                  mt: ['20px', '-14px', '-14px', '-14px'],
+                  mt: ['36px', '-14px', '-14px', '-14px'],
                   px: [2],
                   fontSize: [5, 5, 5, 6],
                   transition: 'color 0.15s',

pages/embed/project-fires.js pages/embed/offset-fires/project-overlap.js

@@ -67,7 +67,7 @@ const Index = () => {
                     iframe.height =
                       iframe.contentWindow.document.body.offsetHeight + 1 + 'px'
                   }}
-                  src='/embed/project-fires'
+                  src='/embed/offset-fires/project-overlap'
                   sx={{
                     display: 'block',
                     width: ['100%', '100%', '100%', '1024px'],
@@ -115,7 +115,7 @@ const Index = () => {
                 <Box
                   as='iframe'
                   id='figure-3'
-                  src='/embed/future-risk'
+                  src='/embed/offset-fires/future-risk'
                   scrolling='no'
                   height='750px'
                   onLoad={(event) => {

pages/embed/project-focus.js

@@ -5,7 +5,7 @@ const theme = (embed) => {
   if (embed == 'small') {
     breakpoints = ['30em', '40em', '60em']
   } else if (embed == 'medium') {
-    breakpoints = ['35em', '80em', '80em']
+    breakpoints = ['40.063em', '80em', '80em']
   } else {
     breakpoints = ['40em', '66.875em', '90em']
   }