bonkers scroll bugs

11 files changed, 70 insertions, 43 deletions

diff --git a/client/src/lib/app/index.js b/client/src/lib/app/index.js
index 53e16f4..3034e54 100644
--- a/client/src/lib/app/index.js
+++ b/client/src/lib/app/index.js
@@ -140,11 +140,13 @@ class App extends Component {
       </View>
     )
   }
+  componentDidMount() {
+    setTimeout( () => {
+      document.body.classList.remove("loading")
+    }, 500)
+  }
 }
 
-
-
-
 //         <Redirect to="/" />
 
 export default App
diff --git a/client/src/lib/components/footer.js b/client/src/lib/components/footer.js
index ffd157d..f630ed8 100644
--- a/client/src/lib/components/footer.js
+++ b/client/src/lib/components/footer.js
@@ -56,8 +56,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    maxWidth: 140,
-    maxHeight: 40,
+    maxWidth: isMobile ? 100 : 140,
+    maxHeight: isMobile ? 30 : 40,
     width: 260,
     height: 39,
   },
@@ -72,6 +72,6 @@ const styles = StyleSheet.create({
     fontSize: 10,
     flex: 1,
     padding: 10,
-    marginTop: 4,
+    marginTop: isMobile ? 0 : 4,
   }
 })
diff --git a/client/src/lib/components/header.js b/client/src/lib/components/header.js
index dc95d6d..3d41c4f 100644
--- a/client/src/lib/components/header.js
+++ b/client/src/lib/components/header.js
@@ -34,9 +34,9 @@ const styles = StyleSheet.create({
   header: {
     width: '100%',
     backgroundColor: 'black',
-    paddingTop: isMobile ? 5 : 10,
+    paddingTop: isMobile ? 20 : 10,
     paddingBottom: isMobile ? 5 : 10,
-    height: isMobile ? 30 : 100,
+    height: isMobile ? 40 : 100,
     flexDirection: 'row',
     justifyContent: 'space-around',
     alignItems: 'center',
@@ -45,7 +45,8 @@ const styles = StyleSheet.create({
   logo: {
     flex: 2,
     marginTop: 0,
-    height: isMobile ? 30 : 55,
+    height: isMobile ? 32 : 55,
     marginBottom: isMobile ? 5 : 10,
   },
+
 })
diff --git a/client/src/lib/components/youtube.js b/client/src/lib/components/youtube.js
index ab5f8aa..a9ea740 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: 400,
+      height: isMobile ? 100 : 400,
       playerVars: {
         'autohide': 1,
         'autoplay': 0,
@@ -83,6 +83,12 @@ export default class Youtube 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
+
 let YT_READY = false
 
 global.onYouTubeIframeAPIReady = function(){
diff --git a/client/src/lib/db/backupDB.js b/client/src/lib/db/backupDB.js
index 6123612..9e85725 100644
--- a/client/src/lib/db/backupDB.js
+++ b/client/src/lib/db/backupDB.js
@@ -2559,14 +2559,10 @@ export const backupDB = {
           "uri": "https://www.youtube.com/watch?v=LeKgQdZLJuQ"
         },
         {
-          "text": "Part 2 Left",
+          "text": "Part 2 Entrance",
           "uri": "https://www.youtube.com/watch?v=E_66XZcernM"
         },
         {
-          "text": "Part 2 Right",
-          "uri": "https://www.youtube.com/watch?v=Pm6kg0wJws0"
-        },
-        {
           "text": "Infrared Cameras",
           "uri": "https://youtu.be/adIZfkGDXAM"
         },
diff --git a/client/src/lib/timeline/timelineEvent.js b/client/src/lib/timeline/timelineEvent.js
index 3888fc2..d8165fa 100644
--- a/client/src/lib/timeline/timelineEvent.js
+++ b/client/src/lib/timeline/timelineEvent.js
@@ -46,6 +46,14 @@ export default class TimelineEvent extends Component {
     } else {
       image = <View></View>
     }
+    
+    let imageContainer;
+    if (isMobile) {
+      imageContainer = null
+    }
+    else {
+      imageContainer = ( <View style={styles.imageContainer}>{image}</View> )
+    }
     return (
       <TouchableOpacity style={styles.item} activeOpacity={0.8} onPress={() => this.props.onPress(this.props.item) }>
         <div ref={(ref) => this.ref = ref}></div>
@@ -53,7 +61,7 @@ export default class TimelineEvent extends Component {
           <View style={styles.dateContainer}>
             <ClearText style={styles.date}>{item.date}</ClearText>
           </View>
-          <View style={styles.imageContainer}>{image}</View>
+          {imageContainer}
           <View style={styles.titleContainer}>
             <ClearText style={styles.title}>{item.title}</ClearText>
           </View>
@@ -75,7 +83,7 @@ const styles = StyleSheet.create({
     minHeight: 100,
   },
   dateContainer: {
-    width: '30%',
+    width: isMobile ? '50%' : '30%',
     justifyContent: 'flex-start',
     alignItems: 'center',
     paddingRight: 10,
@@ -88,7 +96,7 @@ const styles = StyleSheet.create({
     marginRight: 10,
   },
   titleContainer: {
-    width: '30%',
+    width: isMobile ? '50%' : '30%',
     justifyContent: 'flex-start',
     alignItems: 'center',
     paddingLeft: 10,
diff --git a/client/src/lib/timeline/timelineFull.js b/client/src/lib/timeline/timelineFull.js
index 8490ce2..bc359c1 100644
--- a/client/src/lib/timeline/timelineFull.js
+++ b/client/src/lib/timeline/timelineFull.js
@@ -49,10 +49,10 @@ export default class TimelineFull extends Component {
         <View style={styles.imageContainer}>
           <View style={styles.imageWrapper}>
             <img src={item.image.uri}
-              style={[styles.image, {
+              style={{
                 width: width,
                 height: height,
-              }]} />
+              }} />
           </View>
           {caption}
         </View>
@@ -83,7 +83,7 @@ export default class TimelineFull extends Component {
       return `<a href='${tag}'>${tag}</a>`
     }).join(', ')
     
-    const description = '<p>' + item.description + '</p>'
+    const description = '<p>' + item.description.replace(/\n+/g,'\n\n') + '</p>'
 
     return (
       <View style={styles.container}>
diff --git a/client/src/lib/views/home.js b/client/src/lib/views/home.js
index 6f117e5..8d5f275 100644
--- a/client/src/lib/views/home.js
+++ b/client/src/lib/views/home.js
@@ -98,6 +98,7 @@ const styles = StyleSheet.create({
   text: {
     lineHeight: 16,
     marginBottom: shortHeight ? 5 : 10,
+    fontSize: isIphone ? 14 : 16
   },
   image: {
     width: buttonSide,
diff --git a/client/src/lib/views/information.js b/client/src/lib/views/information.js
index aace0d9..759bae2 100644
--- a/client/src/lib/views/information.js
+++ b/client/src/lib/views/information.js
@@ -23,6 +23,7 @@ export default class Information extends Component {
     super()
     this.state = {
       essay: { title: '', byline: '', body: '' },
+      essayBody: '',
       essayModalVisible: false,
       biosVisible: false,
     }
@@ -40,7 +41,10 @@ export default class Information extends Component {
     else {
       essayBody += '\n\n\n\n\n'
     }
-    this.setState({ essay, essayBody, essayModalVisible: true })
+    this.setState({ essay: { title: '', byline: '', body: '' }, essayBody: '', essayModalVisible: true })
+    setTimeout( () => {
+      this.setState({ essay, essayBody })
+    }, 100)
   }
   hideEssay() {
     this.setState({ essayModalVisible: false })
@@ -79,7 +83,7 @@ export default class Information extends Component {
         </ScrollableContainer>
 
         <Modal style={styles.modal} isVisible={this.state.biosVisible}>
-          <ScrollView contentContainerStyle={styles.modalContainer}>
+          <ScrollView ref={ (ref) => this.modalScroller = ref } contentContainerStyle={styles.modalContainer}>
             <View style={styles.modalBody}>
 
               <Image source={require('../../img/aiweiwei.png')} resizeMode='cover' style={styles.face} />
@@ -114,6 +118,12 @@ export default class Information 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({
   container: {
     flex: 1,
@@ -136,7 +146,6 @@ const styles = StyleSheet.create({
     marginBottom: 20,
   },
   
-  
   bio: {
     textAlign: 'left',
     paddingRight: 10,
@@ -152,10 +161,10 @@ const styles = StyleSheet.create({
   },
   
   essays: {
-    marginBottom: 20,
+    marginBottom: isMobile ? 10 : 20,
   },
   essayContainer: {
-    padding: 10,
+    padding: isMobile ? 5 : 10,
     margin: 5,
   },
   essayTitle: {
@@ -170,7 +179,7 @@ const styles = StyleSheet.create({
     marginBottom: 0,
   },
   essayBylineHeader: {
-    fontSize: 16,
+    fontSize: isMobile ? 13 : 16,
     fontWeight: 'bold',
     marginBottom: 0,
   },
@@ -188,9 +197,9 @@ const styles = StyleSheet.create({
   },
   modalBody: {
     marginTop: 20,
-    width: '90%',
+    width: isMobile ? '95%' : '90%',
     backgroundColor: 'black',
-    padding: 40,
+    padding: isMobile ? 10 : 40,
     marginBottom: 200,
   },
 
diff --git a/client/src/lib/views/livestream.js b/client/src/lib/views/livestream.js
index ff06d0c..88c66cf 100644
--- a/client/src/lib/views/livestream.js
+++ b/client/src/lib/views/livestream.js
@@ -4,7 +4,7 @@ import {
   View
 } from 'react-native';
 
-import Container from '../components/container'
+import ScrollableContainer from '../components/scrollableContainer'
 import ClearText from '../components/text'
 import Button from '../components/button'
 import Youtube from '../components/youtube'
@@ -47,7 +47,7 @@ export default class Livestream extends Component {
     const second_buttons = buttons.slice(3)
 
     return (
-      <Container heading='Livestream' bodyStyle={styles.bodyStyle}>
+      <ScrollableContainer heading='Livestream' bodyStyle={styles.bodyStyle}>
         <View style={styles.videoContainer} className='videoContainer'>
           <Youtube ytid={this.state.ytid} />
           <View style={styles.overlay}></View>
@@ -61,7 +61,7 @@ export default class Livestream extends Component {
         <View style={styles.contentContainer}>
           <ClearText style={styles.body}>{this.props.content.body}</ClearText>
         </View>
-      </Container>
+      </ScrollableContainer>
     )
   }
 }
@@ -74,8 +74,14 @@ function getYTID(url) {
   || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i)
   || url.match(/embed\/([-_a-zA-Z0-9]{11})/i)
   )[1].split('&')[0];
-
 }
+
+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({
   container: {
     flex: 1,
@@ -89,6 +95,7 @@ const styles = StyleSheet.create({
     textAlign: 'left',
     marginTop: 40,
     width: '75%',
+    paddingBottom: 100,
   },
   contentContainer: {
     flex: 1,
@@ -98,13 +105,13 @@ const styles = StyleSheet.create({
   },
   videoContainer: {
     justifyContent: 'flex-start',
-    height: 400,
+    height: isMobile ? 100 : 400,
     width: '100%',
     padding: 10,
   },
   video: {
     alignSelf: 'stretch',
-    height: 400,
+    height: isMobile ? 100 : 400,
     width: '100%',
     backgroundColor: 'black',
     marginVertical: 10
@@ -121,8 +128,7 @@ const styles = StyleSheet.create({
   },
   buttons: {
     width: '100%',
-    marginLeft: -25,
-    paddingTop: 30,
+    paddingTop: 20,
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
diff --git a/client/src/lib/views/nav.js b/client/src/lib/views/nav.js
index fe2e4b7..ef04f2d 100644
--- a/client/src/lib/views/nav.js
+++ b/client/src/lib/views/nav.js
@@ -89,11 +89,11 @@ const styles = StyleSheet.create({
     alignItems: 'flex-end',
   },
   flexEnd: {
-    alignItems: 'flex-end',
+    alignItems: 'center',
     paddingRight: isMobile ? 5 : 10,
   },
   flexStart: {
-    alignItems: 'flex-start',
+    alignItems: 'center',
     paddingLeft: isMobile ? 5 : 10,
   },
   unselectedNavItem: {
@@ -111,9 +111,7 @@ const styles = StyleSheet.create({
     margin: "0 auto",
     justifyContent: 'center',
     alignItems: 'flex-end',
-    width: 35,
-    height: 35,
+    width: isIphone ? 30 : 35,
+    height: isIphone ? 30 : 35,
   },
 })
-
-