fix mobile DrawingPage layout with react-div-100vh

Author: pwfisher

explorer/components/DrawingPage.tsx

@@ -5,6 +5,7 @@ import { assetPrefix } from '../lib/assetPrefix'
 import styled from 'styled-components'
 import { getPreviousSlug, getNextSlug } from '../lib/drawings'
 import { useRouter } from 'next/router'
+import Div100vh from 'react-div-100vh'
 
 export const DrawingPage: React.FC<{ drawing: Drawing, year: number }> = ({ drawing, year }) => {
   const router = useRouter()
@@ -22,36 +23,37 @@ export const DrawingPage: React.FC<{ drawing: Drawing, year: number }> = ({ draw
   }
 
   return (
-    <Container onKeyDown={onKeyDown} tabIndex={-1}>
-      <Title>{drawing.title}</Title>
-      <ImageWrap>
-        <Image src={`${assetPrefix}/images/${drawing.image}`} alt={drawing.title} />
-      </ImageWrap>
-      <NavBar>
-        <Link href="/drawing/[id]" as={`/drawing/${getPreviousSlug(drawing.slug)}`}>
-          <Arrow>&lt;</Arrow>
-        </Link>
-        <Link href="/year/[id]" as={`/year/${year}`}>
-          <YearLink>{year}</YearLink>
-        </Link>
-        <a href={`http://explodingdog.com/title/${drawing.slug}.html`}>
-          <DrawingId>#{drawing.id.split('.').slice(-1)}</DrawingId>
-        </a>
-        <Date>{drawing.date}</Date>
-        <Link href="/drawing/[id]" as={`/drawing/${getNextSlug(drawing.slug)}`}>
-          <Arrow>&gt;</Arrow>
-        </Link>
-      </NavBar>
-    </Container>
+    <Div100vh>
+      <Container onKeyDown={onKeyDown} tabIndex={-1}>
+        <Title>{drawing.title}</Title>
+        <ImageWrap>
+          <Image src={`${assetPrefix}/images/${drawing.image}`} alt={drawing.title} />
+        </ImageWrap>
+        <NavBar>
+          <Link href="/drawing/[id]" as={`/drawing/${getPreviousSlug(drawing.slug)}`}>
+            <Arrow>&lt;</Arrow>
+          </Link>
+          <Link href="/year/[id]" as={`/year/${year}`}>
+            <YearLink>{year}</YearLink>
+          </Link>
+          <a href={`http://explodingdog.com/title/${drawing.slug}.html`}>
+            <DrawingId>#{drawing.id.split('.').slice(-1)}</DrawingId>
+          </a>
+          <Date>{drawing.date}</Date>
+          <Link href="/drawing/[id]" as={`/drawing/${getNextSlug(drawing.slug)}`}>
+            <Arrow>&gt;</Arrow>
+          </Link>
+        </NavBar>
+      </Container>
+    </Div100vh>
   )
 }
 
 const Container = styled.main.attrs({ className: 'Explorer__DrawingPage__Container'})`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  min-height: 100vh;
-  max-height: 100vh;
+  height: 100%;
 `
 
 const Title = styled.h1.attrs({ className: 'Explorer__DrawingPage__Title'})`
@@ -78,17 +80,18 @@ const NavBar = styled.nav.attrs({ className: 'Explorer__DrawingPage__Header'})`
   color: #BBB;
   display: flex;
   justify-content: space-between;
-  font-size: 14px;
+  font-size: 18px;
   font-weight: bold;
-  height: 40px;
-  line-height: 40px;
+  height: 80px;
+  line-height: 80px;
 `
 
 const Arrow = styled.div.attrs({ className: 'Explorer__DrawingPage__Arrow'})`
   color: black;
   cursor: pointer;
-  font-size: 24px;
-  padding: 0 32px;
+  font-size: 36px;
+  line-height: 74px;
+  padding: 0 5%;
   user-select: none;
 
   &:hover {

explorer/package.json

@@ -9,12 +9,13 @@
     "build": "next build && next export",
     "start": "next start",
     "clean": "rm -rf node_module/.cache && rm -rf out",
-    "deploy": "yarn clean && yarn build && touch out/.nojekyll && gh-pages -t -d out",
+    "deploy": "yarn clean && yarn build && touch out/.nojekyll && (NODE_DEBUG=gh-pages gh-pages -t -d out)",
     "type-check": "tsc"
   },
   "dependencies": {
     "next": "*",
     "react": "^16.12.0",
+    "react-div-100vh": "^0.5.6",
     "react-dom": "^16.12.0",
     "styled-components": "^5.2.1"
   },

explorer/yarn.lock

@@ -3357,6 +3357,11 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-div-100vh@^0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/react-div-100vh/-/react-div-100vh-0.5.6.tgz#1d73866e96379433dea066d3e55026efd77f4b29"
+  integrity sha512-foNzJeBwiWp2Xs+pDhKyX2sP9O8UoGfYyz/D+GgZaHCKS3R+lbtJc8OdgMDr03txXgPVsxGEtmjKeDcLW30xwQ==
+
 react-dom@^16.12.0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"