LBRYCommunity/lbry-android
1
0
Fork 0
Code Issues155 Pull requests6 Projects Releases84 Packages Wiki Activity

more thumbnail sizing tweaks

Browse source
This commit is contained in:
Akinwale Ariwodola 2018-09-01 21:32:01 +01:00
parent 7872567f89
commit 6050a43667
3 changed files with 12 additions and 9 deletions

3
app/src/styles/discover.js
View file

@ -6,9 +6,10 @@ const screenWidth = screenDimension.width;
const screenHeight = screenDimension.height;
const screenWidthPixels = PixelRatio.getPixelSizeForLayoutSize(screenWidth);
const screenHeightPixels = PixelRatio.getPixelSizeForLayoutSize(screenHeight);
console.log('screenHeightPixels=' + screenHeightPixels);
// calculate thumbnail width and height based on device's aspect ratio
const horizontalMargin = 48; // left and right margins (24 + 24)
const verticalMargin = (screenWidthPixels > 720 && screenHeightPixels > 1080) ? 0 : ((screenWidthPixels <= 720) ? 20 : 16);
const verticalMargin = (screenWidthPixels > 720 && screenHeightPixels > 1920) ? 0 : ((screenWidthPixels <= 720) ? 20 : 16);
const mediaWidth = screenWidth - horizontalMargin;
const mediaHeight = ((screenWidth / screenHeight) * ((screenWidthPixels <= 720) ? screenWidth : mediaWidth)) - verticalMargin;

16
app/src/styles/fileList.js
View file

@ -5,15 +5,17 @@ const screenDimension = Dimensions.get('window');
const screenWidth = screenDimension.width;
const screenHeight = screenDimension.height;
const screenWidthPixels = PixelRatio.getPixelSizeForLayoutSize(screenWidth);
const thumbnailHeight = (screenWidthPixels <= 720) ? 72 : 96;
const thumbnailWidth = (screenHeight / screenWidth) * thumbnailHeight;
const screenHeightPixels = PixelRatio.getPixelSizeForLayoutSize(screenHeight);
const verticalAdjust = (screenHeightPixels > 1280 && screenHeightPixels <= 1920) ? 6 : 0;
const thumbnailWidth = (screenWidthPixels <= 720) ? 144 : 156;
const thumbnailHeight = ((screenWidth / screenHeight) * thumbnailWidth) - verticalAdjust;
const fileListStyle = StyleSheet.create({
item: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 16
marginTop: 8
},
detailsContainer: {
flex: 1
@ -26,7 +28,7 @@ const fileListStyle = StyleSheet.create({
},
title: {
fontFamily: 'Metropolis-SemiBold',
fontSize: (screenWidthPixels <= 720) ? 14 : 16
fontSize: (screenWidthPixels <= 720) ? 12 : 16
},
uri: {
fontFamily: 'Metropolis-SemiBold',
@ -36,14 +38,14 @@ const fileListStyle = StyleSheet.create({
publisher: {
fontFamily: 'Metropolis-SemiBold',
fontSize: (screenWidthPixels <= 720) ? 12 : 14,
marginTop: 3,
marginTop: (screenWidthPixels <= 720) ? 1 : 3,
color: Colors.LbryGreen
},
loading: {
position: 'absolute'
},
downloadInfo: {
marginTop: 8
marginTop: (screenWidthPixels <= 720) ? 4 : 8
},
downloadStorage: {
fontFamily: 'Metropolis-Regular',
@ -51,7 +53,7 @@ const fileListStyle = StyleSheet.create({
color: Colors.ChannelGrey
},
progress: {
marginTop: 4,
marginTop: (screenWidthPixels <= 720) ? 2 : 4,
height: 3,
flex: 1,
flexDirection: 'row'

2
app/src/styles/search.js
View file

@ -21,7 +21,7 @@ const searchStyle = StyleSheet.create({
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 16
marginTop: 8
},
searchInput: {
width: '100%',