Verified Commit d60b865b authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg
Browse files

Fix MemberList styling on iOS

parent a1631773
......@@ -11,6 +11,7 @@ import SearchBar from './SearchHeader';
import * as memberActions from '../actions/members';
import styles, { memberSize } from './style/memberList';
import DismissKeyboardView from './DismissKeyboardView';
class MemberList extends Component {
......@@ -45,57 +46,44 @@ class MemberList extends Component {
/>
);
let content = (<FlatList
style={styles.flatList}
contentContainerStyle={styles.container}
onRefresh={this.handleRefresh}
refreshing={this.props.loading}
onEndReachedThreshold={0.5}
onEndReached={this.handleEndReached}
data={this.props.memberList}
renderItem={item => (
<MemberView
key={item.item.pk}
member={{
pk: item.item.pk,
photo: item.item.avatar.medium,
name: item.item.display_name,
}}
style={styles.memberView}
size={memberSize}
/>
)}
keyExtractor={item => item.pk}
numColumns={3}
/>);
if (this.props.status === 'initial') {
return (
<View style={styles.wrapper}>
{header}
<LoadingScreen />
</View>
);
content = (<LoadingScreen />);
} else if (this.props.status === 'failure') {
return (
<View style={styles.wrapper}>
{header}
<ErrorScreen message={this.props.t('Sorry! We couldn\'t load any data.')} />
</View>
);
content = (<ErrorScreen message={this.props.t('Sorry! We couldn\'t load any data.')} />);
} else if (this.props.memberList.length === 0) {
return (
<View style={styles.wrapper}>
{header}
<ErrorScreen message={this.props.t('Couldn\'t find any members...')} />
</View>
);
content = (<ErrorScreen message={this.props.t('Couldn\'t find any members...')} />);
}
return (
<View style={styles.wrapper}>
{header}
<View>
<FlatList
style={styles.flatList}
contentContainerStyle={styles.container}
onRefresh={this.handleRefresh}
refreshing={this.props.loading}
onEndReachedThreshold={0.5}
onEndReached={this.handleEndReached}
data={this.props.memberList}
renderItem={item => (
<MemberView
key={item.item.pk}
member={{
pk: item.item.pk,
photo: item.item.avatar.medium,
name: item.item.display_name,
}}
style={styles.memberView}
size={memberSize}
/>
)}
keyExtractor={item => item.pk}
numColumns={3}
/>
</View>
<DismissKeyboardView contentStyle={styles.keyboardView}>
{content}
</DismissKeyboardView>
</View>
);
}
......
......@@ -131,7 +131,7 @@ class SearchBar extends Component {
backgroundColor={colors.semiTransparent}
translucent
animated
barStyle="light-content"
barStyle={this.state.isSearching ? 'dark-content' : 'light-content'}
/>
<View style={styles.appBar}>
{this.state.isAnimating && <Animated.View
......
......@@ -33,12 +33,21 @@ const styles = StyleSheet.create({
},
button: {
color: colors.magenta,
fontFamily: 'sans-serif-medium',
android: {
fontFamily: 'sans-serif-medium',
},
ios: {
fontFamily: 'System',
fontWeight: '600',
},
fontSize: 18,
},
disabled: {
color: colors.darkGrey,
},
keyboardView: {
flex: 1,
},
});
export default styles;
......@@ -18,17 +18,37 @@ const styles = StyleSheet.create({
},
title: {
color: colors.white,
fontSize: 20,
fontFamily: 'sans-serif-medium',
flex: 1,
android: {
fontSize: 20,
fontFamily: 'sans-serif-medium',
},
ios: {
fontSize: 18,
fontFamily: 'System',
fontWeight: '600',
textAlign: 'center',
},
},
leftIcon: {
paddingLeft: 20,
paddingRight: 32,
android: {
paddingLeft: 20,
paddingRight: 32,
},
ios: {
paddingLeft: 10,
paddingRight: 16,
},
},
rightIcon: {
paddingLeft: 32,
paddingRight: 20,
android: {
paddingLeft: 32,
paddingRight: 20,
},
ios: {
paddingLeft: 16,
paddingRight: 10,
},
},
white: {
color: colors.white,
......@@ -41,9 +61,14 @@ const styles = StyleSheet.create({
},
input: {
color: colors.textColour,
fontSize: 20,
flex: 1,
paddingLeft: 0,
android: {
fontSize: 20,
},
ios: {
fontSize: 18,
},
},
animationView: {
backgroundColor: colors.white,
......
......@@ -44,6 +44,7 @@ const styles = StyleSheet.create({
fontSize: 18,
fontFamily: 'System',
fontWeight: '600',
textAlign: 'center',
},
},
icon: {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment