more specific screen sizes

3 files changed, 14 insertions, 1 deletions

diff --git a/animism-align/frontend/app/utils/index.js b/animism-align/frontend/app/utils/index.js
index e48522e..0ed8898 100644
--- a/animism-align/frontend/app/utils/index.js
+++ b/animism-align/frontend/app/utils/index.js
@@ -16,6 +16,8 @@ export const isiPhone = !!((navigator.userAgent.match(/iPhone/i)) || (navigator.
 export const isiPad = !!(navigator.userAgent.match(/iPad/i))
 export const isAndroid = !!(navigator.userAgent.match(/Android/i))
 export const isMobile = isiPhone || isiPad || isAndroid
+export const isHandheld = isiPhone || isAndroid
+export const isTablet = isMobile && window.innerWidth > 640
 export const isDesktop = !isMobile
 
 const htmlClassList = document.body.parentNode.classList
diff --git a/animism-align/frontend/app/views/viewer/forms/subscription.form.js b/animism-align/frontend/app/views/viewer/forms/subscription.form.js
index 956941b..d2846c0 100644
--- a/animism-align/frontend/app/views/viewer/forms/subscription.form.js
+++ b/animism-align/frontend/app/views/viewer/forms/subscription.form.js
@@ -4,6 +4,7 @@ import { bindActionCreators } from 'redux'
 
 import { Arrow } from '../nav/viewer.icons'
 import { Loader } from 'app/common/loader.component'
+import { isHandheld } from 'app/utils'
 import { ENV_PRODUCTION } from 'app/constants'
 
 import * as subscriptionActions from './subscription.actions'
@@ -81,7 +82,7 @@ export default class SubscriptionForm extends Component {
             type="email"
             name="email"
             value={this.state.email}
-            placeholder="Email address here"
+            placeholder={isHandheld ? "Email address" : "Email address here"}
             autoCorrect="off"
             autoCapitalize="off"
             spellCheck="false"
diff --git a/animism-align/frontend/app/views/viewer/viewer.mobile.css b/animism-align/frontend/app/views/viewer/viewer.mobile.css
index 40b4e7a..f1a96e7 100644
--- a/animism-align/frontend/app/views/viewer/viewer.mobile.css
+++ b/animism-align/frontend/app/views/viewer/viewer.mobile.css
@@ -42,6 +42,9 @@
   .player-transcript .section_heading {
     font-size: 2rem;
   }
+  .credits-content .subscription-form input[type='email'],
+  .credits-content button.subscription-submit,
+  .credits-content .subscription-form,
   .player-transcript .paragraph.intro_paragraph {
     font-size: 1.8rem;
     line-height: 1.1;
@@ -198,5 +201,12 @@
     padding-bottom: 0.75rem;
   }
 
+  /* subscription form */
+  .credits-content .subscription-form input[type='email'] {
+    padding-right: 5.8rem;
+  }
+  .credits-content .subscription-form .arrow {
+    top: 0.3rem;
+  }
 
 }