From a30fadeb598d0338ab14129806fa8d8c8da9caa6 Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Fri, 19 Apr 2019 12:46:05 +0100 Subject: [PATCH] initial Explore page redesign --- app/src/component/categoryList/index.js | 4 +++ app/src/component/categoryList/view.js | 36 +++++++++++++++++++++++++ app/src/component/fileItem/view.js | 6 ++--- app/src/page/discover/view.js | 24 ++++++++--------- app/src/styles/discover.js | 32 +++++++++++++--------- 5 files changed, 75 insertions(+), 27 deletions(-) create mode 100644 app/src/component/categoryList/index.js create mode 100644 app/src/component/categoryList/view.js diff --git a/app/src/component/categoryList/index.js b/app/src/component/categoryList/index.js new file mode 100644 index 00000000..f289c58a --- /dev/null +++ b/app/src/component/categoryList/index.js @@ -0,0 +1,4 @@ +import { connect } from 'react-redux'; +import CategoryList from './view'; + +export default connect(null, null)(CategoryList); diff --git a/app/src/component/categoryList/view.js b/app/src/component/categoryList/view.js new file mode 100644 index 00000000..c86100e2 --- /dev/null +++ b/app/src/component/categoryList/view.js @@ -0,0 +1,36 @@ +import React from 'react'; +import NavigationActions from 'react-navigation'; +import { FlatList, Text, View } from 'react-native'; +import { normalizeURI } from 'lbry-redux'; +import FileItem from '/component/fileItem'; +import discoverStyle from 'styles/discover'; + +class CategoryList extends React.PureComponent { + render() { + const { category, categoryMap, navigation } = this.props; + + return ( + ( + + ) + } + horizontal={true} + showsHorizontalScrollIndicator={false} + data={categoryMap[category]} + keyExtractor={(item, index) => item} + /> + ); + } +} + +export default CategoryList; diff --git a/app/src/component/fileItem/view.js b/app/src/component/fileItem/view.js index d90a2c09..34de929d 100644 --- a/app/src/component/fileItem/view.js +++ b/app/src/component/fileItem/view.js @@ -70,7 +70,7 @@ class FileItem extends React.PureComponent { return ( - {!compactView && titleBeforeThumbnail && {title}} + {!compactView && titleBeforeThumbnail && {title}} } {!compactView && - {title} - {isRewardContent && } + {title} + {isRewardContent && } } {(!compactView && showDetails) && diff --git a/app/src/page/discover/view.js b/app/src/page/discover/view.js index eaa7e263..e7c874f7 100644 --- a/app/src/page/discover/view.js +++ b/app/src/page/discover/view.js @@ -12,11 +12,11 @@ import { import { Lbry, normalizeURI, parseURI } from 'lbry-redux'; import AsyncStorage from '@react-native-community/async-storage'; import moment from 'moment'; +import CategoryList from 'component/categoryList'; import Constants from 'constants'; import Colors from 'styles/colors'; import discoverStyle from 'styles/discover'; import FloatingWalletBalance from 'component/floatingWalletBalance'; -import FileItem from 'component/fileItem'; import UriBar from 'component/uriBar'; class DiscoverPage extends React.PureComponent { @@ -150,6 +150,10 @@ class DiscoverPage extends React.PureComponent { setClientSetting(Constants.SETTING_RATING_REMINDER_LAST_SHOWN, settingString); } + trimClaimIdFromCategory(category) { + return category.split('#')[0]; + } + render() { const { featuredUris, fetchingFeaturedUris, navigation } = this.props; const hasContent = typeof featuredUris === 'object' && Object.keys(featuredUris).length, @@ -167,20 +171,16 @@ class DiscoverPage extends React.PureComponent { {(!!hasContent) && ( ( - - ) - } + + )} renderSectionHeader={ ({section: {title}}) => ({title}) } - sections={Object.keys(featuredUris).map(category => ({ title: category, data: featuredUris[category] }))} + sections={Object.keys(featuredUris).map(category => ({ title: this.trimClaimIdFromCategory(category), data: [category] }))} keyExtractor={(item, index) => item} />) } diff --git a/app/src/styles/discover.js b/app/src/styles/discover.js index 6bf25eaf..533de5cb 100644 --- a/app/src/styles/discover.js +++ b/app/src/styles/discover.js @@ -11,6 +11,9 @@ export const horizontalMargin = 48; // left and right margins (24 + 24) export const verticalMargin = (screenWidthPixels > 720 && screenHeightPixels > 1920) ? 0 : ((screenWidthPixels <= 720) ? 20 : 16); export const mediaWidth = screenWidth - horizontalMargin; export const mediaHeight = ((screenWidth / screenHeight) * ((screenWidthPixels <= 720) ? screenWidth : mediaWidth)) - verticalMargin; +export const fileItemWidth = screenWidth * 3/5; +export const fileItemMediaWidth = fileItemWidth; +export const fileItemMediaHeight = fileItemWidth * 9/16; const discoverStyle = StyleSheet.create({ container: { @@ -40,31 +43,30 @@ const discoverStyle = StyleSheet.create({ }, categoryName: { fontFamily: 'Inter-UI-SemiBold', - fontSize: 20, + fontSize: 18, marginLeft: 24, - marginTop: 16, - marginBottom: 16, + marginTop: 12, + marginBottom: 12, color: Colors.Black }, fileItem: { - marginLeft: 24, - marginRight: 24, - marginBottom: 48 + width: fileItemWidth, + marginRight: 12 }, fileItemMedia: { - width: mediaWidth, - height: mediaHeight, + width: fileItemMediaWidth, + height: fileItemMediaHeight, alignItems: 'center', justifyContent: 'center' }, fileItemName: { - fontFamily: 'Inter-UI-Bold', + fontFamily: 'Inter-UI-SemiBold', marginTop: 8, - fontSize: 18 + fontSize: 14 }, channelName: { fontFamily: 'Inter-UI-SemiBold', - fontSize: 16, + fontSize: 12, marginTop: 4, color: Colors.LbryGreen }, @@ -144,8 +146,14 @@ const discoverStyle = StyleSheet.create({ }, dateTimeText: { fontFamily: 'Inter-UI-Regular', - fontSize: 14, + fontSize: 12, color: Colors.DescriptionGrey + }, + horizontalScrollContainer: { + marginBottom: 12 + }, + horizontalScrollPadding: { + paddingLeft: 20 } });