From b2a85ba0ec6875e8610daa9315b14fe24a757ed8 Mon Sep 17 00:00:00 2001
From: Chuck Dries
Date: Mon, 28 Feb 2022 18:49:24 -0800
Subject: [PATCH] fix iphone screen height
---
package.json | 1 +
src/html.js | 2 +-
src/pages/index.js | 15 +++++++++------
src/utils.js | 7 ++++---
tailwind.config.js | 3 +++
yarn.lock | 5 +++++
6 files changed, 23 insertions(+), 10 deletions(-)
diff --git a/package.json b/package.json
index dda142e..acdd65e 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
"postcss-nested": "^5.0.5",
"ramda": "^0.27.1",
"react": "^17.0.1",
+ "react-div-100vh": "^0.7.0",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-responsive-masonry": "^2.1.2",
diff --git a/src/html.js b/src/html.js
index c30c71e..f9c9ab3 100644
--- a/src/html.js
+++ b/src/html.js
@@ -15,7 +15,7 @@ export default function HTML(props) {
name="description"
/>
{props.headComponents}
diff --git a/src/pages/index.js b/src/pages/index.js
index 98fee0f..fcca9ae 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -6,12 +6,13 @@ import { take } from "ramda";
import classnames from "classnames";
import {
- getVibrantToHelmetSafeBodyStyle,
+ getHelmetSafeBodyStyle,
getVibrant,
getAspectRatio,
} from "../utils";
import Nav from "../components/index/Nav";
import ActionButtons from "../components/index/ActionButtons";
+import { use100vh } from "react-div-100vh";
const env =
process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development";
@@ -105,6 +106,8 @@ const IndexPage = ({
const vibrant = getVibrant(image);
const ar = getAspectRatio(image);
+ const screenHeight = use100vh();
+
const imageIsLandscape = isClient ? ar > 1 : true;
return (
@@ -113,14 +116,14 @@ const IndexPage = ({
Chuck Dries
@@ -181,8 +184,8 @@ const IndexPage = ({
alt=""
className={classnames(
imageIsLandscape
- ? "landscape:h-screen portrait:h-two-thirds-vw"
- : "h-screen portrait:w-full landscape:w-1/2"
+ ? "landscape:h-actual-screen portrait:h-two-thirds-vw"
+ : "h-actual-screen portrait:w-full landscape:w-1/2"
)}
image={getImage(image)}
loading="eager"
@@ -192,7 +195,7 @@ const IndexPage = ({
/>
) : (
)}
diff --git a/src/utils.js b/src/utils.js
index ab67b26..9e57df8 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -17,7 +17,7 @@ export const getRgba = (palette, alpha) =>
`rgba(${palette[0]}, ${palette[1]}, ${palette[2]}, ${alpha || 1})`;
// work around SSR bug in react-helmet
-export const getVibrantToHelmetSafeBodyStyle = (vibrant) => {
+export const getHelmetSafeBodyStyle = (vibrant, screenHeight) => {
const style = {
"--muted": vibrant.Muted,
"--dark-muted": vibrant.DarkMuted,
@@ -25,13 +25,14 @@ export const getVibrantToHelmetSafeBodyStyle = (vibrant) => {
"--vibrant": vibrant.Vibrant,
"--dark-vibrant": vibrant.DarkVibrant,
"--light-vibrant": vibrant.LightVibrant,
+ "--height-screen": screenHeight ? `${screenHeight}px` : '100vh'
};
if (typeof window === "undefined") {
return style;
}
return Object.keys(style)
- .map((key) => `${key}: ${style[key]}`)
- .join(";");
+ .map((key) => `${key}: ${style[key]};`)
+ .join("");
};
const gcd = (a, b) => {
diff --git a/tailwind.config.js b/tailwind.config.js
index 056b526..21d5d4d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -31,6 +31,9 @@ module.exports = {
serif: ["Playfair Display", "serif"],
},
extend: {
+ height: {
+ "actual-screen": "var(--height-screen)"
+ },
dropShadow: {
'dark': '0 1px 2px rgba(0, 0, 0, 0.8)',
},
diff --git a/yarn.lock b/yarn.lock
index 074b7df..4d9de04 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11386,6 +11386,11 @@ react-dev-utils@^11.0.3:
strip-ansi "6.0.0"
text-table "0.2.0"
+react-div-100vh@^0.7.0:
+ version "0.7.0"
+ resolved "https://registry.yarnpkg.com/react-div-100vh/-/react-div-100vh-0.7.0.tgz#b3bec03a833fa40e406f36ed2e23a35a59d1068f"
+ integrity sha512-I3d77tQyaSlOx/6vurDDLk7upb5GA2ldEtVXkk7Kn5cy+tLlS0KlqDK14xUxlxh7jz4StjgKcwFyrpymsPpomA==
+
react-dom@^17.0.1:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"