Couple tweaks
This commit is contained in:
@@ -70,8 +70,6 @@ import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
|
|||||||
import {SettingsGear2_Stroke2_Corner0_Rounded as Gear} from '#/components/icons/SettingsGear2'
|
import {SettingsGear2_Stroke2_Corner0_Rounded as Gear} from '#/components/icons/SettingsGear2'
|
||||||
import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
|
import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
|
||||||
|
|
||||||
const HEADER_HEIGHT = 56
|
|
||||||
|
|
||||||
function Loader() {
|
function Loader() {
|
||||||
const pal = usePalette('default')
|
const pal = usePalette('default')
|
||||||
const {isMobile} = useWebMediaQueries()
|
const {isMobile} = useWebMediaQueries()
|
||||||
@@ -420,12 +418,12 @@ function useQueryManager({initialQuery}: {initialQuery: string}) {
|
|||||||
return parseSearchQuery(initialQuery || '')
|
return parseSearchQuery(initialQuery || '')
|
||||||
}, [initialQuery])
|
}, [initialQuery])
|
||||||
const prevInitialQuery = React.useRef(initialQuery)
|
const prevInitialQuery = React.useRef(initialQuery)
|
||||||
|
|
||||||
const [lang, setLang] = React.useState(
|
const [lang, setLang] = React.useState(
|
||||||
initialParams.lang || contentLanguages[0],
|
initialParams.lang || contentLanguages[0],
|
||||||
)
|
)
|
||||||
|
|
||||||
if (initialQuery !== prevInitialQuery.current) {
|
if (initialQuery !== prevInitialQuery.current) {
|
||||||
|
// handle new queryParam change (from manual search entry)
|
||||||
prevInitialQuery.current = initialQuery
|
prevInitialQuery.current = initialQuery
|
||||||
setLang(initialParams.lang || contentLanguages[0])
|
setLang(initialParams.lang || contentLanguages[0])
|
||||||
}
|
}
|
||||||
@@ -531,7 +529,10 @@ let SearchScreenInner = ({
|
|||||||
style={[
|
style={[
|
||||||
pal.border,
|
pal.border,
|
||||||
pal.view,
|
pal.view,
|
||||||
styles.tabBarContainer,
|
web({
|
||||||
|
position: isWeb ? 'sticky' : '',
|
||||||
|
zIndex: 1,
|
||||||
|
}),
|
||||||
{top: isWeb ? headerHeight : undefined},
|
{top: isWeb ? headerHeight : undefined},
|
||||||
]}>
|
]}>
|
||||||
<TabBar items={sections.map(section => section.title)} {...props} />
|
<TabBar items={sections.map(section => section.title)} {...props} />
|
||||||
@@ -621,7 +622,11 @@ export function SearchScreen(
|
|||||||
})
|
})
|
||||||
const showFiltersButton = Boolean(query && !showAutocomplete)
|
const showFiltersButton = Boolean(query && !showAutocomplete)
|
||||||
const [showFilters, setShowFilters] = React.useState(false)
|
const [showFilters, setShowFilters] = React.useState(false)
|
||||||
const headerHeight = HEADER_HEIGHT + (showFilters ? 40 : 0)
|
/*
|
||||||
|
* Arbitrary sizing, so guess and check, used for sticky header alignment and
|
||||||
|
* sizing.
|
||||||
|
*/
|
||||||
|
const headerHeight = 56 + (showFilters ? 40 : 0)
|
||||||
|
|
||||||
useFocusEffect(
|
useFocusEffect(
|
||||||
useNonReactiveCallback(() => {
|
useNonReactiveCallback(() => {
|
||||||
@@ -1226,18 +1231,6 @@ function scrollToTopWeb() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
header: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
paddingHorizontal: 12,
|
|
||||||
paddingLeft: 13,
|
|
||||||
paddingVertical: 4,
|
|
||||||
height: isWeb ? HEADER_HEIGHT : undefined,
|
|
||||||
// @ts-ignore web only
|
|
||||||
position: isWeb ? 'sticky' : '',
|
|
||||||
top: 0,
|
|
||||||
zIndex: 1,
|
|
||||||
},
|
|
||||||
headerMenuBtn: {
|
headerMenuBtn: {
|
||||||
width: 30,
|
width: 30,
|
||||||
height: 30,
|
height: 30,
|
||||||
@@ -1269,11 +1262,6 @@ const styles = StyleSheet.create({
|
|||||||
zIndex: -1,
|
zIndex: -1,
|
||||||
elevation: -1, // For Android
|
elevation: -1, // For Android
|
||||||
},
|
},
|
||||||
tabBarContainer: {
|
|
||||||
// @ts-ignore web only
|
|
||||||
position: isWeb ? 'sticky' : '',
|
|
||||||
zIndex: 1,
|
|
||||||
},
|
|
||||||
searchHistoryContainer: {
|
searchHistoryContainer: {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
paddingHorizontal: 12,
|
paddingHorizontal: 12,
|
||||||
|
|||||||
Reference in New Issue
Block a user