diff --git a/config.js b/config.js
index 26513ee1..6b490b06 100644
--- a/config.js
+++ b/config.js
@@ -1,7 +1,7 @@
module.exports = {
'flags': {
'injectTestUrls': false,
- 'itemsExpandable': false,
+ 'itemsExpandable': true,
'itemsSwipable': false,
},
diff --git a/lib/images/item-scene-room.png b/lib/images/item-scene-room.png
new file mode 100644
index 00000000..df1f3406
Binary files /dev/null and b/lib/images/item-scene-room.png differ
diff --git a/lib/views/item-scene.js b/lib/views/item-scene.js
index f399b800..d45f1a1f 100644
--- a/lib/views/item-scene.js
+++ b/lib/views/item-scene.js
@@ -9,12 +9,13 @@ const ReactNative = require('react-native');
const tinycolor = require('tinycolor2');
const React = require('react');
-var {
+const {
TouchableOpacity,
StyleSheet,
View,
Text,
Image,
+ Linking,
} = ReactNative;
class ItemScene extends React.Component {
@@ -30,41 +31,22 @@ class ItemScene extends React.Component {
return (
{this.renderMedia(metadata)}
+ {this.renderUrlBar(metadata)}
{this.renderText(metadata)}
{this.renderHeader()}
);
}
- renderHeader() {
- return (
-
-
-
-
-
- );
- }
-
- renderMedia({ embed, image, title, themeColor }) {
- debug('render media', embed, image, title, themeColor);
- if (embed) return this.renderMediaEmbed(embed);
- else if (image) return this.renderMediaImage(image);
+ renderMedia({ image, title, themeColor }) {
+ debug('render media', image, title, themeColor);
+ if (image) return this.renderMediaImage(image);
else return this.renderMediaFallback(title, themeColor);
}
- renderMediaEmbed() {
- return [EMBED];
- }
-
renderMediaImage(image) {
return (
-
+
@@ -84,13 +66,61 @@ class ItemScene extends React.Component {
);
}
- renderText({ title, description, unadaptedUrl, distance }) {
+ renderUrlBar({ url }) {
+ return (
+
+ {url}
+
+ );
+ }
+
+ renderText({ title, description, url, siteName = 'website' }) {
return (
{title}
- {unadaptedUrl}
{description}
- {distance}
+
+ Visit {siteName}
+
+
+ );
+ }
+
+ onVisitWebsite(url) {
+ Linking.openURL(url);
+ }
+
+ renderDistance(distance = 0) {
+ distance = Math.round(distance);
+ let label = `${distance} metres away`;
+
+ if (distance === 1) {
+ label = '1 metre away';
+ }
+
+ return (
+
+
+ {label}
+
+ );
+ }
+
+ renderHeader() {
+ return (
+
+
+
+
);
}
@@ -111,6 +141,8 @@ ItemScene.propTypes = {
module.exports = ItemScene;
+const VERTICAL_MARGIN = 20;
+
const styles = StyleSheet.create({
root: {
position: 'relative',
@@ -133,14 +165,16 @@ const styles = StyleSheet.create({
height: 20,
},
- media: {},
+ mediaImage: {
+ height: 220,
+ },
mediaImageNode: {
height: 220,
},
mediaFallback: {
- height: 200,
+ height: 220,
overflow: 'hidden',
paddingLeft: 16,
},
@@ -152,30 +186,57 @@ const styles = StyleSheet.create({
marginTop: -40,
},
- text: {
- padding: 16,
+ urlBar: {
+ paddingHorizontal: 16,
+ paddingTop: -5 + VERTICAL_MARGIN,
borderTopColor: '#EEE',
borderTopWidth: 1,
},
+ url: {
+ color: '#999',
+ fontFamily: 'FiraSans-LightItalic',
+ fontSize: 14,
+ },
+
+ text: {
+ marginTop: -13 + VERTICAL_MARGIN,
+ paddingHorizontal: 16,
+ },
+
title: {
fontSize: 31,
fontFamily: 'FiraSans-LightItalic',
color: '#4D4D4D',
},
- url: {
- marginTop: 13,
- marginBottom: 17,
- color: '#BBB',
- fontFamily: 'FiraSans-LightItalic',
- fontSize: 14,
+ description: {
+ marginTop: -13 + VERTICAL_MARGIN,
+ fontSize: 15,
+ lineHeight: 24,
+ fontFamily: 'FiraSans-Book',
+ color: '#999',
},
- description: {
+ visitButton: {
+ marginTop: -3 + VERTICAL_MARGIN,
+ padding: 10,
fontSize: 15,
lineHeight: 24,
+ textAlign: 'center',
fontFamily: 'FiraSans-Book',
color: '#999',
+ backgroundColor: 'lightgrey',
+ },
+
+ distance: {
+ flexDirection: 'row',
+ marginHorizontal: 10,
+ },
+
+ distanceImage: {
+ width: 20,
+ height: 20,
+ marginRight: 5,
},
});