gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make homepage responsive

Browse Source
This commit is contained in:
Kamran Ahmed
2021-08-28 13:38:29 +02:00
parent 3a7099bebe
commit 2c0d1ef77f
3 changed files with 30 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/global-header.tsx
View File

@ -49,7 +49,7 @@ function DesktopMenuLinks() {
function MobileMenuLinks() { function MobileMenuLinks() {
return ( return (
<Menu> <Menu autoSelect={false}>
<MenuButton <MenuButton
d={['block', 'none', 'none']} d={['block', 'none', 'none']}
as={HamburgerIcon} as={HamburgerIcon}
@ -59,9 +59,12 @@ function MobileMenuLinks() {
cursor='pointer' cursor='pointer'
/> />
<MenuList py={'4px'} rounded='3px' minWidth='150px'> <MenuList py={'4px'} rounded='3px' minWidth='150px'>
<MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px' color='gray.600'>Roadmaps</MenuItem> <MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
<MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px' color='gray.600'>Guides</MenuItem> color='gray.600'>Roadmaps</MenuItem>
<MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px' color='gray.600'>Videos</MenuItem> <MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
color='gray.600'>Guides</MenuItem>
<MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
color='gray.600'>Videos</MenuItem>
<MenuItem py='4px' borderColor='gray.100' fontSize='13px' color='gray.600'>Subscribe</MenuItem> <MenuItem py='4px' borderColor='gray.100' fontSize='13px' color='gray.600'>Subscribe</MenuItem>
</MenuList> </MenuList>
</Menu> </Menu>
@ -73,17 +76,19 @@ export function GlobalHeader() {
<Box bg='gray.900' p='20px 0'> <Box bg='gray.900' p='20px 0'>
<Container maxW='container.md'> <Container maxW='container.md'>
<Flex justifyContent='space-between' alignItems='center'> <Flex justifyContent='space-between' alignItems='center'>
<Link w='100%' <Box>
d='flex' <Link w='100%'
href='/' d='flex'
alignItems='center' href='/'
color='white' alignItems='center'
fontWeight={600} color='white'
_hover={{ textDecoration: 'none' }} fontWeight={600}
fontSize='18px'> _hover={{ textDecoration: 'none' }}
<Image h='30px' w='30px' src='/logo.svg' mr='10px' /> fontSize='18px'>
<Text d={['none', 'none', 'block']} as='span'>roadmap.sh</Text> <Image h='30px' w='30px' src='/logo.svg' mr='10px' />
</Link> <Text d={['none', 'none', 'block']} as='span'>roadmap.sh</Text>
</Link>
</Box>
<DesktopMenuLinks /> <DesktopMenuLinks />
<MobileMenuLinks /> <MobileMenuLinks />
</Flex> </Flex>

9
components/links-list-item.tsx
View File

@ -16,9 +16,10 @@ export function LinksListItem(props: LinksListItemProps) {
fontSize='15px' fontSize='15px'
py='9px' py='9px'
d='flex' d='flex'
flexDirection={['column', 'row', 'row']}
fontWeight={500} fontWeight={500}
color='gray.600' color='gray.600'
alignItems='center' alignItems={['flex-start', 'center']}
justifyContent={'space-between'} justifyContent={'space-between'}
_hover={{ _hover={{
textDecoration: 'none', textDecoration: 'none',
@ -27,14 +28,16 @@ export function LinksListItem(props: LinksListItemProps) {
transform: 'translateX(10px)' transform: 'translateX(10px)'
} }
}} }}
isTruncated
maxWidth='100%'
> >
<Flex alignItems='center' className='list-item-title' transition={'200ms'}> <Flex alignItems='center' className='list-item-title' transition={'200ms'}>
{icon} {icon}
<Text as='span'>{title}</Text> <Text maxWidth={'345px'} isTruncated as='span'>{title}</Text>
{badgeText && {badgeText &&
<Badge pos='relative' top='1px' variant='subtle' colorScheme='purple' ml='10px'>{badgeText}</Badge>} <Badge pos='relative' top='1px' variant='subtle' colorScheme='purple' ml='10px'>{badgeText}</Badge>}
</Flex> </Flex>
<Text as='span' fontSize='13px' color='gray.500'>{subtitle}</Text> <Text mt={['4px', 0]} as='span' fontSize='12px' color='gray.500'>{subtitle}</Text>
</Link> </Link>
); );
} }

8
components/updates-banner.tsx
View File

@ -1,4 +1,4 @@
import { Box, Button, Container, Heading, Stack, Text } from '@chakra-ui/react'; import { Box, Button, Container, Flex, Heading, Stack, Text } from '@chakra-ui/react';
export function UpdatesBanner() { export function UpdatesBanner() {
return ( return (
@ -8,8 +8,8 @@ export function UpdatesBanner() {
<Text color='gray.400' lineHeight='26px' fontSize='16px' mb='20px'>Subscribe yourself to get updates, new <Text color='gray.400' lineHeight='26px' fontSize='16px' mb='20px'>Subscribe yourself to get updates, new
guides, videos and roadmaps in your inbox.</Text> guides, videos and roadmaps in your inbox.</Text>
<Stack isInline spacing='15px'> <Flex flexDirection={['column', 'column', 'row']}>
<Box> <Box mr='20px' mb={['15px', '15px', 0]}>
<Button variant='outline' borderWidth={2} colorScheme='green' _hover={{ color: 'green.200' }}> <Button variant='outline' borderWidth={2} colorScheme='green' _hover={{ color: 'green.200' }}>
Subscribe to Updates Subscribe to Updates
</Button> </Button>
@ -21,7 +21,7 @@ export function UpdatesBanner() {
fontWeight={600}>5$ fontWeight={600}>5$
per month</Text></Text> per month</Text></Text>
</Box> </Box>
</Stack> </Flex>
</Container> </Container>
</Box> </Box>
); );