Merge pull request #204 from StoDevX/news-titles

add news article titles to News articles

Author: drewvolz

views/news/index.js

@@ -12,7 +12,7 @@ import tabs from './tabs'
 
 
 export default function NewsPage({navigator, route}: {navigator: typeof Navigator, route: Object}) {
-  return <TabbedView style={styles.container} tabs={tabs} childProps={{navigator, route}} />
+  return <TabbedView style={styles.container} tabs={tabs} navigator={navigator} route={route} />
 }
 NewsPage.propTypes = {
   navigator: React.PropTypes.instanceOf(Navigator).isRequired,

views/news/news-container.js

@@ -13,6 +13,7 @@ import {
 
 import delay from 'delay'
 
+import Icon from 'react-native-vector-icons/Ionicons'
 import type {StoryType} from './types'
 import LoadingView from '../components/loading'
 import * as c from '../components/colors'
@@ -22,6 +23,7 @@ const entities = new Entities()
 
 export default class NewsContainer extends React.Component {
   static propTypes = {
+    name: PropTypes.string.isRequired,
     navigator: PropTypes.instanceOf(Navigator).isRequired,
     route: PropTypes.object.isRequired,
     url: PropTypes.string.isRequired,
@@ -72,9 +74,12 @@ export default class NewsContainer extends React.Component {
     let snippet = entities.decode(story.contentSnippet)
     return (
       <TouchableHighlight underlayColor={'#ebebeb'} onPress={() => this.onPressNews(title, story)}>
-        <View style={styles.rowContainer}>
-          <Text style={styles.itemTitle} numberOfLines={1}>{title}</Text>
-          <Text style={styles.itemPreview} numberOfLines={2}>{snippet}</Text>
+        <View style={[styles.row]}>
+          <View style={[styles.rowContainer]}>
+            <Text style={styles.itemTitle} numberOfLines={1}>{title}</Text>
+            <Text style={styles.itemPreview} numberOfLines={2}>{snippet}</Text>
+          </View>
+          <Icon style={[styles.arrowIcon]} name='ios-arrow-forward' />
         </View>
       </TouchableHighlight>
     )
@@ -85,6 +90,7 @@ export default class NewsContainer extends React.Component {
       id: 'NewsItemView',
       index: this.props.route.index + 1,
       title: title,
+      backButtonTitle: this.props.name,
       props: {story},
     })
   }
@@ -117,26 +123,35 @@ const styles = StyleSheet.create({
     paddingBottom: 50,
     backgroundColor: '#ffffff',
   },
-  rowContainer: {
-    marginLeft: 10,
+  row: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    borderBottomWidth: 1,
+    borderBottomColor: '#ebebeb',
+    marginLeft: 20,
     paddingRight: 10,
     paddingTop: 8,
     paddingBottom: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: '#ebebeb',
+  },
+  arrowIcon: {
+    color: c.iosText,
+    fontSize: 20,
+    marginRight: 6,
+    marginLeft: 6,
+    marginTop: 0,
+  },
+  rowContainer: {
+    flexDirection: 'column',
+    flex: 1,
   },
   itemTitle: {
     color: c.black,
-    paddingLeft: 10,
-    paddingRight: 10,
     paddingBottom: 3,
     fontSize: 16,
     textAlign: 'left',
   },
   itemPreview: {
     color: c.iosText,
-    paddingLeft: 10,
-    paddingRight: 10,
     fontSize: 13,
     textAlign: 'left',
   },

views/news/news-item.js

@@ -4,11 +4,11 @@ import {WebView} from 'react-native'
 
 import type {StoryType} from './types'
 
-export default function NewsItemView({story: {content}}: {story: StoryType}) {
-  content = content + `
+export default function NewsItemView({story: {content, title}}: {source: string, story: StoryType}) {
+  content = `
     <style>
       body {
-        font-family: -apple-system;
+        font-family: -apple-system, Roboto, sans-serif;
         font-size: 16px;
         margin: 0;
         padding: 1em;
@@ -30,7 +30,24 @@ export default function NewsItemView({story: {content}}: {story: StoryType}) {
         color: black;
         text-decoration: none;
       }
+
+      .aao-header {
+        border-bottom: solid 2px #eaeaea;
+        margin: 0 0 1em;
+        padding-bottom: 1em;
+        font-weight: bold;
+        text-align: center;
+      }
+      .aao-header h1 {
+        line-height: 1.1em;
+        font-size: 1.5em;
+        margin-bottom: 0;
+      }
     </style>
+    <header class="aao-header">
+      <h1>${title}</h1>
+    </header>
+    ${content}
   `
   return (
     <WebView source={{html: content}} />

views/news/tabs.js

@@ -10,6 +10,7 @@ export default [
     component: NewsContainer,
     props: {
       url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=-1&q=https://wp.stolaf.edu/feed',
+      name: 'St. Olaf',
     },
   },
   {
@@ -19,6 +20,7 @@ export default [
     component: NewsContainer,
     props: {
       url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=-1&q=http://oleville.com/politicole/feed',
+      name: 'PoliticOle',
     },
   },
   {
@@ -28,6 +30,7 @@ export default [
     component: NewsContainer,
     props: {
       url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=-1&q=http://manitoumessenger.com/feed',
+      name: 'Mess',
     },
   },
 ]