StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Make interface mobile responsive (#2273)

Browse source
This commit is contained in:
Rihan 2020-09-13 18:02:25 +01:00 • committed by GitHub
parent 9a21584c42
commit 9a4c0d8ba7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 130 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

10
resources/scripts/components/elements/Modal.tsx
View file

@ -4,6 +4,7 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons';
import Spinner from '@/components/elements/Spinner';
import tw from 'twin.macro';
import styled from 'styled-components/macro';
import { breakpoint } from '@/theme';
import Fade from '@/components/elements/Fade';
export interface RequiredModalProps {
@ -26,9 +27,16 @@ export const ModalMask = styled.div`
`;
const ModalContainer = styled.div<{ alignTop?: boolean }>`
${breakpoint('xs')`
max-width: 95%;
`};
${breakpoint('md')`
max-width: 50%;
`};
${tw`relative flex flex-col w-full m-auto`};
max-height: calc(100vh - 8rem);
max-width: 50%;
// @todo max-w-screen-lg perhaps?
${props => props.alignTop && 'margin-top: 10%'};