mirror of
https://github.com/Blair-SGA-Dev-Team/blazerapp.git
synced 2024-11-21 12:31:16 -05:00
added pop up modal+format+style
This commit is contained in:
parent
10462ff55b
commit
a2dcb7a623
|
@ -6,6 +6,7 @@ import {
|
|||
View,
|
||||
Text,
|
||||
StatusBar,
|
||||
Linking,
|
||||
} from 'react-native';
|
||||
|
||||
import {
|
||||
|
@ -15,7 +16,7 @@ import {
|
|||
DebugInstructions,
|
||||
ReloadInstructions,
|
||||
} from 'react-native/Libraries/NewAppScreen';
|
||||
|
||||
import styles from './styles/liststyles';
|
||||
import { url } from './resources/fetchInfo.json'
|
||||
|
||||
class ChallengeWeek extends React.Component {
|
||||
|
@ -43,9 +44,10 @@ class ChallengeWeek extends React.Component {
|
|||
return <View/>
|
||||
} else {
|
||||
return (
|
||||
<View style={{alignItems:'center',paddingTop:'5%',paddingLeft:'10%',paddingRight:'10%'}}>
|
||||
<Text style={{fontSize:32,marginBottom:'10%',textAlign:'center'}}>{this.state.data.title}</Text>
|
||||
<Text style={{textAlign:'center'}}>{this.state.data.text}</Text>
|
||||
<View style={{alignItems:'center',paddingTop:'5%',paddingiorizontal:'10%', height: '100%', backgroundColor: 'white'}}>
|
||||
<Text style={{fontSize: 32, fontWeight: 'bold', marginBottom: '10%', color: 'red'}}>{this.state.data.title}</Text>
|
||||
<Text style={{textAlign:'center', fontSize: 24, marginBottom: '5%'}}>{this.state.data.text}</Text>
|
||||
<Text style={{textAlign:'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: "solid", textDecorationColor: "#000",}} onPress={() => Linking.openURL(this.state.data.link)}>{this.state.data.link}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
59
app/Home.js
59
app/Home.js
|
@ -1,4 +1,4 @@
|
|||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
SafeAreaView,
|
||||
StyleSheet,
|
||||
|
@ -6,6 +6,9 @@ import {
|
|||
View,
|
||||
Text,
|
||||
StatusBar,
|
||||
Modal,
|
||||
TouchableHighlight,
|
||||
Image,
|
||||
} from 'react-native';
|
||||
|
||||
import {
|
||||
|
@ -15,15 +18,61 @@ import {
|
|||
DebugInstructions,
|
||||
ReloadInstructions,
|
||||
} from 'react-native/Libraries/NewAppScreen';
|
||||
import styles from './styles/morestyles'
|
||||
|
||||
function Home1() {
|
||||
|
||||
const [modalVisible, setModalVisible] = useState(true);
|
||||
return (
|
||||
<View>
|
||||
<View>
|
||||
<Modal animationType="slide" transparent={true} visible={modalVisible}>
|
||||
<View style={styles.modal}>
|
||||
<View style={{display: 'flex', flexDirection:'row', justifyContent: 'flex-end'}}>
|
||||
<TouchableHighlight onPress={() => {setModalVisible(!modalVisible);}}>
|
||||
<Image source = {require('./assets/exit.png')} style = {{height: 40, width: 40}}/>
|
||||
</TouchableHighlight>
|
||||
</View>
|
||||
<View>
|
||||
<Image source = {require('./assets/blair_logo.png')} style = {{alignSelf: 'center', marginTop: '5%', height: 325, width: 325}}/>
|
||||
<Text style={styles.modalText}>hgjriwogjewope</Text>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
</View>
|
||||
<View>
|
||||
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
class Home extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
data: [],
|
||||
isLoading:true
|
||||
}
|
||||
}
|
||||
|
||||
/*componentDidMount() {
|
||||
fetch(`${url}/api/en/popup`,{
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache'
|
||||
}}
|
||||
).then((response) => {
|
||||
return response.text();
|
||||
}).then((json) => {
|
||||
this.setState({data: JSON.parse(json),isLoading:false});
|
||||
}).catch((error) => console.error(error))
|
||||
}*/
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
|
||||
</View>
|
||||
<View>
|
||||
<Home1></Home1>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Home;
|
|
@ -24,93 +24,98 @@ import styles from './styles/liststyles'
|
|||
import { url } from './resources/fetchInfo.json'
|
||||
const Stack = createStackNavigator();
|
||||
|
||||
const LunchEvent = (props) => {
|
||||
const item = props.item
|
||||
return(
|
||||
<View>
|
||||
<TouchableOpacity style={styles.item1} onPress={()=>props.navigation.navigate('LunchInfo', {data:props.data,name:props.name,text:item.text,loc:item.loc})} activeOpacity={0.8}>
|
||||
<View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
|
||||
<Image source = {require('./assets/lunch.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
|
||||
<Text style={styles.title}>{item.title}</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
export const LunchInfo = ({route}) => {
|
||||
const item = route.params;
|
||||
return (
|
||||
<View style = {{padding: 10}}>
|
||||
<View style ={styles.infoContainer}>
|
||||
<Text style = {styles.title1}>Description: </Text>
|
||||
<Text style = {styles.title}>{item.text}</Text>
|
||||
</View>
|
||||
<View style ={styles.infoContainer}>
|
||||
<Text style = {styles.title1}>Location: </Text>
|
||||
<Text style = {styles.link}>{item.loc}</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
const item = route.params;
|
||||
return (
|
||||
<View style = {{padding: 10}}>
|
||||
<Text style = {styles.eventTitle}>{item.name}</Text>
|
||||
<View style ={styles.infoContainer}>
|
||||
<Text style = {styles.title1}>Description: </Text>
|
||||
<Text style = {styles.title}>{item.text}</Text>
|
||||
</View>
|
||||
<View style ={styles.infoContainer}>
|
||||
<Text style = {styles.title1}>Location: </Text>
|
||||
<Text style = {styles.title}>{item.loc}</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
function LunchEvent (props) {
|
||||
const item = props.item
|
||||
return(
|
||||
<View>
|
||||
<TouchableOpacity style={styles.item1} onPress={()=>props.navigation.navigate('LunchInfo', {data:props.data,name:item.title,text:item.text,loc:item.loc})} activeOpacity={0.8}>
|
||||
<View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
|
||||
<Image source = {require('./assets/lunch.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
|
||||
<Text style={styles.title}>{item.title}</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
function Lunch () {
|
||||
return (
|
||||
<NavigationContainer independent={true}>
|
||||
<Stack.Navigator>
|
||||
<Stack.Screen
|
||||
name = "LunchEvents"
|
||||
component = {LunchEvents}
|
||||
options={({
|
||||
headerShown: false
|
||||
})}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name = "LunchInfo"
|
||||
component = {LunchInfo}
|
||||
options={({route})=>({
|
||||
title:route.params.name
|
||||
})}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
</NavigationContainer>
|
||||
)
|
||||
return (
|
||||
<NavigationContainer independent={true}>
|
||||
<Stack.Navigator>
|
||||
<Stack.Screen
|
||||
name = "LunchEvents"
|
||||
component = {LunchEvents}
|
||||
options={({
|
||||
headerShown: false
|
||||
})}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name = "LunchInfo"
|
||||
component = {LunchInfo}
|
||||
options={({route})=>({
|
||||
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
|
||||
title:route.params.name
|
||||
})}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
</NavigationContainer>
|
||||
)
|
||||
}
|
||||
|
||||
class LunchEvents extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
data: []
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
fetch(`${url}/api/en/lunchEvents`,{
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache'
|
||||
}
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
return response.text();
|
||||
})
|
||||
.then((json) => {
|
||||
this.setState({data: JSON.parse(json)});
|
||||
})
|
||||
.catch((error) => console.error(error))
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<FlatList
|
||||
data={this.state.data}
|
||||
renderItem={({item}) => <LunchEvent item={item} name={item.title} navigation={this.props.navigation}/>}
|
||||
keyExtractor={item=>JSON.stringify(item)}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
data: []
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
fetch(`${url}/api/en/lunchEvents`,{
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache'
|
||||
}
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
return response.text();
|
||||
})
|
||||
.then((json) => {
|
||||
this.setState({data: JSON.parse(json)});
|
||||
})
|
||||
.catch((error) => console.error(error))
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<FlatList
|
||||
data={this.state.data}
|
||||
renderItem={({item}) => <LunchEvent item={item} name={this.props.title} navigation={this.props.navigation}/>}
|
||||
keyExtractor={item=>JSON.stringify(item)}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Lunch;
|
||||
|
||||
|
|
|
@ -30,13 +30,14 @@ export const SSLInfo = ({route}) => {
|
|||
console
|
||||
return (
|
||||
<View style = {{padding: 10}}>
|
||||
<Text style = {styles.eventTitle}>{item.name}</Text>
|
||||
<View style ={styles.infoContainer}>
|
||||
<Text style = {styles.title1}>Description: </Text>
|
||||
<Text style = {styles.title}>{item.text}</Text>
|
||||
</View>
|
||||
<View style ={styles.infoContainer}>
|
||||
<Text style = {styles.title1}>Who: </Text>
|
||||
<Text style = {styles.link}>{item.teacher}</Text>
|
||||
<Text style = {styles.title}>{item.teacher}</Text>
|
||||
</View>
|
||||
<View style ={styles.infoContainer}>
|
||||
<Text style = {styles.title1}>Where: </Text>
|
||||
|
|
BIN
app/assets/exit.png
Normal file
BIN
app/assets/exit.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.0 KiB |
|
@ -34,6 +34,14 @@ const styles = StyleSheet.create({
|
|||
fontSize: 28,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
title2: {
|
||||
fontSize: 22,
|
||||
fontWeight: 'bold',
|
||||
color: 'red',
|
||||
textDecorationLine: 'underline',
|
||||
textDecorationStyle: "solid",
|
||||
textDecorationColor: "red",
|
||||
},
|
||||
link: {
|
||||
fontSize: 28,
|
||||
textDecorationLine: 'underline',
|
||||
|
@ -45,6 +53,16 @@ const styles = StyleSheet.create({
|
|||
borderRadius: 6,
|
||||
padding: 5,
|
||||
marginBottom: 10,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 24,
|
||||
},
|
||||
eventTitle: {
|
||||
textAlign: 'center',
|
||||
fontSize: 32,
|
||||
fontWeight: 'bold',
|
||||
padding: 5,
|
||||
marginBottom: 10,
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -57,6 +57,33 @@ const styles=StyleSheet.create({
|
|||
tabBarIcon: {
|
||||
height: 50,
|
||||
width: 50,
|
||||
},
|
||||
popup: {
|
||||
height: '90%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
modal: {
|
||||
marginHorizontal: 20,
|
||||
marginTop: '20%',
|
||||
height: '100%',
|
||||
backgroundColor: "white",
|
||||
borderRadius: 20,
|
||||
padding: 15,
|
||||
shadowColor: "black",
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2
|
||||
},
|
||||
shadowOpacity: 0.5,
|
||||
shadowRadius: 7,
|
||||
},
|
||||
modalText: {
|
||||
marginVertical: '10%',
|
||||
textAlign: "center",
|
||||
fontSize: 20,
|
||||
}
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user