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