mirror of
https://github.com/Blair-SGA-Dev-Team/blazerapp.git
synced 2024-09-19 11:22:14 -04:00
lunch events & sslopps ui + small changes
This commit is contained in:
emilyliublair
parent
bd2491f3b1
commit
b5e2e6de3e
|
|
@ -9,6 +9,7 @@ import {
|
|||
FlatList,
|
||||
TouchableOpacity,
|
||||
Image,
|
||||
Dimensions
|
||||
} from 'react-native';
|
||||
|
||||
import {
|
||||
|
|
@ -22,6 +23,7 @@ import { NavigationContainer } from '@react-navigation/native'
|
|||
import { createStackNavigator } from '@react-navigation/stack'
|
||||
import styles from './styles/liststyles'
|
||||
import { url } from './resources/fetchInfo.json'
|
||||
import LinearGradient from 'react-native-linear-gradient';
|
||||
const Stack = createStackNavigator();
|
||||
|
||||
export const LunchInfo = ({route}) => {
|
||||
|
|
@ -50,17 +52,29 @@ export const LunchInfo = ({route}) => {
|
|||
|
||||
function LunchEvent (props) {
|
||||
const item = props.item
|
||||
const [expand, setExpand] = useState(false);
|
||||
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.title3}>{item.title}</Text>
|
||||
</View>
|
||||
<TouchableOpacity style={styles.listItem} onPress={()=>setExpand(!expand)}>
|
||||
<View style={styles.container2}>
|
||||
<Image source = {require('./assets/lunch.png')} style = {styles.sideImage}/>
|
||||
<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>
|
||||
{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>
|
||||
</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 {
|
||||
|
||||
|
|
@ -89,13 +103,13 @@ class LunchEvents extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<ScrollView style={styles.moreDefault}>
|
||||
<FlatList
|
||||
data={this.state.data}
|
||||
renderItem={({item}) => <LunchEvent item={item} name={this.props.title} navigation={this.props.navigation}/>}
|
||||
keyExtractor={item=>JSON.stringify(item)}
|
||||
/>
|
||||
</View>
|
||||
</ScrollView>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
26
app/More.js
26
app/More.js
|
|
@ -9,6 +9,7 @@ import {
|
|||
FlatList,
|
||||
TouchableOpacity,
|
||||
Image,
|
||||
Dimensions
|
||||
} from 'react-native';
|
||||
|
||||
import {
|
||||
|
|
@ -45,23 +46,27 @@ class MoreSwitch extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<View style={{flex:1,backgroundColor:'red'}}>
|
||||
<View style={{flex:1,backgroundColor:'white', paddingHorizontal: '5%'}}>
|
||||
<FlatList
|
||||
data={[
|
||||
{name:'Announcements',key:"announce", img:Images.announcements},
|
||||
{name:"Resources",key:"resources", img:Images.resources},
|
||||
{name:"SOTW",key:"studentweek", img:Images.student},
|
||||
{name:"Lunch",key:"lunchevent", img:Images.lunch},
|
||||
{name:"SSL",key:"sslopps", img:Images.sslopps},
|
||||
{name:"COTW",key:"challengeweek", img:Images.challenge},
|
||||
{name:"Student of the Week",key:"studentweek", img:Images.student},
|
||||
{name:"Lunch Events",key:"lunchevent", img:Images.lunch},
|
||||
{name:"SSL Opportunities",key:"sslopps", img:Images.sslopps},
|
||||
{name:"Challenge of the Week",key:"challengeweek", img:Images.challenge},
|
||||
{name:"Polls", key:"polls", img: Images.polls},
|
||||
{name:"Settings", key:"settings", img: Images.settings},
|
||||
]}
|
||||
renderItem={({item})=>
|
||||
|
||||
<TouchableOpacity style={styles.moreitem} onPress={()=>this.props.navigation.navigate(item.key)}>
|
||||
<Image source = {item.img} style = {{height: 40, width: 40, marginRight: 10, tintColor: '#e3e3e3'}}/>
|
||||
<Text style={styles.moretext}>{item.name}</Text>
|
||||
<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>
|
||||
<Image source = {require('./assets/forward.png')} style={{tintColor: '#b2b2b2'}}/>
|
||||
</View>
|
||||
|
||||
</TouchableOpacity>
|
||||
}
|
||||
/>
|
||||
|
|
@ -123,7 +128,7 @@ class More extends React.Component {
|
|||
name="lunchevent"
|
||||
component={LunchEvents}
|
||||
options={{
|
||||
title:"Lunch",
|
||||
title:"Lunch Events",
|
||||
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
|
||||
headerLeft:null,
|
||||
headerBackground: ()=>background
|
||||
|
|
@ -133,7 +138,7 @@ class More extends React.Component {
|
|||
name="sslopps"
|
||||
component={SSLOps}
|
||||
options={{
|
||||
title:"SSL Ops",
|
||||
title:"SSL Opportunities",
|
||||
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
|
||||
headerLeft:null,
|
||||
headerBackground: ()=>background
|
||||
|
|
@ -166,7 +171,8 @@ class More extends React.Component {
|
|||
title:"Settings",
|
||||
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
|
||||
headerLeft:null,
|
||||
headerBackground: ()=>background
|
||||
headerBackground: ()=>background,
|
||||
headerShown:false
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import {
|
|||
} from 'react-native/Libraries/NewAppScreen';
|
||||
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) {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import {
|
|||
FlatList,
|
||||
TouchableOpacity,
|
||||
Image,
|
||||
Dimensions
|
||||
} from 'react-native';
|
||||
|
||||
import {
|
||||
|
|
@ -22,6 +23,7 @@ import { NavigationContainer } from '@react-navigation/native'
|
|||
import { createStackNavigator } from '@react-navigation/stack'
|
||||
import styles from './styles/liststyles';
|
||||
import { url } from './resources/fetchInfo.json';
|
||||
import LinearGradient from 'react-native-linear-gradient';
|
||||
//import I18n from './i18n';
|
||||
|
||||
const Stack = createStackNavigator();
|
||||
|
|
@ -61,13 +63,18 @@ export const SSLInfo = ({route}) => {
|
|||
|
||||
function SSLElement (props) {
|
||||
const item = props.item;
|
||||
const [expand, setExpand] = useState(false);
|
||||
return(
|
||||
<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}>
|
||||
<View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
|
||||
<Image source = {require('./assets/sslopps.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
|
||||
<Text style={styles.title3}>{item.item.title}</Text>
|
||||
<TouchableOpacity style={styles.listItem} onPress={()=>setExpand(!expand)}>
|
||||
<View style = {styles.container2}>
|
||||
<Image source = {require('./assets/sslopps.png')} style = {styles.sideImage}/>
|
||||
<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>
|
||||
{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>
|
||||
</View>
|
||||
)
|
||||
|
|
@ -100,13 +107,14 @@ class SSLOps extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<ScrollView style={styles.moreDefault}>
|
||||
<FlatList
|
||||
data={this.state.data}
|
||||
renderItem={item=><SSLElement item={item} name={item.title} navigation={this.props.navigation}/>}
|
||||
keyExtractor={item=>JSON.stringify(item)}
|
||||
/>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,8 @@ import {
|
|||
//import I18n from './i18n';
|
||||
import { url } from './resources/fetchInfo.json'
|
||||
|
||||
import LinearGradient from 'react-native-linear-gradient';
|
||||
|
||||
class StudentWeek extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
|
@ -82,7 +84,7 @@ class StudentWeek extends React.Component {
|
|||
<Image source = {require('./assets/hobbies.png')} />
|
||||
<View style = {{display: 'flex', flexDirection: 'row', width: '85%', justifyContent: 'space-between', paddingHorizontal:'2%',}}>
|
||||
<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>
|
||||
{this.state.hobbyExpanded?hobbyText:<></>}
|
||||
|
|
@ -92,7 +94,7 @@ class StudentWeek extends React.Component {
|
|||
<Image source = {require('./assets/achievements.png')} />
|
||||
<View style = {{display: 'flex', flexDirection: 'row', width: '85%', justifyContent: 'space-between', paddingHorizontal:'2%',}}>
|
||||
<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>
|
||||
{this.state.achievementExpanded?achievementText:<></>}
|
||||
|
|
@ -102,7 +104,7 @@ class StudentWeek extends React.Component {
|
|||
<Image source = {require('./assets/message.png')} />
|
||||
<View style = {{display: 'flex', flexDirection: 'row', width: '85%', justifyContent: 'space-between', paddingHorizontal:'2%',}}>
|
||||
<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>
|
||||
{this.state.messageExpanded?messageText:<></>}
|
||||
|
|
|
|||
BIN
app/assets/forward.png
Normal file
BIN
app/assets/forward.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 167 B |
|
|
@ -1,4 +1,4 @@
|
|||
import {StyleSheet, StatusBar} from 'react-native';
|
||||
import {StyleSheet, StatusBar, Dimensions} from 'react-native';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
|
|
@ -11,6 +11,43 @@ const styles = StyleSheet.create({
|
|||
borderBottomWidth: 1.5,
|
||||
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: {
|
||||
backgroundColor: 'white',
|
||||
padding: 15,
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@ console.log(Dimensions.get('window'))
|
|||
|
||||
const styles=StyleSheet.create({
|
||||
moreitem: {
|
||||
backgroundColor:'red',
|
||||
borderBottomColor:'white',
|
||||
borderBottomWidth:0.5,
|
||||
backgroundColor:'white',
|
||||
borderBottomColor:'#D5D5D5',
|
||||
borderBottomWidth:.5,
|
||||
height: Dimensions.get('window').height*0.075,
|
||||
paddingLeft: '3%',
|
||||
fontSize: 32,
|
||||
|
|
@ -16,8 +16,7 @@ const styles=StyleSheet.create({
|
|||
alignItems: 'center',
|
||||
},
|
||||
moretext: {
|
||||
color:'#e3e3e3',
|
||||
fontSize:22,
|
||||
fontSize:20,
|
||||
},
|
||||
headerTitle: {
|
||||
fontWeight: 'bold',
|
||||
|
|
@ -27,24 +26,6 @@ const styles=StyleSheet.create({
|
|||
alignItems: 'center',
|
||||
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: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user