crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: full display of mobile hard coded

Browse Source
This commit is contained in:
Steve Klebanoff 2018-11-05 17:19:37 -08:00
parent e4f9ae6ad5
commit ecae3f9c48
6 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/instant/public/index.html
View File

@ -13,7 +13,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; /*height: 100vh;*/
} }
body { body {

2
packages/instant/src/components/order_details.tsx
View File

@ -23,7 +23,7 @@ export class OrderDetails extends React.Component<OrderDetailsProps> {
const ethTokenFee = buyQuoteAccessor.feeEthAmount(); const ethTokenFee = buyQuoteAccessor.feeEthAmount();
const totalEthAmount = buyQuoteAccessor.totalEthAmount(); const totalEthAmount = buyQuoteAccessor.totalEthAmount();
return ( return (
<Container padding="20px" width="100%"> <Container padding="20px" width="100%" flexGrow={1}>
<Container marginBottom="10px"> <Container marginBottom="10px">
<Text <Text
letterSpacing="1px" letterSpacing="1px"

3
packages/instant/src/components/ui/container.tsx
View File

@ -33,13 +33,16 @@ export interface ContainerProps {
cursor?: string; cursor?: string;
overflow?: string; overflow?: string;
darkenOnHover?: boolean; darkenOnHover?: boolean;
flexGrow?: string | number;
} }
// TODO Dont commit flex grow
export const Container = export const Container =
styled.div < styled.div <
ContainerProps > ContainerProps >
` `
box-sizing: border-box; box-sizing: border-box;
${props => cssRuleIfExists(props, 'flex-grow')}
${props => cssRuleIfExists(props, 'display')} ${props => cssRuleIfExists(props, 'display')}
${props => cssRuleIfExists(props, 'position')} ${props => cssRuleIfExists(props, 'position')}
${props => cssRuleIfExists(props, 'top')} ${props => cssRuleIfExists(props, 'top')}

2
packages/instant/src/components/ui/flex.tsx
View File

@ -10,6 +10,7 @@ export interface FlexProps {
height?: string; height?: string;
backgroundColor?: ColorOption; backgroundColor?: ColorOption;
inline?: boolean; inline?: boolean;
flexGrow?: number | string;
} }
export const Flex = export const Flex =
@ -19,6 +20,7 @@ export const Flex =
display: ${props => (props.inline ? 'inline-flex' : 'flex')}; display: ${props => (props.inline ? 'inline-flex' : 'flex')};
flex-direction: ${props => props.direction}; flex-direction: ${props => props.direction};
flex-wrap: ${props => props.flexWrap}; flex-wrap: ${props => props.flexWrap};
${props => cssRuleIfExists(props, 'flexGrow')}
justify-content: ${props => props.justify}; justify-content: ${props => props.justify};
align-items: ${props => props.align}; align-items: ${props => props.align};
${props => cssRuleIfExists(props, 'width')} ${props => cssRuleIfExists(props, 'width')}

4
packages/instant/src/components/ui/overlay.tsx
View File

@ -14,11 +14,11 @@ export interface OverlayProps {
} }
const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => ( const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => (
<Flex height="100vh" className={className}> <Flex className={className}>
<Container position="absolute" top="0px" right="0px"> <Container position="absolute" top="0px" right="0px">
<Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" /> <Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" />
</Container> </Container>
<div>{children}</div> <Container height="100%">{children}</Container>
</Flex> </Flex>
); );
export const Overlay = styled(PlainOverlay)` export const Overlay = styled(PlainOverlay)`

6
packages/instant/src/components/zero_ex_instant_container.tsx
View File

@ -14,6 +14,7 @@ import { zIndex } from '../style/z_index';
import { SlideAnimationState } from './animations/slide_animation'; import { SlideAnimationState } from './animations/slide_animation';
import { SlidingPanel } from './sliding_panel'; import { SlidingPanel } from './sliding_panel';
import { Container, Flex } from './ui'; import { Container, Flex } from './ui';
export interface ZeroExInstantContainerProps {} export interface ZeroExInstantContainerProps {}
export interface ZeroExInstantContainerState { export interface ZeroExInstantContainerState {
tokenSelectionPanelAnimationState: SlideAnimationState; tokenSelectionPanelAnimationState: SlideAnimationState;
@ -25,7 +26,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
}; };
public render(): React.ReactNode { public render(): React.ReactNode {
return ( return (
<Container width="350px" position="relative"> <Container width="350px" height="100%" position="relative">
<Container zIndex={zIndex.errorPopup} position="relative"> <Container zIndex={zIndex.errorPopup} position="relative">
<LatestError /> <LatestError />
</Container> </Container>
@ -36,8 +37,9 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
borderRadius="3px" borderRadius="3px"
hasBoxShadow={true} hasBoxShadow={true}
overflow="hidden" overflow="hidden"
height="100%"
> >
<Flex direction="column" justify="flex-start"> <Flex direction="column" height="100%" justify="flex-start">
<SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} /> <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
<SelectedAssetBuyOrderProgress /> <SelectedAssetBuyOrderProgress />
<LatestBuyQuoteOrderDetails /> <LatestBuyQuoteOrderDetails />