react-native-web port of fmf app

1 files changed, 98 insertions, 0 deletions

diff --git a/client/src/lib/views/home.js b/client/src/lib/views/home.js
new file mode 100644
index 0000000..618ce64
--- /dev/null
+++ b/client/src/lib/views/home.js
@@ -0,0 +1,98 @@
+import React, { Component } from 'react';
+import {
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  Platform
+} from 'react-native';
+import { Link } from 'react-router-dom'
+import ClearText from '../components/text'
+import FadeInView from 'react-native-fade-in-view'
+
+const sections = [
+  '/timeline',
+  '/drones',
+  '/livestream',
+  '/information',
+  '/contact'
+]
+const labels = [
+  'SURVEILLANCE',
+  'MILITARY DRONE STATISTICS',
+  'LIVESTREAM',
+  'ABOUT THIS WORK',
+  'CONTACT',
+]
+const images = [
+  require('../../img/nav/home/timeline.png'),
+  require('../../img/nav/home/drones.png'),
+  require('../../img/nav/home/livestream.png'),
+  require('../../img/nav/home/information.png'),
+  require('../../img/nav/home/contact.png'),
+]
+
+export default class Home extends Component {
+  constructor() {
+    super()
+  }
+  render() {
+    const links = sections.map((path, i) => {
+      const image = images[i]
+      const label = labels[i]
+      return view(path, image, label)
+    })
+    return (
+      <FadeInView duration={500} style={styles.container}>
+        {links}
+      </FadeInView>
+    )
+  }
+}
+
+function view (path, image, label, isSelected) {
+  let key = ('home_' + path).replace('/','')
+  let imageKey = 'image_' + key + String(isSelected)
+  return (
+    <Link to={path} key={key}>
+      <View style={styles.navItem}>
+        <Image key={imageKey} style={styles.image} source={image} />
+        <ClearText style={styles.text}>{label}</ClearText>
+      </View>
+    </Link>
+  )
+}
+
+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 shortHeight = isIphone || window.innerHeight < 700
+
+const buttonSide = shortHeight ? 50 : 70
+const buttonMargin = shortHeight ? 5 : 10
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: -80
+  },
+  navItem: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: shortHeight ? '10vh' : '13vh',
+  },
+  text: {
+    lineHeight: 16,
+    marginBottom: shortHeight ? 5 : 10,
+  },
+  image: {
+    width: buttonSide,
+    height: buttonSide,
+    margin: buttonMargin,
+  }
+})