mirror/checktheroads-hyperglass
1
0
Fork 0
mirror of https://github.com/checktheroads/hyperglass synced 2024-05-11 05:55:08 +00:00
Code Releases Activity

fix location card layout

Browse Source
This commit is contained in:
thatmattlove
2024-02-17 16:19:31 -05:00
parent 0397605fc6
commit ae2753b695
2 changed files with 36 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
hyperglass/ui/components/location-card.tsx
View File

@@ -17,9 +17,8 @@ const LocationCardWrapper = motionChakra('div', {
baseStyle: {
py: 4,
px: 6,
w: '100%',
minW: 'xs',
maxW: 'sm',
maxW: 'md',
mx: 'auto',
shadow: 'sm',
rounded: 'lg',

46
hyperglass/ui/components/query-location.tsx
View File

@@ -1,5 +1,5 @@
import { useMemo } from 'react';
import { Wrap, VStack, Flex, chakra } from '@chakra-ui/react';
import { Wrap, Stack, Flex, chakra } from '@chakra-ui/react';
import { useFormContext } from 'react-hook-form';
import { Select, LocationCard } from '~/components';
import { useConfig } from '~/context';
@@ -114,13 +114,16 @@ export const QueryLocation = (props: QueryLocationProps): JSX.Element => {
if (element === 'cards') {
return (
<Wrap align="flex-start" justify={{ base: 'center', lg: 'space-between' }} shouldWrapChildren>
{options.map(group => (
<VStack key={group.label} align="center">
<chakra.h3 fontSize={{ base: 'sm', md: 'md' }} alignSelf="flex-start" opacity={0.5}>
{group.label}
</chakra.h3>
{group.options.map(opt => {
<>
{options.length === 1 ? (
<Wrap
p={{ lg: 4 }}
align="flex-start"
shouldWrapChildren
spacing={{ base: 4, lg: 8 }}
justify={{ base: 'center', lg: 'flex-start' }}
>
{options[0].options.map(opt => {
return (
<LocationCard
key={opt.label}
@@ -131,9 +134,30 @@ export const QueryLocation = (props: QueryLocationProps): JSX.Element => {
/>
);
})}
</VStack>
))}
</Wrap>
</Wrap>
) : (
<>
{options.map(group => (
<Stack key={group.label} align="center">
<chakra.h3 fontSize={{ base: 'sm', md: 'md' }} alignSelf="flex-start" opacity={0.5}>
{group.label}
</chakra.h3>
{group.options.map(opt => {
return (
<LocationCard
key={opt.label}
option={opt}
onChange={handleCardChange}
hasError={noOverlap}
defaultChecked={form.queryLocation.includes(opt.value)}
/>
);
})}
</Stack>
))}
</>
)}
</>
);
} else if (element === 'select') {
return (