Responsive: small height computer screens #6

Author: lorensr

.eslintrc

@@ -13,5 +13,8 @@
     "react/react-in-jsx-scope": 0,
     "react/jsx-closing-bracket-location": [1, "props-aligned"],
     "react/no-find-dom-node": 0
+  },
+  "globals": {
+    "window": true
   }
 }

components/SubscribeForm.js

@@ -21,6 +21,14 @@ class SubscribeForm extends React.Component {
     }
   }
 
+  componentDidMount() {
+    // when focusing on small screens, browser sets scrollTop to make sure
+    // input is in view, which we don't want
+    if (window.screen.height >= 768) {
+      this.formEmail.textHandler.focus()
+    }
+  }
+
   onSubmit(event) {
     event.preventDefault()
     const email = this.formEmail.state.value
@@ -62,7 +70,6 @@ class SubscribeForm extends React.Component {
           ref={(email) => {
             this.formEmail = email
           }}
-          autoFocus
           />
         <RaisedButton
           label="Get early access"

css/raw.js

@@ -12,7 +12,6 @@ body {
   font-size: 18px;
   line-height: 1.7;
 }
-
 @media screen and (max-width: 760px) {
   body {
     font-size: 16px;
@@ -28,6 +27,15 @@ a:hover {
   text-decoration: underline;
 }
 
+.form-container {
+  margin-top: 30px;
+}
+@media (max-height: 825px) {
+  .form-container {
+    margin-top: 10px;
+  }
+}
+
 .ripple-ball {
   width: 50px;
   height: 50px;
@@ -55,8 +63,14 @@ a:hover {
 }
 
 .logo-collection .svg-wrapper {
-  width: 100px;
-  height: 100px;
+  width: 80px;
+  height: 80px;
+}
+@media (max-height: 799px) {
+  .logo-collection .svg-wrapper {
+    width: 50px;
+    height: 50px;
+  }
 }
 .logo-collection svg {
   width: 100%;

pages/index.js

@@ -242,6 +242,7 @@ class Index extends Component {
                 style={{
                   opacity: 0,
                   padding: '20px 20px 0 20px',
+                  marginTop: 0,
                   marginBottom: 0,
                   maxWidth: '600px',
                 }}
@@ -250,8 +251,8 @@ class Index extends Component {
                 <b>
                   The GraphQL Guide
                 </b>
-                {` is an upcoming book on GraphQL, the best way to write an API or
-                fetch data for your app. `}
+                {` is an upcoming book on GraphQL (which is the best way to write an API or
+                fetch data for your app). `}
                 <a href="https://twitter.com/helferjs">
                   Jonas
                 </a>
@@ -263,12 +264,15 @@ class Index extends Component {
                 <a href="https://twitter.com/lorendsr">
                   Loren
                 </a>
-                {' is a full-stack freelancer and '}
+                {' is a freelancer and '}
                 <a href="https://www.meteor.com/">
                   Meteor
                 </a>
-                {` maintainer. We’re in the process of writing the best GraphQL
-                reference, which includes:`}
+                {' maintainer. We’re in the process of writing '}
+                <em>
+                  the best
+                </em>
+                {' GraphQL reference, which includes:'}
               </p>
               <Delay
                 ms={3500}
@@ -375,16 +379,17 @@ class Index extends Component {
                 </LogoLI>
               </section>
               <Paper
+                className="form-container"
                 style={{
                   display: 'flex',
                   flexDirection: 'column',
                   alignItems: 'center',
                   justifyContent: 'center',
                   width: 500,
                   opacity: 0,
-                  marginTop: 30,
                   paddingTop: 10,
                   paddingBottom: 10,
+                  marginBottom: 20,
                   willChange: 'opacity, transform',
                 }}
                 zDepth={2}