Flex-layout: feat(mediaMatch): add ScreenTypes and more Breakpoints

[ThomasBurleson]

Add the following screentypes:

const HANDSET_PORTRAIT  = '(orientation: portrait) and (max-width: 599px)';
const TABLET_PORTRAIT   = '(orientation: portrait) and (min-width: 600px) and (max-width: 839px)';
const WEB_PORTRAIT      = '(orientation: portrait) and (min-width: 840px)';

const HANDSET_LANDSCAPE = '(orientation: landscape) and (max-width: 959px)';
const TABLET_LANDSCAPE  = '(orientation: landscape) and (min-width: 960px)  and (max-width: 1279px)';
const WEB_LANDSCAPE     = '(orientation: landscape) and (min-width: 1280px)';

export const SCREEN_TYPES = {
  HANDSET           : `${HANDSET_PORTRAIT}, ${HANDSET_LANDSCAPE}  `,
  TABLET            : `${TABLET_PORTRAIT} , ${TABLET_LANDSCAPE}   `,
  WEB               : `${WEB_PORTRAIT}    , ${WEB_LANDSCAPE}      `,

  HANDSET_PORTRAIT  : `${HANDSET_PORTRAIT}                        `,
  TABLET_PORTRAIT   : `${TABLET_PORTRAIT}                         `,
  WEB_PORTRAIT      : `${WEB_PORTRAIT}                            `,

  HANDSET_LANDSCAPE : `${HANDSET_LANDSCAPE}                       `,
  TABLET_LANDSCAPE  : `${TABLET_LANDSCAPE}                        `,
  WEB_LANDSCAPE     : `${WEB_LANDSCAPE}                           `
};

And the following BreakPoints:

[
{ 'alias': 'handset'            , 'mediaQuery': ScreenTypes.HANDSET           },
{ 'alias': 'handset.landscape'  , 'mediaQuery': ScreenTypes.HANDSET_LANDSCAPE },
{ 'alias': 'handset.portrait'   , 'mediaQuery': ScreenTypes.HANDSET_PORTRAIT  },

{ 'alias': 'tablet'             , 'mediaQuery': ScreenTypes.TABLET          },
{ 'alias': 'tablet.landscape'   , 'mediaQuery': ScreenTypes.TABLET          },
{ 'alias': 'tablet.portrait'    , 'mediaQuery': ScreenTypes.TABLET_PORTRAIT },

{ 'alias': 'web'                , 'mediaQuery': ScreenTypes.WEB           },
{ 'alias': 'web.landscape'      , 'mediaQuery': ScreenTypes.WEB_LANDSCAPE },
{ 'alias': 'web.portrait'       , 'mediaQuery': ScreenTypes.WEB_PORTRAIT  }
]

[mounthorse-slns]

That is a must have feature to handle portrait and landscape layouts!
When will you add this?

How can I handle portrait and landscape for now?

[ThomasBurleson]

Please review our Custom BreakPoints wiki.

Note: current, in-progress work will change the documented solution for customizing with your own mediaQueries.

[mounthorse-slns]

With Custom BreakPoints can I customize the existing aliases or can I create new ones?

[Neo-7]

@ThomasBurleson
const HANDSET_LANDSCAPE = '(orientation: landscape) and (max-width: 959px)';

• Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.

i think this would solve that issue...
const HANDSET_LANDSCAPE = '(orientation: landscape) and (min-width:480px) and (max-width: 959px)';

since device landscape mostly starts from 480px;
ref : device height and width

[ThomasBurleson]

@bm-software - check the PR #204 for details on the upcoming custom breakpoints
@Neo-7 - thank you. We will adjust the mediaQueries in 204.

[ThomasBurleson]

@Neo-7 - why are you using min-width:480px? Where did you derive that value from on the referenced chart ?

[Neo-7]

@ThomasBurleson
because sometimes the project i'm working is not focused on landscape mode. And they want me to show one static screen, asking user to rotate the screen, so user will not access the screen in the landscape mode.

small devices like iphone 5s, iphone se, xperia z, etc... device's landscape width is below 599px;
so if user opens keyboard, browser considers the screen is in landscape mode,
because sometimes device status bar + footer + browser header + keyboard height is bigger than actual content area. And the browser shows landscape solution in portrait mode.

here is the reference

[imrvshah]

Hi @ThomasBurleson

"Please review our Custom BreakPoints wiki."

I have implemented custom breakpoint using the documentation. But I am getting error Cannot read property 'mediaQuery' of undefined

Am I missing anything?

Thanks in advance.

[nivram80]

@ThomasBurleson I'm getting the same error as @imrvshah. Here is a plnkr showing the error:
http://plnkr.co/edit/8KN69A?p=info

[nivram80]

@imrvshah Did you ever find a solution for the Cannot read property 'mediaQuery' of undefined error?

[imrvshah]

@nivram80 I didn't find solution yet.

[ThomasBurleson]

@nivram80 - fixed with latests builds on master.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}