Quasar: [Request] Screen Width detection

[rossity]

In addition to Platform detection, it would be nice to have screen width detection. Reason being is on tablet and desktops the screen width can be radically different if flipped to landscape or window resized etc.

It would make things like this much simpler:

Example:

<q-list :dense="$q.screen.lt.md" :sparse="$q.screen.gt.lg">
  <q-item>
    <q-item-main label="John Doe" />
  </q-item>
  <q-item>
    <q-item-main label="Jim Doe" />
  </q-item>
</q-list>

I'm following the convention used in CSS visibility above, where if the screen is less than medium the list is dense, and if it's greater than large the list is sparse. Everything in between is standard.

[nothingismagick]

That's a great point. I think that this might also be a candidate for font / image sizing too. Thanks for opening the request!

[rossity]

Lots of use cases, for instance buttons!

instead of

<q-btn icon="plus" class="lt-md" @click="method()"/>
<q-btn icon="plus" class="gt-sm" size="lg" @click="method()" />

you can just render a single button

<q-btn icon="plus" :size="$q.screen.gt.sm ? 'lg' : 'md'" @click="method()" />

[Lukino2000]

meanwhile i wrote and use this plugin gist

<q-btn :label="$screen.gte.md ? 'Elimina' : ''" icon="mdi-delete" @click="remove" color="negative" v-if="!add" :loading="removing" />

[redpandavp]

I agree with @rossity I'm at this moment trying so handle with this issue. I need to left it open due the lack of this functionality.

[rstoenescu]

Available in 0.15.11 through a new "Screen" plugin or $q.screen.
Takes into account when you also change the Stylus variables regarding size.