Better layout for comments username and metadata (supports landscape)

APSL · Jun 10, 2016 · eebf230 · eebf230
1 parent 3c07ac7
commit eebf230
Showing 1 changed file with 17 additions and 18 deletions.
diff --git a/app/MnmComments.js b/app/MnmComments.js
@@ -61,13 +61,13 @@ class MnmComments extends Component {
         <View style={styles.cellContainer}>
           <View style={styles.infoContainer}>
             <Text style={styles.username}>{rowData.user}</Text>
-            <Icon style={styles.icon} name='like' size={20}
-                color='#95a5a6'/>
-            <Text style={styles.votes}>{rowData.votes}</Text>
-            <Icon style={styles.iconKarma} name='heart' size={20}
-                color='#95a5a6'/>
-            <Text style={styles.karma}>{rowData.karma}</Text>
-            <Text style={styles.date}>{rowData.fromNow}</Text>
+            <View style={styles.commentData}>
+              <Icon style={styles.icon} name="like" size={20} />
+              <Text style={styles.counter}>{rowData.votes}</Text>
+              <Icon style={styles.icon} name="heart" size={20} />
+              <Text style={styles.counter}>{rowData.karma}</Text>
+              <Text style={styles.date}>{rowData.fromNow}</Text>
+            </View>
           </View>
           <View style={styles.textContainer}>
             <Text style={styles.commentNumber}>#{rowData.order}</Text>
@@ -136,29 +136,28 @@ var styles = StyleSheet.create({
         marginBottom: 10,
     },
     username: {
-        flex: 5,
+        flex: 1,
+        flexDirection: 'row',
         fontWeight: 'bold',
         fontSize: 14,
         color: '#262626',
     },
-    icon: {
-        bottom: 3,
-    },
-    iconKarma: {
-        bottom: 3,
-        marginLeft: 10,
+    commentData: {
+        flex: 2,
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
     },
-    votes: {
+    icon: {
+        width: 20,
         color: '#95a5a6',
     },
-    karma: {
+    counter: {
         color: '#95a5a6',
+        marginRight: 10,
     },
     date: {
-        flex: 4,
         fontSize: 14,
         fontWeight: '300',
-        textAlign: 'right',
         color: '#95a5a6',
     },
     textContainer: {