styled card screen

components/AboutScreen.js

@@ -1,9 +1,18 @@
 import React from 'react';
-import {AsyncStorage, Button, Text, View} from 'react-native';
+import {AsyncStorage, Button, FlatList, Text, View} from 'react-native';
 
+import { getCategories } from './CardLibrary';
+
+const cats = getCategories();
 
 export default () => (
   <View>
+    <FlatList 
+      horizontal
+      data={cats}
+      keyExtractor={(item) => item.slug} //each list item needs unique key
+      renderItem={({item, index}) => <Text>{item.name}</Text>}   
+    />
     <Text>About Screen</Text>
     {/* <Button title="clear storage" onPress={() => AsyncStorage.removeItem('FAVORITES', console.log('removed favorites'))} />\
     <Button title="show storage" onPress={() => AsyncStorage.getItem('FAVORITES').then(fav => { console.log(fav)})} /> */}

components/CardList.js

@@ -4,7 +4,8 @@ import { FlatList } from 'react-native';
 import CardListItem from './CardListItem';
 
 const CardList = (props) =>
-    <FlatList 
+    <FlatList
+        keyboardShouldPersistTaps='always'
         data={props.cards}
         keyExtractor={(item) => item.slug} //each list item needs unique key
         renderItem={({item, index}) => <CardListItem card={item} index={index} />}    

components/CardScreen.js

@@ -18,6 +18,111 @@ import Colors from './colors';
 
 import { getCard } from './CardLibrary'
 
+const css = `
+body {
+  font-family: Helvetica, Arial, sans-serif;
+  line-height: 1.5rem;
+}
+
+h1 {
+  background-color: ${Colors.lightGray};
+  padding: 5px;
+  border-bottom: 4px solid ${Colors.accent};
+  font-size: 2rem;
+  line-height: 2.5rem;
+}
+
+.drug {
+  font-weight: bold;
+  color: ${Colors.drugColor};
+}
+
+.card__meta {
+  font-size: .8em;
+  margin: 0px;
+}
+
+.card__meta > div {
+    color: ${Colors.fontPrimary};
+    background: ${Colors.lightGray};
+    padding: 5px 10px;
+    margin: 0 0 10px 0;
+}
+
+.card__content h1:first-of-type {
+  display: none;
+}
+
+#references {
+    background-color: ${Colors.lightGray};
+    border: 0;
+    margin: 20px 0 0 0;
+    border-radius: 2px 2px 0 0;
+    color: ${Colors.fontPrimary};
+    padding: 10px;
+    padding-bottom: 0;
+}
+
+#references + ul, references + ol {
+  margin-top: 0;
+  background-color: ${Colors.lightGray};
+  border-radius: 0 0 2px 2px;
+  padding: 20px 40px;
+}
+        
+#references li {
+  margin-bottom: 20px
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  max-width: 100vw;
+  margin: auto;
+  margin-bottom: 1.5em;
+  border: 0;
+  box-shadow: ${Colors.shadow};
+}
+
+thead>tr>td,
+thead>tr>th,
+tbody>tr>th {
+  background-color: ${Colors.accent};
+  text-align: left;
+  font-weight: bold;
+  color: white;
+  padding: 3px 5px;
+}
+
+tr:nth-child(odd) {
+  background-color: ${Colors.tertiary};
+}
+
+td, th {
+  padding: .8em
+  vertical-align: top
+}
+
+tfoot {
+  font-size: .8em
+}
+
+tfoot tr {
+    background-color: white !important // @stylint ignore
+    border-top: solid ${Colors.borderColor} 1px
+}
+
+tfoot td {
+    text-align: justify;
+    padding: 0 .8em;
+    color: ${Colors.lightGray};
+}
+tfoot p {
+  margin: 10px 0 !important // @stylint ignore
+  line-height: 1.5em
+}
+`
+
 const share = (card) => {
   if (Platform.OS === 'ios') {
     ActionSheetIOS.showShareActionSheetWithOptions(
@@ -76,12 +181,34 @@ class CardScreen extends React.Component {
 
     render() {
       if (this.state.card.body) {
+        const card = this.state.card;
+        const lastUpdate = card.updates
+          ? new Date(card.updates[0]).toLocaleDateString('en-US', {
+              timeZone: 'UTC',
+            })
+          : new Date(card.created).toLocaleDateString('en-US', {
+              timeZone: 'UTC',
+            });
+        const content = `
+          <style>${css}</style>
+          <h1>${card.title}</h1>
+          <div class="card__meta">
+            <div>
+              <strong>${card.authors.length > 1 ? 'Authors: ' : 'Author: '}</strong>
+              ${card.authors.join(', ')}
+            </div>
+            <div>
+              <strong>Updated:</strong> ${lastUpdate}
+            </div>
+          </div>
+          <div class='card__content'>${marked(this.state.card.body)}</div>
+        `
+
         return (
           <View style={{ flex: 1, backgroundColor: Colors.primary }}>
             <WebView 
               style={{ overflow: 'hidden', borderRadius: 5 }}
-              useWebKit={true}
-              source={{html: marked(this.state.card.body) }} 
+              source={{html: content}}
               scalesPageToFit={false}
             />
           </View>            

components/SearchScreen.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, StyleSheet, TextInput, View } from 'react-native';
+import { Button, Keyboard, StyleSheet, TextInput, ScrollView, View } from 'react-native';
 import { withNavigation } from 'react-navigation';
 import Fuse from 'fuse.js';
 
@@ -36,28 +36,27 @@ class Search extends React.Component {
 
     render() {
 
-        handleSearch = (text) => { 
-            const results = fuse.search((text)).slice(0,8);
-            this.setState({ query: text, results });
+        handleSearch = (query) => { 
+            const results = fuse.search((query)).slice(0,8);
+            this.setState({ query, results });
         }
 
         return (
-        <View> 
-            <View style={styles.searchheader}>
-                <TextInput
-                    style={styles.input}
-                    placeholder="Search cards"
-                    clearButtonMode='always'
-                    autoFocus
-                    onChangeText={handleSearch}
-                    value={this.state.query}
-                />
-                <Button style={{ flex: 1 }} color='white' title="Done" onPress={()=> { this.props.navigation.goBack() }} />
-            </View>
-            { this.state.results.length > 0 && (
+            <ScrollView keyboardShouldPersistTaps='always'>
+                <View style={styles.searchheader}>
+                    <TextInput
+                        ref='searchbox'
+                        style={styles.input}
+                        placeholder="Search cards"
+                        clearButtonMode='always'
+                        autoFocus
+                        onChangeText={handleSearch}
+                        value={this.state.query}
+                    />
+                    <Button style={{ flex: 1 }} color='white' title="Done" onPress={()=> { this.props.navigation.goBack() }} />
+                </View>
                 <CardList cards={this.state.results} />
-            )}
-        </View>
+            </ScrollView>
         );
     }
 }

components/TabBarFooter.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { createStackNavigator, createBottomTabNavigator, createMaterialTopTabNavigator } from "react-navigation";
+import { createStackNavigator, createBottomTabNavigator } from "react-navigation";
 import { TouchableOpacity } from "react-native"
 import { SimpleLineIcons as Icon } from '@expo/vector-icons';
 
@@ -15,7 +15,8 @@ const SearchButton = (props) =>
         <Icon name="magnifier" size={20} style={{ color: 'white', margin: 10 }} />
     </TouchableOpacity>
 
-const tabSetup = (screen, title, icon_name) => {
+const tabSetup = (screen, title, icon_name, hideHeader) => {
+    const config = hideHeader ? { headerMode: 'none' } : {};
     const stack = createStackNavigator({
         home: {
             screen,
@@ -28,7 +29,7 @@ const tabSetup = (screen, title, icon_name) => {
                 }
             })
         },
-    });
+    }, config);
 
     stack.navigationOptions = {
         tabBarIcon: TabIcon(icon_name)

components/colors.js

@@ -11,5 +11,6 @@ export default {
     footerDark: '#252525',
     fontSecondary: '#666',
     drugColor: '#D60B70',
-    accent: '#345995'
+    accent: '#345995',
+    shadow: '0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)'
 }