Make interface mobile responsive (#2273)

This commit is contained in:
Rihan 2020-09-13 18:02:25 +01:00 committed by GitHub
parent 9a21584c42
commit 9a4c0d8ba7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 130 additions and 69 deletions

View file

@ -68,8 +68,8 @@ const NetworkContainer = () => {
<Spinner size={'large'} centered/>
:
data.map(({ id, ip, port, alias, notes, isDefault }, index) => (
<GreyRowBox key={`${ip}:${port}`} css={index > 0 ? tw`mt-2` : undefined} $hoverable={false}>
<div css={tw`pl-4 pr-6 text-neutral-400`}>
<GreyRowBox key={`${ip}:${port}`} css={index > 0 ? tw`mt-2 overflow-x-auto` : tw`overflow-x-auto`} $hoverable={false}>
<div css={tw`hidden md:block pl-4 pr-6 text-neutral-400`}>
<FontAwesomeIcon icon={faNetworkWired}/>
</div>
<div css={tw`mr-4`}>
@ -80,7 +80,7 @@ const NetworkContainer = () => {
<Code>{port}</Code>
<Label>Port</Label>
</div>
<div css={tw`px-8 flex-1 self-start`}>
<div css={tw`px-8 flex-none sm:flex-1 self-start`}>
<InputSpinner visible={loading === id}>
<Textarea
css={tw`bg-neutral-800 hover:border-neutral-600 border-transparent`}
@ -90,7 +90,7 @@ const NetworkContainer = () => {
/>
</InputSpinner>
</div>
<div css={tw`w-32 text-right`}>
<div css={tw`w-32 text-right mr-2 md:mr-0`}>
{isDefault ?
<span css={tw`bg-green-500 py-1 px-2 rounded text-green-50 text-xs`}>
Primary