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

Change hover interactions for mobile

Browse Source
This commit is contained in:
Kamran Ahmed
2021-12-08 19:10:44 +01:00
parent b25111415f
commit 3fe41d2071
3 changed files with 81 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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