Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

More mobile cleanup

Browse source
This commit is contained in:
Dane Everitt 2020-09-13 10:49:57 -07:00
parent 47283700a8
commit f1978683cc
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
7 changed files with 22 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/scripts/components/elements/Label.tsx
View file

@ -2,7 +2,7 @@ import styled from 'styled-components/macro';
import tw from 'twin.macro'; import tw from 'twin.macro';
const Label = styled.label<{ isLight?: boolean }>` 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`}; ${props => props.isLight && tw`text-neutral-700`};
`; `;

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

@ -113,7 +113,7 @@ const Modal: React.FC<ModalProps> = ({ visible, appear, dismissable, showSpinner
</div> </div>
</Fade> </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} {children}
</div> </div>
</ModalContainer> </ModalContainer>

2
resources/scripts/components/elements/PageContentBlock.tsx
View file

@ -20,7 +20,7 @@ const PageContentBlock: React.FC<PageContentBlockProps> = ({ title, showFlashKey
<title>{title}</title> <title>{title}</title>
</Helmet> </Helmet>
} }
<ContentContainer css={tw`my-10`} className={className}> <ContentContainer css={tw`my-4 sm:my-10`} className={className}>
{showFlashKey && {showFlashKey &&
<FlashMessageRender byKey={showFlashKey} css={tw`mb-4`}/> <FlashMessageRender byKey={showFlashKey} css={tw`mb-4`}/>
} }

6
resources/scripts/components/server/databases/CreateDatabaseButton.tsx
View file

@ -85,16 +85,16 @@ export default () => {
description={'Where connections should be allowed from. Use % for wildcards.'} description={'Where connections should be allowed from. Use % for wildcards.'}
/> />
</div> </div>
<div css={tw`mt-6 text-right`}> <div css={tw`flex flex-wrap justify-end mt-6`}>
<Button <Button
type={'button'} type={'button'}
isSecondary isSecondary
css={tw`mr-2`} css={tw`w-full sm:w-auto sm:mr-2`}
onClick={() => setVisible(false)} onClick={() => setVisible(false)}
> >
Cancel Cancel
</Button> </Button>
<Button type={'submit'}> <Button css={tw`w-full mt-4 sm:w-auto sm:mt-0`} type={'submit'}>
Create Database Create Database
</Button> </Button>
</div> </div>

8
resources/scripts/components/server/network/NetworkContainer.tsx
View file

@ -68,7 +68,11 @@ const NetworkContainer = () => {
<Spinner size={'large'} centered/> <Spinner size={'large'} centered/>
: :
data.map(({ id, ip, port, alias, notes, isDefault }, index) => ( 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`}> <div css={tw`hidden md:block pl-4 pr-6 text-neutral-400`}>
<FontAwesomeIcon icon={faNetworkWired}/> <FontAwesomeIcon icon={faNetworkWired}/>
</div> </div>
@ -90,7 +94,7 @@ const NetworkContainer = () => {
/> />
</InputSpinner> </InputSpinner>
</div> </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 ? {isDefault ?
<span css={tw`bg-green-500 py-1 px-2 rounded text-green-50 text-xs`}> <span css={tw`bg-green-500 py-1 px-2 rounded text-green-50 text-xs`}>
Primary Primary

14
resources/scripts/components/server/schedules/EditScheduleModal.tsx
View file

@ -30,7 +30,7 @@ const EditScheduleModal = ({ schedule, ...props }: Omit<Props, 'onScheduleUpdate
return ( return (
<Modal {...props} showSpinnerOverlay={isSubmitting}> <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`}/> <FlashMessageRender byKey={'schedule:edit'} css={tw`mb-6`}/>
<Form> <Form>
<Field <Field
@ -38,17 +38,17 @@ const EditScheduleModal = ({ schedule, ...props }: Omit<Props, 'onScheduleUpdate
label={'Schedule name'} label={'Schedule name'}
description={'A human readable identifer for this schedule.'} description={'A human readable identifer for this schedule.'}
/> />
<div css={tw`flex mt-6`}> <div css={tw`grid grid-cols-2 sm:grid-cols-4 gap-4 mt-6`}>
<div css={tw`flex-1 mr-4`}> <div>
<Field name={'minute'} label={'Minute'}/> <Field name={'minute'} label={'Minute'}/>
</div> </div>
<div css={tw`flex-1 mr-4`}> <div>
<Field name={'hour'} label={'Hour'}/> <Field name={'hour'} label={'Hour'}/>
</div> </div>
<div css={tw`flex-1 mr-4`}> <div>
<Field name={'dayOfMonth'} label={'Day of month'}/> <Field name={'dayOfMonth'} label={'Day of month'}/>
</div> </div>
<div css={tw`flex-1`}> <div>
<Field name={'dayOfWeek'} label={'Day of week'}/> <Field name={'dayOfWeek'} label={'Day of week'}/>
</div> </div>
</div> </div>
@ -64,7 +64,7 @@ const EditScheduleModal = ({ schedule, ...props }: Omit<Props, 'onScheduleUpdate
/> />
</div> </div>
<div css={tw`mt-6 text-right`}> <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'} {schedule ? 'Save changes' : 'Create schedule'}
</Button> </Button>
</div> </div>

6
resources/scripts/components/server/users/EditSubuserModal.tsx
View file

@ -31,7 +31,7 @@ interface Values {
} }
const PermissionLabel = styled.label` 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; text-transform: none;
&:not(.disabled) { &:not(.disabled) {
@ -146,7 +146,7 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
htmlFor={`permission_${key}_${pkey}`} htmlFor={`permission_${key}_${pkey}`}
css={[ css={[
tw`transition-colors duration-75`, 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} className={(!canEditUser || editablePermissions.indexOf(`${key}.${pkey}`) < 0) ? 'disabled' : undefined}
> >
@ -174,7 +174,7 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
</div> </div>
<Can action={subuser ? 'user.update' : 'user.create'}> <Can action={subuser ? 'user.update' : 'user.create'}>
<div css={tw`pb-6 flex justify-end`}> <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'} {subuser ? 'Save' : 'Invite User'}
</Button> </Button>
</div> </div>