emh/blazerapp
1
0
Fork 0
mirror of https://github.com/Blair-SGA-Dev-Team/blazerapp.git synced 2024-11-21 20:41:16 -05:00
Code Issues Packages Projects Releases Wiki Activity

lunch events & sslopps ui + small changes

Browse Source
This commit is contained in:
emilyliublair 2021-07-31 00:26:07 -04:00
parent bd2491f3b1
commit b5e2e6de3e
8 changed files with 99 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/LunchEvents.js
View File

@ -9,6 +9,7 @@ import {
FlatList, FlatList,
TouchableOpacity, TouchableOpacity,
Image, Image,
Dimensions
} from 'react-native'; } from 'react-native';
import { import {
@ -22,6 +23,7 @@ import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack' import { createStackNavigator } from '@react-navigation/stack'
import styles from './styles/liststyles' import styles from './styles/liststyles'
import { url } from './resources/fetchInfo.json' import { url } from './resources/fetchInfo.json'
import LinearGradient from 'react-native-linear-gradient';
const Stack = createStackNavigator(); const Stack = createStackNavigator();
export const LunchInfo = ({route}) => { export const LunchInfo = ({route}) => {
@ -50,17 +52,29 @@ export const LunchInfo = ({route}) => {
function LunchEvent (props) { function LunchEvent (props) {
const item = props.item const item = props.item
const [expand, setExpand] = useState(false);
return( return(
<View> <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}> <TouchableOpacity style={styles.listItem} onPress={()=>setExpand(!expand)}>
<View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}> <View style={styles.container2}>
<Image source = {require('./assets/lunch.png')} style = {{height: 40, width: 40, marginRight: 10}}/> <Image source = {require('./assets/lunch.png')} style = {styles.sideImage}/>
<Text style={styles.title3}>{item.title}</Text> <View style = {styles.accordian}>
<Text style={styles.title}>{item.title}</Text>
{expand?<LinearGradient start={{x: 0, y: 0.25}} end={{x: .5, y: 1}} colors={['red', '#FF7373']} style={{borderRadius: 24, alignSelf: 'center'}}><Image source = {require('./assets/collapse.png')} style={{tintColor: 'white'}}/></LinearGradient>:<Image source = {require('./assets/expand.png')} style={{tintColor: '#b2b2b2', alignSelf: 'center'}}/>}
</View> </View>
</View>
{expand?<View style={{marginLeft: 50}}><Text style={styles.accordianHeader}>Information</Text><Text style={styles.accordianText}>{item.text}</Text><Text style={styles.accordianHeader}>{'\n'}Location</Text><Text style={[styles.accordianText, {paddingBottom: '4%'}]}>{item.loc}</Text></View>:<></>}
</TouchableOpacity> </TouchableOpacity>
</View> </View>
) )
} }
/*<TouchableOpacity style={styles2.moreitem} onPress={()=>props.navigation.navigate('LunchInfo', {data:props.data,name:item.title,text:item.text,loc:item.loc})} activeOpacity={0.8}>
<Image source = {require('./assets/lunch.png')} style = {{height: 40, width: 40, marginRight: 10, tintColor: '#323232'}}/>
<View style = {{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', width: '85%'}}>
<Text style={{fontSize: 20}}>{item.title}</Text>
<Image source = {require('./assets/expand.png')} style={{tintColor: '#b2b2b2'}}/>
</View>
</TouchableOpacity>*/
class LunchEvents extends React.Component { class LunchEvents extends React.Component {
@ -89,13 +103,13 @@ class LunchEvents extends React.Component {
render() { render() {
return ( return (
<View style={styles.container}> <ScrollView style={styles.moreDefault}>
<FlatList <FlatList
data={this.state.data} data={this.state.data}
renderItem={({item}) => <LunchEvent item={item} name={this.props.title} navigation={this.props.navigation}/>} renderItem={({item}) => <LunchEvent item={item} name={this.props.title} navigation={this.props.navigation}/>}
keyExtractor={item=>JSON.stringify(item)} keyExtractor={item=>JSON.stringify(item)}
/> />
</View> </ScrollView>
) )
} }
} }

24
app/More.js
View File

@ -9,6 +9,7 @@ import {
FlatList, FlatList,
TouchableOpacity, TouchableOpacity,
Image, Image,
Dimensions
} from 'react-native'; } from 'react-native';
import { import {
@ -45,23 +46,27 @@ class MoreSwitch extends React.Component {
render() { render() {
return ( return (
<View style={{flex:1,backgroundColor:'red'}}> <View style={{flex:1,backgroundColor:'white', paddingHorizontal: '5%'}}>
<FlatList <FlatList
data={[ data={[
{name:'Announcements',key:"announce", img:Images.announcements}, {name:'Announcements',key:"announce", img:Images.announcements},
{name:"Resources",key:"resources", img:Images.resources}, {name:"Resources",key:"resources", img:Images.resources},
{name:"SOTW",key:"studentweek", img:Images.student}, {name:"Student of the Week",key:"studentweek", img:Images.student},
{name:"Lunch",key:"lunchevent", img:Images.lunch}, {name:"Lunch Events",key:"lunchevent", img:Images.lunch},
{name:"SSL",key:"sslopps", img:Images.sslopps}, {name:"SSL Opportunities",key:"sslopps", img:Images.sslopps},
{name:"COTW",key:"challengeweek", img:Images.challenge}, {name:"Challenge of the Week",key:"challengeweek", img:Images.challenge},
{name:"Polls", key:"polls", img: Images.polls}, {name:"Polls", key:"polls", img: Images.polls},
{name:"Settings", key:"settings", img: Images.settings}, {name:"Settings", key:"settings", img: Images.settings},
]} ]}
renderItem={({item})=> renderItem={({item})=>
<TouchableOpacity style={styles.moreitem} onPress={()=>this.props.navigation.navigate(item.key)}> <TouchableOpacity style={styles.moreitem} onPress={()=>this.props.navigation.navigate(item.key)}>
<Image source = {item.img} style = {{height: 40, width: 40, marginRight: 10, tintColor: '#e3e3e3'}}/> <Image source = {item.img} style = {{height: 40, width: 40, marginRight: 10, tintColor: '#323232'}}/>
<View style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', width: '85%'}}>
<Text style={styles.moretext}>{item.name}</Text> <Text style={styles.moretext}>{item.name}</Text>
<Image source = {require('./assets/forward.png')} style={{tintColor: '#b2b2b2'}}/>
</View>
</TouchableOpacity> </TouchableOpacity>
} }
/> />
@ -123,7 +128,7 @@ class More extends React.Component {
name="lunchevent" name="lunchevent"
component={LunchEvents} component={LunchEvents}
options={{ options={{
title:"Lunch", title:"Lunch Events",
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}], headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerLeft:null, headerLeft:null,
headerBackground: ()=>background headerBackground: ()=>background
@ -133,7 +138,7 @@ class More extends React.Component {
name="sslopps" name="sslopps"
component={SSLOps} component={SSLOps}
options={{ options={{
title:"SSL Ops", title:"SSL Opportunities",
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}], headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerLeft:null, headerLeft:null,
headerBackground: ()=>background headerBackground: ()=>background
@ -166,7 +171,8 @@ class More extends React.Component {
title:"Settings", title:"Settings",
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}], headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerLeft:null, headerLeft:null,
headerBackground: ()=>background headerBackground: ()=>background,
headerShown:false
}} }}
/> />
<Stack.Screen <Stack.Screen

2
app/Resources.js
View File

@ -21,7 +21,7 @@ import {
} from 'react-native/Libraries/NewAppScreen'; } from 'react-native/Libraries/NewAppScreen';
import styles from './styles/morestyles'; import styles from './styles/morestyles';
const windowWidth = Dimensions.get('window').width*.80/2; const windowWidth = Dimensions.get('window').width*.80/3.5;
function ResourceLink(props) { function ResourceLink(props) {
return ( return (

20
app/SSLOps.js
View File

@ -9,6 +9,7 @@ import {
FlatList, FlatList,
TouchableOpacity, TouchableOpacity,
Image, Image,
Dimensions
} from 'react-native'; } from 'react-native';
import { import {
@ -22,6 +23,7 @@ import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack' import { createStackNavigator } from '@react-navigation/stack'
import styles from './styles/liststyles'; import styles from './styles/liststyles';
import { url } from './resources/fetchInfo.json'; import { url } from './resources/fetchInfo.json';
import LinearGradient from 'react-native-linear-gradient';
//import I18n from './i18n'; //import I18n from './i18n';
const Stack = createStackNavigator(); const Stack = createStackNavigator();
@ -61,13 +63,18 @@ export const SSLInfo = ({route}) => {
function SSLElement (props) { function SSLElement (props) {
const item = props.item; const item = props.item;
const [expand, setExpand] = useState(false);
return( return(
<View> <View>
<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.listItem} onPress={()=>setExpand(!expand)}>
<View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}> <View style = {styles.container2}>
<Image source = {require('./assets/sslopps.png')} style = {{height: 40, width: 40, marginRight: 10}}/> <Image source = {require('./assets/sslopps.png')} style = {styles.sideImage}/>
<Text style={styles.title3}>{item.item.title}</Text> <View style = {styles.accordian}>
<Text style={styles.title}>{item.item.title}</Text>
{expand?<LinearGradient start={{x: 0, y: 0.25}} end={{x: .5, y: 1}} colors={['red', '#FF7373']} style={{borderRadius: 24, alignSelf: 'center'}}><Image source = {require('./assets/collapse.png')} style={{tintColor: 'white'}}/></LinearGradient>:<Image source = {require('./assets/expand.png')} style={{tintColor: '#b2b2b2', alignSelf: 'center'}}/>}
</View> </View>
</View>
{expand?<View style={{marginLeft: 50}}><Text style={styles.accordianHeader}>Information</Text><Text style={styles.accordianText}>{item.item.text}</Text><Text style={styles.accordianHeader}>{'\n'}Sponsor</Text><Text style={styles.accordianText}>{item.item.teacher}</Text><Text style={styles.accordianHeader}>{'\n'}Location</Text><Text style={[styles.accordianText, {paddingBottom: '4%'}]}>{item.item.loc}</Text></View>:<></>}
</TouchableOpacity> </TouchableOpacity>
</View> </View>
) )
@ -100,13 +107,14 @@ class SSLOps extends React.Component {
render() { render() {
return ( return (
<View style={styles.container}> <ScrollView style={styles.moreDefault}>
<FlatList <FlatList
data={this.state.data} data={this.state.data}
renderItem={item=><SSLElement item={item} name={item.title} navigation={this.props.navigation}/>} renderItem={item=><SSLElement item={item} name={item.title} navigation={this.props.navigation}/>}
keyExtractor={item=>JSON.stringify(item)} keyExtractor={item=>JSON.stringify(item)}
/> />
</View> </ScrollView>
) )
} }
} }

8
app/StudentWeek.js
View File

@ -20,6 +20,8 @@ import {
//import I18n from './i18n'; //import I18n from './i18n';
import { url } from './resources/fetchInfo.json' import { url } from './resources/fetchInfo.json'
import LinearGradient from 'react-native-linear-gradient';
class StudentWeek extends React.Component { class StudentWeek extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
@ -82,7 +84,7 @@ class StudentWeek extends React.Component {
<Image source = {require('./assets/hobbies.png')} /> <Image source = {require('./assets/hobbies.png')} />
<View style = {{display: 'flex', flexDirection: 'row', width: '85%', justifyContent: 'space-between', paddingHorizontal:'2%',}}> <View style = {{display: 'flex', flexDirection: 'row', width: '85%', justifyContent: 'space-between', paddingHorizontal:'2%',}}>
<Text style={{fontSize: 20, alignSelf: 'center'}}>Hobbies</Text> <Text style={{fontSize: 20, alignSelf: 'center'}}>Hobbies</Text>
<Image source = {this.state.hobbyArrow} style={{alignSelf:'center'}}/> {this.state.hobbyExpanded?<LinearGradient start={{x: 0, y: 0.25}} end={{x: .5, y: 1}} colors={['red', '#FF7373']} style={{borderRadius: 24, alignSelf: 'center'}}><Image source = {require('./assets/collapse.png')} style={{tintColor: 'white'}}/></LinearGradient>:<Image source = {require('./assets/expand.png')} style={{tintColor: '#b2b2b2', alignSelf: 'center'}}/>}
</View> </View>
</View> </View>
{this.state.hobbyExpanded?hobbyText:<></>} {this.state.hobbyExpanded?hobbyText:<></>}
@ -92,7 +94,7 @@ class StudentWeek extends React.Component {
<Image source = {require('./assets/achievements.png')} /> <Image source = {require('./assets/achievements.png')} />
<View style = {{display: 'flex', flexDirection: 'row', width: '85%', justifyContent: 'space-between', paddingHorizontal:'2%',}}> <View style = {{display: 'flex', flexDirection: 'row', width: '85%', justifyContent: 'space-between', paddingHorizontal:'2%',}}>
<Text style={{fontSize: 20, alignSelf: 'center'}}>Achievements</Text> <Text style={{fontSize: 20, alignSelf: 'center'}}>Achievements</Text>
<Image source = {this.state.achievementArrow} style={{alignSelf:'center'}}/> {this.state.achievementExpanded?<LinearGradient start={{x: 0, y: 0.25}} end={{x: .5, y: 1}} colors={['red', '#FF7373']} style={{borderRadius: 24, alignSelf: 'center'}}><Image source = {require('./assets/collapse.png')} style={{tintColor: 'white'}}/></LinearGradient>:<Image source = {require('./assets/expand.png')} style={{tintColor: '#b2b2b2', alignSelf: 'center'}}/>}
</View> </View>
</View> </View>
{this.state.achievementExpanded?achievementText:<></>} {this.state.achievementExpanded?achievementText:<></>}
@ -102,7 +104,7 @@ class StudentWeek extends React.Component {
<Image source = {require('./assets/message.png')} /> <Image source = {require('./assets/message.png')} />
<View style = {{display: 'flex', flexDirection: 'row', width: '85%', justifyContent: 'space-between', paddingHorizontal:'2%',}}> <View style = {{display: 'flex', flexDirection: 'row', width: '85%', justifyContent: 'space-between', paddingHorizontal:'2%',}}>
<Text style={{fontSize: 20, alignSelf: 'center'}}>Messages</Text> <Text style={{fontSize: 20, alignSelf: 'center'}}>Messages</Text>
<Image source = {this.state.messageArrow} style={{alignSelf:'center'}}/> {this.state.messageExpanded?<LinearGradient start={{x: 0, y: 0.25}} end={{x: .5, y: 1}} colors={['red', '#FF7373']} style={{borderRadius: 24, alignSelf: 'center'}}><Image source = {require('./assets/collapse.png')} style={{tintColor: 'white'}}/></LinearGradient>:<Image source = {require('./assets/expand.png')} style={{tintColor: '#b2b2b2', alignSelf: 'center'}}/>}
</View> </View>
</View> </View>
{this.state.messageExpanded?messageText:<></>} {this.state.messageExpanded?messageText:<></>}

BIN
app/assets/forward.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 B

39
app/styles/liststyles.js
View File

@ -1,4 +1,4 @@
import {StyleSheet, StatusBar} from 'react-native'; import {StyleSheet, StatusBar, Dimensions} from 'react-native';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
@ -11,6 +11,43 @@ const styles = StyleSheet.create({
borderBottomWidth: 1.5, borderBottomWidth: 1.5,
borderColor: 'black' borderColor: 'black'
}, },
moreDefault: {
flex: 1,
backgroundColor:'white',
paddingHorizontal: '5%'
},
listItem: {
display: 'flex',
borderBottomColor:'#D5D5D5',
borderBottomWidth:.5
},
container2: {
display: 'flex',
flexDirection: 'row',
height: Dimensions.get('window').height*0.075,
alignItems: 'center'
},
sideImage: {
height: 40,
width: 40,
marginRight: 10,
tintColor: '#323232'
},
accordian: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
width: '85%'
},
accordianHeader: {
paddingBottom: '2%',
fontSize:16
},
accordianText: {
paddingBottom: '2%',
fontSize:16,
fontWeight: '200',
},
item1: { item1: {
backgroundColor: 'white', backgroundColor: 'white',
padding: 15, padding: 15,

27
app/styles/morestyles.js
View File

@ -5,9 +5,9 @@ console.log(Dimensions.get('window'))
const styles=StyleSheet.create({ const styles=StyleSheet.create({
moreitem: { moreitem: {
backgroundColor:'red', backgroundColor:'white',
borderBottomColor:'white', borderBottomColor:'#D5D5D5',
borderBottomWidth:0.5, borderBottomWidth:.5,
height: Dimensions.get('window').height*0.075, height: Dimensions.get('window').height*0.075,
paddingLeft: '3%', paddingLeft: '3%',
fontSize: 32, fontSize: 32,
@ -16,8 +16,7 @@ const styles=StyleSheet.create({
alignItems: 'center', alignItems: 'center',
}, },
moretext: { moretext: {
color:'#e3e3e3', fontSize:20,
fontSize:22,
}, },
headerTitle: { headerTitle: {
fontWeight: 'bold', fontWeight: 'bold',
@ -27,24 +26,6 @@ const styles=StyleSheet.create({
alignItems: 'center', alignItems: 'center',
marginTop: '3%', marginTop: '3%',
}, },
image: {
height: 100,
width: 400,
borderTopRightRadius: 16,
borderTopLeftRadius: 16,
},
textContainer: {
backgroundColor: 'black',
width: 400,
borderBottomLeftRadius: 16,
borderBottomRightRadius: 16,
},
resourceText: {
fontWeight: 'bold',
color: 'white',
fontSize:32,
textAlign:'center',
},
openPage: { openPage: {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',