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

Fix mobile UI for allocation rows

Browse source
This commit is contained in:
Dane Everitt 2020-10-03 15:48:31 -07:00
parent 4ff5de7e1b
commit 47d59ca20f
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
2 changed files with 17 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/scripts/components/server/backups/BackupRow.tsx
View file

@ -49,7 +49,7 @@ export default ({ backup, className }: Props) => {
} }
</div> </div>
<div css={tw`flex-1`}> <div css={tw`flex-1`}>
<p css={tw`text-sm mb-1`}> <p css={tw`flex items-center text-sm mb-1`}>
{!backup.isSuccessful && {!backup.isSuccessful &&
<span css={tw`bg-red-500 py-px px-2 rounded-full text-white text-xs uppercase border border-red-600 mr-2`}> <span css={tw`bg-red-500 py-px px-2 rounded-full text-white text-xs uppercase border border-red-600 mr-2`}>
Failed Failed

33
resources/scripts/components/server/network/AllocationRow.tsx
View file

@ -15,7 +15,7 @@ import setServerAllocationNotes from '@/api/server/network/setServerAllocationNo
import useFlash from '@/plugins/useFlash'; import useFlash from '@/plugins/useFlash';
import { ServerContext } from '@/state/server'; import { ServerContext } from '@/state/server';
const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm block`}`; const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm inline-block break-all`}`;
const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`; const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
interface Props { interface Props {
@ -40,22 +40,21 @@ const AllocationRow = ({ allocation, onSetPrimary, onNotesChanged }: Props) => {
}, 750); }, 750);
return ( return (
<GreyRowBox <GreyRowBox $hoverable={false} css={tw`flex-wrap md:flex-no-wrap mt-2`}>
$hoverable={false} <div css={tw`flex items-center w-full md:w-auto`}>
// css={index > 0 ? tw`mt-2 overflow-x-auto` : tw`overflow-x-auto`} <div css={tw`pl-4 pr-6 text-neutral-400`}>
> <FontAwesomeIcon icon={faNetworkWired}/>
<div css={tw`hidden md:block pl-4 pr-6 text-neutral-400`}> </div>
<FontAwesomeIcon icon={faNetworkWired}/> <div css={tw`mr-4 flex-1 md:w-40`}>
<Code>{allocation.alias || allocation.ip}</Code>
<Label>IP Address</Label>
</div>
<div css={tw`w-16 md:w-24 overflow-hidden`}>
<Code>{allocation.port}</Code>
<Label>Port</Label>
</div>
</div> </div>
<div css={tw`mr-4`}> <div css={tw`mt-4 w-full md:mt-0 md:flex-1 md:w-auto`}>
<Code>{allocation.alias || allocation.ip}</Code>
<Label>IP Address</Label>
</div>
<div>
<Code>{allocation.port}</Code>
<Label>Port</Label>
</div>
<div css={tw`px-8 flex-none sm:flex-1 self-start`}>
<InputSpinner visible={loading}> <InputSpinner visible={loading}>
<Textarea <Textarea
css={tw`bg-neutral-800 hover:border-neutral-600 border-transparent`} css={tw`bg-neutral-800 hover:border-neutral-600 border-transparent`}
@ -65,7 +64,7 @@ const AllocationRow = ({ allocation, onSetPrimary, onNotesChanged }: Props) => {
/> />
</InputSpinner> </InputSpinner>
</div> </div>
<div css={tw`w-32 text-right pr-4 sm:pr-0`}> <div css={tw`w-full md:flex-none md:w-32 md:text-center mt-4 md:mt-0 text-right ml-4`}>
{allocation.isDefault ? {allocation.isDefault ?
<span css={tw`bg-green-500 py-1 px-2 rounded text-green-50 text-xs`}>Primary</span> <span css={tw`bg-green-500 py-1 px-2 rounded text-green-50 text-xs`}>Primary</span>
: :