diff options
author | Steve Klebanoff <steve@0xproject.com> | 2018-11-08 09:40:35 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-11-08 09:40:35 +0800 |
commit | 771f8a6a6cff935631e8c6ebcdc012cdd3533de6 (patch) | |
tree | 2666ceb3a5868242d13c33a6f7b96eb52172593c | |
parent | 95b2898b9c0898c7e2d98ee603bff0604bf2a829 (diff) | |
parent | c6e7ad5a53a267dfe1ca6ecf2b9d2252fbad18ea (diff) | |
download | dexon-0x-contracts-771f8a6a6cff935631e8c6ebcdc012cdd3533de6.tar dexon-0x-contracts-771f8a6a6cff935631e8c6ebcdc012cdd3533de6.tar.gz dexon-0x-contracts-771f8a6a6cff935631e8c6ebcdc012cdd3533de6.tar.bz2 dexon-0x-contracts-771f8a6a6cff935631e8c6ebcdc012cdd3533de6.tar.lz dexon-0x-contracts-771f8a6a6cff935631e8c6ebcdc012cdd3533de6.tar.xz dexon-0x-contracts-771f8a6a6cff935631e8c6ebcdc012cdd3533de6.tar.zst dexon-0x-contracts-771f8a6a6cff935631e8c6ebcdc012cdd3533de6.zip |
Merge pull request #1219 from 0xProject/feature/instant/mobile-full-bleed
[instant] Mobile full view
-rw-r--r-- | packages/instant/src/components/erc20_token_selector.tsx | 2 | ||||
-rw-r--r-- | packages/instant/src/components/order_details.tsx | 2 | ||||
-rw-r--r-- | packages/instant/src/components/ui/container.tsx | 15 | ||||
-rw-r--r-- | packages/instant/src/components/ui/flex.tsx | 11 | ||||
-rw-r--r-- | packages/instant/src/components/ui/overlay.tsx | 6 | ||||
-rw-r--r-- | packages/instant/src/components/zero_ex_instant_container.tsx | 9 | ||||
-rw-r--r-- | packages/instant/src/style/media.ts | 43 |
7 files changed, 72 insertions, 16 deletions
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx index 41b0b44b0..76d5c66ff 100644 --- a/packages/instant/src/components/erc20_token_selector.tsx +++ b/packages/instant/src/components/erc20_token_selector.tsx @@ -35,7 +35,7 @@ export class ERC20TokenSelector extends React.Component<ERC20TokenSelectorProps> value={this.state.searchQuery} onChange={this._handleSearchInputChange} /> - <Container overflow="scroll" height="275px" marginTop="10px"> + <Container overflow="scroll" height={{ default: '275px', sm: '75vh' }} marginTop="10px"> {_.map(tokens, token => { if (!this._isTokenQueryMatch(token)) { return null; diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx index f1029d70c..9abd7137e 100644 --- a/packages/instant/src/components/order_details.tsx +++ b/packages/instant/src/components/order_details.tsx @@ -26,7 +26,7 @@ export class OrderDetails extends React.Component<OrderDetailsProps> { const ethTokenFee = buyQuoteAccessor.feeEthAmount(); const totalEthAmount = buyQuoteAccessor.totalEthAmount(); return ( - <Container padding="20px" width="100%"> + <Container padding="20px" width="100%" flexGrow={1}> <Container marginBottom="10px"> <Text letterSpacing="1px" diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index a0a187e5f..403751210 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -1,17 +1,18 @@ import { darken } from 'polished'; +import { MediaChoice, stylesForMedia } from '../../style/media'; import { ColorOption, styled } from '../../style/theme'; import { cssRuleIfExists } from '../../style/util'; export interface ContainerProps { - display?: string; + display?: MediaChoice; position?: string; top?: string; right?: string; bottom?: string; left?: string; - width?: string; - height?: string; + width?: MediaChoice; + height?: MediaChoice; maxWidth?: string; margin?: string; marginTop?: string; @@ -33,6 +34,7 @@ export interface ContainerProps { cursor?: string; overflow?: string; darkenOnHover?: boolean; + flexGrow?: string | number; } export const Container = @@ -40,14 +42,12 @@ export const Container = ContainerProps > ` box-sizing: border-box; - ${props => cssRuleIfExists(props, 'display')} + ${props => cssRuleIfExists(props, 'flex-grow')} ${props => cssRuleIfExists(props, 'position')} ${props => cssRuleIfExists(props, 'top')} ${props => cssRuleIfExists(props, 'right')} ${props => cssRuleIfExists(props, 'bottom')} ${props => cssRuleIfExists(props, 'left')} - ${props => cssRuleIfExists(props, 'width')} - ${props => cssRuleIfExists(props, 'height')} ${props => cssRuleIfExists(props, 'max-width')} ${props => cssRuleIfExists(props, 'margin')} ${props => cssRuleIfExists(props, 'margin-top')} @@ -65,6 +65,9 @@ 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 => props.display && stylesForMedia('display', props.display)} + ${props => stylesForMedia('width', props.width || 'auto')} + ${props => stylesForMedia('height', props.height || 'auto')} 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 29c6511bb..fd218b0cd 100644 --- a/packages/instant/src/components/ui/flex.tsx +++ b/packages/instant/src/components/ui/flex.tsx @@ -1,3 +1,4 @@ +import { MediaChoice, stylesForMedia } from '../../style/media'; import { ColorOption, styled } from '../../style/theme'; import { cssRuleIfExists } from '../../style/util'; @@ -6,10 +7,11 @@ export interface FlexProps { flexWrap?: 'wrap' | 'nowrap'; justify?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end'; align?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end'; - width?: string; - height?: string; + width?: MediaChoice; + height?: MediaChoice; backgroundColor?: ColorOption; inline?: boolean; + flexGrow?: number | string; } export const Flex = @@ -19,11 +21,12 @@ export const Flex = display: ${props => (props.inline ? 'inline-flex' : 'flex')}; flex-direction: ${props => props.direction}; flex-wrap: ${props => props.flexWrap}; + ${props => cssRuleIfExists(props, 'flexGrow')} justify-content: ${props => props.justify}; align-items: ${props => props.align}; - ${props => cssRuleIfExists(props, 'width')} - ${props => cssRuleIfExists(props, 'height')} background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; + ${props => stylesForMedia('width', props.width || 'auto')} + ${props => stylesForMedia('height', props.height || 'auto')} `; Flex.defaultProps = { diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx index f1706c874..7110ee70f 100644 --- a/packages/instant/src/components/ui/overlay.tsx +++ b/packages/instant/src/components/ui/overlay.tsx @@ -15,10 +15,12 @@ export interface OverlayProps { const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => ( <Flex height="100vh" className={className}> - <Container position="absolute" top="0px" right="0px"> + <Container position="absolute" top="0px" right="0px" display={{ default: 'initial', sm: 'none' }}> <Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" /> </Container> - <div>{children}</div> + <Container width={{ default: 'auto', sm: '100%' }} height={{ default: 'auto', sm: '100%' }}> + {children} + </Container> </Flex> ); export const Overlay = styled(PlainOverlay)` diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index 851dfa2db..ef6adf384 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -27,7 +27,11 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain }; public render(): React.ReactNode { return ( - <Container width="350px" position="relative"> + <Container + width={{ default: '350px', sm: '100%' }} + height={{ default: 'auto', sm: '100%' }} + position="relative" + > <Container zIndex={zIndex.errorPopup} position="relative"> <LatestError /> </Container> @@ -38,8 +42,9 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain borderRadius="3px" hasBoxShadow={true} overflow="hidden" + height="100%" > - <Flex direction="column" justify="flex-start"> + <Flex direction="column" height="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..beabbac46 --- /dev/null +++ b/packages/instant/src/style/media.ts @@ -0,0 +1,43 @@ +import { InterpolationValue } from 'styled-components'; + +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)}; + } +`; + +const media = { + small: generateMediaWrapper(ScreenWidths.Sm), + medium: generateMediaWrapper(ScreenWidths.Md), + large: generateMediaWrapper(ScreenWidths.Lg), +}; + +export interface ScreenSpecifications { + default: string; + sm?: string; + md?: string; + lg?: string; +} +export type MediaChoice = string | ScreenSpecifications; +export const stylesForMedia = (cssPropertyName: string, choice: MediaChoice): InterpolationValue[] => { + if (typeof choice === 'string') { + return css` + ${cssPropertyName}: ${choice}; + `; + } + + return css` + ${cssPropertyName}: ${choice.default}; + ${choice.lg && media.large`${cssPropertyName}: ${choice.lg}`} + ${choice.md && media.medium`${cssPropertyName}: ${choice.md}`} + ${choice.sm && media.small`${cssPropertyName}: ${choice.sm}`} + `; +}; |