Rm sticky headers
This commit is contained in:
@@ -51,7 +51,7 @@ import {ExploreInterestsCard} from '#/screens/Search/modules/ExploreInterestsCar
|
|||||||
import {ExploreRecommendations} from '#/screens/Search/modules/ExploreRecommendations'
|
import {ExploreRecommendations} from '#/screens/Search/modules/ExploreRecommendations'
|
||||||
import {ExploreTrendingTopics} from '#/screens/Search/modules/ExploreTrendingTopics'
|
import {ExploreTrendingTopics} from '#/screens/Search/modules/ExploreTrendingTopics'
|
||||||
import {ExploreTrendingVideos} from '#/screens/Search/modules/ExploreTrendingVideos'
|
import {ExploreTrendingVideos} from '#/screens/Search/modules/ExploreTrendingVideos'
|
||||||
import {atoms as a, native, platform, useTheme, web} from '#/alf'
|
import {atoms as a, native, platform, useTheme} from '#/alf'
|
||||||
import {Admonition} from '#/components/Admonition'
|
import {Admonition} from '#/components/Admonition'
|
||||||
import {Button} from '#/components/Button'
|
import {Button} from '#/components/Button'
|
||||||
import * as FeedCard from '#/components/FeedCard'
|
import * as FeedCard from '#/components/FeedCard'
|
||||||
@@ -202,7 +202,6 @@ type ExploreScreenItems =
|
|||||||
|
|
||||||
export function Explore({
|
export function Explore({
|
||||||
focusSearchInput,
|
focusSearchInput,
|
||||||
headerHeight,
|
|
||||||
}: {
|
}: {
|
||||||
focusSearchInput: (tab: 'user' | 'profile' | 'feed') => void
|
focusSearchInput: (tab: 'user' | 'profile' | 'feed') => void
|
||||||
headerHeight: number
|
headerHeight: number
|
||||||
@@ -603,18 +602,7 @@ export function Explore({
|
|||||||
switch (item.type) {
|
switch (item.type) {
|
||||||
case 'topBorder':
|
case 'topBorder':
|
||||||
return (
|
return (
|
||||||
<View
|
<View style={[a.w_full, t.atoms.border_contrast_low, a.border_t]} />
|
||||||
style={[
|
|
||||||
a.w_full,
|
|
||||||
t.atoms.border_contrast_low,
|
|
||||||
a.border_t,
|
|
||||||
headerHeight &&
|
|
||||||
web({
|
|
||||||
position: 'sticky',
|
|
||||||
top: headerHeight,
|
|
||||||
}),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)
|
)
|
||||||
case 'header': {
|
case 'header': {
|
||||||
return (
|
return (
|
||||||
@@ -800,7 +788,6 @@ export function Explore({
|
|||||||
case 'preview:header': {
|
case 'preview:header': {
|
||||||
return (
|
return (
|
||||||
<ModuleHeader.Container
|
<ModuleHeader.Container
|
||||||
headerHeight={headerHeight}
|
|
||||||
style={[
|
style={[
|
||||||
a.pt_xs,
|
a.pt_xs,
|
||||||
t.atoms.border_contrast_low,
|
t.atoms.border_contrast_low,
|
||||||
@@ -888,7 +875,6 @@ export function Explore({
|
|||||||
selectedInterest,
|
selectedInterest,
|
||||||
_,
|
_,
|
||||||
fetchNextPageFeedPreviews,
|
fetchNextPageFeedPreviews,
|
||||||
headerHeight,
|
|
||||||
],
|
],
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import {PressableScale} from '#/lib/custom-animations/PressableScale'
|
|||||||
import {makeCustomFeedLink} from '#/lib/routes/links'
|
import {makeCustomFeedLink} from '#/lib/routes/links'
|
||||||
import {logger} from '#/logger'
|
import {logger} from '#/logger'
|
||||||
import {UserAvatar} from '#/view/com/util/UserAvatar'
|
import {UserAvatar} from '#/view/com/util/UserAvatar'
|
||||||
import {atoms as a, native, useTheme, type ViewStyleProp, web} from '#/alf'
|
import {atoms as a, native, useTheme, type ViewStyleProp} from '#/alf'
|
||||||
import {Button, ButtonIcon} from '#/components/Button'
|
import {Button, ButtonIcon} from '#/components/Button'
|
||||||
import * as FeedCard from '#/components/FeedCard'
|
import * as FeedCard from '#/components/FeedCard'
|
||||||
import {sizes as iconSizes} from '#/components/icons/common'
|
import {sizes as iconSizes} from '#/components/icons/common'
|
||||||
@@ -17,11 +17,9 @@ import {Text, type TextProps} from '#/components/Typography'
|
|||||||
export function Container({
|
export function Container({
|
||||||
style,
|
style,
|
||||||
children,
|
children,
|
||||||
headerHeight,
|
|
||||||
bottomBorder,
|
bottomBorder,
|
||||||
}: {
|
}: {
|
||||||
children: React.ReactNode
|
children: React.ReactNode
|
||||||
headerHeight?: number
|
|
||||||
bottomBorder?: boolean
|
bottomBorder?: boolean
|
||||||
} & ViewStyleProp) {
|
} & ViewStyleProp) {
|
||||||
const t = useTheme()
|
const t = useTheme()
|
||||||
@@ -35,7 +33,6 @@ export function Container({
|
|||||||
a.pb_md,
|
a.pb_md,
|
||||||
a.gap_sm,
|
a.gap_sm,
|
||||||
t.atoms.bg,
|
t.atoms.bg,
|
||||||
headerHeight && web({position: 'sticky', top: headerHeight}),
|
|
||||||
bottomBorder && [a.border_b, t.atoms.border_contrast_low],
|
bottomBorder && [a.border_b, t.atoms.border_contrast_low],
|
||||||
style,
|
style,
|
||||||
]}>
|
]}>
|
||||||
|
|||||||
Reference in New Issue
Block a user