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