[Articles] Use stopgap solution to fix missing margin between articles.

artsy · May 13, 2016 · ce34868 · ce34868
1 parent deb933a
commit ce34868
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/lib/components/artist/articles/article.js b/lib/components/artist/articles/article.js
@@ -12,12 +12,16 @@ import ImageView from '../../opaque_image_view';
 class Article extends React.Component {
   render() {
     const article = this.props.article
+    // TODO The outer wrapping view is currently only there because setting `marginRight: 20` on the Article from the
+    //      Articles component isn’t working.
     return (
-      <View style={{ width: 300 }}>
-        <ImageView style={{ width: 300, height: 175, marginRight: 20 }}
-                imageURL={article.thumbnail_image.cropped.url} />
-        <Text style={styles.serifText} numberOfLines={5}>{article.title}</Text>
-        <Text style={styles.sansSerifText}>{article.author.name.toUpperCase()}</Text>
+      <View style={{ width: 320 }}>
+        <View style={{ width: 300 }}>
+          <ImageView style={{ width: 300, height: 175 }}
+                    imageURL={article.thumbnail_image.cropped.url} />
+          <Text style={styles.serifText} numberOfLines={5}>{article.title}</Text>
+          <Text style={styles.sansSerifText}>{article.author.name.toUpperCase()}</Text>
+        </View>
       </View>
     );
   }

diff --git a/lib/components/artist/articles/index.js b/lib/components/artist/articles/index.js
@@ -15,11 +15,11 @@ class Articles extends React.Component {
   render() {
     const articles = this.props.articles;
     return (
-      <View style={styles.container}>
+      <View>
         <Separator/>
         <SerifText style={styles.heading}>Featured Articles</SerifText>
         <ScrollView horizontal={true} style={{ overflow: 'visible', marginBottom:40 }}>
-          { articles.map(article => <Article key={article.id} article={article} />) }
+          { articles.map(article => <Article key={article.id} article={article} style={styles.article} />) }
         </ScrollView>
       </View>
     );
@@ -30,6 +30,10 @@ const styles = StyleSheet.create({
   heading: {
     marginBottom: 20,
     fontSize: 20,
+  },
+  article: {
+    // TODO: Why doesn’t this work? Currently working around it by making the Article internal view 20pt wider.
+    // marginRight: 20,
   }
 });