Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix mobile search issues #1411

Merged
merged 3 commits into from
May 17, 2024
Merged

Fix mobile search issues #1411

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c7bc0f2
Hide clear button when mobile search is collapsed
buberdds May 14, 2024
8c0bf74
Submit search form only when value changes
buberdds May 14, 2024
3c176e7
Hide footer search in mobile homepage
buberdds May 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .changelog/1411.bugfix.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Fix mobile search issues
4 changes: 3 additions & 1 deletion src/app/components/AppendMobileSearch/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { SearchScope } from '../../../types/searchScope'

interface AppendMobileSearchProps {
action?: ReactNode
enableMobileSearch?: boolean
}

interface AppendMobileSearchLayoutProps {
Expand Down Expand Up @@ -41,6 +42,7 @@ export const AppendMobileSearch: FC<PropsWithChildren<AppendMobileSearchProps> &
scope,
children,
action,
enableMobileSearch = true,
}) => {
const { isMobile } = useScreenSize()

Expand All @@ -50,7 +52,7 @@ export const AppendMobileSearch: FC<PropsWithChildren<AppendMobileSearchProps> &

{action}

{isMobile && (
{isMobile && enableMobileSearch && (
<SearchWrapper>
<Search scope={scope} variant="expandable" />
</SearchWrapper>
Expand Down
17 changes: 12 additions & 5 deletions src/app/components/PageLayout/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,13 @@ import { SearchScope } from '../../../types/searchScope'
import { api, github } from '../../utils/externalLinks'
import { ReopenAnalyticsConsentButton } from 'app/components/AnalyticsConsent'

const FooterBox = styled(Box)(({ theme }) => ({
const FooterBox = styled(Box, {
shouldForwardProp: prop => prop !== 'enableMobileSearch',
})<{ enableMobileSearch: boolean }>(({ theme, enableMobileSearch }) => ({
display: 'flex',
width: '100%',
justifyContent: 'space-between',
padding: theme.spacing(5, 4),
padding: theme.spacing(5, enableMobileSearch ? 4 : 0),
[theme.breakpoints.up('sm')]: {
flex: '0 1 100%',
padding: theme.spacing(5, 0),
Expand Down Expand Up @@ -44,9 +46,10 @@ const StyledTypography = styled(Typography)(() => ({
interface FooterProps {
scope?: SearchScope
mobileSearchAction?: ReactNode
enableMobileSearch?: boolean
}

export const Footer: FC<FooterProps> = ({ scope, mobileSearchAction }) => {
export const Footer: FC<FooterProps> = ({ scope, mobileSearchAction, enableMobileSearch = true }) => {
const theme = useTheme()
const { t } = useTranslation()
const { isMobile, isTablet } = useScreenSize()
Expand All @@ -56,9 +59,13 @@ export const Footer: FC<FooterProps> = ({ scope, mobileSearchAction }) => {

return (
<footer>
<FooterBox>
<FooterBox enableMobileSearch={enableMobileSearch}>
{isTablet ? (
<AppendMobileSearch scope={scope} action={isMobile && mobileSearchAction}>
<AppendMobileSearch
scope={scope}
action={isMobile && mobileSearchAction}
enableMobileSearch={enableMobileSearch}
>
<StyledTypography variant="footer">
<Box sx={{ whiteSpace: 'nowrap' }}>{t('footer.mobileTitle')} |</Box>
<Box sx={privacyPolicyLinkStyles}>
Expand Down
5 changes: 4 additions & 1 deletion src/app/components/Search/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,9 @@ const SearchForm = styled('form', {
display: 'none',
},
[`.${inputAdornmentClasses.positionEnd}`]: {
'button[type="button"]': {
display: 'none',
},
lubej marked this conversation as resolved.
Show resolved Hide resolved
marginLeft: 0,
},
},
Expand Down Expand Up @@ -139,7 +142,7 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o

const onFormSubmit = (e?: FormEvent) => {
e?.preventDefault()
if (value) {
if (value && value !== valueInSearchParams) {
navigate(RouteUtils.getSearchRoute(scope, valueWithoutPrefix))
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/app/pages/HomePage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ export const HomePage: FC = () => {
</Content>

<FooterStyled>
<Footer />
<Footer enableMobileSearch={false} />
</FooterStyled>
</HomepageLayout>
</>
Expand Down
Loading