update page layout

src/component/AppNavigator.js

@@ -168,7 +168,7 @@ const drawer = createDrawerNavigator(
     EditorsChoice: {
       screen: EditorsChoicePage,
       navigationOptions: {
-        title: "Editor's Choice",
+        title: "Editors' Choice",
         drawerIcon: ({ tintColor }) => <Icon name="star" size={drawerIconSize} style={{ color: tintColor }} />,
       },
     },

src/component/editorsChoiceItem/view.js

@@ -43,6 +43,10 @@ class EditorsChoiceItem extends React.PureComponent {
 
     return (
       <TouchableOpacity style={editorsChoiceStyle.item}>
+        <Text style={editorsChoiceStyle.title} numberOfLines={1}>
+          {title}
+        </Text>
+        <View style={editorsChoiceStyle.itemRow}>
           <FastImage
             style={editorsChoiceStyle.thumbnail}
             resizeMode={FastImage.resizeMode.cover}
@@ -50,11 +54,11 @@ class EditorsChoiceItem extends React.PureComponent {
           />
 
           <View style={editorsChoiceStyle.detailsContainer}>
-          <Text style={editorsChoiceStyle.title}>{title}</Text>
-          <Text style={editorsChoiceStyle.description}>
-            {metadata.description ? metadata.description.substring(0, 400) : __('No description available')}
+            <Text style={editorsChoiceStyle.description} numberOfLines={5}>
+              {metadata.description ? metadata.description : __('No description available')}
             </Text>
           </View>
+        </View>
       </TouchableOpacity>
     );
   }

src/constants.js

@@ -160,6 +160,7 @@ export default Constants;
 
 export const DrawerRoutes = [
   Constants.DRAWER_ROUTE_DISCOVER,
+  Constants.DRAWER_ROUTE_EDITORS_CHOICE,
   Constants.DRAWER_ROUTE_TRENDING,
   Constants.DRAWER_ROUTE_SUBSCRIPTIONS,
   Constants.DRAWER_ROUTE_MY_LBRY,

src/styles/editorsChoice.js

@@ -1,6 +1,17 @@
-import { StyleSheet } from 'react-native';
+import { Dimensions, PixelRatio, StyleSheet } from 'react-native';
+import { mediaWidth, mediaHeight } from './discover';
 import Colors from './colors';
 
+const screenDimension = Dimensions.get('window');
+const screenWidth = screenDimension.width;
+const screenHeight = screenDimension.height;
+const screenWidthPixels = PixelRatio.getPixelSizeForLayoutSize(screenWidth);
+const screenHeightPixels = PixelRatio.getPixelSizeForLayoutSize(screenHeight);
+const verticalAdjust = screenHeightPixels > 1280 && screenHeightPixels <= 1920 ? 6 : 0;
+const thumbnailWidth = screenWidthPixels <= 720 ? 144 : 156;
+// taller thumbnails
+const thumbnailHeight = (screenWidth / screenHeight) * thumbnailWidth - verticalAdjust;
+
 const editorsChoiceStyle = StyleSheet.create({
   container: {
     flex: 1,
@@ -15,29 +26,38 @@ const editorsChoiceStyle = StyleSheet.create({
   item: {
     flex: 1,
     marginTop: 8,
+    marginBottom: 12,
+  },
+  itemRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
   },
   category: {
     fontFamily: 'Inter-SemiBold',
-    fontSize: 24,
+    fontSize: 20,
     color: Colors.LbryGreen,
-    marginBottom: 4,
   },
   thumbnail: {
-    width: '100%',
-    height: 240,
+    width: thumbnailWidth,
+    height: thumbnailHeight,
+    marginRight: screenWidthPixels <= 720 ? 10 : 12,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   detailsContainer: {
-    marginLeft: 8,
+    flex: 1,
+    paddingLeft: 2,
+    paddingRight: 2,
   },
   title: {
     fontFamily: 'Inter-SemiBold',
-    fontSize: 18,
-    marginTop: 8,
+    fontSize: 16,
+    marginBottom: 4,
   },
   description: {
     fontFamily: 'Inter-Regular',
     fontSize: 12,
-    marginTop: 8,
+    marginTop: 2,
   },
 });