edb/cnapp
9
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

About: Add buttons and other improvements

Browse Source
This commit is contained in:
Nikolai Kristiansen committed 2017-08-18 16:14:04 +02:00
1 parent e3f86dc56f
commit 431cb763ae
5 files changed
+146 -13
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/modules/about/About.js
+85 -2
View File
@@ -1,16 +1,63 @@
import React, { Component } from 'react';
import {Text, ScrollView, View, Platform, StyleSheet, Image} from "react-native";
import {Text, ScrollView, View, Platform, StyleSheet, Image, Linking, TouchableOpacity} from "react-native";
// import HTMLView from 'react-native-htmlview';
import {Button, Text as NBText, Icon} from 'native-base';
const CHATEAU_NEUF_ADDRESS = 'Det Norske Studentersamfund, Slemdalsveien 15, 0369 Oslo';
export default class About extends Component {
/* FIXME: Values here are pretty hardcoded. Should fetch config from a JSON-file or API */
render() {
return (
<ScrollView>
<View style={styles.card}>
<Text style={styles.header}>Det Norske Studentersamfund</Text>
<Image source={{uri: 'https://galtinn.neuf.no/static/dist/images/logo.png'}} style={styles.logo} resizeMode="contain" />
<Text style={styles.header}>Følg oss på</Text>
<View style={[styles.section, {flex: 1, flexDirection: 'row'}]}>
<TouchableOpacity style={styles.someBtn} onPress={() => Linking.openURL('https://www.facebook.com/studentersamfundet/')}>
<Icon name="logo-facebook" style={styles.largeIcon} /><NBText>Facebook</NBText>
</TouchableOpacity>
<TouchableOpacity style={styles.someBtn} onPress={() => Linking.openURL('https://www.instagram.com/studentersamfundet/')}>
<Icon name="logo-instagram" style={styles.largeIcon} /><NBText>Instagram</NBText>
</TouchableOpacity>
</View>
<Text style={styles.header}>Adresse</Text>
<Text style={[styles.paragraph, {textAlign: 'center'}]}>Det Norske Studentersamfund{"\n"}Slemdalsveien 15, 0369 Oslo</Text>
<View style={styles.section}>
<Button iconLeft onPress={() => Linking.openURL(`https://www.google.com/maps/search/?api=1&query=${CHATEAU_NEUF_ADDRESS}`)}>
<Icon name="map" style={styles.icon} /><NBText> Vis i kart</NBText>
</Button>
</View>
<Text style={styles.header}>Åpningstider</Text>
<View style={styles.section}>
<Button iconLeft onPress={() => Linking.openURL('https://studentersamfundet.no/aapningstider/')}>
<Icon name="time" style={styles.icon} /><NBText>Vis Åpningstider</NBText>
</Button>
</View>
<Text style={styles.header}>Ta kontakt</Text>
<View style={[styles.section, {flex: 1, flexDirection: 'row'}]}>
<View>
<Button iconLeft onPress={() => Linking.openURL('tel:+4794430002')} style={{marginHorizontal: 10}}>
<Icon name="call" style={styles.icon} /><NBText>Ring</NBText>
</Button>
</View>
<View>
<Button iconLeft onPress={() => Linking.openURL('mailto:ledelsen@studentersamfundet.no')} style={{marginHorizontal: 10}}>
<Icon name="mail" style={styles.icon} /><NBText>Send e-post</NBText>
</Button>
</View>
</View>
<Text style={styles.header}>Chateau Neuf</Text>
<Image source={{uri: 'https://studentersamfundet.no/wp-content/uploads/2015/04/26_KUL_Chateauneuf-1280x720.jpg'}} style={styles.featuredImage} resizeMode="contain" />
<Text style={styles.paragraph}>Studentene i Oslo har sitt naturlige tilholdssted på Det Norske Studentersamfund, i hyggelige lokaler på Chateau Neuf øverst på Majorstuen. Her er det åpent alle dager unntatt søndag, og hver dag skjer det en rekke ting i våre mange arrangementslokaler. Enten man ønsker en tur i baren, på kafé, på debatt, på konsert, teater eller kino, har man muligheten på Chateau Neuf.</Text>
<Text style={styles.paragraph}>Chateau Neuf er et frivillig drevet studenthus. Studenter over alt i Oslo kan komme hit og få nyttig og spennende erfaring med å drive et av Oslos største kulturhus. Her kan du stå i bar, sette lys og lyd, jobbe med markedsføring, produsere konserter, bli kjent med hundrevis av bra mennesker og få minner for livet.</Text>
<Text style={styles.paragraph}>Alle studentforeninger i Oslo kan arrangere gratis på Chateau Neuf. Skal du arrangere en fest, sette en konsert, holde et foredrag eller gjennomføre et møte, har vi lokaler som kan brukes til dette.</Text>
{/*<HTMLView style={styles.content} stylesheet={HTMLStyles} value={this.props.openingHours}/>*/}
</View>
</ScrollView>
)
@@ -23,6 +70,7 @@ const styles = StyleSheet.create({
fontSize: 20,
fontWeight: 'bold',
color: '#000',
textAlign: 'center',
},
paragraph: {
fontSize: 16,
@@ -50,5 +98,40 @@ const styles = StyleSheet.create({
},
featuredImage: {
height: 230,
width: null,
},
logo: {
height: 128,
width: null,
marginBottom: 10,
},
icon: {
fontSize: 16,
},
largeIcon: {
fontSize: 40,
},
section: {
marginTop: 8,
marginBottom: 20,
alignSelf: 'center',
},
someBtn: {
flex: 1,
alignItems: 'center',
}
});
});
// const HTMLStyles = StyleSheet.create({
// p: {
// fontSize: 16,
// marginBottom: -30,
// color: '#000',
// },
// ul: {
// fontSize: 16,
// color: '#000',
// marginTop: -20,
// marginBottom: -30,
// },
// });
src/modules/about/AboutContainer.js
+41 -1
View File
@@ -1,5 +1,45 @@
import {connect} from "react-redux";
import React, {Component} from 'react';
import Config from 'react-native-config';
import About from "./About";
export default connect()(About);
class AboutContainer extends Component {
// constructor(props) {
// super(props);
// this.state = {
// openingHours: '',
// loading: false,
// error: null,
// };
// }
//
// componentDidMount() {
// this.fetchOpeningHours();
// }
//
// fetchOpeningHours() {
// const url = `${Config.EVENT_API_URL}/wp-json/wp/v2/pages/?slug=aapningstider`;
// this.setState({ loading: true });
//
// fetch(url)
// .then(res => res.json())
// .then(res => {
// this.setState({
// openingHours: res ? res[0].content.rendered : '',
// error: res.error || null,
// loading: false,
// });
//
// })
// .catch(error => {
// this.setState({ error, loading: false });
// });
// }
render() {
return <About {...this.state} />;
}
}
export default connect()(AboutContainer);
src/modules/events/EventDetail.js
+12 -4
View File
@@ -33,6 +33,12 @@ export default class EventDetail extends Component {
_formatRelative(time) {
return moment(time).fromNow();
}
_formatLocation() {
if(this.props.item.venue !== 'Annetsteds') {
return CHATEAU_NEUF_ADDRESS;
}
return 'Ukjent adresse'
}
_formatTicketText() {
/* FIXME: This should be handled by API */
@@ -70,8 +76,10 @@ export default class EventDetail extends Component {
onUrlPress(link) {
Linking.openURL(link);
}
onLocationPress() {
Linking.openURL(`https://www.google.com/maps/dir/?api=1&destination=${CHATEAU_NEUF_ADDRESS}`);
onLocationPress(venue) {
if( venue !== 'Annetsteds' ) {
Linking.openURL(`https://www.google.com/maps/dir/?api=1&destination=${CHATEAU_NEUF_ADDRESS}`);
}
}
showPriceAndTicket() {
@@ -162,11 +170,11 @@ export default class EventDetail extends Component {
</View>
</TouchableOpacity>
{/* Location and maps */}
<TouchableOpacity style={styles.metaInner} onPress={this.onLocationPress}>
<TouchableOpacity style={styles.metaInner} onPress={() => this.onLocationPress(item.venue)}>
<View style={[styles.metaIcon, {paddingLeft: 1}]}><Icon name="pin" style={styles.icons} /></View>
<View style={{flexDirection: 'column'}}>
<Text style={styles.metaText}>{item.venue}</Text>
<Text style={styles.metaSubtitle} numberOfLines={1}>{CHATEAU_NEUF_ADDRESS}</Text>
<Text style={styles.metaSubtitle} numberOfLines={1}>{this._formatLocation()}</Text>
</View>
</TouchableOpacity>
{this.showPriceAndTicket()}
src/modules/events/EventListContainer.js
+4 -3
View File
@@ -1,15 +1,16 @@
import {connect} from "react-redux";
import EventList from "./EventList";
import React from 'react';
import React, {Component} from 'react';
import Config from 'react-native-config';
import moment from "moment";
import 'moment/locale/nb';
import EventList from "./EventList";
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 {
class EventListContainer extends Component {
constructor(props) {
super(props);
src/screens/AboutScreen.js
+4 -3
View File
@@ -1,9 +1,10 @@
import React, { Component } from 'react';
import AboutContainer from "../modules/about/AboutContainer";
import Icon from 'react-native-vector-icons/SimpleLineIcons';
import getTheme from '../../native-base-theme/components';
import {StyleProvider} from "native-base";
import AboutContainer from "../modules/about/AboutContainer";
import getTheme from '../../native-base-theme/components';
export default class AboutScreen extends Component {
static navigationOptions = {
title: 'Om oss',
@@ -22,7 +23,7 @@ export default class AboutScreen extends Component {
render() {
return (
<StyleProvider style={getTheme()}>
<AboutContainer/>
<AboutContainer />
</StyleProvider>);
}
}