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