diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-11-06 09:19:37 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-11-06 09:19:37 +0800 |
commit | ecae3f9c4852ba488ab5a0777dae2f7a9c45ddc0 (patch) | |
tree | 38c5a154d0e694565e0bed6142f3b54276482224 /packages/instant/src/components | |
parent | e4f9ae6ad5a3d6040e4f8c9c8b7a4a05cf22fb51 (diff) | |
download | dexon-0x-contracts-ecae3f9c4852ba488ab5a0777dae2f7a9c45ddc0.tar dexon-0x-contracts-ecae3f9c4852ba488ab5a0777dae2f7a9c45ddc0.tar.gz dexon-0x-contracts-ecae3f9c4852ba488ab5a0777dae2f7a9c45ddc0.tar.bz2 dexon-0x-contracts-ecae3f9c4852ba488ab5a0777dae2f7a9c45ddc0.tar.lz dexon-0x-contracts-ecae3f9c4852ba488ab5a0777dae2f7a9c45ddc0.tar.xz dexon-0x-contracts-ecae3f9c4852ba488ab5a0777dae2f7a9c45ddc0.tar.zst dexon-0x-contracts-ecae3f9c4852ba488ab5a0777dae2f7a9c45ddc0.zip |
wip: full display of mobile hard coded
Diffstat (limited to 'packages/instant/src/components')
5 files changed, 12 insertions, 5 deletions
diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx index 704009d89..2d98adf7e 100644 --- a/packages/instant/src/components/order_details.tsx +++ b/packages/instant/src/components/order_details.tsx @@ -23,7 +23,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..228085f51 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -33,13 +33,16 @@ export interface ContainerProps { cursor?: string; overflow?: string; darkenOnHover?: boolean; + flexGrow?: string | number; } +// TODO Dont commit flex grow export const Container = styled.div < ContainerProps > ` box-sizing: border-box; + ${props => cssRuleIfExists(props, 'flex-grow')} ${props => cssRuleIfExists(props, 'display')} ${props => cssRuleIfExists(props, 'position')} ${props => cssRuleIfExists(props, 'top')} diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx index 29c6511bb..57abd8b5b 100644 --- a/packages/instant/src/components/ui/flex.tsx +++ b/packages/instant/src/components/ui/flex.tsx @@ -10,6 +10,7 @@ export interface FlexProps { height?: string; backgroundColor?: ColorOption; inline?: boolean; + flexGrow?: number | string; } export const Flex = @@ -19,6 +20,7 @@ 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')} diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx index f1706c874..e930ffacd 100644 --- a/packages/instant/src/components/ui/overlay.tsx +++ b/packages/instant/src/components/ui/overlay.tsx @@ -14,11 +14,11 @@ export interface OverlayProps { } const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => ( - <Flex height="100vh" className={className}> + <Flex className={className}> <Container position="absolute" top="0px" right="0px"> <Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" /> </Container> - <div>{children}</div> + <Container height="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 c1bd17502..cf7a04554 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -14,6 +14,7 @@ import { zIndex } from '../style/z_index'; import { SlideAnimationState } from './animations/slide_animation'; import { SlidingPanel } from './sliding_panel'; import { Container, Flex } from './ui'; + export interface ZeroExInstantContainerProps {} export interface ZeroExInstantContainerState { tokenSelectionPanelAnimationState: SlideAnimationState; @@ -25,7 +26,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain }; public render(): React.ReactNode { return ( - <Container width="350px" position="relative"> + <Container width="350px" height="100%" position="relative"> <Container zIndex={zIndex.errorPopup} position="relative"> <LatestError /> </Container> @@ -36,8 +37,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 /> |