fix 100vh and other flex bugs

jaxomlotus · Sep 10, 2019 · 2c4ab28 · 2c4ab28
1 parent 11f0882
commit 2c4ab28
Show file tree

Hide file tree

Showing 29 changed files with 32 additions and 26 deletions.
diff --git a/components/button.tsx b/components/button.tsx
diff --git a/components/edit-link-modal.tsx b/components/edit-link-modal.tsx
diff --git a/components/editor.tsx b/components/editor.tsx
diff --git a/components/github.tsx b/components/github.tsx
diff --git a/components/input.tsx b/components/input.tsx
diff --git a/components/save-bar.tsx b/components/save-bar.tsx
diff --git a/components/spinner.tsx b/components/spinner.tsx
diff --git a/components/top-bar.tsx b/components/top-bar.tsx
diff --git a/lib/data.ts b/lib/data.ts
diff --git a/lib/db.ts b/lib/db.ts
diff --git a/lib/sentry-browser.ts b/lib/sentry-browser.ts
diff --git a/next-env.d.ts b/next-env.d.ts
diff --git a/now.json b/now.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "next": "^9.0.6-canary.1",
     "node-fetch": "^2.6.0",
     "react": "^16.9.0",
+    "react-div-100vh": "^0.3.4",
     "react-dom": "^16.9.0",
     "react-spinners": "^0.6.1",
     "uid-promise": "^1.1.0"

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -55,8 +55,8 @@ export default class StaticFunApp extends App {
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol";
-            height: 100vh;
-            width: 100vw;
+            height: 100%;
+            max-width: 100vw;
             overflow: hidden;
           }
         `}</style>

diff --git a/pages/api/get-page.ts b/pages/api/get-page.ts
diff --git a/pages/api/save-page.ts b/pages/api/save-page.ts
diff --git a/pages/api/send-email.ts b/pages/api/send-email.ts
diff --git a/pages/index.tsx b/pages/index.tsx
diff --git a/readme.md b/readme.md
diff --git a/sendgrid.json b/sendgrid.json
diff --git a/static/emoji-bg.png b/static/emoji-bg.png
diff --git a/static/emoji-bg.svg b/static/emoji-bg.svg
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/views/editor.tsx b/views/editor.tsx
diff --git a/views/fixed-center.tsx b/views/fixed-center.tsx
diff --git a/views/static-layout.tsx b/views/static-layout.tsx
diff --git a/views/welcome.tsx b/views/welcome.tsx
@@ -1,5 +1,6 @@
 import Head from "next/head";
 import { useState } from "react";
+import Div100vh from 'react-div-100vh';
 
 import Button from "../components/button";
 import Input from "../components/input";
@@ -79,7 +80,7 @@ export function Welcome() {
   }
 
   return (
-    <main>
+    <Div100vh>
       <Head>
         <title>Static Fun</title>
         <link rel="icon" href="/static/favicon.ico" type="image/x-icon" />
@@ -99,8 +100,8 @@ export function Welcome() {
             <a href="https://zeit.co/blog/wildcard-domains">wildcard domains</a>
           </p>
         </div>
+        <h2>To start go to</h2>
         <form className="form" onSubmit={checkIfPageExists}>
-          <h2>To start go to</h2>
           <Input
             required
             color="#9b51e0"
@@ -109,6 +110,7 @@ export function Welcome() {
             error={Boolean(searchState === "ERROR")}
             placeholder="my-fun-page"
             width={180}
+            style={{ maxWidth: '40vw' }}
           />
           <span className="suffix">.static.fun</span>
           {renderButton()}
@@ -124,19 +126,20 @@ export function Welcome() {
         <div className="emojis" />
       </div>
       <style jsx>{`
-        main {
-          height: 100vh;
-          width: 100vw;
-        }
         .welcome-container {
           display: flex;
-          margin-top: 40px;
-          height: 100%;
+          height: calc(100% - 50px);
           flex-direction: column;
           align-items: center;
         }
         .welcome {
+          flex: 1 0 300px;
+          padding: 30px 0 15px;
+          width: 100%;
           text-align: center;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
         }
         .welcome span {
           font-weight: bold;
@@ -149,8 +152,10 @@ export function Welcome() {
           font-family: "Comic Sans MS", monospace;
         }
         .welcome p {
-          margin-top: 32px;
-          width: 500px;
+          margin: 32px auto 0;
+          padding: 0 15px;
+          width: 650px;
+          max-width: 100%;
           font-size: 14px;
           line-height: 28px;
           font-family: Menlo, monospace;
@@ -160,8 +165,11 @@ export function Welcome() {
           color: black;
         }
         .form {
+          flex: 0;
           text-align: center;
-          margin-top: 0;
+          margin-top: 15px;
+          margin-bottom: 15px;
+          white-space: nowrap;
           height: 100px;
         }
         .form h2 {
@@ -186,21 +194,13 @@ export function Welcome() {
           color: red;
         }
         .emojis {
-          margin-top: 24px;
-          height: 300px;
+          flex: 0 1 660px;
           width: 100%;
           background-image: url("/static/emoji-bg.png");
-          background-repeat: no-repeat;
+          background-repeat: repeat-x;
           background-size: cover;
-        }
-
-        @media (min-height: 600px) {
-          .emojis {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-          }
+          background-position: bottom;
+          pointer-events: none;
         }
       `}</style>
       <style jsx>{`
@@ -209,6 +209,6 @@ export function Welcome() {
           filter: ${pageExists ? "grayscale(1)" : "none"};
         }
       `}</style>
-    </main>
+    </Div100vh>
   );
 }
diff --git a/yarn.lock b/yarn.lock
@@ -4257,6 +4257,11 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-div-100vh@^0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/react-div-100vh/-/react-div-100vh-0.3.4.tgz#45507a121e71198d22e24b2b37710393bcf3501e"
+  integrity sha512-1OYEtmZydas/O4VD1tA3t1EgGG67ml9LnyuUTLjVU8CV3FFFq2HfFEMAAIaAUzjNqhuSZ8pV7IDOViUYQ7vjew==
+
 react-dom@^16.9.0:
   version "16.9.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0.tgz#5e65527a5e26f22ae3701131bcccaee9fb0d3962"