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%'};

4
resources/scripts/components/elements/SubNavigation.tsx
View file

@ -4,14 +4,14 @@ import tw from 'twin.macro';
import config from '../../../../tailwind.config';
const SubNavigation = styled.div`
${tw`w-full bg-neutral-700 shadow`};
${tw`w-full bg-neutral-700 shadow overflow-x-auto`};
& > div {
${tw`flex items-center text-sm mx-auto px-2`};
max-width: 1200px;
& > a, & > div {
${tw`inline-block py-3 px-4 text-neutral-300 no-underline transition-all duration-150`};
${tw`inline-block py-3 px-4 text-neutral-300 no-underline whitespace-no-wrap transition-all duration-150`};
&:not(:first-of-type) {
${tw`ml-2`};