feat(ui-toolkit): responsive image selector
This commit is contained in:
parent
f9dd24a9d1
commit
e95eaeef8f
|
@ -1,7 +1,7 @@
|
||||||
import React, { Fragment } from 'react';
|
import React, { Fragment } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { Field } from 'redux-form';
|
import { Field } from 'redux-form';
|
||||||
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
|
import { Row, Col as BaseCol } from 'joyent-react-styled-flexboxgrid';
|
||||||
import { Margin } from 'styled-components-spacing';
|
import { Margin } from 'styled-components-spacing';
|
||||||
import pascalCase from 'pascal-case';
|
import pascalCase from 'pascal-case';
|
||||||
import titleCase from 'title-case';
|
import titleCase from 'title-case';
|
||||||
|
@ -13,15 +13,22 @@ import * as Assets from 'joyent-logo-assets';
|
||||||
import {
|
import {
|
||||||
H3,
|
H3,
|
||||||
P,
|
P,
|
||||||
FormGroup,
|
FormGroup as BaseFormGroup,
|
||||||
SectionList as BaseSectionList,
|
SectionList as BaseSectionList,
|
||||||
SectionListItem,
|
SectionListItem,
|
||||||
SectionListAnchor,
|
SectionListAnchor,
|
||||||
H4 as BaseH4,
|
H4 as BaseH4,
|
||||||
Select,
|
Select,
|
||||||
Card as BaseCard
|
Card as BaseCard,
|
||||||
|
StyledBreakpoints as breakpoints
|
||||||
} from 'joyent-ui-toolkit';
|
} from 'joyent-ui-toolkit';
|
||||||
|
|
||||||
|
const imageColSize = {
|
||||||
|
small: 6,
|
||||||
|
medium: 4,
|
||||||
|
large: 3
|
||||||
|
};
|
||||||
|
|
||||||
const Version = styled(Select)`
|
const Version = styled(Select)`
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
width: ${remcalc(144)};
|
width: ${remcalc(144)};
|
||||||
|
@ -38,8 +45,27 @@ const SectionList = styled(BaseSectionList)`
|
||||||
background: transparent;
|
background: transparent;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const Col = styled(BaseCol)`
|
||||||
|
${breakpoints.smallOnly`
|
||||||
|
width: ${imageColSize.small / 12 * 100}%;
|
||||||
|
`};
|
||||||
|
|
||||||
|
${breakpoints.mediumOnly`
|
||||||
|
width: ${imageColSize.medium / 12 * 100}%;
|
||||||
|
`};
|
||||||
|
|
||||||
|
${breakpoints.large`
|
||||||
|
width: ${imageColSize.large / 12 * 100}%;
|
||||||
|
`};
|
||||||
|
`;
|
||||||
|
|
||||||
const Card = styled(BaseCard)`
|
const Card = styled(BaseCard)`
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const FormGroup = styled(BaseFormGroup)`
|
||||||
|
width: 100%;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const H4 = styled(BaseH4)`
|
const H4 = styled(BaseH4)`
|
||||||
|
@ -79,7 +105,7 @@ const Image = ({ onClick, active, ...image }) => {
|
||||||
const Logo = Assets[pascalCase(imageName)] || Assets.Placeholder;
|
const Logo = Assets[pascalCase(imageName)] || Assets.Placeholder;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Col md={2} sm={3}>
|
<Col lg={3} md={4} sm={6}>
|
||||||
<Margin bottom={3}>
|
<Margin bottom={3}>
|
||||||
<Card id={id} onClick={handleCardClick} active={active} preview>
|
<Card id={id} onClick={handleCardClick} active={active} preview>
|
||||||
<Logo
|
<Logo
|
||||||
|
|
Loading…
Reference in New Issue