github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Change hover interactions for mobile

Browse Source
pull/943/head
Kamran Ahmed 3 years ago
parent b25111415f
commit 3fe41d2071
3 changed files with 81 additions and 41 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      components/links-list-item.tsx
  2. 4
      components/roadmap/home-roadmap-item.tsx
  3. 109
      pages/index.tsx

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

@ -26,6 +26,15 @@ export function LinksListItem(props: LinksListItemProps) {
color='gray.600' color='gray.600'
alignItems={['flex-start', 'center']} alignItems={['flex-start', 'center']}
justifyContent={'space-between'} justifyContent={'space-between'}
sx={{
'@media (hover: none)': {
'&:hover': {
'& .list-item-title': {
transform: 'none'
}
}
}
}}
_hover={{ _hover={{
textDecoration: 'none', textDecoration: 'none',
color: 'blue.400', color: 'blue.400',

4
components/roadmap/home-roadmap-item.tsx
Unescape View File

@ -40,13 +40,13 @@ export function HomeRoadmapItem(props: RoadmapGridItemProps) {
href={url} href={url}
_hover={{ _hover={{
textDecoration: 'none', textDecoration: 'none',
bg: 'rgba(255,255,255,.10)' bg: 'rgba(255,255,255,.10)',
}} }}
sx={{ sx={{
// On mobile devices, don't change the scale // On mobile devices, don't change the scale
'@media (hover: none)': { '@media (hover: none)': {
'&:hover': { '&:hover': {
transform: 'scale(1)', bg: 'rgba(255,255,255,.05)',
}, },
}, },
}} }}

109
pages/index.tsx
Unescape View File

@ -1,4 +1,12 @@
import { Box, Container, Heading, Link, SimpleGrid, Text, useMediaQuery } from '@chakra-ui/react'; import {
Box,
Container,
Heading,
Link,
SimpleGrid,
Text,
useMediaQuery,
} from '@chakra-ui/react';
import { GlobalHeader } from '../components/global-header'; import { GlobalHeader } from '../components/global-header';
import { Footer } from '../components/footer'; import { Footer } from '../components/footer';
import { UpdatesBanner } from '../components/updates-banner'; import { UpdatesBanner } from '../components/updates-banner';
@ -20,7 +28,7 @@ type HomeProps = {
roadmaps: RoadmapType[]; roadmaps: RoadmapType[];
guides: GuideType[]; guides: GuideType[];
videos: VideoType[]; videos: VideoType[];
} };
export default function Home(props: HomeProps) { export default function Home(props: HomeProps) {
const { roadmaps, guides, videos } = props; const { roadmaps, guides, videos } = props;
@ -28,32 +36,47 @@ export default function Home(props: HomeProps) {
return ( return (
<PageWrapper> <PageWrapper>
<GlobalHeader variant={'transparent'} /> <GlobalHeader variant={'transparent'} />
<Helmet title='Developer Roadmaps' /> <Helmet title="Developer Roadmaps" />
<Box> <Box>
<Container maxW='container.md' pb='90px'> <Container maxW="container.md" pb="90px">
<Box py={['23px', '23px', '35px']} color='gray.200' > <Box py={['23px', '23px', '35px']} color="gray.200">
<Heading color='gray.50' fontSize={['22px', '22px', '28px']} mb={['8px', '8px', '15px']}>Hey there! 👋</Heading> <Heading
<Text fontSize={['14px', '14px', '16px']} mb='10px'> color="gray.50"
<Text fontWeight={500} as='span'>roadmap.sh</Text> is a community effort to create roadmaps, guides and fontSize={['22px', '22px', '28px']}
other educational content mb={['8px', '8px', '15px']}
to help guide the developers in picking up the path and guide their learnings. >
Hey there! 👋
</Heading>
<Text fontSize={['14px', '14px', '16px']} mb="10px">
<Text fontWeight={500} as="span">
roadmap.sh
</Text>{' '}
is a community effort to create roadmaps, guides and other
educational content to help guide the developers in picking up the
path and guide their learnings.
</Text> </Text>
<Text fontSize={['14px', '14px', '16px']}>We also have a <Link textDecoration={'underline'} <Text fontSize={['14px', '14px', '16px']}>
href={siteConfig.url.youtube} We also have a{' '}
onClick={() => event({ <Link
category: 'Subscription', textDecoration={'underline'}
action: 'Clicked the YouTube link', href={siteConfig.url.youtube}
label: 'YouTube link on home' onClick={() =>
})} event({
target='_blank' category: 'Subscription',
fontWeight={600}>YouTube action: 'Clicked the YouTube link',
channel</Link> which we hope you are going to love.</Text> label: 'YouTube link on home',
})
}
target="_blank"
fontWeight={600}
>
YouTube channel
</Link>{' '}
which we hope you are going to love.
</Text>
</Box> </Box>
<SimpleGrid <SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']}>
columns={[1, 2, 3]}
spacing={['10px', '10px', '15px']}
>
{roadmaps.map((roadmap: RoadmapType, counter: number) => ( {roadmaps.map((roadmap: RoadmapType, counter: number) => (
<HomeRoadmapItem <HomeRoadmapItem
isUpcoming={roadmap.isUpcoming} isUpcoming={roadmap.isUpcoming}
@ -69,14 +92,20 @@ export default function Home(props: HomeProps) {
</Container> </Container>
</Box> </Box>
<Box bg='white'> <Box bg="white">
<Container maxW='container.md'> <Container maxW="container.md">
<Box pt='60px' mb={['10px', '15px', '20px']}> <Box pt="60px" mb={['10px', '15px', '20px']}>
<Heading color='green.500' fontSize={['20px', '20px', '25px']} mb='5px'>Video Explanations</Heading> <Heading
color="green.500"
fontSize={['20px', '20px', '25px']}
mb="5px"
>
Video Explanations
</Heading>
</Box> </Box>
<LinksList> <LinksList>
{videos.map(video => ( {videos.map((video) => (
<LinksListItem <LinksListItem
target={'_blank'} target={'_blank'}
key={video.id} key={video.id}
@ -91,25 +120,27 @@ export default function Home(props: HomeProps) {
marginRight: '7px', marginRight: '7px',
width: '18px', width: '18px',
height: '18px', height: '18px',
color: '#9c9c9c' color: '#9c9c9c',
}} }}
/> />
} }
/> />
))} ))}
<DimmedMore href='/watch' text={'View all Videos'} /> <DimmedMore href="/watch" text={'View all Videos'} />
</LinksList> </LinksList>
</Container> </Container>
</Box> </Box>
<Box pb='80px' bg='white'> <Box pb="80px" bg="white">
<Container maxW='container.md' position='relative'> <Container maxW="container.md" position="relative">
<Box pt='40px' mb='20px'> <Box pt="40px" mb="20px">
<Heading color='green.500' fontSize='25px' mb='5px'>Visual Guides</Heading> <Heading color="green.500" fontSize="25px" mb="5px">
Visual Guides
</Heading>
</Box> </Box>
<LinksList> <LinksList>
{guides.map(guide => ( {guides.map((guide) => (
<LinksListItem <LinksListItem
key={guide.id} key={guide.id}
href={`/guides/${guide.id}`} href={`/guides/${guide.id}`}
@ -118,7 +149,7 @@ export default function Home(props: HomeProps) {
subtitle={guide.formattedUpdatedAt!} subtitle={guide.formattedUpdatedAt!}
/> />
))} ))}
<DimmedMore href={'/guides'} text='View all Guides' /> <DimmedMore href={'/guides'} text="View all Guides" />
</LinksList> </LinksList>
</Container> </Container>
</Box> </Box>
@ -135,7 +166,7 @@ export async function getStaticProps() {
props: { props: {
roadmaps: getFeaturedRoadmaps(), roadmaps: getFeaturedRoadmaps(),
guides: getAllGuides(10), guides: getAllGuides(10),
videos: getAllVideos(10) videos: getAllVideos(10),
} },
}; };
} }

Write Preview
Loading…
Cancel
Save