fix: market page filters responsive (#8082)

shapeshift · Nov 5, 2024 · c159a69 · c159a69
1 parent 0304cf5
commit c159a69
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 23 deletions.
diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json
@@ -164,6 +164,7 @@
     "sortBy": "Sort By",
     "orderBy": "Order By",
     "filterBy": "Filter By",
+    "filterAndSort": "Filter and Sort",
     "carousel": {
       "next": "Next",
       "prev": "Previous",

diff --git a/src/components/OrderDropdown/OrderDropdown.tsx b/src/components/OrderDropdown/OrderDropdown.tsx
@@ -21,7 +21,8 @@ type OrderDropdownProps = {
   buttonProps?: ButtonProps
 }
 
-const width = { base: 'full', md: 'auto' }
+const colWidth = { base: '50%', xl: 'auto' }
+const marginBottomProp = { base: 2, xl: 0 }
 
 const chevronDownIcon = <ChevronDownIcon />
 
@@ -47,10 +48,12 @@ export const OrderDropdown: React.FC<OrderDropdownProps> = ({ onClick, value, bu
   }, [translate, value])
 
   return (
-    <Flex alignItems='center' mx={2}>
-      <Text me={4}>{translate('common.orderBy')}</Text>
+    <Flex alignItems='center' mx={2} mb={marginBottomProp}>
+      <Text width={colWidth} me={4}>
+        {translate('common.orderBy')}
+      </Text>
       <Menu>
-        <MenuButton width={width} as={Button} rightIcon={chevronDownIcon} {...buttonProps}>
+        <MenuButton width={colWidth} as={Button} rightIcon={chevronDownIcon} {...buttonProps}>
           {selectedLabel}
         </MenuButton>
         <MenuList zIndex='banner'>

diff --git a/src/components/SortDropdown/SortDropdown.tsx b/src/components/SortDropdown/SortDropdown.tsx
@@ -22,7 +22,9 @@ type SortDropdownProps = {
   options: SortOptionsKeys[]
 }
 
-const width = { base: 'full', md: 'auto' }
+const colWidth = { base: '50%', xl: 'auto' }
+const marginYProp = { base: 2, xl: 0 }
+const marginBottomProp = { base: 4, xl: 0 }
 
 const chevronDownIcon = <ChevronDownIcon />
 
@@ -53,10 +55,12 @@ export const SortDropdown: React.FC<SortDropdownProps> = ({
   }, [translate, value, options])
 
   return (
-    <Flex alignItems='center' mx={2}>
-      <Text me={4}>{translate('common.sortBy')}</Text>
+    <Flex alignItems='center' mx={2} my={marginYProp} mb={marginBottomProp}>
+      <Text width={colWidth} me={4}>
+        {translate('common.sortBy')}
+      </Text>
       <Menu>
-        <MenuButton width={width} as={Button} rightIcon={chevronDownIcon} {...buttonProps}>
+        <MenuButton width={colWidth} as={Button} rightIcon={chevronDownIcon} {...buttonProps}>
           {selectedLabel}
         </MenuButton>
         <MenuList zIndex='banner'>

diff --git a/src/pages/Markets/components/MarketsRow.tsx b/src/pages/Markets/components/MarketsRow.tsx
@@ -1,6 +1,17 @@
-import { ArrowBackIcon } from '@chakra-ui/icons'
+import { ArrowBackIcon, ChevronDownIcon } from '@chakra-ui/icons'
 import type { FlexProps } from '@chakra-ui/react'
-import { Box, Flex, Heading, IconButton, Text } from '@chakra-ui/react'
+import {
+  Box,
+  Button,
+  Flex,
+  Heading,
+  IconButton,
+  Menu,
+  MenuButton,
+  MenuList,
+  Text,
+  useMediaQuery,
+} from '@chakra-ui/react'
 import type { ChainId } from '@shapeshiftoss/caip'
 import { KnownChainIds } from '@shapeshiftoss/types'
 import { useMemo, useState } from 'react'
@@ -13,12 +24,21 @@ import { SortDropdown } from 'components/SortDropdown/SortDropdown'
 import { SortOptionsKeys } from 'components/SortDropdown/types'
 import { selectFeatureFlag } from 'state/slices/selectors'
 import { useAppSelector } from 'state/store'
+import { breakpoints } from 'theme/theme'
 
 import { type MarketsCategories, sortOptionsByCategory } from '../constants'
 import type { RowProps } from '../hooks/useRows'
 
+const chevronDownIcon = <ChevronDownIcon />
+
 const flexAlign = { base: 'flex-start', md: 'flex-end' }
 const flexDirection: FlexProps['flexDir'] = { base: 'column', md: 'row' }
+const colWidth = { base: '50%', xl: 'auto' }
+const chainButtonProps = {
+  width: colWidth,
+  my: { base: 2, xl: 0 },
+}
+const headerMx = { base: 0, xl: -2 }
 
 type MarketsRowProps = {
   title?: string
@@ -54,6 +74,7 @@ export const MarketsRow: React.FC<MarketsRowProps> = ({
     (params.category && sortOptionsByCategory[params.category]?.[0]) ?? SortOptionsKeys.Volume,
   )
   const isArbitrumNovaEnabled = useAppSelector(state => selectFeatureFlag(state, 'ArbitrumNova'))
+  const [isSmallerThanXl] = useMediaQuery(`(max-width: ${breakpoints.xl})`)
 
   const chainIds = useMemo(() => {
     if (!supportedChainIds)
@@ -125,27 +146,62 @@ export const MarketsRow: React.FC<MarketsRowProps> = ({
           </Flex>
           {Subtitle}
         </Box>
-        <Flex alignItems='center' mx={-2}>
-          {showSortFilter && params.category ? (
+        <Flex alignItems='center' mx={headerMx} alignSelf='flex-end'>
+          {params.category && isSmallerThanXl ? (
+            <Menu>
+              <MenuButton as={Button} rightIcon={chevronDownIcon}>
+                {translate('common.filterAndSort')}
+              </MenuButton>
+              <MenuList zIndex='banner' minWidth='340px' px={2}>
+                {showSortFilter && params.category ? (
+                  <SortDropdown
+                    options={sortOptionsByCategory[params.category] ?? []}
+                    value={selectedSort}
+                    onClick={setSelectedSort}
+                  />
+                ) : null}
+                {showOrderFilter ? (
+                  <OrderDropdown value={selectedOrder} onClick={setSelectedOrder} />
+                ) : null}
+                <Flex alignItems='center' mx={2}>
+                  <Text width={colWidth} me={4}>
+                    {translate('common.filterBy')}
+                  </Text>
+                  <ChainDropdown
+                    chainIds={chainIds}
+                    chainId={selectedChainId}
+                    onClick={setSelectedChainId}
+                    showAll
+                    includeBalance
+                    buttonProps={chainButtonProps}
+                  />
+                </Flex>
+              </MenuList>
+            </Menu>
+          ) : null}
+
+          {showSortFilter && params.category && !isSmallerThanXl ? (
             <SortDropdown
               options={sortOptionsByCategory[params.category] ?? []}
               value={selectedSort}
               onClick={setSelectedSort}
             />
           ) : null}
-          {showOrderFilter ? (
+          {showOrderFilter && !isSmallerThanXl ? (
             <OrderDropdown value={selectedOrder} onClick={setSelectedOrder} />
           ) : null}
-          <Flex alignItems='center' mx={2}>
-            <Text me={4}>{translate('common.filterBy')}</Text>
-            <ChainDropdown
-              chainIds={chainIds}
-              chainId={selectedChainId}
-              onClick={setSelectedChainId}
-              showAll
-              includeBalance
-            />
-          </Flex>
+          {!isSmallerThanXl ? (
+            <Flex alignItems='center' mx={2}>
+              <Text me={4}>{translate('common.filterBy')}</Text>
+              <ChainDropdown
+                chainIds={chainIds}
+                chainId={selectedChainId}
+                onClick={setSelectedChainId}
+                showAll
+                includeBalance
+              />
+            </Flex>
+          ) : null}
         </Flex>
       </Flex>
       {children({ selectedChainId, showSparkline, ...childrenProps })}