Skip to content

Commit

Permalink
Improve responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
baptadn committed Jul 27, 2020
1 parent 86379ea commit a34928a
Show file tree
Hide file tree
Showing 7 changed files with 53 additions and 27 deletions.
Binary file added front/public/app.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified front/public/p4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions front/src/components/AppHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@ const AppHeader: React.FC<IProps> = ({ repository }) => {
<Stack isInline spacing={4}>
<Link isExternal href={repository.repoUrl}>
<MotionImage
display={['none', 'block']}
rounded={100}
src={repository.repoImg}
alt={repository.name}
Expand Down
9 changes: 6 additions & 3 deletions front/src/components/Demo/model.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
import { Repository } from '@typings/entities'

var dependenciesUpdatedAt = new Date()
dependenciesUpdatedAt.setDate(dependenciesUpdatedAt.getDate() - 2)

export const reactRepo: Repository = {
id: 10,
name: 'reactjs.org',
fullName: 'facebook/reactjs.org',
fullName: 'reactjs/reactjs.org',
githubId: '42',
installationId: '42',
author: 'facebook',
repoImg: 'https://avatars0.githubusercontent.com/u/6412038?s=200&v=4',
createdAt: '2020-07-10T09:25:50.000Z',
dependenciesUpdatedAt: '2020-07-21T09:26:13.000Z',
repoUrl: 'https://github.com/facebook/reactjs.org',
dependenciesUpdatedAt: dependenciesUpdatedAt.toISOString(),
repoUrl: 'https://github.com/reactjs/reactjs.org',
packageJson: {
dependencies: {
'babel-eslint': '^8.0.1',
Expand Down
1 change: 1 addition & 0 deletions front/src/components/Header/HeaderLinks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const HeaderLinks: React.FC<{ loading: boolean }> = ({ loading }) => {
</Button>

<Button
display={['none', 'block']}
onClick={() => {
window.location.href = `${process.env.REACT_APP_API_HOST}/auth/github`
}}
Expand Down
35 changes: 35 additions & 0 deletions front/src/components/Screenshot.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
// @ts-nocheck
import React from 'react'
import { Box, Image } from '@chakra-ui/core'

const Screenshot = () => {
return (
<Box m={3} position="relative" width="100%">
<Box
width="100%"
maxHeight="100%"
maxWidth="100%"
shadow="lg"
as="svg"
viewBox="0 0 940 623"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="none" fill-rule="evenodd">
<rect fill="#FFF" width="940" height="623" rx="9"></rect>
<path
d="M0 36h940V9a9 9 0 0 0-9-9H9a9 9 0 0 0-9 9v27z"
fill="#e8e8e8"
></path>
<circle fill="#FD6157" cx="18" cy="18" r="6"></circle>
<circle fill="#FDBD04" cx="38" cy="18" r="6"></circle>
<circle fill="#30CA2E" cx="58" cy="18" r="6"></circle>
</g>
</Box>
<Box top="5%" position="absolute">
<Image alt="Reactivated.app UI" width="100%" src="/p4.png" />
</Box>
</Box>
)
}

export default Screenshot
34 changes: 10 additions & 24 deletions front/src/containers/Home.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,18 @@
import React from 'react'
import { Button, Text, Box, DarkMode, Flex, Image, Link } from '@chakra-ui/core'
import { Button, Text, Box, DarkMode, Flex, Link } from '@chakra-ui/core'
import { FaGithub } from 'react-icons/fa'
import Header from '@components/Header'
import { Global } from '@emotion/core'
import DemoItemMotion from '../components/Demo/DemoItem'
import { Column } from '../components/Flex'
import HeaderLinks from '@components/Header/HeaderLinks'
import { useHistory } from 'react-router'
import Screenshot from '@components/Screenshot'

interface Props {
loading?: boolean
}

interface ICardProps {
title: string
bullet: number
picture: string
}

const Home = ({ loading = false }: Props) => {
const history = useHistory()

Expand All @@ -31,7 +26,7 @@ const Home = ({ loading = false }: Props) => {
}}
/>
<Box h="auto">
<Box maxWidth="60rem" marginX="auto">
<Box px={2} maxWidth="60rem" marginX="auto">
<Header>
<HeaderLinks loading={loading} />
</Header>
Expand All @@ -42,7 +37,7 @@ const Home = ({ loading = false }: Props) => {
mt={10}
textAlign="center"
color="white"
fontSize="5xl"
fontSize={['3xl', '5xl']}
fontWeight="bold"
>
Keep your JS apps up to date!
Expand All @@ -52,7 +47,7 @@ const Home = ({ loading = false }: Props) => {
maxWidth="40rem"
textAlign="center"
color="whiteAlpha.800"
fontSize="2xl"
fontSize={['xl', '2xl']}
>
<Text as="span" color="white">
Reactivated.app
Expand Down Expand Up @@ -103,30 +98,21 @@ const Home = ({ loading = false }: Props) => {
maxWidth="60rem"
marginX="auto"
>
<Box
minHeight="30rem"
width="100%"
display="flex"
justifyContent="center"
>
<Image
alt="Reactivated.app UI"
width="90%"
shadow="lg"
src="/p4.png"
/>
<Box width="100%" display="flex" justifyContent="center">
<Screenshot />
</Box>
<Box my={10}>
<Column align="center">
<Text
textAlign="center"
borderBottom="6px solid #43ee9c"
fontWeight="bold"
fontSize="4xl"
fontSize={['2xl', '4xl']}
my={5}
>
Curious? Check It Out:
</Text>
<Box w="60%" minW="400px">
<Box w="60%" minW="370px">
<DemoItemMotion whileHover={{ scale: 1.02, x: 10 }} />
</Box>
</Column>
Expand Down

0 comments on commit a34928a

Please sign in to comment.