From 06e20cb460faa5c302511f6444c4017d5ebd07e0 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sun, 4 Jun 2017 18:19:08 -0400
Subject: more mobile hegemony

---
 client/src/lib/timeline/timelineFull.js | 43 +++++++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 7 deletions(-)

(limited to 'client/src/lib/timeline/timelineFull.js')

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: {
-- 
cgit v1.2.3-70-g09d2