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

proof of concept working

Browse Source
This commit is contained in:
Steve Klebanoff 2018-11-06 13:52:16 -08:00
parent f90486c99c
commit e8814ecbe7
3 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/instant/src/components/sandbox.tsx
View File

@ -3,11 +3,6 @@ import * as React from 'react';
import { MediaChoice, stylesForMedia } from '../style/media';
import { styled } from '../style/theme';
// export const Sandbox: React.StatelessComponent<{}> = props => {
// return <div>Hi</div>;
// };
// TODO: handle string too
interface SandboxProps {
width: MediaChoice;
}

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

@ -28,7 +28,8 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
public render(): React.ReactNode {
return (
<Container width="350px" smallWidth="100%" smallHeight="100%" position="relative">
<Sandbox width={{ sm: '10px' }}>Test</Sandbox>
{/* <Sandbox width={{ default: '300px', sm: '5px', md: '900px' }}>Test</Sandbox> */}
<Sandbox width="100px">Test</Sandbox>
<Container zIndex={zIndex.errorPopup} position="relative">
<LatestError />
</Container>

23
packages/instant/src/style/media.ts
View File

@ -21,12 +21,29 @@ export const media = {
};
/// media helper
export interface MediaChoice {
sm: string;
export interface ScreenSpecifications {
default: string;
sm?: string;
md?: string;
lg?: string;
}
export type MediaChoice = string | ScreenSpecifications;
// TODO: handle string too
export const stylesForMedia = (choice: MediaChoice): InterpolationValue[] => {
return media.small`width: ${choice.sm}`;
let res: InterpolationValue[];
if (typeof choice === 'string') {
res = css`
width: ${choice};
`;
} else {
res = css`
width: ${choice.default};
${choice.lg && media.large`width: ${choice.lg}`}
${choice.md && media.medium`width: ${choice.md}`}
${choice.sm && media.small`width: ${choice.sm}`}
`;
}
console.log(res.toString());
return res;
};