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/1657/head
Kamran Ahmed 3 years ago
parent d7b5f5b28a
commit c44c599b9a
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
Split 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'
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
Unescape 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
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 { 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),
},
};
}

Write Preview
Loading…
Cancel
Save