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 v1.2.3 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 v1.2.3 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 v1.2.3 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 v1.2.3 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 v1.2.3 From 10da1e24e13b728c2837e5360a48fcb2913855a5 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 6 Nov 2018 15:59:16 -0800 Subject: feat: make instant resistant to external styles --- packages/instant/src/style/theme.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/instant/src/style') diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts index d10c9b72c..8dada2d28 100644 --- a/packages/instant/src/style/theme.ts +++ b/packages/instant/src/style/theme.ts @@ -1,6 +1,6 @@ import * as styledComponents from 'styled-components'; -const { default: styled, css, keyframes, withTheme, ThemeProvider } = styledComponents; +const { default: styled, css, keyframes, withTheme, createGlobalStyle, ThemeProvider } = styledComponents; export type Theme = { [key in ColorOption]: string }; @@ -33,4 +33,4 @@ export const theme: Theme = { export const transparentWhite = 'rgba(255,255,255,0.3)'; export const overlayBlack = 'rgba(0, 0, 0, 0.6)'; -export { styled, css, keyframes, withTheme, ThemeProvider }; +export { styled, css, keyframes, withTheme, createGlobalStyle, ThemeProvider }; -- cgit v1.2.3 From 117e2f583ff44bdb63340a2134edea0f3ecb77b3 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 8 Nov 2018 15:37:56 -0800 Subject: [instant] Viewport specific errors (#1228) feat(instant): Shows different error animation based on viewport --- packages/instant/src/style/media.ts | 38 +++++++++++++++++++++-------------- packages/instant/src/style/z_index.ts | 3 ++- 2 files changed, 25 insertions(+), 16 deletions(-) (limited to 'packages/instant/src/style') diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts index beabbac46..5e7aaba37 100644 --- a/packages/instant/src/style/media.ts +++ b/packages/instant/src/style/media.ts @@ -14,30 +14,38 @@ const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) => } `; -const media = { +export const media = { small: generateMediaWrapper(ScreenWidths.Sm), medium: generateMediaWrapper(ScreenWidths.Md), large: generateMediaWrapper(ScreenWidths.Lg), }; -export interface ScreenSpecifications { - default: string; - sm?: string; - md?: string; - lg?: string; +export interface ScreenSpecification { + default: T; + sm?: T; + md?: T; + lg?: T; } -export type MediaChoice = string | ScreenSpecifications; -export const stylesForMedia = (cssPropertyName: string, choice: MediaChoice): InterpolationValue[] => { - if (typeof choice === 'string') { +export type OptionallyScreenSpecific = T | ScreenSpecification; +export type MediaChoice = OptionallyScreenSpecific; +/** + * Given a css property name and a OptionallyScreenSpecific value, + * generates css properties with screen-specific viewport styling + */ +export function stylesForMedia( + cssPropertyName: string, + choice: OptionallyScreenSpecific, +): InterpolationValue[] { + if (typeof choice === 'object') { return css` - ${cssPropertyName}: ${choice}; - `; - } - - 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}`} `; -}; + } else { + return css` + ${cssPropertyName}: ${choice}; + `; + } +} diff --git a/packages/instant/src/style/z_index.ts b/packages/instant/src/style/z_index.ts index 727a5189d..03623f044 100644 --- a/packages/instant/src/style/z_index.ts +++ b/packages/instant/src/style/z_index.ts @@ -1,5 +1,6 @@ export const zIndex = { - errorPopup: 1, + errorPopBehind: 1, mainContainer: 2, panel: 3, + errorPopUp: 4, }; -- cgit v1.2.3