Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(instances): responsive layout for instance name card

This commit is contained in:
Fábio Moreira 2018-05-23 15:16:15 +01:00
parent b66f761a9e
commit 7e8bf570b8
1 changed files with 54 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
packages/instance-steps/src/name/index.js
View File

@ -33,6 +33,9 @@ import {
import GetRandomName from '../graphql/get-random-name.gql';
import { Forms, Values } from '../constants';
import { instanceName as validateName } from '../validators';
import { QueryBreakpoints } from 'joyent-ui-toolkit';
const { SmallOnly, Medium } = QueryBreakpoints;
const { IR_NAME_F } = Forms;
const { IR_NAME_V_USE_RANDOM } = Values;
@ -87,29 +90,57 @@ const Name = ({
<FormGroup id={'input-name'} name="name" fluid field={Field}>
<FormLabel>Instance name</FormLabel>
<Margin top="0.5">
<Flex>
<FlexItem>
<Input onBlur={null} />
</FlexItem>
<FlexItem>
<Margin left="1" inline>
<Button
id={'randomize-button-name'}
type="button"
loading={randomizing}
onClick={handleRandomize}
marginless
secondary
icon
>
<Margin right="1">
<RandomizeIcon />
</Margin>
Randomize
</Button>
</Margin>
</FlexItem>
</Flex>
<SmallOnly>
<Flex column>
<FlexItem>
<Input onBlur={null} fluid />
</FlexItem>
<FlexItem>
<Margin top="2">
<Button
id={'randomize-button-name'}
type="button"
loading={randomizing}
onClick={handleRandomize}
marginless
secondary
icon
fluid
>
<Margin right="1">
<RandomizeIcon />
</Margin>
Randomize
</Button>
</Margin>
</FlexItem>
</Flex>
</SmallOnly>
<Medium>
<Flex>
<FlexItem>
<Input onBlur={null} />
</FlexItem>
<FlexItem>
<Margin left="1" inline>
<Button
id={'randomize-button-name'}
type="button"
loading={randomizing}
onClick={handleRandomize}
marginless
secondary
icon
>
<Margin right="1">
<RandomizeIcon />
</Margin>
Randomize
</Button>
</Margin>
</FlexItem>
</Flex>
</Medium>
</Margin>
<FormMeta />
</FormGroup>