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 {
padding: 1.125rem;
}
.c32 {
padding: 1.875rem;
}
@ -929,12 +933,28 @@ exports[`renders <List /> without throwing 1`] = `
disabled={false}
name="card-outlet"
>
<div
className="c31"
<span
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.
Click above to get going.
</div>
<div
className="c31"
>
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>
@ -959,6 +979,10 @@ exports[`renders <List error /> without throwing 1`] = `
}
.c38 {
padding: 1.125rem;
}
.c39 {
padding: 1.875rem;
}
@ -1942,12 +1966,28 @@ exports[`renders <List error /> without throwing 1`] = `
disabled={false}
name="card-outlet"
>
<div
className="c38"
<span
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.
Click above to get going.
</div>
<div
className="c38"
>
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>

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

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