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

feat(instances): responsive layout for instance name card

Browse Source 
fixes #1118
This commit is contained in:
Fábio Moreira 2018-05-24 10:34:55 +01:00 committed by Sérgio Ramos
parent b66f761a9e
commit 5cb02d709c
3 changed files with 134 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
View File

@ -15,6 +15,10 @@ exports[`renders <List /> without throwing 1`] = `
} }
.c31 { .c31 {
padding: 1.125rem;
}
.c32 {
padding: 1.875rem; padding: 1.875rem;
} }
@ -929,12 +933,28 @@ exports[`renders <List /> without throwing 1`] = `
disabled={false} disabled={false}
name="card-outlet" name="card-outlet"
> >
<div <span
className="c31" name="react-responsive-mock"
query="only screen and (max-width: 37.4375rem)"
> >
You haven't created any instances yet, but they're really easy to set up. <div
Click above to get going. className="c31"
</div> >
You haven't created any instances yet, but they're really easy to set up.
Click above to get going.
</div>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 37.5rem)"
>
<div
className="c32"
>
You haven't created any instances yet, but they're really easy to set up.
Click above to get going.
</div>
</span>
</div> </div>
</div> </div>
</div> </div>
@ -959,6 +979,10 @@ exports[`renders <List error /> without throwing 1`] = `
} }
.c38 { .c38 {
padding: 1.125rem;
}
.c39 {
padding: 1.875rem; padding: 1.875rem;
} }
@ -1942,12 +1966,28 @@ exports[`renders <List error /> without throwing 1`] = `
disabled={false} disabled={false}
name="card-outlet" name="card-outlet"
> >
<div <span
className="c38" name="react-responsive-mock"
query="only screen and (max-width: 37.4375rem)"
> >
You haven't created any instances yet, but they're really easy to set up. <div
Click above to get going. className="c38"
</div> >
You haven't created any instances yet, but they're really easy to set up.
Click above to get going.
</div>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 37.5rem)"
>
<div
className="c39"
>
You haven't created any instances yet, but they're really easy to set up.
Click above to get going.
</div>
</span>
</div> </div>
</div> </div>
</div> </div>

79
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;
@ -61,7 +64,7 @@ const Name = ({
isValid={handleValidate(preview)} isValid={handleValidate(preview)}
{...props} {...props}
> >
<StepHeader icon={<NameIcon />}>Name this instance</StepHeader> <StepHeader icon={<NameIcon />}>Instance name</StepHeader>
<StepDescription> <StepDescription>
Your instance name will be used to identify this specific instance. Your instance name will be used to identify this specific instance.
</StepDescription> </StepDescription>
@ -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>

45
packages/resource-step/src/index.js
View File

@ -19,6 +19,10 @@ import {
import { Saved as SavedIcon, Error as ErrorIcon } from './status-icon'; import { Saved as SavedIcon, Error as ErrorIcon } from './status-icon';
import { QueryBreakpoints } from 'joyent-ui-toolkit';
const { SmallOnly, Medium } = QueryBreakpoints;
const Card = styled(BaseCard)` const Card = styled(BaseCard)`
${is('error')` ${is('error')`
border: ${remcalc(1)} solid ${props => props.theme.redDark}; border: ${remcalc(1)} solid ${props => props.theme.redDark};
@ -46,25 +50,29 @@ export const Header = ({ icon = null, children }) => (
<Flex justifyBetween> <Flex justifyBetween>
<FlexItem> <FlexItem>
<Flex alignCenter> <Flex alignCenter>
<FlexItem> <Medium>
<Margin right="2">{icon}</Margin> <FlexItem>
</FlexItem> <Margin right="2">{icon}</Margin>
</FlexItem>
</Medium>
<FlexItem> <FlexItem>
<H3 bold>{children}</H3> <H3 bold>{children}</H3>
</FlexItem> </FlexItem>
{/* improve this */} {/* improve this */}
{optional ? ( <Medium>
<Fragment> {optional ? (
<FlexItem> <Fragment>
<Margin horizontal="1"> <FlexItem>
<Divider vertical /> <Margin horizontal="1">
</Margin> <Divider vertical />
</FlexItem> </Margin>
<FlexItem> </FlexItem>
<P optional>Optional</P> <FlexItem>
</FlexItem> <P optional>Optional</P>
</Fragment> </FlexItem>
) : null} </Fragment>
) : null}
</Medium>
</Flex> </Flex>
</FlexItem> </FlexItem>
<FlexItem alignCenter> <FlexItem alignCenter>
@ -168,7 +176,12 @@ export default class Step extends PureComponent {
> >
<Card expanded={expanded} error={!expanded && !isValid}> <Card expanded={expanded} error={!expanded && !isValid}>
<CardOutlet> <CardOutlet>
<Padding all="5">{children}</Padding> <SmallOnly>
<Padding all="3">{children}</Padding>
</SmallOnly>
<Medium>
<Padding all="5">{children}</Padding>
</Medium>
</CardOutlet> </CardOutlet>
</Card> </Card>
</Broadcast> </Broadcast>