From 41d064a01729b1d902bddac1cad6d572d9af39ea Mon Sep 17 00:00:00 2001 From: Nikolai R Kristiansen Date: Thu, 27 Jul 2017 19:42:22 +0200 Subject: [PATCH] EventDetail: style tweaks --- src/modules/events/EventDetails.js | 70 ++++++++++++++---------- src/modules/events/EventList.js | 3 +- src/modules/events/EventListContainer.js | 4 +- src/modules/membership/Membership.js | 7 ++- src/screens/EventDetailsScreen.js | 6 +- 5 files changed, 52 insertions(+), 38 deletions(-) diff --git a/src/modules/events/EventDetails.js b/src/modules/events/EventDetails.js index a7122c1..c5bc6da 100644 --- a/src/modules/events/EventDetails.js +++ b/src/modules/events/EventDetails.js @@ -1,27 +1,26 @@ import React, { Component } from 'react'; -import {Linking, StyleSheet, ScrollView, Text, Platform, View, Image, TouchableHighlight, Button} from "react-native"; +import {Linking, StyleSheet, ScrollView, Text, Platform, View, Image, TouchableHighlight} from "react-native"; import HTMLView from 'react-native-htmlview'; import moment from "moment"; +import {Button, Icon, Text as NBText} from "native-base"; + +moment.locale('nb'); export default class EventDetails extends Component { _formatTime(time) { - moment.locale('nb'); return moment(time).format('HH:mm'); } _formatMonth(time) { - moment.locale('nb'); return moment(time).format('MMM'); } _formatDay(time) { - moment.locale('nb'); - return moment(time).format('DD'); + return moment(time).format('DD.'); } _formatYear(time) { - moment.locale('nb'); return moment(time).format('YYYY'); } @@ -41,36 +40,44 @@ export default class EventDetails extends Component { } let faceButton = null; if (item.facebook_url) { - faceButton = this._onUrlPress(item.facebook_url)}> - + faceButton = this._onUrlPress(item.facebook_url)}> + + + På Facebook + ; } let ticket = null; if (item.ticket_url) { ticket = - ; } + + let year = null; + if(moment().year() !== moment(item.start_time).year()) { + year = {this._formatYear(item.start_time)} + } + return ( {image} {item.title.decoded} - - + + {this._formatDay(item.start_time)} {this._formatMonth(item.start_time)} - {this._formatYear(item.start_time)} + {year} - {item.venue} - kl. {this._formatTime(item.start_time)} + {item.venue} + kl. {this._formatTime(item.start_time)} {price} - {faceButton} + + {faceButton} + {ticket} @@ -117,7 +124,7 @@ const styles = StyleSheet.create({ content: { paddingTop: 20, }, - date: { + dateContainer: { borderColor: '#e1e8ee', borderWidth: 1, ...Platform.select({ @@ -131,8 +138,7 @@ const styles = StyleSheet.create({ elevation: 2, }, }), - marginTop: 10, - backgroundColor: '#eee', + backgroundColor: '#fff', }, day: { paddingTop: 5, @@ -142,7 +148,7 @@ const styles = StyleSheet.create({ }, month: { textAlign: 'center', - paddingBottom: 5, + paddingHorizontal: 16, }, year: { fontSize: 10, @@ -156,20 +162,26 @@ const styles = StyleSheet.create({ }, infoContainer: { flex: 3, - marginLeft: 20, - marginTop: 20, + paddingLeft: 16, }, - faceButton: { - marginTop: 10, + buttonContainer: { flex: 1, + justifyContent: 'center', + }, + faceText: { + textAlign: 'center', + fontSize: 10, }, faceIcon: { - height: 70, - width: 70, - alignSelf: 'flex-end', + fontSize: 20, + color: '#999', + alignSelf: 'center', }, ticketButton: { paddingTop: 20, + }, + icons: { + fontSize: 14, } }); diff --git a/src/modules/events/EventList.js b/src/modules/events/EventList.js index c093729..734f7e8 100644 --- a/src/modules/events/EventList.js +++ b/src/modules/events/EventList.js @@ -4,6 +4,8 @@ import React, { Component } from 'react'; import moment from "moment"; import 'moment/locale/nb'; +moment.locale('nb'); + export default class EventList extends Component { _renderItem = ({item}) => ( { this._onPressItem(item); }} style={styles.listItem}> @@ -41,7 +43,6 @@ export default class EventList extends Component { _formatTime(time) { - moment.locale('nb'); return moment(time).format('llll'); } diff --git a/src/modules/events/EventListContainer.js b/src/modules/events/EventListContainer.js index f39209a..683dc32 100644 --- a/src/modules/events/EventListContainer.js +++ b/src/modules/events/EventListContainer.js @@ -5,8 +5,9 @@ import React from 'react'; import moment from "moment"; import 'moment/locale/nb'; -/* Ref: https://medium.com/react-native-development/how-to-use-the-flatlist-component-react-native-basics-92c482816fe6 */ +moment.locale('nb'); +/* Ref: https://medium.com/react-native-development/how-to-use-the-flatlist-component-react-native-basics-92c482816fe6 */ class EventListContainer extends React.Component { constructor(props) { super(props); @@ -23,7 +24,6 @@ class EventListContainer extends React.Component { } _formatDate(time) { - moment.locale('nb'); return moment(time).format('ll'); } diff --git a/src/modules/membership/Membership.js b/src/modules/membership/Membership.js index 366fd8e..3bb76a4 100644 --- a/src/modules/membership/Membership.js +++ b/src/modules/membership/Membership.js @@ -1,5 +1,6 @@ import React, {Component} from 'react'; -import {ScrollView, Text, View, Linking, StyleSheet, Platform, Button} from "react-native"; +import {ScrollView, Text, View, Linking, StyleSheet, Platform} from "react-native"; +import {Button, Text as NBText} from "native-base"; export default class Membership extends Component { render() { @@ -10,7 +11,7 @@ export default class Membership extends Component { Vi setter pris på felleskapet som er med på å bygge Chateau Neuf. DNS er en organisasjon av og for medlemmene. Derfor sørger vi for at det blir litt lettere å være student ved å ta en del av kaka for medlemmene våre. Med medlemskap får billigere inngang og servering på alt som skjer på Chateau Neuf. - Vi gir medlemmer:{"\n"} @@ -25,7 +26,7 @@ export default class Membership extends Component { } onPurchasePress() { - Linking.openURL('https://dusken.neuf.no'); + Linking.openURL('https://medlem.neuf.no'); } } diff --git a/src/screens/EventDetailsScreen.js b/src/screens/EventDetailsScreen.js index dd93667..7240fb7 100644 --- a/src/screens/EventDetailsScreen.js +++ b/src/screens/EventDetailsScreen.js @@ -2,9 +2,9 @@ import React, { Component } from 'react'; import EventDetails from "../modules/events/EventDetails"; export default class EventDetailsScreen extends Component { - static navigationOptions = { - title: 'Detaljer', - }; + static navigationOptions = ({navigation}) => ({ + title: navigation.state.params.item.title.decoded, + }); render() { const { params } = this.props.navigation.state;