sequence select

This commit is contained in:
Peter Cottle 2015-04-28 19:14:11 -07:00
parent ab8e742ce3
commit 9d4035de96
5 changed files with 61 additions and 34 deletions

View file

@ -7,13 +7,7 @@
var React = require('react-native');
var {
AppRegistry,
Image,
Navigator,
ScrollView,
StyleSheet,
Text,
TouchableHighlight,
View,
} = React;
var Routes = require('../constants/Routes');
@ -46,10 +40,4 @@ var LearnGitBranching = React.createClass({
});
var styles = StyleSheet.create({
headerSpacer: {
height: 40
},
});
AppRegistry.registerComponent('LearnGitBranching', () => LearnGitBranching);

View file

@ -0,0 +1,27 @@
/**
* Simple views for the app that dont really change.
*/
var React = require('react-native');
var Routes = require('../constants/Routes');
var {
StyleSheet,
View,
} = React;
var HeaderSpacer = React.createClass({
render: function() {
return <View style={styles.headerSpacer} />;
}
});
var styles = StyleSheet.create({
headerSpacer: {
height: 20,
backgroundColor: '#FFF'
},
});
module.exports.HeaderSpacer = HeaderSpacer;

View file

@ -9,6 +9,10 @@ var {
} = React;
var AppStyles = require('../constants/AppStyles');
var AppViews = require('../native_react_views/AppViews');
var {
HeaderSpacer,
} = AppViews;
var TerminalCardView = require('../native_react_views/TerminalCardView');
var NavButton = require('../native_react_views/NavButton');
@ -21,7 +25,7 @@ var NUXView = React.createClass({
render: function() {
return (
<View style={styles.background}>
<View style={styles.headerSpacer} />
<HeaderSpacer />
<View style={styles.container}>
<TerminalCardView>
<View style={styles.welcomeTextContainer}>
@ -47,7 +51,7 @@ var NUXView = React.createClass({
text="Let's Get Started!"
onPress={() => {
this.props.navigator.push(
Routes.getRouteForID(Routes.LEVEL_SELECT)
Routes.getRouteForID(Routes.SEQUENCE_SELECT)
);
}}
/>
@ -69,10 +73,6 @@ var styles = StyleSheet.create({
container: {
padding: 12,
},
headerSpacer: {
height: 20,
backgroundColor: '#FFF'
},
welcomeTextContainer: {
justifyContent: 'center',
alignItems: 'center',

View file

@ -7,6 +7,7 @@ var {
View,
} = React;
// TODO -- style this!
class NavButton extends React.Component {
render() {
return (

View file

@ -9,6 +9,12 @@ var {
} = React;
var AppStyles = require('../constants/AppStyles');
var AppViews = require('../native_react_views/AppViews');
var {
HeaderSpacer,
} = AppViews;
var TerminalCardView = require('../native_react_views/TerminalCardView');
var NavButton = require('../native_react_views/NavButton');
var SequenceSelectView = React.createClass({
@ -19,18 +25,21 @@ var SequenceSelectView = React.createClass({
render: function() {
return (
<View style={styles.background}>
<View style={styles.headerSpacer} />
<ScrollView>
<View>
<NavButton
text="Level 1"
onPress={() => {
this.props.navigator.push(
Routes.getRouteForID(Routes.LEVEL_SELECT)
);
}}
/>
</View>
<HeaderSpacer />
<ScrollView style={styles.container}>
<View style={styles.headerSpacer} />
<TerminalCardView>
<View>
<NavButton
text="Level 1"
onPress={() => {
this.props.navigator.push(
Routes.getRouteForID(Routes.LEVEL_SELECT)
);
}}
/>
</View>
</TerminalCardView>
</ScrollView>
</View>
);
@ -39,14 +48,16 @@ var SequenceSelectView = React.createClass({
});
var styles = StyleSheet.create({
container: {
padding: 8,
},
headerSpacer: {
height: 24,
},
background: {
backgroundColor: AppStyles.blueBackground,
flex: 1
},
headerSpacer: {
height: 20,
backgroundColor: '#EFEDEE',
},
});
module.exports = SequenceSelectView;