mirror of
https://github.com/Blair-SGA-Dev-Team/blazerapp.git
synced 2024-11-08 14:51:17 -05:00
Club page fit design team format+style
This commit is contained in:
parent
5f18866ae3
commit
6f75ac5260
64
app/Clubs.js
64
app/Clubs.js
|
@ -8,7 +8,9 @@ import {
|
||||||
StatusBar,
|
StatusBar,
|
||||||
ActivityIndicator,
|
ActivityIndicator,
|
||||||
FlatList,
|
FlatList,
|
||||||
TouchableOpacity
|
TouchableOpacity,
|
||||||
|
Image,
|
||||||
|
TouchableHighlight
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
@ -18,25 +20,61 @@ import {
|
||||||
DebugInstructions,
|
DebugInstructions,
|
||||||
ReloadInstructions,
|
ReloadInstructions,
|
||||||
} from 'react-native/Libraries/NewAppScreen';
|
} from 'react-native/Libraries/NewAppScreen';
|
||||||
|
import { NavigationContainer } from '@react-navigation/native'
|
||||||
|
import { createStackNavigator } from '@react-navigation/stack'
|
||||||
import { SearchBar } from 'react-native-elements';
|
import { SearchBar } from 'react-native-elements';
|
||||||
import styles from './styles/liststyles'
|
import styles from './styles/liststyles'
|
||||||
import { url } from './resources/fetchInfo.json'
|
import { url } from './resources/fetchInfo.json'
|
||||||
|
|
||||||
const ClubElement = ({item}) => {
|
const Stack = createStackNavigator();
|
||||||
const [visible, setVisible] = useState(0)
|
|
||||||
const extra = visible?(<Text>{'\n'}Location: {item.item.loc} {"\n\n"}Sponsor: {item.item.sponsor}</Text>):(<></>);
|
export const ClubInfo = ({route}) => {
|
||||||
|
const item = route.params;
|
||||||
|
return (
|
||||||
|
<View style = {{padding: 10}}>
|
||||||
|
<Text style = {{fontSize: 28}}>Meeting Time and Day: {'\n'}{item.meeting}{"\n\n"}Zoom Link: {'\n'}{item.link}{"\n\n"}Sponsor: {'\n'}{item.sponsor}</Text>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
function ClubElement (props) {
|
||||||
|
const item = props.item;
|
||||||
return(
|
return(
|
||||||
<View>
|
<View>
|
||||||
<TouchableOpacity style={styles.item} onPress={()=>setVisible(!visible)} 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}>
|
||||||
<Text style={styles.title}>{item.item.name}</Text>
|
<View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
|
||||||
{extra}
|
<Image source = {require('./assets/clubs.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
|
||||||
</TouchableOpacity>
|
<Text style={styles.title}>{props.item.name}</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
class Clubs extends React.Component {
|
|
||||||
|
|
||||||
|
function Club () {
|
||||||
|
return (
|
||||||
|
<NavigationContainer independent={true}>
|
||||||
|
<Stack.Navigator>
|
||||||
|
<Stack.Screen
|
||||||
|
name = "Clubs"
|
||||||
|
component = {Clubs}
|
||||||
|
options={({
|
||||||
|
headerShown: false
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
<Stack.Screen
|
||||||
|
name = "ClubInfo"
|
||||||
|
component = {ClubInfo}
|
||||||
|
options={({route})=>({
|
||||||
|
title:route.params.name
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</Stack.Navigator>
|
||||||
|
</NavigationContainer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
class Clubs extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
|
@ -91,12 +129,14 @@ class Clubs extends React.Component {
|
||||||
value={this.state.search}/>
|
value={this.state.search}/>
|
||||||
<FlatList
|
<FlatList
|
||||||
data={dataSearch}
|
data={dataSearch}
|
||||||
renderItem={item => <ClubElement item={item}/>}
|
renderItem={({item}) => <ClubElement item={item} name={item.name} navigation={this.props.navigation}/>}
|
||||||
keyExtractor={item => JSON.stringify(item)}
|
keyExtractor={item => JSON.stringify(item)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
</SafeAreaView>
|
</SafeAreaView>
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Clubs;
|
export default Club;
|
12
app/Staff.js
12
app/Staff.js
|
@ -8,7 +8,8 @@ import {
|
||||||
StatusBar,
|
StatusBar,
|
||||||
ActivityIndicator,
|
ActivityIndicator,
|
||||||
FlatList,
|
FlatList,
|
||||||
TouchableOpacity
|
TouchableOpacity,
|
||||||
|
Image
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
@ -24,11 +25,14 @@ import { url } from './resources/fetchInfo.json'
|
||||||
|
|
||||||
const StaffElement = ({item}) => {
|
const StaffElement = ({item}) => {
|
||||||
const [visible, setVisible] = useState(0)
|
const [visible, setVisible] = useState(0)
|
||||||
const extra = [...item.item.emails.map(email=>(<Text key={email}>Email: {email}</Text>))]
|
const extra = [...item.item.emails.map(email=>(<Text key={email}>{'\n'}Email: {email}</Text>))]
|
||||||
return(
|
return(
|
||||||
<View>
|
<View>
|
||||||
<TouchableOpacity style={styles.item} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
|
<TouchableOpacity style={styles.item1} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
|
||||||
<Text style={styles.title}>{item.item.name}</Text>
|
<View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
|
||||||
|
<Image source = {require('./assets/clubs.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
|
||||||
|
<Text style={styles.title}>{item.item.name}</Text>
|
||||||
|
</View>
|
||||||
{visible?extra:<></>}
|
{visible?extra:<></>}
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
|
|
BIN
app/assets/clubs.png
Normal file
BIN
app/assets/clubs.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 7.1 KiB |
BIN
app/assets/staff.png
Normal file
BIN
app/assets/staff.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.0 KiB |
|
@ -13,6 +13,13 @@ const styles = StyleSheet.create({
|
||||||
borderColor: 'black',
|
borderColor: 'black',
|
||||||
borderRadius: 12,
|
borderRadius: 12,
|
||||||
},
|
},
|
||||||
|
item1: {
|
||||||
|
backgroundColor: 'white',
|
||||||
|
padding: 15,
|
||||||
|
borderBottomWidth: 2,
|
||||||
|
borderColor: '#bababa',
|
||||||
|
width: '100%',
|
||||||
|
},
|
||||||
title: {
|
title: {
|
||||||
fontSize: 28,
|
fontSize: 28,
|
||||||
},
|
},
|
||||||
|
|
|
@ -9,6 +9,7 @@ const styles=StyleSheet.create({
|
||||||
height: Dimensions.get('window').height*0.075,
|
height: Dimensions.get('window').height*0.075,
|
||||||
justifyContent:'center',
|
justifyContent:'center',
|
||||||
paddingLeft: '3%',
|
paddingLeft: '3%',
|
||||||
|
fontSize: 32,
|
||||||
},
|
},
|
||||||
moretext: {
|
moretext: {
|
||||||
color:'#eee',
|
color:'#eee',
|
||||||
|
|
Loading…
Reference in New Issue
Block a user