summaryrefslogtreecommitdiff
path: root/client/src
diff options
context:
space:
mode:
Diffstat (limited to 'client/src')
-rw-r--r--client/src/lib/app/index.js8
-rw-r--r--client/src/lib/components/footer.js6
-rw-r--r--client/src/lib/components/header.js7
-rw-r--r--client/src/lib/components/youtube.js8
-rw-r--r--client/src/lib/db/backupDB.js6
-rw-r--r--client/src/lib/timeline/timelineEvent.js14
-rw-r--r--client/src/lib/timeline/timelineFull.js6
-rw-r--r--client/src/lib/views/home.js1
-rw-r--r--client/src/lib/views/information.js25
-rw-r--r--client/src/lib/views/livestream.js22
-rw-r--r--client/src/lib/views/nav.js10
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,
},
})
-
-
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 15:24:17 +0000