aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-11-07 02:26:39 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-11-07 02:26:39 +0800
commita2bc62b17a773625220817c79265c017cb61979f (patch)
tree3c91f602b0d9e11c887920f498093490ced4903f
parentf6487122d1ed3dea731adcb6a08165b44c887282 (diff)
downloaddexon-sol-tools-a2bc62b17a773625220817c79265c017cb61979f.tar
dexon-sol-tools-a2bc62b17a773625220817c79265c017cb61979f.tar.gz
dexon-sol-tools-a2bc62b17a773625220817c79265c017cb61979f.tar.bz2
dexon-sol-tools-a2bc62b17a773625220817c79265c017cb61979f.tar.lz
dexon-sol-tools-a2bc62b17a773625220817c79265c017cb61979f.tar.xz
dexon-sol-tools-a2bc62b17a773625220817c79265c017cb61979f.tar.zst
dexon-sol-tools-a2bc62b17a773625220817c79265c017cb61979f.zip
feat(instant): when on mobile, show mobile specific styling that takes up whole screen
-rw-r--r--packages/instant/src/components/ui/container.tsx17
-rw-r--r--packages/instant/src/components/ui/flex.tsx18
-rw-r--r--packages/instant/src/components/ui/overlay.tsx2
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx6
-rw-r--r--packages/instant/src/style/media.ts19
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),
+};