mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-03-11 17:45:38 +00:00
improved layout changes for tablets
This commit is contained in:
tapframe
parent
9246b26493
commit
70fb186ad8
2 changed files with 59 additions and 54 deletions
|
|
@ -32,8 +32,9 @@ interface CastDetailsModalProps {
|
|||
}
|
||||
|
||||
const { width, height } = Dimensions.get('window');
|
||||
const MODAL_WIDTH = Math.min(width - 40, 400);
|
||||
const MODAL_HEIGHT = height * 0.7;
|
||||
const isTablet = width >= 768;
|
||||
const MODAL_WIDTH = isTablet ? Math.min(width * 0.8, 800) : Math.min(width - 40, 400);
|
||||
const MODAL_HEIGHT = isTablet ? Math.min(height * 0.85, 700) : height * 0.7;
|
||||
|
||||
interface PersonDetails {
|
||||
id: number;
|
||||
|
|
@ -165,7 +166,7 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
|
|||
width: MODAL_WIDTH,
|
||||
height: MODAL_HEIGHT,
|
||||
overflow: 'hidden',
|
||||
borderRadius: 24,
|
||||
borderRadius: isTablet ? 32 : 24,
|
||||
backgroundColor: Platform.OS === 'android'
|
||||
? 'rgba(20, 20, 20, 0.95)'
|
||||
: 'transparent',
|
||||
|
|
@ -199,23 +200,23 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
|
|||
<LinearGradient
|
||||
colors={[
|
||||
currentTheme.colors.primary + 'DD',
|
||||
currentTheme.colors.primaryVariant + 'CC',
|
||||
currentTheme.colors.primary + 'AA',
|
||||
]}
|
||||
style={{
|
||||
padding: 20,
|
||||
paddingTop: 24,
|
||||
padding: isTablet ? 24 : 20,
|
||||
paddingTop: isTablet ? 28 : 24,
|
||||
}}
|
||||
>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<View style={{
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: 30,
|
||||
width: isTablet ? 80 : 60,
|
||||
height: isTablet ? 80 : 60,
|
||||
borderRadius: isTablet ? 40 : 30,
|
||||
overflow: 'hidden',
|
||||
marginRight: 16,
|
||||
marginRight: isTablet ? 20 : 16,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
}}>
|
||||
{castMember.profile_path ? (
|
||||
{castMember?.profile_path ? (
|
||||
<Image
|
||||
source={{
|
||||
uri: `https://image.tmdb.org/t/p/w185${castMember.profile_path}`,
|
||||
|
|
@ -232,10 +233,10 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
|
|||
}}>
|
||||
<Text style={{
|
||||
color: '#fff',
|
||||
fontSize: 18,
|
||||
fontSize: isTablet ? 22 : 18,
|
||||
fontWeight: '700',
|
||||
}}>
|
||||
{castMember.name.split(' ').reduce((prev: string, current: string) => prev + current[0], '').substring(0, 2)}
|
||||
{castMember?.name?.split(' ').reduce((prev: string, current: string) => prev + current[0], '').substring(0, 2)}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
|
@ -244,16 +245,16 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
|
|||
<View style={{ flex: 1 }}>
|
||||
<Text style={{
|
||||
color: '#fff',
|
||||
fontSize: 18,
|
||||
fontSize: isTablet ? 22 : 18,
|
||||
fontWeight: '800',
|
||||
marginBottom: 4,
|
||||
}} numberOfLines={2}>
|
||||
{castMember.name}
|
||||
{castMember?.name}
|
||||
</Text>
|
||||
{castMember.character && (
|
||||
{castMember?.character && (
|
||||
<Text style={{
|
||||
color: 'rgba(255, 255, 255, 0.8)',
|
||||
fontSize: 14,
|
||||
fontSize: isTablet ? 16 : 14,
|
||||
fontWeight: '500',
|
||||
}} numberOfLines={2}>
|
||||
as {castMember.character}
|
||||
|
|
@ -263,9 +264,9 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
|
|||
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 18,
|
||||
width: isTablet ? 44 : 36,
|
||||
height: isTablet ? 44 : 36,
|
||||
borderRadius: isTablet ? 22 : 18,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
|
|
@ -273,7 +274,7 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
|
|||
onPress={handleClose}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<MaterialIcons name="close" size={20} color="#fff" />
|
||||
<MaterialIcons name="close" size={isTablet ? 24 : 20} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</LinearGradient>
|
||||
|
|
@ -281,7 +282,7 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
|
|||
{/* Content */}
|
||||
<ScrollView
|
||||
style={{ flex: 1 }}
|
||||
contentContainerStyle={{ padding: 20 }}
|
||||
contentContainerStyle={{ padding: isTablet ? 28 : 20 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{loading ? (
|
||||
|
|
@ -405,16 +406,16 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
|
|||
<View style={{ marginBottom: 20 }}>
|
||||
<Text style={{
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontSize: isTablet ? 20 : 16,
|
||||
fontWeight: '700',
|
||||
marginBottom: 12,
|
||||
marginBottom: isTablet ? 16 : 12,
|
||||
}}>
|
||||
Biography
|
||||
</Text>
|
||||
<Text style={{
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
fontSize: isTablet ? 16 : 14,
|
||||
lineHeight: isTablet ? 24 : 20,
|
||||
fontWeight: '400',
|
||||
}}>
|
||||
{personDetails.biography}
|
||||
|
|
@ -427,16 +428,16 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
|
|||
<View>
|
||||
<Text style={{
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontSize: isTablet ? 20 : 16,
|
||||
fontWeight: '700',
|
||||
marginBottom: 12,
|
||||
marginBottom: isTablet ? 16 : 12,
|
||||
}}>
|
||||
Also Known As
|
||||
</Text>
|
||||
<Text style={{
|
||||
color: 'rgba(255, 255, 255, 0.8)',
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
fontSize: isTablet ? 16 : 14,
|
||||
lineHeight: isTablet ? 24 : 20,
|
||||
}}>
|
||||
{personDetails.also_known_as.slice(0, 4).join(' • ')}
|
||||
</Text>
|
||||
|
|
|
|||
|
|
@ -41,11 +41,14 @@ import { BlurView } from 'expo-blur';
|
|||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { useTheme } from '../contexts/ThemeContext';
|
||||
|
||||
const { width } = Dimensions.get('window');
|
||||
const HORIZONTAL_ITEM_WIDTH = width * 0.3;
|
||||
const { width, height } = Dimensions.get('window');
|
||||
const isTablet = width >= 768;
|
||||
|
||||
// Tablet-optimized poster sizes
|
||||
const HORIZONTAL_ITEM_WIDTH = isTablet ? width * 0.18 : width * 0.3;
|
||||
const HORIZONTAL_POSTER_HEIGHT = HORIZONTAL_ITEM_WIDTH * 1.5;
|
||||
const POSTER_WIDTH = 90;
|
||||
const POSTER_HEIGHT = 135;
|
||||
const POSTER_WIDTH = isTablet ? 70 : 90;
|
||||
const POSTER_HEIGHT = isTablet ? 105 : 135;
|
||||
const RECENT_SEARCHES_KEY = 'recent_searches';
|
||||
const MAX_RECENT_SEARCHES = 10;
|
||||
|
||||
|
|
@ -740,30 +743,30 @@ const styles = StyleSheet.create({
|
|||
flex: 1,
|
||||
},
|
||||
scrollViewContent: {
|
||||
paddingBottom: 20,
|
||||
paddingBottom: isTablet ? 120 : 100, // Extra padding for tablet bottom nav
|
||||
paddingHorizontal: 0,
|
||||
},
|
||||
carouselContainer: {
|
||||
marginBottom: 24,
|
||||
marginBottom: isTablet ? 32 : 24,
|
||||
},
|
||||
carouselTitle: {
|
||||
fontSize: 18,
|
||||
fontSize: isTablet ? 20 : 18,
|
||||
fontWeight: '700',
|
||||
marginBottom: 12,
|
||||
marginBottom: isTablet ? 16 : 12,
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
horizontalListContent: {
|
||||
paddingHorizontal: 12,
|
||||
paddingRight: 8,
|
||||
paddingHorizontal: isTablet ? 16 : 12,
|
||||
paddingRight: isTablet ? 12 : 8,
|
||||
},
|
||||
horizontalItem: {
|
||||
width: HORIZONTAL_ITEM_WIDTH,
|
||||
marginRight: 12,
|
||||
marginRight: isTablet ? 16 : 12,
|
||||
},
|
||||
horizontalItemPosterContainer: {
|
||||
width: HORIZONTAL_ITEM_WIDTH,
|
||||
height: HORIZONTAL_POSTER_HEIGHT,
|
||||
borderRadius: 8,
|
||||
borderRadius: 16,
|
||||
overflow: 'hidden',
|
||||
marginBottom: 8,
|
||||
borderWidth: 1,
|
||||
|
|
@ -773,27 +776,27 @@ const styles = StyleSheet.create({
|
|||
height: '100%',
|
||||
},
|
||||
horizontalItemTitle: {
|
||||
fontSize: 14,
|
||||
fontSize: isTablet ? 12 : 14,
|
||||
fontWeight: '600',
|
||||
lineHeight: 18,
|
||||
lineHeight: isTablet ? 16 : 18,
|
||||
textAlign: 'left',
|
||||
},
|
||||
yearText: {
|
||||
fontSize: 12,
|
||||
fontSize: isTablet ? 10 : 12,
|
||||
marginTop: 2,
|
||||
},
|
||||
recentSearchesContainer: {
|
||||
paddingHorizontal: 16,
|
||||
paddingBottom: 16,
|
||||
paddingTop: 8,
|
||||
paddingBottom: isTablet ? 24 : 16,
|
||||
paddingTop: isTablet ? 12 : 8,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: 'rgba(255,255,255,0.05)',
|
||||
marginBottom: 8,
|
||||
marginBottom: isTablet ? 16 : 8,
|
||||
},
|
||||
recentSearchItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 10,
|
||||
paddingVertical: isTablet ? 12 : 10,
|
||||
paddingHorizontal: 16,
|
||||
marginVertical: 1,
|
||||
},
|
||||
|
|
@ -820,7 +823,8 @@ const styles = StyleSheet.create({
|
|||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 32,
|
||||
paddingHorizontal: isTablet ? 64 : 32,
|
||||
paddingBottom: isTablet ? 120 : 100,
|
||||
},
|
||||
emptyText: {
|
||||
fontSize: 18,
|
||||
|
|
@ -847,7 +851,7 @@ const styles = StyleSheet.create({
|
|||
skeletonPoster: {
|
||||
width: POSTER_WIDTH,
|
||||
height: POSTER_HEIGHT,
|
||||
borderRadius: 8,
|
||||
borderRadius: 12,
|
||||
},
|
||||
skeletonItemDetails: {
|
||||
flex: 1,
|
||||
|
|
@ -886,7 +890,7 @@ const styles = StyleSheet.create({
|
|||
borderRadius: 4,
|
||||
},
|
||||
itemTypeText: {
|
||||
fontSize: 8,
|
||||
fontSize: isTablet ? 7 : 8,
|
||||
fontWeight: '700',
|
||||
},
|
||||
ratingContainer: {
|
||||
|
|
@ -901,7 +905,7 @@ const styles = StyleSheet.create({
|
|||
borderRadius: 4,
|
||||
},
|
||||
ratingText: {
|
||||
fontSize: 10,
|
||||
fontSize: isTablet ? 9 : 10,
|
||||
fontWeight: '700',
|
||||
marginLeft: 2,
|
||||
},
|
||||
|
|
@ -935,4 +939,4 @@ const styles = StyleSheet.create({
|
|||
},
|
||||
});
|
||||
|
||||
export default SearchScreen;
|
||||
export default SearchScreen;
|
||||
Loading…
Reference in a new issue