More mobile cleanup
This commit is contained in:
Dane Everitt
parent
47283700a8
commit
f1978683cc
|
|
@ -2,7 +2,7 @@ import styled from 'styled-components/macro';
|
|||
import tw from 'twin.macro';
|
||||
|
||||
const Label = styled.label<{ isLight?: boolean }>`
|
||||
${tw`block text-xs uppercase text-neutral-200 mb-2`};
|
||||
${tw`block text-xs uppercase text-neutral-200 mb-1 sm:mb-2`};
|
||||
${props => props.isLight && tw`text-neutral-700`};
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ const Modal: React.FC<ModalProps> = ({ visible, appear, dismissable, showSpinner
|
|||
</div>
|
||||
</Fade>
|
||||
}
|
||||
<div css={tw`bg-neutral-800 p-6 rounded shadow-md overflow-y-scroll transition-all duration-150`}>
|
||||
<div css={tw`bg-neutral-800 p-3 sm:p-4 md:p-6 rounded shadow-md overflow-y-scroll transition-all duration-150`}>
|
||||
{children}
|
||||
</div>
|
||||
</ModalContainer>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const PageContentBlock: React.FC<PageContentBlockProps> = ({ title, showFlashKey
|
|||
<title>{title}</title>
|
||||
</Helmet>
|
||||
}
|
||||
<ContentContainer css={tw`my-10`} className={className}>
|
||||
<ContentContainer css={tw`my-4 sm:my-10`} className={className}>
|
||||
{showFlashKey &&
|
||||
<FlashMessageRender byKey={showFlashKey} css={tw`mb-4`}/>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -85,16 +85,16 @@ export default () => {
|
|||
description={'Where connections should be allowed from. Use % for wildcards.'}
|
||||
/>
|
||||
</div>
|
||||
<div css={tw`mt-6 text-right`}>
|
||||
<div css={tw`flex flex-wrap justify-end mt-6`}>
|
||||
<Button
|
||||
type={'button'}
|
||||
isSecondary
|
||||
css={tw`mr-2`}
|
||||
css={tw`w-full sm:w-auto sm:mr-2`}
|
||||
onClick={() => setVisible(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type={'submit'}>
|
||||
<Button css={tw`w-full mt-4 sm:w-auto sm:mt-0`} type={'submit'}>
|
||||
Create Database
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -68,7 +68,11 @@ const NetworkContainer = () => {
|
|||
<Spinner size={'large'} centered/>
|
||||
:
|
||||
data.map(({ id, ip, port, alias, notes, isDefault }, index) => (
|
||||
<GreyRowBox key={`${ip}:${port}`} css={index > 0 ? tw`mt-2 overflow-x-auto` : tw`overflow-x-auto`} $hoverable={false}>
|
||||
<GreyRowBox
|
||||
$hoverable={false}
|
||||
key={`${ip}:${port}`}
|
||||
css={index > 0 ? tw`mt-2 overflow-x-auto` : tw`overflow-x-auto`}
|
||||
>
|
||||
<div css={tw`hidden md:block pl-4 pr-6 text-neutral-400`}>
|
||||
<FontAwesomeIcon icon={faNetworkWired}/>
|
||||
</div>
|
||||
|
|
@ -90,7 +94,7 @@ const NetworkContainer = () => {
|
|||
/>
|
||||
</InputSpinner>
|
||||
</div>
|
||||
<div css={tw`w-32 text-right mr-2 md:mr-0`}>
|
||||
<div css={tw`w-32 text-right pr-4 sm:pr-0`}>
|
||||
{isDefault ?
|
||||
<span css={tw`bg-green-500 py-1 px-2 rounded text-green-50 text-xs`}>
|
||||
Primary
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ const EditScheduleModal = ({ schedule, ...props }: Omit<Props, 'onScheduleUpdate
|
|||
|
||||
return (
|
||||
<Modal {...props} showSpinnerOverlay={isSubmitting}>
|
||||
<h3 css={tw`mb-6`}>{schedule ? 'Edit schedule' : 'Create new schedule'}</h3>
|
||||
<h3 css={tw`text-2xl mb-6`}>{schedule ? 'Edit schedule' : 'Create new schedule'}</h3>
|
||||
<FlashMessageRender byKey={'schedule:edit'} css={tw`mb-6`}/>
|
||||
<Form>
|
||||
<Field
|
||||
|
|
@ -38,17 +38,17 @@ const EditScheduleModal = ({ schedule, ...props }: Omit<Props, 'onScheduleUpdate
|
|||
label={'Schedule name'}
|
||||
description={'A human readable identifer for this schedule.'}
|
||||
/>
|
||||
<div css={tw`flex mt-6`}>
|
||||
<div css={tw`flex-1 mr-4`}>
|
||||
<div css={tw`grid grid-cols-2 sm:grid-cols-4 gap-4 mt-6`}>
|
||||
<div>
|
||||
<Field name={'minute'} label={'Minute'}/>
|
||||
</div>
|
||||
<div css={tw`flex-1 mr-4`}>
|
||||
<div>
|
||||
<Field name={'hour'} label={'Hour'}/>
|
||||
</div>
|
||||
<div css={tw`flex-1 mr-4`}>
|
||||
<div>
|
||||
<Field name={'dayOfMonth'} label={'Day of month'}/>
|
||||
</div>
|
||||
<div css={tw`flex-1`}>
|
||||
<div>
|
||||
<Field name={'dayOfWeek'} label={'Day of week'}/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -64,7 +64,7 @@ const EditScheduleModal = ({ schedule, ...props }: Omit<Props, 'onScheduleUpdate
|
|||
/>
|
||||
</div>
|
||||
<div css={tw`mt-6 text-right`}>
|
||||
<Button type={'submit'} disabled={isSubmitting}>
|
||||
<Button css={tw`w-full sm:w-auto`} type={'submit'} disabled={isSubmitting}>
|
||||
{schedule ? 'Save changes' : 'Create schedule'}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ interface Values {
|
|||
}
|
||||
|
||||
const PermissionLabel = styled.label`
|
||||
${tw`flex items-center border border-transparent rounded p-2`};
|
||||
${tw`flex items-center border border-transparent rounded md:p-2`};
|
||||
text-transform: none;
|
||||
|
||||
&:not(.disabled) {
|
||||
|
|
@ -146,7 +146,7 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
|
|||
htmlFor={`permission_${key}_${pkey}`}
|
||||
css={[
|
||||
tw`transition-colors duration-75`,
|
||||
index > 0 ? tw`mt-2` : undefined,
|
||||
index > 0 ? tw`mt-4 sm:mt-2` : undefined,
|
||||
]}
|
||||
className={(!canEditUser || editablePermissions.indexOf(`${key}.${pkey}`) < 0) ? 'disabled' : undefined}
|
||||
>
|
||||
|
|
@ -174,7 +174,7 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
|
|||
</div>
|
||||
<Can action={subuser ? 'user.update' : 'user.create'}>
|
||||
<div css={tw`pb-6 flex justify-end`}>
|
||||
<Button type={'submit'}>
|
||||
<Button type={'submit'} css={tw`w-full sm:w-auto`}>
|
||||
{subuser ? 'Save' : 'Invite User'}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue