Related ItemDetail styling

lib/views/item/item-detail.js

@@ -78,8 +78,7 @@ class ItemDetail extends Component {
     return <ScrollView style={styles.scroller}>
       {this.renderMedia(metadata)}
       {this.renderUrlBar(metadata)}
-      {this.renderText(metadata)}
-      {this.renderDistance(item.value)}
+      {this.renderText(item.value)}
       {this.renderMap(item.value)}
     </ScrollView>;
   }
@@ -129,16 +128,22 @@ class ItemDetail extends Component {
     );
   }
 
-  renderText({ title, description, siteName = 'website' } = {}) {
+  renderText({ metadata = {}, distance, location }) {
+    const userLocation = this.props.location;
+    const siteName = metadata.siteName
+      ? ` ${metadata.siteName}`
+      : '';
+
     return (
       <View style={styles.text}>
-        <View><Text style={styles.title}>{title}</Text></View>
-        <View><Text style={styles.description}>{description}</Text></View>
-        <View>
-          <Text
-            style={styles.visitButton}
-            onPress={this.visitWebsite}>Visit {siteName}</Text>
-        </View>
+        <View><Text style={styles.title}>{metadata.title}</Text></View>
+        <View><Text style={styles.description}>{metadata.description}</Text></View>
+        <View><Text style={styles.distanceText}>{getDistance(distance, location, userLocation)}</Text></View>
+        <TouchableOpacity
+          style={styles.visitButton}
+          onPress={this.visitWebsite}>
+          <Text style={styles.visitButtonText}>Visit {siteName}</Text>
+        </TouchableOpacity>
       </View>
     );
   }
@@ -157,52 +162,6 @@ class ItemDetail extends Component {
     Linking.openURL(this.props.item.id);
   }
 
-  renderDistance(item = {}) {
-    let distance = item.distance;
-    const beaconLocation = item.location || {};
-
-    // No distance and no geographic coordinates
-    if (typeof distance !== 'number' &&
-      (typeof beaconLocation.latitude !== 'number' ||
-      typeof beaconLocation.longitude !== 'number')) {
-      return null;
-    }
-
-    // mDNS beacon
-    if (distance === -1) {
-      return null;
-    }
-
-    // We don't have the user location (yet).
-    if (this.props.location.latitude === null ||
-      this.props.location.longitude === null) {
-      return null;
-    }
-
-    if (typeof distance !== 'number' &&
-      typeof beaconLocation.latitude === 'number' &&
-      typeof beaconLocation.longitude === 'number') {
-      distance = computeDistance(beaconLocation, this.props.location);
-    }
-
-    distance = Math.round(distance);
-
-    let label = `${distance} metres away`;
-
-    if (distance === 1) {
-      label = '1 metre away';
-    }
-
-    return (
-      <View style={styles.distance}>
-        <Image
-          style={styles.distanceImage}
-          source={require('../../images/item-scene-room.png')}/>
-        <Text style={styles.distanceLabel}>{label}</Text>
-      </View>
-    );
-  }
-
   renderMap(item = {}) {
     const beaconLocation = item.location;
 
@@ -312,6 +271,47 @@ function mapDispatchToProps(dispatch) {
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(ItemDetail);
 
+/**
+ * Utils
+ */
+
+function getDistance(distance, itemLocation, userLocation) {
+
+  // no distance and no geographic coordinates
+  if (typeof distance !== 'number' &&
+    (typeof itemLocation.latitude !== 'number' ||
+    typeof itemLocation.longitude !== 'number')) {
+    return null;
+  }
+
+  // mDNS beacon
+  if (distance === -1) {
+    return null;
+  }
+
+  // We don't have the user location (yet).
+  if (userLocation.latitude === null ||
+    userLocation.longitude === null) {
+    return null;
+  }
+
+  if (typeof distance !== 'number' &&
+    typeof itemLocation.latitude === 'number' &&
+    typeof itemLocation.longitude === 'number') {
+    distance = computeDistance(itemLocation, userLocation);
+  }
+
+  distance = Math.round(distance);
+
+  return distance === 1
+      ? '1 metre away'
+      : `${distance} metres away`;
+}
+
+/**
+ * Style
+ */
+
 const VERTICAL_MARGIN = 20;
 
 const styles = StyleSheet.create({
@@ -371,12 +371,12 @@ const styles = StyleSheet.create({
   url: {
     color: '#999',
     fontFamily: 'FiraSans-LightItalic',
-    fontSize: 14,
+    fontSize: 13,
   },
 
   text: {
     marginTop: -13 + VERTICAL_MARGIN,
-    marginBottom: VERTICAL_MARGIN,
+    marginBottom: 16,
     paddingHorizontal: 16,
   },
 
@@ -386,23 +386,35 @@ const styles = StyleSheet.create({
     color: '#4D4D4D',
   },
 
+
+  distanceText: {
+    marginTop: -6 + VERTICAL_MARGIN,
+    fontFamily: theme.fontLightItalic,
+    fontSize: 13,
+    color: '#999',
+  },
+
   description: {
     marginTop: -13 + VERTICAL_MARGIN,
     fontSize: 15,
     lineHeight: 24,
     fontFamily: 'FiraSans-Book',
-    color: '#999',
+    color: '#888',
   },
 
   visitButton: {
-    marginTop: -3 + VERTICAL_MARGIN,
-    padding: 10,
-    fontSize: 15,
-    lineHeight: 24,
+    marginTop: VERTICAL_MARGIN,
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    borderWidth: 1,
+    borderColor: '#999',
+    borderRadius: 3,
+  },
+
+  visitButtonText: {
     textAlign: 'center',
-    fontFamily: 'FiraSans-Book',
-    color: '#999',
-    backgroundColor: 'lightgrey',
+    fontFamily: theme.fontBook,
+    color: '#666',
   },
 
   distance: {
@@ -417,24 +429,21 @@ const styles = StyleSheet.create({
     marginRight: 5,
   },
 
-  distanceLabel: {
-    fontFamily: theme.fontBook,
-    color: '#333',
+  loading: {
+    flex: 1,
+    justifyContent: 'center',
   },
 
   mapContainer: {
+    height: 220,
     flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'stretch',
-    marginTop: -3 + VERTICAL_MARGIN,
-    marginBottom: VERTICAL_MARGIN,
-    marginHorizontal: 16,
-    height: 200,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    borderTopWidth: 1,
+    borderColor: theme.borderColor,
   },
 
-  loading: {
-    flex: 1,
-    justifyContent: 'center',
+  map: {
+    ...StyleSheet.absoluteFillObject,
   },
 });