admin(ui): make database and mount edit pages more responsive

This commit is contained in:
Matthew Penner 2021-01-10 11:40:30 -07:00
parent 52b2463281
commit abd33c2384
3 changed files with 24 additions and 22 deletions

View File

@ -98,8 +98,8 @@ const EditInformationContainer = () => {
/>
</div>
<div css={tw`w-full flex flex-row mt-6`}>
<div css={tw`w-full flex flex-col mr-4`}>
<div css={tw`md:w-full md:flex md:flex-row mt-6`}>
<div css={tw`md:w-full md:flex md:flex-col md:mr-4 mt-6 md:mt-0`}>
<Field
id={'host'}
name={'host'}
@ -108,7 +108,7 @@ const EditInformationContainer = () => {
/>
</div>
<div css={tw`w-full flex flex-col ml-4`}>
<div css={tw`md:w-full md:flex md:flex-col md:ml-4 mt-6 md:mt-0`}>
<Field
id={'port'}
name={'port'}
@ -118,8 +118,8 @@ const EditInformationContainer = () => {
</div>
</div>
<div css={tw`w-full flex flex-row mt-6`}>
<div css={tw`w-full flex flex-col mr-4`}>
<div css={tw`md:w-full md:flex md:flex-row mt-6`}>
<div css={tw`md:w-full md:flex md:flex-col md:mr-4 mt-6 md:mt-0`}>
<Field
id={'username'}
name={'username'}
@ -128,7 +128,7 @@ const EditInformationContainer = () => {
/>
</div>
<div css={tw`w-full flex flex-col ml-4`}>
<div css={tw`md:w-full md:flex md:flex-col md:ml-4 mt-6 md:mt-0`}>
<Field
id={'password'}
name={'password'}

View File

@ -110,22 +110,24 @@ const EditInformationContainer = () => {
/>
</div>
<div css={tw`mt-6`}>
<Field
id={'source'}
name={'source'}
label={'Source'}
type={'text'}
/>
</div>
<div css={tw`md:w-full md:flex md:flex-row mt-6`}>
<div css={tw`md:w-full md:flex md:flex-col md:mr-4 mt-6 md:mt-0`}>
<Field
id={'source'}
name={'source'}
label={'Source'}
type={'text'}
/>
</div>
<div css={tw`mt-6`}>
<Field
id={'target'}
name={'target'}
label={'Target'}
type={'text'}
/>
<div css={tw`md:w-full md:flex md:flex-col md:ml-4 mt-6 md:mt-0`}>
<Field
id={'target'}
name={'target'}
label={'Target'}
type={'text'}
/>
</div>
</div>
<div css={tw`w-full flex flex-row items-center mt-6`}>

View File

@ -200,7 +200,7 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
</div>
<Container collapsed={collapsed}>
<div css={tw`md:min-h-screen w-full flex flex-col px-6 md:px-16 py-12`} style={{ maxWidth: '86rem' }}>
<div css={tw`md:min-h-screen w-full flex flex-col px-6 md:px-16 py-6 md:py-12`} style={{ maxWidth: '86rem' }}>
{/* <TransitionRouter> */}
<Switch location={location}>
<Route path={`${match.path}`} component={OverviewContainer} exact/>