diff options
Diffstat (limited to 'client/src/lib/views')
| -rw-r--r-- | client/src/lib/views/home.js | 1 | ||||
| -rw-r--r-- | client/src/lib/views/information.js | 25 | ||||
| -rw-r--r-- | client/src/lib/views/livestream.js | 22 | ||||
| -rw-r--r-- | client/src/lib/views/nav.js | 10 |
4 files changed, 36 insertions, 22 deletions
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, }, }) - - |