From 3d83f3b37b820d7810169ec1df61affd856a3346 Mon Sep 17 00:00:00 2001 From: Paul Makles <paulmakles@gmail.com> Date: Thu, 29 Nov 2018 20:09:13 +0000 Subject: [PATCH] Update information and styles --- App.js | 83 +++++++++++++++++++++++++++++++--------------------------- 1 file changed, 45 insertions(+), 38 deletions(-) diff --git a/App.js b/App.js index 91f9e09..d42ce3c 100644 --- a/App.js +++ b/App.js @@ -16,16 +16,16 @@ const estyles = StyleSheet.create({ }, line: { fontWeight: '900', - fontSize: 32, + fontSize: 26, textAlign: 'left', }, destination: { paddingLeft: 5, - fontSize: 22, + fontSize: 18, }, arrival: { padding: 8, - fontSize: 18, + fontSize: 14, flex: 1, textAlign: 'right', }, @@ -34,7 +34,7 @@ const estyles = StyleSheet.create({ color: 'white', fontWeight: '200', textAlign: 'left', - fontSize: 32, + fontSize: 24, padding: 4, paddingLeft: 8 } @@ -119,7 +119,6 @@ const request = { .then(source => { let data = []; let process = (x, name) => { - console.log(x.stopType); if (['NaptanOnstreetBusCoachStopCluster', 'NaptanOnstreetBusCoachStopPair'].indexOf(x.stopType) > -1) { x.children.forEach(y => process(y)); } else if (x.stopType == 'NaptanPublicBusCoachTram') { @@ -170,30 +169,33 @@ class BusArrivals extends Component { <Text style={styles.status}>Updated {this.state.updated}.</Text> {Object.keys(this.state.data).map(i => { return (<BusArrival item={this.state.data[i]} key={this.state.data[i].key} />); - })} - <Button - onPress={() => { - AsyncStorage.getItem('myStops').then(x => { - let arr = JSON.parse(x); - let j = -1; - for (let i=0;i<arr.length;i++) { - if (arr[i].id == this.state.id) j = i; - } - if (j > -1) { - arr.splice(j, 1); - AsyncStorage.setItem('myStops', JSON.stringify(arr)).then(() => { - !this.isCancelled && this.setState({visible: false}); - ToastAndroid.show('Removed stop!', ToastAndroid.SHORT); - }); - } else { - ToastAndroid.show('Could not remove stop!', ToastAndroid.SHORT); - } - }).catch(() => { - ToastAndroid.show('Encountered an error!', ToastAndroid.SHORT); - }); - }} - title="Remove this stop" - /> + })} + <View style={styles.button}> + <Button + onPress={() => { + AsyncStorage.getItem('myStops').then(x => { + let arr = JSON.parse(x); + let j = -1; + for (let i=0;i<arr.length;i++) { + if (arr[i].id == this.state.id) j = i; + } + if (j > -1) { + arr.splice(j, 1); + AsyncStorage.setItem('myStops', JSON.stringify(arr)).then(() => { + !this.isCancelled && this.setState({visible: false}); + ToastAndroid.show('Removed stop!', ToastAndroid.SHORT); + }); + } else { + ToastAndroid.show('Could not remove stop!', ToastAndroid.SHORT); + } + }).catch(() => { + ToastAndroid.show('Encountered an error!', ToastAndroid.SHORT); + }); + }} + title="Remove this stop" + color='#d3390a' + /> + </View> </View> ); } @@ -252,10 +254,10 @@ class TabHome extends Component { render() { return ( <View style={{flex: 1, padding: 24}}> - <Text style={{fontSize: 34, textAlign: 'center'}}>Select a tab above to get started!</Text> - <Text style={{fontSize: 20, color: '#1a1a1a'}}>- My Stops gives you a quick glance at favourited stops</Text> - <Text style={{fontSize: 20, color: '#1a1a1a'}}>- Search allows you to find and view other stops</Text> - <Text style={{fontSize: 20, color: '#1a1a1a'}}>- About details more information about this app</Text> + <Text style={{fontSize: 20, textAlign: 'center'}}>Select a tab above to get started!</Text> + <Text style={{fontSize: 16, color: '#1a1a1a'}}>⦿ My Stops - quick glance at favourites</Text> + <Text style={{fontSize: 16, color: '#1a1a1a'}}>⦿ Search - simple stop search</Text> + <Text style={{fontSize: 16, color: '#1a1a1a'}}>⦿ About - app info and libraries used</Text> </View> ); } @@ -269,10 +271,12 @@ class TabAbout extends Component { render() { return ( <View style={{flex: 1, padding: 24}}> - <Text style={{fontSize: 34, textAlign: 'center'}}>About</Text> - <Text style={{fontSize: 20, color: '#1a1a1a'}}>Created by Paul Makles (insrt.uk) and built with React Native</Text> - <Text style={{fontSize: 20, color: '#1a1a1a'}}>This app serves as an experiment to build a functional and useful tool with React</Text> - <Text style={{fontSize: 20, color: '#1a1a1a'}}>Repository available at gitlab.insrt.uk/insert/bustimes 😊</Text> + <Text style={{fontSize: 20, textAlign: 'center'}}>About</Text> + <Text style={{fontSize: 16, color: '#1a1a1a'}}>Created by Paul Makles (insrt.uk)</Text> + <Text style={{fontSize: 16, color: '#1a1a1a'}}>Libraries used:</Text> + <Text style={{fontSize: 16, color: '#1a1a1a'}}>⦿ react native</Text> + <Text style={{fontSize: 16, color: '#1a1a1a'}}>⦿ moment.js</Text> + <Text style={{fontSize: 16, color: '#1a1a1a'}}>⦿ react tabs</Text> </View> ); } @@ -459,7 +463,7 @@ const styles = StyleSheet.create({ flex: 1, }, title: { - fontSize: 26, + fontSize: 22, color: 'white', paddingBottom: 8, }, @@ -472,5 +476,8 @@ const styles = StyleSheet.create({ color: 'white', padding: 2, paddingLeft: 24 + }, + button: { + padding: 6 } }); \ No newline at end of file -- GitLab