fixing obnoxious scroll bug

4 files changed, 17 insertions, 13 deletions

diff --git a/client/src/lib/components/browser.js b/client/src/lib/components/browser.js
index 2ef33c5..37af2aa 100644
--- a/client/src/lib/components/browser.js
+++ b/client/src/lib/components/browser.js
@@ -1,9 +1,9 @@
-const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
-const isIpad = (navigator.userAgent.match(/iPad/i))
-const isAndroid = (navigator.userAgent.match(/Android/i))
+const isIphone = !!( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) )
+const isIpad = !! (navigator.userAgent.match(/iPad/i))
+const isAndroid = !! (navigator.userAgent.match(/Android/i))
 const isMobile = isIphone || isIpad || isAndroid
 const isDesktop = ! isMobile
-const isFirefox = navigator.userAgent.match('Firefox')
+const isFirefox = !! navigator.userAgent.match('Firefox')
 
 export default {
   isIphone,
diff --git a/client/src/lib/components/button.js b/client/src/lib/components/button.js
index 6860f49..87a9bdf 100644
--- a/client/src/lib/components/button.js
+++ b/client/src/lib/components/button.js
@@ -7,7 +7,7 @@ import {
 import DeviceInfo from 'react-native-device-info'
 
 import Touchable from './touchable'
-import { isMobile } from './browser'
+import browser from './browser'
 
 export default class Button extends Component {
   render() {
@@ -40,8 +40,8 @@ const styles = StyleSheet.create({
     padding: 0,
   },
   button: {
-    padding: isMobile ? 5 : 10,
-    margin: isMobile ? 5 : 10,
+    padding: browser.isMobile ? 5 : 10,
+    margin: browser.isMobile ? 5 : 10,
     borderRadius: 3,
     backgroundColor: '#fff',
     borderBottomColor: '#bbb',
diff --git a/client/src/lib/components/close.js b/client/src/lib/components/close.js
index 7c0fd3c..14fb308 100644
--- a/client/src/lib/components/close.js
+++ b/client/src/lib/components/close.js
@@ -8,7 +8,7 @@ import {
 import DeviceInfo from 'react-native-device-info'
 
 import Touchable from './touchable'
-import { isFirefox } from './browser'
+import browser from './browser'
 
 export default class Close extends Component {
   render() {
diff --git a/client/src/lib/components/modal.js b/client/src/lib/components/modal.js
index 38869ce..e6766e1 100644
--- a/client/src/lib/components/modal.js
+++ b/client/src/lib/components/modal.js
@@ -4,15 +4,19 @@ import {
   View,
 } from 'react-native';
 
+import browser from './browser'
+
 export default class Modal extends Component {
   render() {
     let style = [ styles.modal ]
+    let className = 'modal'
     if (this.props.isVisible) {
       style.push(styles.visible)
+      className += ' visible'
     }
     style.push( this.props.style )
     return (
-      <View style={style} className='modal'>
+      <View style={style} className={className}>
         {this.props.children}
       </View>
     )
@@ -22,10 +26,11 @@ export default class Modal extends Component {
 const styles = StyleSheet.create({
   modal: {
     position: 'fixed',
-    top: '100%',
+    top: 0,
     left: 0,
-    width: '100%',
-    height: '100%',
+    width: '100vw',
+    height: '100vh',
+    overflow: 'hidden',
     zIndex: 2,
     backgroundColor: 'black',
     flex: 1,
@@ -35,7 +40,6 @@ const styles = StyleSheet.create({
     opacity: 0,
   },
   visible: {
-    top: '0%',
     opacity: 1,
   },
 })