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

ui(admin): tweaks to spacing

Browse source
This commit is contained in:
Matthew Penner 2021-10-03 18:26:44 -06:00
parent 817a2bf8ae
commit 6814811a19
No known key found for this signature in database
GPG key ID: BAB67850901908A8
5 changed files with 18 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
resources/scripts/components/admin/AdminBox.tsx
View file

@ -9,15 +9,15 @@ interface Props {
isLoading?: boolean; isLoading?: boolean;
title: string | React.ReactNode; title: string | React.ReactNode;
className?: string; className?: string;
padding?: boolean; noPadding?: boolean;
children: React.ReactNode; children: React.ReactNode;
button?: React.ReactNode; button?: React.ReactNode;
} }
const AdminBox = ({ icon, title, className, isLoading, children, button }: Props) => ( const AdminBox = ({ icon, title, className, isLoading, children, button, noPadding }: Props) => (
<div css={tw`relative rounded shadow-md bg-neutral-700`} className={className}> <div css={tw`relative rounded shadow-md bg-neutral-700`} className={className}>
<SpinnerOverlay visible={isLoading || false}/> <SpinnerOverlay visible={isLoading || false}/>
<div css={tw`flex flex-row bg-neutral-900 rounded-t px-4 lg:px-6 py-3 lg:py-4 border-b border-black`}> <div css={tw`flex flex-row bg-neutral-900 rounded-t px-4 xl:px-5 py-3 border-b border-black`}>
{typeof title === 'string' ? {typeof title === 'string' ?
<p css={tw`text-sm uppercase`}> <p css={tw`text-sm uppercase`}>
{icon && <FontAwesomeIcon icon={icon} css={tw`mr-2 text-neutral-300`}/>}{title} {icon && <FontAwesomeIcon icon={icon} css={tw`mr-2 text-neutral-300`}/>}{title}
@ -27,7 +27,7 @@ const AdminBox = ({ icon, title, className, isLoading, children, button }: Props
} }
{button} {button}
</div> </div>
<div css={tw`p-4 lg:p-6`}> <div css={[ !noPadding && tw`px-4 xl:px-5 py-5` ]}>
{children} {children}
</div> </div>
</div> </div>

2
resources/scripts/components/admin/nests/eggs/EggInstallContainer.tsx
View file

@ -50,7 +50,7 @@ export default function EggInstallContainer ({ egg }: { egg: Egg }) {
}} }}
> >
{({ isSubmitting, isValid }) => ( {({ isSubmitting, isValid }) => (
<AdminBox icon={faScroll} title={'Install Script'} padding={false}> <AdminBox icon={faScroll} title={'Install Script'} noPadding>
<div css={tw`relative pb-4`}> <div css={tw`relative pb-4`}>
<SpinnerOverlay visible={isSubmitting}/> <SpinnerOverlay visible={isSubmitting}/>

12
resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
View file

@ -257,18 +257,16 @@ export default function ServerSettingsContainer2 ({ server }: { server: Server }
{({ isSubmitting, isValid }) => ( {({ isSubmitting, isValid }) => (
<Form> <Form>
<div css={tw`grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8 mb-16`}> <div css={tw`grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8 mb-16`}>
<div css={tw`flex flex-col`}> <div css={tw`grid grid-cols-1 gap-y-6`}>
<div css={tw`mb-6 lg:mb-10`}>
<BaseSettingsBox/> <BaseSettingsBox/>
</div>
<div css={tw`mb-6 lg:mb-10`}>
<ServerFeatureContainer/> <ServerFeatureContainer/>
</div>
<ServerAllocationsContainer server={server}/> <ServerAllocationsContainer server={server}/>
</div> </div>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col`}>
<ServerResourceContainer css={tw`mb-6`}/> <ServerResourceContainer/>
<div css={tw`bg-neutral-700 rounded shadow-md py-2 px-6`}>
<div css={tw`bg-neutral-700 rounded shadow-md py-2 px-6 mt-6`}>
<div css={tw`flex flex-row`}> <div css={tw`flex flex-row`}>
<ServerDeleteButton <ServerDeleteButton
serverId={server?.id} serverId={server?.id}

16
resources/scripts/components/elements/Field.tsx
View file

@ -77,21 +77,9 @@ export const TextareaField = forwardRef<HTMLTextAreaElement, TextareaProps>(
TextareaField.displayName = 'TextareaField'; TextareaField.displayName = 'TextareaField';
export const FieldRow = styled.div` export const FieldRow = styled.div`
${tw`mb-6 md:w-full md:flex md:flex-row`}; ${tw`grid grid-cols-1 sm:grid-cols-2 gap-x-6 mb-6`};
& > div { & > div {
${tw`md:w-full md:flex md:flex-col mb-6 md:mb-0`}; ${tw`mb-6 sm:mb-0 sm:w-full sm:flex sm:flex-col`};
&:first-of-type {
${tw`md:mr-3`};
}
&:not(:first-of-type):not(:last-of-type) {
${tw`md:mx-3`};
}
&:last-of-type {
${tw`md:ml-3`};
}
} }
`; `;