diff --git a/src/components/Timeline/Shared/Attachment/index.tsx b/src/components/Timeline/Shared/Attachment/index.tsx index 087754a0..c7a014f3 100644 --- a/src/components/Timeline/Shared/Attachment/index.tsx +++ b/src/components/Timeline/Shared/Attachment/index.tsx @@ -9,6 +9,7 @@ import { StackNavigationProp } from '@react-navigation/stack' import { RootStackParamList } from '@utils/navigation/navigators' import { usePreferencesQuery } from '@utils/queryHooks/preferences' import { StyleConstants } from '@utils/styles/constants' +import { isLargeDevice } from '@utils/styles/scaling' import { chunk } from 'lodash' import React, { useContext, useState } from 'react' import { useTranslation } from 'react-i18next' @@ -179,7 +180,8 @@ const TimelineAttachment = () => { style={{ marginTop: StyleConstants.Spacing.M, flex: 1, - gap: StyleConstants.Spacing.XS + gap: StyleConstants.Spacing.XS, + ...(isLargeDevice && { maxWidth: 375 }) }} > {chunk(status.media_attachments, 2).map((chunk, chunkIndex) => ( diff --git a/src/components/haptics.ts b/src/components/haptics.ts index 57148017..ef77d42a 100644 --- a/src/components/haptics.ts +++ b/src/components/haptics.ts @@ -4,9 +4,6 @@ import { Platform } from 'react-native' const haptics = ( type: 'Success' | 'Warning' | 'Error' | 'Light' | 'Medium' | 'Heavy' ) => { - if (Platform.OS === 'ios' && parseInt(Platform.Version, 10) <= 12) { - return - } if (Platform.OS === 'android') { if (type === 'Error') { Haptics.impactAsync(Haptics.ImpactFeedbackStyle['Light']).catch(() => {}) diff --git a/src/screens/Tabs/Public/Root.tsx b/src/screens/Tabs/Public/Root.tsx index 97f44517..31aa70df 100644 --- a/src/screens/Tabs/Public/Root.tsx +++ b/src/screens/Tabs/Public/Root.tsx @@ -13,6 +13,7 @@ import { getGlobalStorage, setGlobalStorage, useGlobalStorage } from '@utils/sto import { StorageGlobal } from '@utils/storage/global' import { StyleConstants } from '@utils/styles/constants' import layoutAnimation from '@utils/styles/layoutAnimation' +import { isLargeDevice } from '@utils/styles/scaling' import { useTheme } from '@utils/styles/ThemeManager' import { debounce } from 'lodash' import { useCallback, useEffect, useRef, useState } from 'react' @@ -260,7 +261,7 @@ const Explore = ({ route: { key: page } }: { route: { key: 'Explore' } }) => { ? (instanceQuery.data as Mastodon.Instance_V1)?.short_description || instanceQuery.data?.description : undefined, - lines: 2 + lines: isLargeDevice ? 1 : 2 })} diff --git a/src/screens/Tabs/Shared/Account/Attachments.tsx b/src/screens/Tabs/Shared/Account/Attachments.tsx index deb5cc5a..1fe8546a 100644 --- a/src/screens/Tabs/Shared/Account/Attachments.tsx +++ b/src/screens/Tabs/Shared/Account/Attachments.tsx @@ -6,6 +6,7 @@ import { TabLocalStackParamList } from '@utils/navigation/navigators' import { useTimelineQuery } from '@utils/queryHooks/timeline' import { flattenPages } from '@utils/queryHooks/utils' import { StyleConstants } from '@utils/styles/constants' +import { isLargeDevice } from '@utils/styles/scaling' import { useTheme } from '@utils/styles/ThemeManager' import React, { useContext } from 'react' import { Dimensions, Pressable, View } from 'react-native' @@ -20,9 +21,11 @@ const AccountAttachments: React.FC = () => { const navigation = useNavigation>() const { colors } = useTheme() - const DISPLAY_AMOUNT = 6 + const DISPLAY_AMOUNT = isLargeDevice ? 8 : 6 - const width = (Dimensions.get('window').width - StyleConstants.Spacing.Global.PagePadding * 2) / 4 + const width = + (Dimensions.get('window').width - StyleConstants.Spacing.Global.PagePadding * 2) / + (DISPLAY_AMOUNT - 1) const { data } = useTimelineQuery({ page: 'Account', diff --git a/src/utils/styles/scaling.ts b/src/utils/styles/scaling.ts index b17db475..6ace637e 100644 --- a/src/utils/styles/scaling.ts +++ b/src/utils/styles/scaling.ts @@ -1,4 +1,6 @@ -const adaptiveScale = (size: number, factor: number = 0) => +import { Platform } from 'react-native' + +export const adaptiveScale = (size: number, factor: number = 0) => factor ? Math.round(size + size * (factor / 8)) : size -export { adaptiveScale } +export const isLargeDevice = (Platform.OS === 'ios' && Platform.isPad) || Platform.OS === 'macos'