Skip to content

F
frontend
Commit 2cb6cce1 authored by isstuev's avatar isstuev
Browse files
Options

change layout

parent b171266c
Hide whitespace changes
Inline Side-by-side
Showing with 39 additions and 37 deletions
ui/snippets/footer/Footer.tsx
View file @ 2cb6cce1
import { Box, Grid, Flex, Text, Stack, Link, VStack, Skeleton } from '@chakra-ui/react'; import { Box, Grid, Flex, Text, Link, VStack, Skeleton } from '@chakra-ui/react';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import React from 'react'; import React from 'react';
...@@ -74,8 +74,8 @@ const Footer = () => { ...@@ -74,8 +74,8 @@ const Footer = () => {
}); });
return ( return (
<Stack direction={{ base: 'column', lg: 'row' }} p={{ base: 4, lg: 9 }} gap={{ base: 6, lg: 12 }} borderTop="1px solid" borderColor="divider"> <Flex direction={{ base: 'column', lg: 'row' }} p={{ base: 4, lg: 9 }} borderTop="1px solid" borderColor="divider">
<Box flexGrow="1" mb={{ base: 2, lg: 0 }}> <Box flexGrow="1" mb={{ base: 6, lg: 12 }}>
<Flex> <Flex>
<ColorModeToggler/> <ColorModeToggler/>
<NetworkAddToWallet ml={ 8 }/> <NetworkAddToWallet ml={ 8 }/>
...@@ -98,39 +98,41 @@ const Footer = () => { ...@@ -98,39 +98,41 @@ const Footer = () => {
</Text> </Text>
) } ) }
</Box> </Box>
<Box minW={{ base: 'auto', lg: appConfig.footerLinks ? '160px' : 'auto' }}> <Grid gap={{ base: 6, lg: 12 }} gridTemplateColumns={{ base: 'repeat(auto-fill, 160px)', lg: 'repeat(4, 160px)' }}>
{ appConfig.footerLinks && <Text fontWeight={ 500 } mb={ 3 }>Blockscout</Text> } <Box minW="160px" w={ appConfig.footerLinks ? '160px' : '100%' }>
<Grid { appConfig.footerLinks && <Text fontWeight={ 500 } mb={ 3 }>Blockscout</Text> }
gap={ 2 } <Grid
gridTemplateColumns={{ base: '160px', lg: appConfig.footerLinks ? '160px' : 'repeat(3, 160px)' }} gap={ 2 }
gridTemplateRows={{ base: 'auto', lg: appConfig.footerLinks ? 'auto' : 'repeat(2, auto)' }} gridTemplateColumns={ appConfig.footerLinks ? '160px' : { base: 'repeat(auto-fill, 160px)', lg: 'repeat(3, 160px)' } }
gridAutoFlow={{ base: 'row', lg: appConfig.footerLinks ? 'row' : 'column' }} gridTemplateRows={{ base: 'auto', lg: appConfig.footerLinks ? 'auto' : 'repeat(2, auto)' }}
mt={{ base: 0, lg: appConfig.footerLinks ? 0 : '100px' }} gridAutoFlow={{ base: 'row', lg: appConfig.footerLinks ? 'row' : 'column' }}
> mt={{ base: 0, lg: appConfig.footerLinks ? 0 : '100px' }}
{ BLOCSKOUT_LINKS.map(link => <FooterLinkItem { ...link } key={ link.text }/>) } >
</Grid> { BLOCSKOUT_LINKS.map(link => <FooterLinkItem { ...link } key={ link.text }/>) }
</Box> </Grid>
{ appConfig.footerLinks && isLoading && ( </Box>
Array.from(Array(3)).map((i, index) => ( { appConfig.footerLinks && isLoading && (
<Box minW={{ base: 'auto', lg: '160px' }} key={ index }> Array.from(Array(3)).map((i, index) => (
<Skeleton w="120px" h="20px" mb={ 6 }/> <Box minW="160px" key={ index }>
<VStack spacing={ 4 } alignItems="start" mb={ 2 }> <Skeleton w="120px" h="20px" mb={ 6 }/>
{ Array.from(Array(5)).map((i, index) => <Skeleton w="160px" h="14px" key={ index }/>) } <VStack spacing={ 4 } alignItems="start" mb={ 2 }>
</VStack> { Array.from(Array(5)).map((i, index) => <Skeleton w="160px" h="14px" key={ index }/>) }
</Box> </VStack>
)) </Box>
) } ))
{ appConfig.footerLinks && data && ( ) }
data.slice(0, 3).map(linkGroup => ( { appConfig.footerLinks && data && (
<Box minW={{ base: 'auto', lg: '160px' }} key={ linkGroup.title }> data.slice(0, 3).map(linkGroup => (
<Text fontWeight={ 500 } mb={ 3 }>{ linkGroup.title }</Text> <Box minW="160px" key={ linkGroup.title }>
<VStack spacing={ 2 } alignItems="start"> <Text fontWeight={ 500 } mb={ 3 }>{ linkGroup.title }</Text>
{ linkGroup.links.map(link => <FooterLinkItem { ...link } key={ link.text }/>) } <VStack spacing={ 2 } alignItems="start">
</VStack> { linkGroup.links.map(link => <FooterLinkItem { ...link } key={ link.text }/>) }
</Box> </VStack>
)) </Box>
) } ))
</Stack> ) }
</Grid>
</Flex>
); );
}; };
......
ui/snippets/footer/FooterLinkItem.tsx
View file @ 2cb6cce1
...@@ -12,7 +12,7 @@ const FooterLinkItem = ({ icon, iconSize, text, url }: Props) => { ...@@ -12,7 +12,7 @@ const FooterLinkItem = ({ icon, iconSize, text, url }: Props) => {
const textColor = useColorModeValue('gray.600', 'gray.500'); const textColor = useColorModeValue('gray.600', 'gray.500');
return ( return (
<Link href={ url } display="flex" alignItems="center" h={ 6 } color={ textColor }> <Link href={ url } display="flex" alignItems="center" h={ 6 } color={ textColor } target="_blank">
{ icon && ( { icon && (
<Center minW={ 6 } mr="6px"> <Center minW={ 6 } mr="6px">
<Icon boxSize={ iconSize || 5 } as={ icon }/> <Icon boxSize={ iconSize || 5 } as={ icon }/>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment