diff options
| -rw-r--r-- | packages/instant/src/components/ui/container.tsx | 17 | ||||
| -rw-r--r-- | packages/instant/src/components/ui/flex.tsx | 18 | ||||
| -rw-r--r-- | packages/instant/src/components/ui/overlay.tsx | 2 | ||||
| -rw-r--r-- | packages/instant/src/components/zero_ex_instant_container.tsx | 6 | ||||
| -rw-r--r-- | packages/instant/src/style/media.ts | 19 |
5 files changed, 58 insertions, 4 deletions
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index 228085f51..36d7cf2ec 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -1,5 +1,7 @@ +import * as _ from 'lodash'; import { darken } from 'polished'; +import { media } from '../../style/media'; import { ColorOption, styled } from '../../style/theme'; import { cssRuleIfExists } from '../../style/util'; @@ -34,8 +36,22 @@ export interface ContainerProps { overflow?: string; darkenOnHover?: boolean; flexGrow?: string | number; + + smallWidth?: string; + smallHeight?: string; } +const mediaStyles = (props: ContainerProps) => { + if (!_.some([props.smallWidth, props.smallHeight])) { + return ''; + } + + return media.small` + width: ${props.smallWidth || props.width || 'auto'} + height: ${props.smallHeight || props.height || 'auto'} + `; +}; + // TODO Dont commit flex grow export const Container = styled.div < @@ -68,6 +84,7 @@ export const Container = ${props => cssRuleIfExists(props, 'cursor')} ${props => cssRuleIfExists(props, 'overflow')} ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; + ${props => mediaStyles(props)} background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')}; &:hover { diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx index 57abd8b5b..f85d45e36 100644 --- a/packages/instant/src/components/ui/flex.tsx +++ b/packages/instant/src/components/ui/flex.tsx @@ -1,3 +1,6 @@ +import * as _ from 'lodash'; + +import { media } from '../../style/media'; import { ColorOption, styled } from '../../style/theme'; import { cssRuleIfExists } from '../../style/util'; @@ -11,8 +14,22 @@ export interface FlexProps { backgroundColor?: ColorOption; inline?: boolean; flexGrow?: number | string; + + smallWidth?: string; + smallHeight?: string; } +const mediaStyles = (props: FlexProps) => { + if (!_.some([props.smallWidth, props.smallHeight])) { + return ''; + } + + return media.small` + width: ${props.smallWidth || props.width || 'auto'} + height: ${props.smallHeight || props.height || 'auto'} + `; +}; + export const Flex = styled.div < FlexProps > @@ -26,6 +43,7 @@ export const Flex = ${props => cssRuleIfExists(props, 'width')} ${props => cssRuleIfExists(props, 'height')} background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; + ${props => mediaStyles(props)} `; Flex.defaultProps = { diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx index 11496e895..12bde1f2b 100644 --- a/packages/instant/src/components/ui/overlay.tsx +++ b/packages/instant/src/components/ui/overlay.tsx @@ -18,7 +18,7 @@ const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, classN <Container position="absolute" top="0px" right="0px"> <Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" /> </Container> - <Container width="100%" height="100%"> + <Container smallWidth="100%" smallHeight="100%"> {children} </Container> </Flex> diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index 39b2c9c05..88c838567 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -26,7 +26,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain }; public render(): React.ReactNode { return ( - <Container width="100%" height="100%" position="relative"> + <Container width="350px" smallWidth="100%" smallHeight="100%" position="relative"> <Container zIndex={zIndex.errorPopup} position="relative"> <LatestError /> </Container> @@ -37,9 +37,9 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain borderRadius="3px" hasBoxShadow={true} overflow="hidden" - height="100%" + smallHeight="100%" > - <Flex direction="column" height="100%" justify="flex-start"> + <Flex direction="column" smallHeight="100%" justify="flex-start"> <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} /> <SelectedAssetBuyOrderProgress /> <LatestBuyQuoteOrderDetails /> diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts new file mode 100644 index 000000000..fa7571077 --- /dev/null +++ b/packages/instant/src/style/media.ts @@ -0,0 +1,19 @@ +import { css } from './theme'; + +export enum ScreenWidths { + Sm = 40, + Md = 52, + Lg = 64, +} + +const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) => css` + @media (max-width: ${screenWidth}em) { + ${css.apply(css, args)}; + } +`; + +export const media = { + small: generateMediaWrapper(ScreenWidths.Sm), + medium: generateMediaWrapper(ScreenWidths.Md), + large: generateMediaWrapper(ScreenWidths.Lg), +}; |