Make interface mobile responsive (#2273)
This commit is contained in:
parent
9a21584c42
commit
9a4c0d8ba7
20 changed files with 130 additions and 69 deletions
|
@ -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,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`};
|
||||
|
|
Reference in a new issue