update page layout
This commit is contained in:
parent
f16d068a7d
commit
1290b19c19
4 changed files with 45 additions and 20 deletions
|
@ -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 }} />,
|
||||
},
|
||||
},
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in a new issue