Documentation is wrong

[payne-chris-r]

- {{#if (media 'isDesktop')}}
+ {{#if media.isDesktop}}
  Desktop view!
{{/if}}

[k-fish]

if (media 'isDesktop') should be correct for the beta that's currently out.

[payne-chris-r]

🤔 hmmm. Didn't work for me. Maybe I just screwed something up!

[k-fish]

Are you on 3.0.0-beta.3? It's a beta, so you might not want to upgrade as of yet, but if you get on it and are still having troubles, let me know.

[payne-chris-r]

Ahhh. No. I'm still using 2.18 for now

[hoIIer]

if (media 'isDesktop') should be correct for the beta that's currently out.

just hit this, the correct way is if (media 'desktop') (check default app/breakpoints.js)

@k-fish it'd be nice if the helper accepted multiple args so e.g. if (media 'tablet' 'desktop')

[k-fish]

@erichonkanen, that's a good idea, I'll look into it.

[k-fish]

Adding to the readme to make this clearer for people in the future https://github.com/freshbooks/ember-responsive/pull/131

@erichonkanen after some thought it's probably better if people just compose the helper instead (ember-truth-helpers can do it like so (or (media 'isDesktop') (media 'isTablet'))). The default breakpoints ember-responsive provides don't intersect anyway.

[hoIIer]

@k-fish revisited this repo and still think it'd be nice to chain using the 3.0 helper e.g. (media 'isMobile' 'isTable'); less code and sometimes I'm targeting multiple breakpoints (I have 5).. not sure how hard that is to implement though :)

[k-fish]

@erichonkanen that's not that hard, but people usually don't want to select multiple specific breakpoints as much as they want to target devices smaller or greater than a specific size. In your case I'm guessing the behaviour is "Tablet or smaller". If that's the case, my recommended approach would be using additional breakpoint rules which encompass the behaviour for your specific cases.

So, for example, if before your breakpoints were:

export default {
  mobile:  '(max-width: 767px)',
  tablet:  '(min-width: 768px) and (max-width: 991px)',
  desktop: '(min-width: 992px) and (max-width: 1200px)',
  jumbo:   '(min-width: 1201px)'
};

Perhaps try adding new rules (forgive my naming)

export default {
  mobile:  '(max-width: 767px)',
  tablet:  '(min-width: 768px) and (max-width: 991px)',
  tabletOrLess: '(max-width: 991px)',
  desktop: '(min-width: 992px) and (max-width: 1200px)',
  jumbo:   '(min-width: 1201px)'
};

Then your media helper could just be (media 'tabletOrLess') which also makes more sense contextually.

You can see similar rules for breakpoints in various frameworks. Ember paper's layout, for example includes css rules to target ranges of breakpoints.

Breakpoint	Media query (pixel range)
xs	'(max-width: 599px)'
gt-xs	'(min-width: 600px)'
sm	'(min-width: 600px) and (max-width: 959px)'
gt-sm	'(min-width: 960px)'

If you are regularly running into a case where you are usually multiple breakpoints that are non-continous eg. if (media 'isMobile' 'isJumbo') then I think it'd be worth adding that behaviour to the helper.

[hoIIer]

@k-fish that seems like a great solution, I'll try that! thanks :)