Skip to content

Commit

Permalink
fix(ONYX-1442): adjust HomeViewSectionCard component for bigger scree…
Browse files Browse the repository at this point in the history 
…ns (#11321)

* fix: adjust image scaling on ipad

* fix: use HeroUnit component for HomeView section card

* chore
  • Loading branch information
@dariakoko
dariakoko authored Dec 30, 2024
1 parent be46102 commit 0197f09
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 75 deletions.
35 changes: 17 additions & 18 deletions src/app/Scenes/HomeView/Components/HeroUnit.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
import { Box, Button, Flex, Image, Text, Touchable } from "@artsy/palette-mobile"
import { HeroUnitItem } from "app/Scenes/HomeView/Sections/HomeViewSectionHeroUnits"
import { navigate } from "app/system/navigation/navigate"
import { useScreenDimensions } from "app/utils/hooks"
import { PixelRatio } from "react-native"

interface HeroUnitProps {
interface HeroUnitItem {
internalID?: string
title: string
body: string | null | undefined
imageSrc: string
url: string
buttonText: string
}

interface HeroUnitItemProps {
item: HeroUnitItem
onPress?: () => void
}
Expand All @@ -15,32 +22,24 @@ export const HERO_UNIT_CARD_HEIGHT = 250 * fontScale
const CARD_IMAGE_WIDTH = 125
const DESCRIPTION_LINES = fontScale > 1 ? 4 : 3

export const HeroUnit: React.FC<HeroUnitProps> = ({ item, onPress }) => {
export const HeroUnit: React.FC<HeroUnitItemProps> = ({ item, onPress }) => {
const { internalID, title, imageSrc, body, buttonText } = item
const { width: screenWidth } = useScreenDimensions()
const cardImageWidth = screenWidth > 700 ? screenWidth / 2 : CARD_IMAGE_WIDTH
const imageSrc = item.image?.imageURL ?? ""

const handlePress = () => {
onPress?.()

if (item.link.url) {
navigate(item.link.url)
}
}

return (
<Touchable key={item.internalID} onPress={handlePress}>
<Touchable key={internalID} onPress={onPress} haptic="impactLight">
<Flex bg="black100" flexDirection="row" height={HERO_UNIT_CARD_HEIGHT} width={screenWidth}>
<Image height={HERO_UNIT_CARD_HEIGHT} src={imageSrc} width={cardImageWidth} />
<Box p={2} width={screenWidth - cardImageWidth}>
<Text color="white100" mb={1} numberOfLines={2} variant="lg-display">
{item.title}
{title}
</Text>
<Text color="white100" mb={2} numberOfLines={DESCRIPTION_LINES}>
{item.body}
{body}
</Text>
<Button size="small" variant="outlineLight" onPress={handlePress}>
{item.link.text}
<Button size="small" variant="outlineLight" onPress={onPress}>
{buttonText}
</Button>
</Box>
</Flex>
Expand Down
110 changes: 63 additions & 47 deletions src/app/Scenes/HomeView/Sections/HomeViewSectionCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
} from "@artsy/palette-mobile"
import { HomeViewSectionCardQuery } from "__generated__/HomeViewSectionCardQuery.graphql"
import { HomeViewSectionCard_section$key } from "__generated__/HomeViewSectionCard_section.graphql"
import { HeroUnit } from "app/Scenes/HomeView/Components/HeroUnit"
import { HomeViewSectionSentinel } from "app/Scenes/HomeView/Components/HomeViewSectionSentinel"
import { SectionSharedProps } from "app/Scenes/HomeView/Sections/Section"
import { useHomeViewTracking } from "app/Scenes/HomeView/hooks/useHomeViewTracking"
Expand Down Expand Up @@ -42,11 +43,13 @@ export const HomeViewSectionCard: React.FC<HomeViewSectionCardProps> = ({
return null
}

const { title, subtitle, image, buttonText: btnText } = section.card

const imageHeight = height * 0.5

const hasImage = !!section.card.image?.imageURL
const hasImage = !!image?.imageURL
const textColor = hasImage ? "white100" : "black100"
const buttonText = section.card.buttonText ?? "More"
const buttonText = btnText ?? "More"
const route = getRoute(section.card)

const onPress = () => {
Expand All @@ -59,54 +62,67 @@ export const HomeViewSectionCard: React.FC<HomeViewSectionCardProps> = ({

return (
<Flex {...flexProps}>
<Touchable onPress={onPress} haptic="impactLight">
{!!hasImage && (
<Flex position="absolute">
<FastImage
source={{ uri: section.card.image.imageURL }}
style={{ width: width, height: imageHeight }}
resizeMode={isTablet() ? "contain" : "cover"}
/>
<LinearGradient
colors={["rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 1)"]}
start={{ x: 0, y: 0 }}
end={{ x: 0, y: 1 }}
style={{
position: "absolute",
width: "100%",
height: "40%",
bottom: 0,
}}
/>
</Flex>
)}

<Flex justifyContent="flex-end" px={2} pb={2} height={hasImage ? imageHeight : undefined}>
<Text variant="lg-display" color={textColor}>
{section.card.title}
</Text>

<Flex mt={0.5} justifyContent="space-between" flexDirection="row">
<Flex flex={1} mr={2}>
<Text variant="sm-display" color={textColor}>
{section.card.subtitle}
</Text>
{isTablet() ? (
<HeroUnit
item={{
title: title,
body: subtitle,
imageSrc: image?.imageURL ?? "",
url: route,
buttonText: buttonText,
}}
onPress={onPress}
/>
) : (
<Touchable onPress={onPress} haptic="impactLight">
{!!hasImage && (
<Flex position="absolute">
<FastImage
source={{ uri: image.imageURL }}
style={{ width: width, height: imageHeight }}
resizeMode="cover"
/>
<LinearGradient
colors={["rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 1)"]}
start={{ x: 0, y: 0 }}
end={{ x: 0, y: 1 }}
style={{
position: "absolute",
width: "100%",
height: "40%",
bottom: 0,
}}
/>
</Flex>

{!!route && (
<Flex mt={0.5} maxWidth={150}>
<Button
variant={hasImage ? "outlineLight" : "fillDark"}
size="small"
onPress={onPress}
>
{buttonText}
</Button>
)}

<Flex justifyContent="flex-end" px={2} pb={2} height={hasImage ? imageHeight : undefined}>
<Text variant="lg-display" color={textColor}>
{title}
</Text>

<Flex mt={0.5} justifyContent="space-between" flexDirection="row">
<Flex flex={1} mr={2}>
<Text variant="sm-display" color={textColor}>
{subtitle}
</Text>
</Flex>
)}

{!!route && (
<Flex mt={0.5} maxWidth={150}>
<Button
variant={hasImage ? "outlineLight" : "fillDark"}
size="small"
onPress={onPress}
>
{buttonText}
</Button>
</Flex>
)}
</Flex>
</Flex>
</Flex>
</Touchable>
</Touchable>
)}

<HomeViewSectionSentinel
contextModule={section.contextModule as ContextModule}
Expand Down
23 changes: 13 additions & 10 deletions src/app/Scenes/HomeView/Sections/HomeViewSectionHeroUnits.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import { ContextModule } from "@artsy/cohesion"
import { Flex, FlexProps, Skeleton, SkeletonBox, Spacer } from "@artsy/palette-mobile"
import { HomeViewSectionHeroUnitsQuery } from "__generated__/HomeViewSectionHeroUnitsQuery.graphql"
import {
HomeViewSectionHeroUnits_section$data,
HomeViewSectionHeroUnits_section$key,
} from "__generated__/HomeViewSectionHeroUnits_section.graphql"
import { HomeViewSectionHeroUnits_section$key } from "__generated__/HomeViewSectionHeroUnits_section.graphql"
import { PaginationDots } from "app/Components/PaginationDots"
import { HERO_UNIT_CARD_HEIGHT, HeroUnit } from "app/Scenes/HomeView/Components/HeroUnit"
import { HomeViewSectionSentinel } from "app/Scenes/HomeView/Components/HomeViewSectionSentinel"
Expand All @@ -14,10 +11,10 @@ import {
HORIZONTAL_FLATLIST_WINDOW_SIZE,
} from "app/Scenes/HomeView/helpers/constants"
import { useHomeViewTracking } from "app/Scenes/HomeView/hooks/useHomeViewTracking"
import { navigate } from "app/system/navigation/navigate"
import { extractNodes } from "app/utils/extractNodes"
import { useScreenDimensions } from "app/utils/hooks"
import { NoFallback, withSuspense } from "app/utils/hooks/withSuspense"
import { ExtractNodeType } from "app/utils/relayHelpers"
import { isNumber } from "lodash"
import { memo, useRef, useState } from "react"
import { FlatList, ViewabilityConfig, ViewToken } from "react-native"
Expand All @@ -28,10 +25,6 @@ interface HomeViewSectionHeroUnitsProps extends FlexProps {
index: number
}

export type HeroUnitItem = ExtractNodeType<
HomeViewSectionHeroUnits_section$data["heroUnitsConnection"]
>

export const HomeViewSectionHeroUnits: React.FC<HomeViewSectionHeroUnitsProps> = ({
section: sectionProp,
index,
Expand Down Expand Up @@ -72,13 +65,23 @@ export const HomeViewSectionHeroUnits: React.FC<HomeViewSectionHeroUnitsProps> =
keyExtractor={(item) => item.internalID}
renderItem={({ item, index }) => (
<HeroUnit
item={item}
item={{
internalID: item.internalID,
title: item.title,
body: item.body,
imageSrc: item.image?.imageURL ?? "",
url: item.link.url,
buttonText: item.link.text,
}}
onPress={() => {
tracking.tappedHeroUnitGroup(
item.link.url,
section.contextModule as ContextModule,
index
)
if (item.link.url) {
navigate(item.link.url)
}
}}
/>
)}
Expand Down

0 comments on commit 0197f09

Please sign in to comment.