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;
title: string | React.ReactNode;
className?: string;
padding?: boolean;
noPadding?: boolean;
children: 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}>
<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' ?
<p css={tw`text-sm uppercase`}>
{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}
</div>
<div css={tw`p-4 lg:p-6`}>
<div css={[ !noPadding && tw`px-4 xl:px-5 py-5` ]}>
{children}
</div>
</div>

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

@ -61,11 +61,11 @@ const Sidebar = styled.div<{ $collapsed?: boolean }>`
}
${Wrapper} {
${tw`px-5`};
${tw`px-5`};
& > a {
${tw`justify-center px-0`};
}
& > a {
${tw`justify-center px-0`};
}
}
& > a {

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

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

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

@ -257,18 +257,16 @@ export default function ServerSettingsContainer2 ({ server }: { server: Server }
{({ isSubmitting, isValid }) => (
<Form>
<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`mb-6 lg:mb-10`}>
<BaseSettingsBox/>
</div>
<div css={tw`mb-6 lg:mb-10`}>
<ServerFeatureContainer/>
</div>
<div css={tw`grid grid-cols-1 gap-y-6`}>
<BaseSettingsBox/>
<ServerFeatureContainer/>
<ServerAllocationsContainer server={server}/>
</div>
<div css={tw`flex flex-col`}>
<ServerResourceContainer css={tw`mb-6`}/>
<div css={tw`bg-neutral-700 rounded shadow-md py-2 px-6`}>
<ServerResourceContainer/>
<div css={tw`bg-neutral-700 rounded shadow-md py-2 px-6 mt-6`}>
<div css={tw`flex flex-row`}>
<ServerDeleteButton
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';
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 {
${tw`md:w-full md:flex md:flex-col mb-6 md:mb-0`};
&: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`};
}
${tw`mb-6 sm:mb-0 sm:w-full sm:flex sm:flex-col`};
}
`;