more mobile hegemony

6 files changed, 60 insertions, 23 deletions

diff --git a/client/src/lib/components/button.js b/client/src/lib/components/button.js
index ca8388b..edd75de 100644
--- a/client/src/lib/components/button.js
+++ b/client/src/lib/components/button.js
@@ -30,6 +30,12 @@ export default class Button extends Component {
   }
 }
 
+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',
@@ -38,8 +44,8 @@ const styles = StyleSheet.create({
     padding: 0,
   },
   button: {
-    padding: 10,
-    margin: 10,
+    padding: isMobile ? 5 : 10,
+    margin: isMobile ? 5 : 10,
     borderRadius: 3,
     backgroundColor: '#fff',
     borderBottomColor: '#bbb',
diff --git a/client/src/lib/components/youtube.js b/client/src/lib/components/youtube.js
index a9ea740..75349e4 100644
--- a/client/src/lib/components/youtube.js
+++ b/client/src/lib/components/youtube.js
@@ -25,7 +25,7 @@ export default class Youtube extends Component {
     this.player = new YT.Player(this.container, {
       videoId: this.props.ytid,
       width: "100%",
-      height: isMobile ? 100 : 400,
+      height: isMobile ? 1 : 400,
       playerVars: {
         'autohide': 1,
         'autoplay': 0,
diff --git a/client/src/lib/timeline/timelineEvent.js b/client/src/lib/timeline/timelineEvent.js
index d8165fa..84e9437 100644
--- a/client/src/lib/timeline/timelineEvent.js
+++ b/client/src/lib/timeline/timelineEvent.js
@@ -35,7 +35,7 @@ export default class TimelineEvent extends Component {
         height = originalHeight * imageWidth / originalWidth
       }
       if (isNaN(width) || isNaN(height)) {
-      console.log(width, height, item.image.uri)
+        console.log(width, height, item.image.uri)
       }
       image = <img
         src={item.image.uri}
diff --git a/client/src/lib/timeline/timelineFull.js b/client/src/lib/timeline/timelineFull.js
index bc359c1..e5d4ff8 100644
--- a/client/src/lib/timeline/timelineFull.js
+++ b/client/src/lib/timeline/timelineFull.js
@@ -16,6 +16,15 @@ import Heading from '../components/heading'
 import Definition from '../components/definition'
 import Close from '../components/close'
 
+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 imageHeight = isMobile ? 250 : 450
+const imageWidth = isMobile ? 400 : 1000
+
 export default class TimelineFull extends Component {
   constructor() {
     super()
@@ -43,8 +52,14 @@ export default class TimelineFull extends Component {
       )
       const originalWidth = Number(item.image.width)
       const originalHeight = Number(item.image.height)
-      const height = originalHeight > 450 ? 450 : originalHeight
-      const width = originalWidth * height / originalHeight
+      let height = originalHeight > imageHeight ? imageHeight : originalHeight
+      let width = originalWidth * height / originalHeight
+      console.warn(width, imageWidth)
+      if (width > imageWidth) {
+        width = imageWidth
+        height = originalHeight * imageWidth / originalWidth
+      }
+
       image = (
         <View style={styles.imageContainer}>
           <View style={styles.imageWrapper}>
@@ -88,17 +103,17 @@ export default class TimelineFull extends Component {
     return (
       <View style={styles.container}>
         <ScrollView
-          contentContainerStyle={styles.item}
+          contentContainerStyle={isMobile ? mobileStyles.item : styles.item}
           horizontal={false}
           showsHorizontalScrollIndicator={false}
         >
           {image}
           <Heading style={styles.title}>{item.title}</Heading>
           <View style={styles.contentContainer}>
-            <View style={styles.bodyContainer}>
+            <View style={isMobile ? mobileStyles.bodyContainer : styles.bodyContainer}>
               <HTMLView value={description} style={styles.description} stylesheet={htmlStyles} onLinkPress={this.props.onLinkPress} />
             </View>
-            <View style={styles.metadataContainer}>
+            <View style={isMobile ? mobileStyles.metadataContainer : styles.metadataContainer}>
               <Definition label='Date'>{item.date}</Definition>
               <Definition label='Medium'>{item.medium}</Definition>
               <Definition label='Category' contentIsView={true}>
@@ -119,7 +134,6 @@ export default class TimelineFull extends Component {
   }
 }
 
-
 function linkTextFromUrl (url) {
   const url_parts = url.split('/')
   const domain = url_parts[2]
@@ -135,6 +149,21 @@ function capitalize (s){
   return s.charAt(0).toUpperCase() + s.slice(1)
 }
 
+const mobileStyles = StyleSheet.create({
+  item: {
+    maxWidth: 400,
+    maxHeight: 250,
+    padding: 40,
+    paddingTop: 50,
+  },
+  bodyContainer: {
+    width: '100%',
+  },
+  metadataContainer: {
+    width: '100%',
+  },
+})
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -148,7 +177,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'black',
   },
   item: {
-    maxWidth: 1000,
+    maxWidth: isMobile ? 400 : 1000,
     padding: 40,
   },
   imageContainer: {
diff --git a/client/src/lib/views/contact.js b/client/src/lib/views/contact.js
index 19bec89..57d3e9d 100644
--- a/client/src/lib/views/contact.js
+++ b/client/src/lib/views/contact.js
@@ -95,20 +95,22 @@ export default class Contact extends Component {
   }
   render() {
     return (
-      <ScrollableContainer heading='Contact' style={styles.container} bodyStyle={styles.body}>
-        <View style={styles.innerContainer}>
-          <ClearText style={styles.bodyText}>
-            {this.props.content.body}
-          </ClearText>
+      <View>
+        <ScrollableContainer heading='Contact' style={styles.container} bodyStyle={styles.body}>
+          <View style={styles.innerContainer}>
+            <ClearText style={styles.bodyText}>
+              {this.props.content.body}
+            </ClearText>
       
-          {this.renderForm()}
-          {this.renderComments()}
-        </View>
+            {this.renderForm()}
+            {this.renderComments()}
+          </View>
               
+        </ScrollableContainer>
         <Modal visible={this.state.sending}>
           {this.renderActivity()}
         </Modal>
-      </ScrollableContainer>
+      </View>
     )
   }
   renderForm() {
diff --git a/client/src/lib/views/livestream.js b/client/src/lib/views/livestream.js
index 88c66cf..5df52aa 100644
--- a/client/src/lib/views/livestream.js
+++ b/client/src/lib/views/livestream.js
@@ -13,7 +13,7 @@ export default class Livestream extends Component {
   constructor(props) {
     super()
     this.state = {
-      ytid: getYTID(choice(props.content.streams).uri),
+      ytid: isMobile ? "" : getYTID(choice(props.content.streams).uri),
       isReady: false,
       currentTime: 0,
       duration: 0,
@@ -105,13 +105,13 @@ const styles = StyleSheet.create({
   },
   videoContainer: {
     justifyContent: 'flex-start',
-    height: isMobile ? 100 : 400,
+    height: isMobile ? 0 : 400,
     width: '100%',
     padding: 10,
   },
   video: {
     alignSelf: 'stretch',
-    height: isMobile ? 100 : 400,
+    height: isMobile ? 0 : 400,
     width: '100%',
     backgroundColor: 'black',
     marginVertical: 10