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