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

View file

@ -110,7 +110,8 @@ const EditInformationContainer = () => {
/> />
</div> </div>
<div css={tw`mt-6`}> <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 <Field
id={'source'} id={'source'}
name={'source'} name={'source'}
@ -119,7 +120,7 @@ const EditInformationContainer = () => {
/> />
</div> </div>
<div css={tw`mt-6`}> <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mt-6 md:mt-0`}>
<Field <Field
id={'target'} id={'target'}
name={'target'} name={'target'}
@ -127,6 +128,7 @@ const EditInformationContainer = () => {
type={'text'} type={'text'}
/> />
</div> </div>
</div>
<div css={tw`w-full flex flex-row items-center mt-6`}> <div css={tw`w-full flex flex-row items-center mt-6`}>
<div css={tw`flex`}> <div css={tw`flex`}>

View file

@ -200,7 +200,7 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
</div> </div>
<Container collapsed={collapsed}> <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> */} {/* <TransitionRouter> */}
<Switch location={location}> <Switch location={location}>
<Route path={`${match.path}`} component={OverviewContainer} exact/> <Route path={`${match.path}`} component={OverviewContainer} exact/>