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: { EditorsChoice: {
screen: EditorsChoicePage, screen: EditorsChoicePage,
navigationOptions: { navigationOptions: {
title: "Editor's Choice", title: "Editors' Choice",
drawerIcon: ({ tintColor }) => <Icon name="star" size={drawerIconSize} style={{ color: tintColor }} />, drawerIcon: ({ tintColor }) => <Icon name="star" size={drawerIconSize} style={{ color: tintColor }} />,
}, },
}, },

View file

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

View file

@ -160,6 +160,7 @@ export default Constants;
export const DrawerRoutes = [ export const DrawerRoutes = [
Constants.DRAWER_ROUTE_DISCOVER, Constants.DRAWER_ROUTE_DISCOVER,
Constants.DRAWER_ROUTE_EDITORS_CHOICE,
Constants.DRAWER_ROUTE_TRENDING, Constants.DRAWER_ROUTE_TRENDING,
Constants.DRAWER_ROUTE_SUBSCRIPTIONS, Constants.DRAWER_ROUTE_SUBSCRIPTIONS,
Constants.DRAWER_ROUTE_MY_LBRY, 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'; 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({ const editorsChoiceStyle = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
@ -15,29 +26,38 @@ const editorsChoiceStyle = StyleSheet.create({
item: { item: {
flex: 1, flex: 1,
marginTop: 8, marginTop: 8,
marginBottom: 12,
},
itemRow: {
alignItems: 'center',
flexDirection: 'row',
}, },
category: { category: {
fontFamily: 'Inter-SemiBold', fontFamily: 'Inter-SemiBold',
fontSize: 24, fontSize: 20,
color: Colors.LbryGreen, color: Colors.LbryGreen,
marginBottom: 4,
}, },
thumbnail: { thumbnail: {
width: '100%', width: thumbnailWidth,
height: 240, height: thumbnailHeight,
marginRight: screenWidthPixels <= 720 ? 10 : 12,
alignItems: 'center',
justifyContent: 'center',
}, },
detailsContainer: { detailsContainer: {
marginLeft: 8, flex: 1,
paddingLeft: 2,
paddingRight: 2,
}, },
title: { title: {
fontFamily: 'Inter-SemiBold', fontFamily: 'Inter-SemiBold',
fontSize: 18, fontSize: 16,
marginTop: 8, marginBottom: 4,
}, },
description: { description: {
fontFamily: 'Inter-Regular', fontFamily: 'Inter-Regular',
fontSize: 12, fontSize: 12,
marginTop: 8, marginTop: 2,
}, },
}); });