poll pg (no css?) + styling

This commit is contained in:
Emily Liu 2020-11-20 02:44:02 -05:00
parent a4770d9fa0
commit 3b842be5c9
8 changed files with 55 additions and 20 deletions

View File

@ -55,7 +55,7 @@ function TeacherButton(props) {
return ( return (
<View style={[styles.item1,{flexDirection:'row'}]}> <View style={[styles.item1,{flexDirection:'row'}]}>
<TouchableOpacity style={{flex:1}} onPress={()=>{props.navigation.navigate('TeacherList',{data:props.data,name:props.name})}} activeOpacity={0.8}> <TouchableOpacity style={{flex:1}} onPress={()=>{props.navigation.navigate('TeacherList',{data:props.data,name:props.name})}} activeOpacity={0.8}>
<Text style={styles.title}>{props.name}</Text> <Text style={styles.title3}>{props.name}</Text>
</TouchableOpacity> </TouchableOpacity>
{props.icon?<Icon.Button color={color} name="star" size={30} style={{alignSelf:'center'}} backgroundColor="white" onPress={()=>{setColor(color=='#dba309'?'lightgrey':'#dba309');props.addFavorite(props.name)}}/>:<></>} {props.icon?<Icon.Button color={color} name="star" size={30} style={{alignSelf:'center'}} backgroundColor="white" onPress={()=>{setColor(color=='#dba309'?'lightgrey':'#dba309');props.addFavorite(props.name)}}/>:<></>}
</View> </View>

View File

@ -34,7 +34,7 @@ const Stack = createStackNavigator();
export const ClubInfo = ({route}) => { export const ClubInfo = ({route}) => {
const item = route.params; const item = route.params;
return ( return (
<View style = {{padding: 10}}> <View style = {{padding: 10, backgroundColor: 'white', height: '100%'}}>
<View style ={styles.infoContainer}> <View style ={styles.infoContainer}>
<Text style = {styles.title1}>Meeting Time and Day: </Text> <Text style = {styles.title1}>Meeting Time and Day: </Text>
<Text style = {{fontSize:20}}>{item.meeting}</Text> <Text style = {{fontSize:20}}>{item.meeting}</Text>
@ -57,7 +57,7 @@ function ClubElement (props) {
<TouchableOpacity style={styles.item1} onPress={()=>props.navigation.navigate('ClubInfo', {data:props.data,name:props.name,meeting:item.meeting,link:item.link,sponsor:item.sponsor})} activeOpacity={0.8}> <TouchableOpacity style={styles.item1} onPress={()=>props.navigation.navigate('ClubInfo', {data:props.data,name:props.name,meeting:item.meeting,link:item.link,sponsor:item.sponsor})} activeOpacity={0.8}>
<View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}> <View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
<Image source = {require('./assets/clubs.png')} style = {{height: 40, width: 40, marginRight: 10}}/> <Image source = {require('./assets/clubs.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
<Text style={styles.title}>{props.item.name}</Text> <Text style={styles.title3}>{props.item.name}</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>

View File

@ -27,7 +27,7 @@ const Stack = createStackNavigator();
export const LunchInfo = ({route}) => { export const LunchInfo = ({route}) => {
const item = route.params; const item = route.params;
return ( return (
<View style = {{padding: 10}}> <View style = {{padding: 10, backgroundColor: 'white', height: '100%'}}>
<View style ={styles.infoContainer}> <View style ={styles.infoContainer}>
<Text style = {styles.title1}>Description: </Text> <Text style = {styles.title1}>Description: </Text>
<Text style = {styles.title}>{item.text}</Text> <Text style = {styles.title}>{item.text}</Text>
@ -47,7 +47,7 @@ function LunchEvent (props) {
<TouchableOpacity style={styles.item1} onPress={()=>props.navigation.navigate('LunchInfo', {data:props.data,name:item.title,text:item.text,loc:item.loc})} activeOpacity={0.8}> <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'}}> <View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
<Image source = {require('./assets/lunch.png')} style = {{height: 40, width: 40, marginRight: 10}}/> <Image source = {require('./assets/lunch.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
<Text style={styles.title}>{item.title}</Text> <Text style={styles.title3}>{item.title}</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>

View File

@ -15,13 +15,20 @@ import {
DebugInstructions, DebugInstructions,
ReloadInstructions, ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen'; } from 'react-native/Libraries/NewAppScreen';
import {WebView} from 'react-native-webview';
class Poll extends React.Component { class Poll extends React.Component {
render() { render() {
return ( return (
<View> <WebView
source = {{uri: 'https://docs.google.com/forms/d/e/1FAIpQLSfR0XP2yo3TV3egz7aMok56wnP9kG4FQt2v3rHrrayf8uC7Vw/viewform?usp=sf_link'}}
</View> javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
style={{marginTop: 20}}
cacheEnabled={true}
/>
) )
} }
} }

View File

@ -29,7 +29,7 @@ export const SSLInfo = ({route}) => {
const item = route.params; const item = route.params;
console console
return ( return (
<View style = {{padding: 10}}> <View style = {{padding: 10, backgroundColor: 'white', height: '100%'}}>
<View style ={styles.infoContainer}> <View style ={styles.infoContainer}>
<Text style = {styles.title1}>Description: </Text> <Text style = {styles.title1}>Description: </Text>
<Text style = {styles.title}>{item.text}</Text> <Text style = {styles.title}>{item.text}</Text>
@ -53,7 +53,7 @@ function SSLElement (props) {
<TouchableOpacity style={styles.item1} onPress={()=>props.navigation.navigate('SSLInfo', {data: props.data, name: item.item.title, text: item.item.text, loc:item.item.loc, teacher: item.item.teacher})} activeOpacity={0.8}> <TouchableOpacity style={styles.item1} onPress={()=>props.navigation.navigate('SSLInfo', {data: props.data, name: item.item.title, text: item.item.text, loc:item.item.loc, teacher: item.item.teacher})} activeOpacity={0.8}>
<View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}> <View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
<Image source = {require('./assets/sslopps.png')} style = {{height: 40, width: 40, marginRight: 10}}/> <Image source = {require('./assets/sslopps.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
<Text style={styles.title}>{item.item.title}</Text> <Text style={styles.title3}>{item.item.title}</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>

View File

@ -32,7 +32,7 @@ const StaffElement = ({item}) => {
<TouchableOpacity style={styles.item1} onPress={()=>setVisible(!visible)} activeOpacity={0.8}> <TouchableOpacity style={styles.item1} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
<View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}> <View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
<Image source = {require('./assets/staff.png')} style = {{height: 40, width: 40, marginRight: 10}}/> <Image source = {require('./assets/staff.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
<Text style={styles.title}>{item.item.name}</Text> <Text style={styles.title3}>{item.item.name}</Text>
</View> </View>
{visible?extra:<></>} {visible?extra:<></>}
</TouchableOpacity> </TouchableOpacity>

View File

@ -45,13 +45,31 @@ class StudentWeek extends React.Component {
} else { } else {
const iconURI = this.state.data.icon !== undefined?`data:image/png;charset=utf-8;base64,${this.state.data.icon}`:''; const iconURI = this.state.data.icon !== undefined?`data:image/png;charset=utf-8;base64,${this.state.data.icon}`:'';
return ( return (
<View style={{paddingTop:'5%',paddingLeft:'10%',paddingRight:'10%'}}> <View style={{paddingTop:'5%',paddingHorizontal:'10%', backgroundColor: 'white', height: '100%'}}>
<Text style={{fontSize:32,marginBottom:'10%',textAlign:'center'}}>{this.state.data.name}</Text> <View style = {{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
<Image style = {{height: '50%', width:'100%'}}source={{uri:iconURI}} /> <View>
<View style = {{paddingTop:'5%'}}> <Text style={{fontSize:28,marginBottom:'10%',textAlign:'center'}}>{this.state.data.name}</Text>
<Text style={{fontSize: 20}}>Grade {this.state.data.year}</Text> <Text style={{fontSize:20}}>{'\t'}Grade {this.state.data.year}</Text>
<Text style={{fontSize: 20}}>{"\n"}Hobbies: {this.state.data.hobbies}</Text> </View>
<Text style={{fontSize: 20}}>{"\n"}Achievements: {this.state.data.achievements}</Text> <View style = {{height: 150, width: 150}}>
<Image style = {{height: '100%', width:'100%', borderRadius: 6}}source={{iconURI}} />
</View>
</View>
<View style = {{paddingTop:'10%', height: '55%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
<View>
<Text style={{fontSize: 20, fontWeight: 'bold'}}>{"\n"}Hobbies</Text>
<Text style={{fontSize: 20}}>{'\t'}{this.state.data.hobbies}</Text>
</View>
<View>
<Text style={{fontSize: 20, fontWeight: 'bold'}}>{"\n"}Achievements </Text>
<Text style={{fontSize: 20}}>{'\t'}{this.state.data.achievements}</Text>
</View>
<View>
<Text style={{fontSize: 20, fontWeight: 'bold'}}>{"\n"}Message</Text>
<Text style={{fontSize: 20}}>{'\t'}{this.state.data.messages}</Text>
</View>
</View> </View>
</View> </View>

View File

@ -19,7 +19,7 @@ const styles = StyleSheet.create({
width: '100%', width: '100%',
}, },
title: { title: {
fontSize: 28, fontSize: 20,
}, },
date: { date: {
fontSize:12, fontSize:12,
@ -40,6 +40,9 @@ const styles = StyleSheet.create({
textDecorationStyle: "solid", textDecorationStyle: "solid",
textDecorationColor: "red", textDecorationColor: "red",
}, },
title3: {
fontSize: 28,
},
link: { link: {
fontSize: 28, fontSize: 28,
textDecorationLine: 'underline', textDecorationLine: 'underline',
@ -51,6 +54,13 @@ const styles = StyleSheet.create({
borderRadius: 6, borderRadius: 6,
padding: 5, padding: 5,
marginBottom: 10, marginBottom: 10,
shadowColor: "black",
shadowOffset: {
width: 0,
height: 0
},
shadowOpacity: 0.3,
shadowRadius: 3,
}, },
headerTitle: { headerTitle: {
fontSize: 24, fontSize: 24,