update page layout

This commit is contained in:
Akinwale Ariwodola 2020-04-01 16:17:09 +01:00
parent f16d068a7d
commit 1290b19c19
4 changed files with 45 additions and 20 deletions

View file

@ -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 }} />,
},
},

View file

@ -43,17 +43,21 @@ class EditorsChoiceItem extends React.PureComponent {
return (
<TouchableOpacity style={editorsChoiceStyle.item}>
<FastImage
style={editorsChoiceStyle.thumbnail}
resizeMode={FastImage.resizeMode.cover}
source={{ uri: thumbnail }}
/>
<Text style={editorsChoiceStyle.title} numberOfLines={1}>
{title}
</Text>
<View style={editorsChoiceStyle.itemRow}>
<FastImage
style={editorsChoiceStyle.thumbnail}
resizeMode={FastImage.resizeMode.cover}
source={{ uri: thumbnail }}
/>
<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>
<View style={editorsChoiceStyle.detailsContainer}>
<Text style={editorsChoiceStyle.description} numberOfLines={5}>
{metadata.description ? metadata.description : __('No description available')}
</Text>
</View>
</View>
</TouchableOpacity>
);

View file

@ -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,

View file

@ -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,
},
});