Skip to content

Commit

Permalink
removing customScrollRestoration from root + fixes in global search, …
Browse files Browse the repository at this point in the history 
…header and z-indexing
  • Loading branch information
@filipc30
filipc30 committed Feb 8, 2024
1 parent d368ba4 commit fc7465d
Show file tree
Hide file tree
Showing 6 changed files with 119 additions and 112 deletions.
46 changes: 23 additions & 23 deletions app/components/custom-scroll-restoration.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
import { useLocation } from '@remix-run/react'
import { useLayoutEffect, useRef, useMemo } from 'react'
// import { useLocation } from '@remix-run/react'
// import { useLayoutEffect, useRef, useMemo } from 'react'

export function CustomScrollRestoration() {
const { pathname, search } = useLocation()
const scrollPositions = useRef<{ [key: string]: number }>({})
// export function CustomScrollRestoration() {
// const { pathname, search } = useLocation()
// const scrollPositions = useRef<{ [key: string]: number }>({})

const paths = useMemo(() => ['/', '', '/?search='], [])
// const paths = useMemo(() => ['/', '', '/?search='], [])

// Only store scroll position for the specific routes
useLayoutEffect(() => {
if (paths.includes(pathname)) {
scrollPositions.current[pathname + search] = window.scrollY
}
}, [pathname, search, paths])
// // Only store scroll position for the specific routes
// useLayoutEffect(() => {
// if (paths.includes(pathname)) {
// scrollPositions.current[pathname + search] = window.scrollY
// }
// }, [pathname, search, paths])

// Only restore scroll position for the specific routes
useLayoutEffect(() => {
if (paths.includes(pathname)) {
const storedPosition = scrollPositions.current[pathname + search]
window.scrollTo(0, storedPosition || 0)
} else {
window.scrollTo(0, 0) // Scroll to top in other routes than "paths"
}
}, [pathname, search, paths])
// // Only restore scroll position for the specific routes
// useLayoutEffect(() => {
// if (paths.includes(pathname)) {
// const storedPosition = scrollPositions.current[pathname + search]
// window.scrollTo(0, storedPosition || 0)
// } else {
// window.scrollTo(0, 0) // Scroll to top in other routes than "paths"
// }
// }, [pathname, search, paths])

return null
}
// return null
// }
2 changes: 1 addition & 1 deletion app/components/headers/header-base.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export function HeaderBase({

return (
<header className={cn('w-full max-md:absolute', routeAdmin && 'max-lg:hidden')}>
<div className="fixed z-9999 w-full max-md:bottom-2 md:top-0">
<div className="fixed z-6000 w-full max-md:bottom-2 md:top-0">
<div
className={cn(
'bg-background max-md:mx-2 max-md:rounded-xl',
Expand Down
11 changes: 5 additions & 6 deletions app/components/modal-backdrop.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,8 @@ export const modalBackDropOnBackdropClassList = cn(
'bg-black/20 h-full z-3000',
)

export const modalBackDropOverMenuClassList = cn(
backdropClassList,
'backdrop-blur-sm',
'bg-black/20 h-full z-4000',
)

export const modalBackDropOverMenuClassList = cn(
backdropClassList,
'backdrop-blur-sm',
'bg-black/20 h-full z-4000',
)
13 changes: 2 additions & 11 deletions app/root.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,13 @@ import {
Scripts,
ScrollRestoration,
useLoaderData,
useLocation,
useMatches,
} from '@remix-run/react'
import { withSentry } from '@sentry/remix'
import { AuthenticityTokenProvider } from 'remix-utils/csrf/react'
import { HoneypotProvider } from 'remix-utils/honeypot/react'
import { z } from 'zod'
import { Confetti } from './components/confetti.tsx'
import { CustomScrollRestoration } from './components/custom-scroll-restoration.tsx'
import { GeneralErrorBoundary } from './components/error-boundary.tsx'
import { FooterBase } from './components/footers/footer-base.tsx'
import { HeaderBase } from './components/headers/header-base.tsx'
Expand Down Expand Up @@ -158,7 +156,7 @@ export async function loader({ request }: DataFunctionArgs) {
csrfToken,

//empty search
status: 'error',
status: 'idle',
searchResults: null,
},
{
Expand Down Expand Up @@ -313,9 +311,6 @@ function Document({
theme?: Theme
env?: Record<string, string>
}) {
const { pathname } = useLocation()
const paths = ['/', '', '/?search=']

return (
<html lang="en" className={`${theme} h-full overflow-x-hidden`}>
<head>
Expand All @@ -336,11 +331,7 @@ function Document({
__html: `window.ENV = ${JSON.stringify(env)}`,
}}
/>
{paths.includes(pathname) ? (
<CustomScrollRestoration />
) : (
<ScrollRestoration nonce={nonce} />
)}
<ScrollRestoration nonce={nonce} />
<Scripts nonce={nonce} />
<LiveReload nonce={nonce} />
</body>
Expand Down
151 changes: 80 additions & 71 deletions app/routes/resources+/__global-search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { type MetaFunction } from '@remix-run/node'
import { Link, useLocation, useSearchParams } from '@remix-run/react'
import { useMemo } from 'react'
import { ErrorList } from '#app/components/forms.tsx'
import { modalBackDropOverMenuClassList } from '#app/components/modal-backdrop.tsx'
import { SearchBar } from '#app/components/search-bar.tsx'
import { Icon } from '#app/components/ui/icon.tsx'
import { cn, stripLeadingSlash, useDelayedIsPending } from '#app/utils/misc.tsx'
Expand Down Expand Up @@ -53,86 +52,96 @@ export function GlobalSearchComponent({
<div
className={cn(
!showSearch ? 'hidden' : '',
'custom-full-height-minus-header absolute mx-auto mb-4 w-full py-16 text-foreground',
'absolute mx-auto mb-4 w-full text-foreground',
classList,
)}
>
{/*sticky to top: sticky top-[65px] */}
<div className="w-full text-center max-md:px-4">

{/* //TODO: fix this modal's height on change of mobile browser's bottom dynamic menu height.. e.g. safari */}
<div
onClick={toggleSearch}
className={modalBackDropOverMenuClassList}
/>
<Icon
size="xl"
onClick={toggleSearch}
className="text-white absolute right-10 top-10 z-5001 cursor-pointer"
name="cross-1"
className='custom-fade-in d-block fixed top-0 left-0 w-full cursor-pointer overflow-hidden transition-all backdrop-blur-md z-9990 h-full bg-black/20'
/>

<div className="relative z-5001">
{/* fixed to top on mobiles: data.status === 'idle' && searchTerm !== '' && "max-md:fixed max-md:w-full max-md:left-1/2 max-md:-translate-x-1/2 max-md:top-[65px]", */}
<SearchBar
actionUrl={stripLeadingSlash(currentUrl)}
status={data.status}
// autoFocus
autoSubmit
placeholder="find your car"
classList="z-3001 w-full flex items-center justify-center"
inputClassList={cn(
'h-14 rounded-full placeholder:capitalize text-center transition-all duration-100 ease-out',
'focus-visible:w-full',
data.status === 'idle' && searchTerm === '' ? 'w-2/3' : 'w-full',
)}
/>
<div className="relative z-9991">
<div className='fixed top-14 left-0 w-full flex flex-col gap-5'>
<Icon
size="xl"
onClick={toggleSearch}
className="cursor-pointer text-white"
name="cross-1"
/>

<div className="relative w-full mx-auto max-w-[calc(100vw-1rem)] md:max-w-2/3">
<SearchBar
actionUrl={stripLeadingSlash(currentUrl)}
status={data.status}
// autoFocus
autoSubmit
placeholder="find your car"
classList="z-3001 w-full flex items-center justify-center"
inputClassList={cn(
'h-14 rounded-full placeholder:capitalize text-center transition-all duration-100 ease-out',
'focus-visible:w-full',
data.status === 'idle' && searchTerm === ''
? 'w-2/3'
: 'w-full',
)}
/>

<div className="absolute top-0 z-3000 w-full">
{data.status === 'idle' ? (
data.searchResults && data.searchResults.length ? (
<ul
className={cn(
'no-scrollbar flex max-h-[420px] w-full flex-col gap-3 overflow-y-scroll rounded-3xl bg-background px-6 pb-6 pt-20 delay-200',
{
'opacity-50': isPending,
},
)}
>
{data.searchResults.map(result => (
<li key={result.id}>
<Link
to={
'/' +
(result.type === 'CarBrand'
? 'brands'
: result.type === 'CarModel'
? 'brands/' + result.carBrandTitle
: result.type === 'Dealer'
? 'dealers'
: '') +
'/' +
result.url
}
className="flex flex-col items-center justify-center rounded-2xl bg-muted px-5 py-8 transition duration-200 hover:bg-highlight hover:text-highlight-foreground"
>
<span className="overflow-hidden text-ellipsis whitespace-nowrap text-center text-body-md">
{result.carBrandTitle} {result.title}
</span>
</Link>
</li>
))}
</ul>
) : (
searchTerm !== '' && (
<div className="flex w-full flex-col gap-2 rounded-3xl bg-background px-6 pb-6 pt-20 delay-200">
<p className="px-5 py-8">
No results for "{searchTerm}" found.
</p>
</div>
)
)
) : data.status === 'error' ? (
<ErrorList errors={['There was an error parsing the results']} />
) : null}
<div className="absolute top-0 z-3000 w-full">
{data.status === 'idle' ? (
data.searchResults && data.searchResults.length ? (
<ul
className={cn(
'no-scrollbar flex max-h-[90vh] w-full flex-col gap-3 overflow-y-scroll rounded-3xl bg-background px-6 pb-6 pt-20 delay-200',
{
'opacity-50': isPending,
},
)}
>
{data.searchResults.map(result => (
<li key={result.id}>
<Link
to={
'/' +
(result.type === 'CarBrand'
? 'brands'
: result.type === 'CarModel'
? 'brands/' + result.carBrandTitle
: result.type === 'Dealer'
? 'dealers'
: '') +
'/' +
result.url
}
className="flex flex-col items-center justify-center rounded-2xl bg-muted px-5 py-8 transition duration-200 hover:bg-highlight hover:text-highlight-foreground"
>
<span className="overflow-hidden text-ellipsis whitespace-nowrap text-center text-body-md">
{result.carBrandTitle} {result.title}
</span>
</Link>
</li>
))}
</ul>
) : (
searchTerm !== '' && (
<div className="flex w-full flex-col gap-2 rounded-3xl bg-background px-6 pb-6 pt-20 delay-200">
<p className="px-5 py-8">
No results for "{searchTerm}" found.
</p>
</div>
)
)
) : data.status === 'error' ? (
<ErrorList
errors={['There was an error parsing the results']}
/>
) : null}
</div>
</div>
</div>
</div>
</div>
Expand Down
8 changes: 8 additions & 0 deletions app/utils/extended-theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ export const extendedTheme = {
'2/3': '66.66%',
'1/4': '25%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
},
Expand Down Expand Up @@ -178,6 +179,10 @@ export const extendedTheme = {
'4001': '4001',
'5000': '5000',
'5001': '5001',
'6000': '6000',
'6001': '6001',
'9990': '9990',
'9991': '9991',
'9999': '9999',
},
backgroundImage: {
Expand All @@ -195,4 +200,7 @@ export const extendedTheme = {
backdropBlur: {
xs: '2px',
},
spacing: {
'1/5': '20%',
},
} satisfies Config['theme']

0 comments on commit fc7465d

Please sign in to comment.