browser, touchable

6 files changed, 64 insertions, 19 deletions

diff --git a/client/src/lib/components/browser.js b/client/src/lib/components/browser.js
new file mode 100644
index 0000000..2ef33c5
--- /dev/null
+++ b/client/src/lib/components/browser.js
@@ -0,0 +1,15 @@
+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')
+
+export default {
+  isIphone,
+  isIpad,
+  isAndroid,
+  isMobile,
+  isDesktop,
+  isFirefox,
+}
\ No newline at end of file
diff --git a/client/src/lib/components/button.js b/client/src/lib/components/button.js
index edd75de..6860f49 100644
--- a/client/src/lib/components/button.js
+++ b/client/src/lib/components/button.js
@@ -2,11 +2,13 @@ import React, { Component } from 'react';
 import {
   StyleSheet,
   Text,
-  TouchableOpacity,
   View
 } from 'react-native';
 import DeviceInfo from 'react-native-device-info'
 
+import Touchable from './touchable'
+import { isMobile } from './browser'
+
 export default class Button extends Component {
   render() {
     let { buttonStyle, textStyle, ...others } = this.props
@@ -19,23 +21,17 @@ export default class Button extends Component {
       activeOpacity = 1.0
     }
     return (
-      <TouchableOpacity {...others} onPress={() => { if (! this.props.disabled) { this.props.onPress() }}}>
+      <Touchable {...others} onPress={() => { if (! this.props.disabled) { this.props.onPress() }}}>
         <View style={viewElementStyle}>
           <Text style={textElementStyle}>
             {this.props.label}
           </Text>
         </View>
-      </TouchableOpacity>
+      </Touchable>
     )
   }
 }
 
-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 styles = StyleSheet.create({
   text: {
     color: '#000',
diff --git a/client/src/lib/components/close.js b/client/src/lib/components/close.js
index 12b4a0a..c5fa0f0 100644
--- a/client/src/lib/components/close.js
+++ b/client/src/lib/components/close.js
@@ -1,24 +1,29 @@
 import React, { Component } from 'react';
 import {
   StyleSheet,
-  TouchableOpacity,
-  Image
+  Image,
+  View,
 } from 'react-native';
 import DeviceInfo from 'react-native-device-info'
 
+import Touchable from './touchable'
+import { isFirefox } from './browser'
+
 export default class Close extends Component {
   render() {
     return (
-      <TouchableOpacity onPress={this.props.onPress} style={styles.close}>
-        <Image key={'image_close'} source={require('../../img/close.png')} style={styles.closeImage} />
-      </TouchableOpacity>
+      <Touchable onPress={this.props.onPress}>
+        <View style={styles.close}>
+          <Image key={'image_close'} source={require('../../img/close.png')} style={styles.closeImage} />
+        </View>
+      </Touchable>
     )
   }
 }
 
 const styles = StyleSheet.create({
   close: {
-    position: 'absolute',
+    position: isFirefox ? 'fixed' : 'absolute',
     top: 10,
     right: 10,
     width: 40,
diff --git a/client/src/lib/components/footer.js b/client/src/lib/components/footer.js
index f630ed8..15f6f0b 100644
--- a/client/src/lib/components/footer.js
+++ b/client/src/lib/components/footer.js
@@ -2,12 +2,13 @@ import React, { Component } from 'react'
 import {
   Image,
   StyleSheet,
-  TouchableOpacity,
   Text,
   View,
 } from 'react-native'
 import { Link } from 'react-router-dom'
 
+import Touchable from './touchable'
+
 export default class ClearText extends Component {
   render() {
     return (
@@ -18,9 +19,9 @@ export default class ClearText extends Component {
           </View>
         </Link>
         <View style={styles.footerItem}>
-          <TouchableOpacity onPress={() => this.props.onLinkPress('http://armoryonpark.org/')}>
+          <Touchable onPress={() => this.props.onLinkPress('http://armoryonpark.org/')}>
             <Image source={require('../../img/armory.png')} resizeMode='contain' style={styles.footerLogo} />
-          </TouchableOpacity>
+          </Touchable>
         </View>
         <Link to='/page/credits'>
           <View style={styles.footerItem}>
diff --git a/client/src/lib/components/header.js b/client/src/lib/components/header.js
index 3d41c4f..38a708a 100644
--- a/client/src/lib/components/header.js
+++ b/client/src/lib/components/header.js
@@ -2,12 +2,12 @@ import React, { Component } from 'react'
 import {
   Image,
   StyleSheet,
-  TouchableOpacity,
   Text,
   View,
 } from 'react-native'
 import { Link } from 'react-router-dom'
 
+import Touchable from './touchable'
 import Nav from '../views/nav'
 
 export default class ClearText extends Component {
diff --git a/client/src/lib/components/touchable.js b/client/src/lib/components/touchable.js
new file mode 100644
index 0000000..fd72c60
--- /dev/null
+++ b/client/src/lib/components/touchable.js
@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import {
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+} from 'react-native';
+
+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')
+
+export default class Touchable extends Component {
+  render() {
+    if (isFirefox) {
+      return (
+        <TouchableWithoutFeedback {...this.props} />
+      )
+    }
+    else {
+      return (
+        <TouchableOpacity {...this.props} />
+      )
+    }
+  }
+}
+