Skip to content

P
pianoApp
Commit 34d57dcd authored by norhalimah's avatar norhalimah
Browse files
Options

updating UI..

parent 87a83bd7
Show whitespace changes
Inline Side-by-side
Showing with 33 additions and 33 deletions
screens/listening.js
View file @ 34d57dcd
......@@ -544,10 +544,10 @@ class Listen extends React.Component {
<View style={styles.screen}>
<View style={styles.viewPages}>
<View style={{marginLeft:width * 0.83, width: width * 0.2}}>
<Text style={[styles.textPages, {paddingHorizontal:width * 0.06}]}>1/4</Text>
<Text style={[styles.textPages, {paddingHorizontal:width * 0.02}]}>1/4</Text>
</View>
<TouchableOpacity onPress={this.scrollToB}>
<Image style={styles.rightIcon} source={rightIcon}/>
<TouchableOpacity onPress={this.scrollToB} style={{height:'100%', width:'8%', marginLeft:width * 0.3}}>
<Image style={{width:'70%', height:'90%', paddingHorizontal: width * 0.04, paddingVertical: height * 0.03}} source={rightIcon}/>
</TouchableOpacity>
</View>
<View style={{backgroundColor:'#9F9F9F'}}>
......@@ -572,12 +572,12 @@ class Listen extends React.Component {
<View style={styles.screen}>
<View style={styles.viewPages}>
<TouchableOpacity onPress={this.scrollToStart} style={{width: '25%', marginLeft:width * 0.4}}>
<Image style={styles.leftIcon} source={leftIcon}/>
<TouchableOpacity onPress={this.scrollToStart} style={{height:'100%', width:'8%', marginLeft:width * 0.35}}>
<Image style={{width:'70%', height:'90%', paddingHorizontal: width * 0.04, paddingVertical: height * 0.03}} source={leftIcon}/>
</TouchableOpacity>
<Text style={[styles.textPages, {paddingLeft:width * 0.1, paddingRight:width * 0.1}]}>2/4</Text>
<TouchableOpacity onPress={this.scrollToC} style={{marginRight:height * 0.3,width: '25%'}}>
<Image style={styles.rightIcon} source={rightIcon}/>
<Text style={[styles.textPages, {paddingLeft:width * 0.35, paddingRight:width * 0.1}]}>2/4</Text>
<TouchableOpacity onPress={this.scrollToC} style={{height:'100%', width:'8%', marginLeft:width * 0.3}}>
<Image style={{width:'70%', height:'90%', paddingHorizontal: width * 0.04, paddingVertical: height * 0.03}} source={rightIcon}/>
</TouchableOpacity>
</View>
<View style={{backgroundColor:'#9F9F9F'}}>
......@@ -602,12 +602,12 @@ class Listen extends React.Component {
<View style={styles.screen}>
<View style={styles.viewPages}>
<TouchableOpacity onPress={this.scrollToB} style={{width: '25%'}}>
<Image style={styles.leftIcon} source={leftIcon}/>
<TouchableOpacity onPress={this.scrollToB} style={{height:'100%', width:'8%', marginLeft:width * 0.35}}>
<Image style={{width:'70%', height:'90%', paddingHorizontal: width * 0.04, paddingVertical: height * 0.03}} source={leftIcon}/>
</TouchableOpacity>
<Text style={[styles.textPages, {paddingHorizontal:width * 0.4}]}>3/4</Text>
<TouchableOpacity onPress={this.scrollToD} style={{marginRight:height * 0.8, width: '25%'}}>
<Image style={styles.rightIcon} source={rightIcon}/>
<Text style={[styles.textPages, {paddingLeft:width * 0.35, paddingRight:width * 0.1}]}>3/4</Text>
<TouchableOpacity onPress={this.scrollToD} style={{height:'100%', width:'8%', marginLeft:width * 0.3}}>
<Image style={{width:'70%', height:'90%', paddingHorizontal: width * 0.04, paddingVertical: height * 0.03}} source={rightIcon}/>
</TouchableOpacity>
</View>
<View style={{backgroundColor:'#9F9F9F'}}>
......@@ -632,10 +632,10 @@ class Listen extends React.Component {
<View style={styles.screen}>
<View style={styles.viewPages}>
<TouchableOpacity onPress={this.scrollToC} style={{width: '25%'}}>
<Image style={styles.leftIcon} source={leftIcon}/>
<TouchableOpacity onPress={this.scrollToC} style={{height:'100%', width:'8%', marginLeft:width * 0.35}}>
<Image style={{width:'70%', height:'90%', paddingHorizontal: width * 0.04, paddingVertical: height * 0.03}} source={leftIcon}/>
</TouchableOpacity>
<Text style={[styles.textPages, {paddingHorizontal:width * 0.5}]}>4/4</Text>
<Text style={[styles.textPages, {paddingLeft:width * 0.35, paddingRight:width * 0.1}]}>4/4</Text>
</View>
<View style={{backgroundColor:'#9F9F9F'}}>
<View style={styles.screenC}>
......@@ -665,10 +665,10 @@ class Listen extends React.Component {
<View style={styles.screen}>
<View style={styles.viewPages}>
<View style={{marginLeft:width * 0.83, width: width * 0.2}}>
<Text style={[styles.textPages, {paddingHorizontal:width * 0.06}]}>1/4</Text>
<Text style={[styles.textPages, {paddingHorizontal:width * 0.02}]}>1/4</Text>
</View>
<TouchableOpacity onPress={this.scrollToB} style={{width: width * 0.2, marginLeft: width * 0.25}}>
<Image style={styles.rightIcon} source={rightIcon}/>
<TouchableOpacity onPress={this.scrollToB} style={{height:'100%', width:'8%', marginLeft:width * 0.3}}>
<Image style={{width:'70%', height:'90%', paddingHorizontal: width * 0.04, paddingVertical: height * 0.03}} source={rightIcon}/>
</TouchableOpacity>
</View>
<View style={{backgroundColor:'#9F9F9F'}}>
......@@ -693,12 +693,12 @@ class Listen extends React.Component {
<View style={styles.screen}>
<View style={styles.viewPages}>
<TouchableOpacity onPress={this.scrollToStart} style={{width: '25%', marginLeft:width * 0.4}}>
<Image style={styles.leftIcon} source={leftIcon}/>
<TouchableOpacity onPress={this.scrollToStart} style={{height:'100%', width:'8%', marginLeft:width * 0.35}}>
<Image style={{width:'70%', height:'90%', paddingHorizontal: width * 0.04, paddingVertical: height * 0.03}} source={leftIcon}/>
</TouchableOpacity>
<Text style={[styles.textPages, {paddingLeft:width * 0.1, paddingRight:width * 0.1}]}>2/4</Text>
<TouchableOpacity onPress={this.scrollToC} style={{marginRight:height * 0.3,width: '25%'}}>
<Image style={styles.rightIcon} source={rightIcon}/>
<Text style={[styles.textPages, {paddingLeft:width * 0.35, paddingRight:width * 0.1}]}>2/4</Text>
<TouchableOpacity onPress={this.scrollToC} style={{height:'100%', width:'8%', marginLeft:width * 0.3}}>
<Image style={{width:'70%', height:'90%', paddingHorizontal: width * 0.04, paddingVertical: height * 0.03}} source={rightIcon}/>
</TouchableOpacity>
</View>
<View style={{backgroundColor:'#9F9F9F'}}>
......@@ -723,12 +723,12 @@ class Listen extends React.Component {
<View style={styles.screen}>
<View style={styles.viewPages}>
<TouchableOpacity onPress={this.scrollToB} style={{width: '25%'}}>
<Image style={styles.leftIcon} source={leftIcon}/>
<TouchableOpacity onPress={this.scrollToB} style={{height:'100%', width:'8%', marginLeft:width * 0.35}}>
<Image style={{width:'70%', height:'90%', paddingHorizontal: width * 0.04, paddingVertical: height * 0.03}} source={leftIcon}/>
</TouchableOpacity>
<Text style={[styles.textPages, {paddingHorizontal:width * 0.4}]}>3/4</Text>
<TouchableOpacity onPress={this.scrollToD} style={{marginRight:height * 0.8, width: '25%'}}>
<Image style={styles.rightIcon} source={rightIcon}/>
<Text style={[styles.textPages, {paddingLeft:width * 0.35, paddingRight:width * 0.1}]}>3/4</Text>
<TouchableOpacity onPress={this.scrollToD} style={{height:'100%', width:'8%', marginLeft:width * 0.3}}>
<Image style={{width:'70%', height:'90%', paddingHorizontal: width * 0.04, paddingVertical: height * 0.03}} source={rightIcon}/>
</TouchableOpacity>
</View>
<View style={{backgroundColor:'#9F9F9F'}}>
......@@ -753,10 +753,10 @@ class Listen extends React.Component {
<View style={styles.screen}>
<View style={styles.viewPages}>
<TouchableOpacity onPress={this.scrollToC} style={{width: '25%'}}>
<Image style={styles.leftIcon} source={leftIcon}/>
<TouchableOpacity onPress={this.scrollToC} style={{height:'100%', width:'8%', marginLeft:width * 0.35}}>
<Image style={{width:'70%', height:'90%', paddingHorizontal: width * 0.04, paddingVertical: height * 0.03}} source={leftIcon}/>
</TouchableOpacity>
<Text style={[styles.textPages, {paddingHorizontal:width * 0.5}]}>4/4</Text>
<Text style={[styles.textPages, {paddingLeft:width * 0.35, paddingRight:width * 0.1}]}>4/4</Text>
</View>
<View style={{backgroundColor:'#9F9F9F'}}>
<View style={styles.screenC}>
......
style/styleListen.js
View file @ 34d57dcd
......@@ -537,7 +537,7 @@ viewPages: {
},
textPages:{
color:'#FFFFFF',
marginVertical:width * 0.03,
marginVertical:width * 0.02,
fontFamily:'Gilroy-Light',
textAlign: 'left',
lineHeight:20,
......
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