Commit c01af459 authored by Gijs Hendriksen's avatar Gijs Hendriksen
Browse files

Fix issue where registration indicator overlaps with text in Welcome screen cards

parent 381c7b30
...@@ -13,20 +13,20 @@ import { retrievePizzaInfo } from '../../../actions/pizza'; ...@@ -13,20 +13,20 @@ import { retrievePizzaInfo } from '../../../actions/pizza';
import styles from './style/EventDetailCard'; import styles from './style/EventDetailCard';
import Colors from '../../style/Colors'; import Colors from '../../style/Colors';
const getInfo = (event) => { const getInfo = (event, hasRegistrationIndicator) => {
const start = Moment(event.start); const start = Moment(event.start);
const end = Moment(event.end); const end = Moment(event.end);
if (start.isSame(end, 'day')) { if (start.isSame(end, 'day')) {
return ( return (
<Text style={styles.eventInfo}> <Text style={[styles.eventInfo, hasRegistrationIndicator && styles.indicatorMargin]}>
{`${start.format('HH:mm')} - ${end.format('HH:mm')} | ${event.location}`} {`${start.format('HH:mm')} - ${end.format('HH:mm')} | ${event.location}`}
</Text> </Text>
); );
} }
return ( return (
<View> <View>
<Text style={styles.eventInfo}> <Text style={[styles.eventInfo, hasRegistrationIndicator && styles.indicatorMargin]}>
{`${start.format('D MMMM HH:mm')} - ${end.format('D MMMM HH:mm')}`} {`${start.format('D MMMM HH:mm')} - ${end.format('D MMMM HH:mm')}`}
</Text> </Text>
<Text style={styles.eventInfo}> <Text style={styles.eventInfo}>
...@@ -36,49 +36,52 @@ const getInfo = (event) => { ...@@ -36,49 +36,52 @@ const getInfo = (event) => {
); );
}; };
const EventDetailCard = props => ( const EventDetailCard = (props) => {
<TouchableHighlight const hasRegistrationIndicator = props.event.registered !== null;
onPress={() => props.loadEvent(props.event.pk, props.token)}
style={styles.card} return (
underlayColor={Colors.pressedWhite} <TouchableHighlight
> onPress={() => props.loadEvent(props.event.pk, props.token)}
<View> style={styles.card}
<Text style={styles.eventTitle}> underlayColor={Colors.pressedWhite}
{props.event.title} >
</Text> <View>
{getInfo(props.event)} <Text style={[styles.eventTitle, hasRegistrationIndicator && styles.indicatorMargin]}>
<Text {props.event.title}
numberOfLines={2} </Text>
style={styles.description} {getInfo(props.event, hasRegistrationIndicator)}
> <Text
{props.event.description} numberOfLines={2}
</Text> style={styles.description}
<View style={styles.buttonList}> >
<Text style={[styles.moreInfo, styles.button]}> {props.event.description}
{props.t('MORE INFO')}
</Text> </Text>
{props.event.pizza ? ( <View style={styles.buttonList}>
<TouchableOpacity <Text style={[styles.moreInfo, styles.button]}>
onPress={() => props.retrievePizzaInfo(props.token)} {props.t('MORE INFO')}
style={styles.button} </Text>
> {props.event.pizza ? (
<Text style={styles.orderPizza}> <TouchableOpacity
{props.t('PIZZA')} onPress={() => props.retrievePizzaInfo(props.token)}
</Text> style={styles.button}
</TouchableOpacity> >
) : null} <Text style={styles.orderPizza}>
{props.t('PIZZA')}
</Text>
</TouchableOpacity>
) : null}
</View>
{hasRegistrationIndicator && (
<View
style={[
styles.indicator,
props.event.registered ? styles.registered : styles.unregistered]}
/>
)}
</View> </View>
{props.event.registered === null ? null : ( </TouchableHighlight>
<View );
style={[ };
styles.indicator,
props.event.registered ? styles.registered : styles.unregistered]}
/>
)
}
</View>
</TouchableHighlight>
);
EventDetailCard.propTypes = { EventDetailCard.propTypes = {
event: PropTypes.shape({ event: PropTypes.shape({
......
...@@ -99,6 +99,9 @@ const styles = StyleSheet.create({ ...@@ -99,6 +99,9 @@ const styles = StyleSheet.create({
width: 16, width: 16,
borderRadius: 8, borderRadius: 8,
}, },
indicatorMargin: {
marginRight: 32,
},
registered: { registered: {
backgroundColor: Colors.magenta, backgroundColor: Colors.magenta,
}, },
......
Markdown is supported
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