Fix web Home header (#7086)
* Fix header disappearing on web * Make border nicer
This commit is contained in:
@@ -8,8 +8,8 @@ export function useHeaderOffset() {
|
||||
if (isDesktop || isTablet) {
|
||||
return 0
|
||||
}
|
||||
const navBarHeight = 42
|
||||
const tabBarPad = 10 + 10 + 6 // padding + arbitrary
|
||||
const navBarHeight = 52
|
||||
const tabBarPad = 10 + 10 + 3 // padding + border
|
||||
const normalLineHeight = 20 // matches tab bar
|
||||
const tabBarText = normalLineHeight * fontScale
|
||||
return navBarHeight + tabBarPad + tabBarText
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
import React from 'react'
|
||||
import {View} from 'react-native'
|
||||
import Animated from 'react-native-reanimated'
|
||||
import {msg} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {useMinimalShellHeaderTransform} from '#/lib/hooks/useMinimalShellTransform'
|
||||
import {useKawaiiMode} from '#/state/preferences/kawaii'
|
||||
import {useSession} from '#/state/session'
|
||||
import {useShellLayout} from '#/state/shell/shell-layout'
|
||||
@@ -36,7 +34,6 @@ function HomeHeaderLayoutDesktopAndTablet({
|
||||
tabBarAnchor: JSX.Element | null | undefined
|
||||
}) {
|
||||
const t = useTheme()
|
||||
const headerMinimalShellTransform = useMinimalShellHeaderTransform()
|
||||
const {headerHeight} = useShellLayout()
|
||||
const {hasSession} = useSession()
|
||||
const {_} = useLingui()
|
||||
@@ -69,14 +66,11 @@ function HomeHeaderLayoutDesktopAndTablet({
|
||||
)}
|
||||
{tabBarAnchor}
|
||||
<Layout.Center
|
||||
style={[a.sticky, a.z_10, a.align_center, t.atoms.bg, {top: 0}]}>
|
||||
<Animated.View
|
||||
onLayout={e => {
|
||||
headerHeight.set(e.nativeEvent.layout.height)
|
||||
}}
|
||||
style={[headerMinimalShellTransform]}>
|
||||
{children}
|
||||
</Animated.View>
|
||||
style={[a.sticky, a.z_10, a.align_center, t.atoms.bg, {top: 0}]}
|
||||
onLayout={e => {
|
||||
headerHeight.set(e.nativeEvent.layout.height)
|
||||
}}>
|
||||
{children}
|
||||
</Layout.Center>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -199,7 +199,7 @@ const mobileStyles = StyleSheet.create({
|
||||
textAlign: 'center',
|
||||
minWidth: 45,
|
||||
paddingBottom: 10,
|
||||
borderBottomWidth: 2,
|
||||
borderBottomWidth: 3,
|
||||
borderBottomColor: 'transparent',
|
||||
},
|
||||
outerBottomBorder: {
|
||||
|
||||
Reference in New Issue
Block a user