From a2bc62b17a773625220817c79265c017cb61979f Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 6 Nov 2018 10:26:39 -0800 Subject: feat(instant): when on mobile, show mobile specific styling that takes up whole screen --- packages/instant/src/style/media.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 packages/instant/src/style/media.ts (limited to 'packages/instant/src/style') 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), +}; -- cgit From f90486c99c7acf95f3b95fdc73ee125dd3f9086e Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 6 Nov 2018 11:34:04 -0800 Subject: wip: mediachoice experiment --- packages/instant/src/style/media.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'packages/instant/src/style') diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts index fa7571077..5a0cba668 100644 --- a/packages/instant/src/style/media.ts +++ b/packages/instant/src/style/media.ts @@ -1,3 +1,5 @@ +import { InterpolationValue } from 'styled-components'; + import { css } from './theme'; export enum ScreenWidths { @@ -17,3 +19,14 @@ export const media = { medium: generateMediaWrapper(ScreenWidths.Md), large: generateMediaWrapper(ScreenWidths.Lg), }; + +/// media helper +export interface MediaChoice { + sm: string; + md?: string; + lg?: string; +} +// TODO: handle string too +export const stylesForMedia = (choice: MediaChoice): InterpolationValue[] => { + return media.small`width: ${choice.sm}`; +}; -- cgit From e8814ecbe70b97dfa0de0f51b6a3b7e7fcd89ea2 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 6 Nov 2018 13:52:16 -0800 Subject: proof of concept working --- packages/instant/src/style/media.ts | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) (limited to 'packages/instant/src/style') diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts index 5a0cba668..84b85a2a8 100644 --- a/packages/instant/src/style/media.ts +++ b/packages/instant/src/style/media.ts @@ -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; }; -- cgit From 88c7d907fa97f7918b82df8c1759b43c28c7273b Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 6 Nov 2018 13:56:29 -0800 Subject: better function definiton --- packages/instant/src/style/media.ts | 23 +++++++++-------------- 1 file changed, 9 insertions(+), 14 deletions(-) (limited to 'packages/instant/src/style') diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts index 84b85a2a8..4bcbd608f 100644 --- a/packages/instant/src/style/media.ts +++ b/packages/instant/src/style/media.ts @@ -28,22 +28,17 @@ export interface ScreenSpecifications { lg?: string; } export type MediaChoice = string | ScreenSpecifications; -// TODO: handle string too -export const stylesForMedia = (choice: MediaChoice): InterpolationValue[] => { - let res: InterpolationValue[]; +export const stylesForMedia = (cssPropertyName: string, choice: MediaChoice): 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}`} + return css` + ${cssPropertyName}: ${choice}; `; } - console.log(res.toString()); - return res; + 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}`} + `; }; -- cgit From 006a13448fc5d79aa8f6d04ac3f471e430dcfa89 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 6 Nov 2018 14:05:49 -0800 Subject: new MediaChoice approach for setting conditional css properties --- packages/instant/src/style/media.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'packages/instant/src/style') diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts index 4bcbd608f..beabbac46 100644 --- a/packages/instant/src/style/media.ts +++ b/packages/instant/src/style/media.ts @@ -14,13 +14,12 @@ const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) => } `; -export const media = { +const media = { small: generateMediaWrapper(ScreenWidths.Sm), medium: generateMediaWrapper(ScreenWidths.Md), large: generateMediaWrapper(ScreenWidths.Lg), }; -/// media helper export interface ScreenSpecifications { default: string; sm?: string; -- cgit