devstack/authorizer
4
0
Fork 0
Code Pull Requests Actions Activity

login page vertically responsive

Browse Source
This commit is contained in:
akash.dutta 2022-05-12 15:10:24 +05:30
parent 0433d64737
commit 28bed69b2e
1 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
dashboard/src/layouts/AuthLayout.tsx
View File

@ -1,4 +1,4 @@
import { Box, Flex, Image, Text, Spinner, useMediaQuery } from '@chakra-ui/react'; import { Box, Flex, Image, Text, Spinner, useMediaQuery, Stack } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import { useQuery } from 'urql'; import { useQuery } from 'urql';
import { MetaQuery } from '../graphql/queries'; import { MetaQuery } from '../graphql/queries';
@ -6,8 +6,16 @@ import { MetaQuery } from '../graphql/queries';
export function AuthLayout({ children }: { children: React.ReactNode }) { export function AuthLayout({ children }: { children: React.ReactNode }) {
const [{ fetching, data }] = useQuery({ query: MetaQuery }); const [{ fetching, data }] = useQuery({ query: MetaQuery });
const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)'); const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
const [isVerticalRes] = useMediaQuery('(max-height:600px)');
return ( return (
<Flex flexWrap='wrap' h='100vh' bg='gray.100' alignItems='center' justifyContent='center' flexDirection='column'> <Stack
h='100vh'
bg='gray.100'
alignItems='center'
justifyContent='center'
direction={['column', 'column']}
spacing={6}
>
<Flex alignItems='center'> <Flex alignItems='center'>
<Image src='https://authorizer.dev/images/logo.png' alt='logo' height='50' /> <Image src='https://authorizer.dev/images/logo.png' alt='logo' height='50' />
<Text fontSize='x-large' ml='3' letterSpacing='3'> <Text fontSize='x-large' ml='3' letterSpacing='3'>
@ -27,6 +35,6 @@ export function AuthLayout({ children }: { children: React.ReactNode }) {
</Text> </Text>
</> </>
)} )}
</Flex> </Stack>
); );
} }