LBRYCommunity/lbry-react-native
1
0
Fork 0
Code Issues Pull requests 12 Projects Releases Packages Wiki Activity

fix channel thumbnail container render. style tweaks for smaller screens.

Browse source
This commit is contained in:
Akinwale Ariwodola 2020-01-10 00:37:51 +01:00
parent 6bf2f9460d
commit bfc3b11035
3 changed files with 17 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/component/claimResultItem/view.js
View file

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { normalizeURI, parseURI } from 'lbry-redux'; import { normalizeURI, parseURI } from 'lbry-redux';
import { ActivityIndicator, Platform, Text, TouchableOpacity, View } from 'react-native'; import { ActivityIndicator, Platform, Text, TouchableOpacity, View } from 'react-native';
import { navigateToUri, formatTitle, getDownloadProgress, getStorageForFileInfo } from 'utils/helper'; import { navigateToUri, getDownloadProgress, getStorageForFileInfo } from 'utils/helper';
import Colors from 'styles/colors'; import Colors from 'styles/colors';
import ChannelIconItem from 'component/channelIconItem'; import ChannelIconItem from 'component/channelIconItem';
import channelIconStyle from 'styles/channelIcon'; import channelIconStyle from 'styles/channelIcon';
@ -116,7 +116,9 @@ class ClaimResultItem extends React.PureComponent {
<View style={fileListStyle.detailsContainer}> <View style={fileListStyle.detailsContainer}>
{(title || name) && ( {(title || name) && (
<View style={fileListStyle.titleContainer}> <View style={fileListStyle.titleContainer}>
<Text style={fileListStyle.title}>{formatTitle(title) || formatTitle(name)}</Text> <Text style={fileListStyle.title} numberOfLines={3}>
{title || name}
</Text>
{isRewardContent && <Icon style={fileListStyle.rewardIcon} name="award" size={12} />} {isRewardContent && <Icon style={fileListStyle.rewardIcon} name="award" size={12} />}
</View> </View>
)} )}

11
src/component/fileListItem/view.js
View file

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { normalizeURI, parseURI } from 'lbry-redux'; import { normalizeURI, parseURI } from 'lbry-redux';
import { ActivityIndicator, Platform, Text, TouchableOpacity, View } from 'react-native'; import { ActivityIndicator, Platform, Text, TouchableOpacity, View } from 'react-native';
import { navigateToUri, formatTitle, getDownloadProgress, getStorageForFileInfo } from 'utils/helper'; import { navigateToUri, getDownloadProgress, getStorageForFileInfo } from 'utils/helper';
import Colors from 'styles/colors'; import Colors from 'styles/colors';
import ChannelIconItem from 'component/channelIconItem'; import ChannelIconItem from 'component/channelIconItem';
import channelIconStyle from 'styles/channelIcon'; import channelIconStyle from 'styles/channelIcon';
@ -151,7 +151,7 @@ class FileListItem extends React.PureComponent {
)} )}
{isChannel && ( {isChannel && (
<View style={fileListStyle.thumbnail}> <View style={fileListStyle.channelThumbnailView}>
<View style={[fileListStyle.channelThumbnailContainer, this.state.autoStyle]}> <View style={[fileListStyle.channelThumbnailContainer, this.state.autoStyle]}>
{hasThumbnail && ( {hasThumbnail && (
<FastImage <FastImage
@ -209,8 +209,11 @@ class FileListItem extends React.PureComponent {
{(title || name) && ( {(title || name) && (
<View style={fileListStyle.titleContainer}> <View style={fileListStyle.titleContainer}>
<Text style={featuredResult ? fileListStyle.featuredTitle : fileListStyle.title}> <Text
{formatTitle(title) || formatTitle(name)} style={featuredResult ? fileListStyle.featuredTitle : fileListStyle.title}
numberOfLines={hideChannel ? 4 : 3}
>
{title || name}
</Text> </Text>
{isRewardContent && <Icon style={fileListStyle.rewardIcon} name="award" size={12} />} {isRewardContent && <Icon style={fileListStyle.rewardIcon} name="award" size={12} />}
</View> </View>

12
src/styles/fileList.js
View file

@ -28,7 +28,7 @@ const fileListStyle = StyleSheet.create({
}, },
featuredTitle: { featuredTitle: {
fontFamily: 'Inter-SemiBold', fontFamily: 'Inter-SemiBold',
fontSize: screenWidthPixels <= 720 ? 12 : 16, fontSize: screenWidthPixels <= 720 ? 11 : 16,
color: Colors.White, color: Colors.White,
}, },
thumbnail: { thumbnail: {
@ -70,16 +70,16 @@ const fileListStyle = StyleSheet.create({
}, },
title: { title: {
fontFamily: 'Inter-SemiBold', fontFamily: 'Inter-SemiBold',
fontSize: screenWidthPixels <= 720 ? 12 : 14, fontSize: screenWidthPixels <= 720 ? 11 : 14,
}, },
uri: { uri: {
fontFamily: 'Inter-SemiBold', fontFamily: 'Inter-SemiBold',
fontSize: screenWidthPixels <= 720 ? 12 : 14, fontSize: screenWidthPixels <= 720 ? 11 : 14,
marginBottom: 8, marginBottom: 8,
}, },
publisher: { publisher: {
fontFamily: 'Inter-SemiBold', fontFamily: 'Inter-SemiBold',
fontSize: screenWidthPixels <= 720 ? 11 : 12, fontSize: screenWidthPixels <= 720 ? 10 : 12,
marginTop: screenWidthPixels <= 720 ? 1 : 3, marginTop: screenWidthPixels <= 720 ? 1 : 3,
color: Colors.LbryGreen, color: Colors.LbryGreen,
}, },
@ -96,14 +96,14 @@ const fileListStyle = StyleSheet.create({
}, },
infoText: { infoText: {
fontFamily: 'Inter-Regular', fontFamily: 'Inter-Regular',
fontSize: screenWidthPixels <= 720 ? 11 : 12, fontSize: screenWidthPixels <= 720 ? 10 : 12,
color: Colors.ChannelGrey, color: Colors.ChannelGrey,
}, },
downloadInfo: { downloadInfo: {
marginTop: 2, marginTop: 2,
}, },
progress: { progress: {
marginTop: screenWidthPixels <= 720 ? 2 : 4, marginTop: screenWidthPixels <= 720 ? 1 : 4,
}, },
progressCompleted: { progressCompleted: {
backgroundColor: Colors.LbryGreen, backgroundColor: Colors.LbryGreen,