Closed fjwong closed 1 year ago
I agree that the name q-mini-drawer-hide
suggests that the element should only hide when in mini mode.
But the original idea was that these classes should be used for elements that should toggle the mini state. Most of the list elements in the drawer behave by themselves when using mini.
It might be a breaking change now. @rstoenescu
If you use it on more elements it might be better to define your own class and use it.
@pdanpdan Thank you for the response. I agree this would amount to a breaking change at this point, and adding our own custom classes to handle this in mobile is quite easy.
Thank you for the documentation changes.
Enhancements to the docs examples will be available on next docs deployment. Thank you for this ticket.
What happened?
Our application uses
q-drawer
and users can toggle between "mini" and "normal" modes to expand and collapse it freely.We recently came across the q-mini-drawer-only and q-mini-drawer-hide CSS helper classes, and decided to use these to avoid prop-drilling of the "mini" variable on all components contained on the
q-drawer
, since we need to show and hide multiple elements depending on the current state of the drawer.It appears that, all elements using the q-mini-drawer-only and q-mini-drawer-hide classes seem to show/hide as expected when using the app on a desktop browser and switching between "mini" and "normal" modes, but are hidden entirely when the app is running on a mobile browser, which unknowingly ended making a lot of our UI unusable in mobile.
https://github.com/quasarframework/quasar/blob/78df1f4939936fdbf591d90addf950a8f42e665b/ui/src/components/layout/QLayout.sass#L108-L110
The documentation does mention that
Please note that mini mode does not apply when in mobile behavior.
, although we weren't expecting this to mean that any elements using theq-mini-drawer-hide
class would end up being always hidden on mobile browsers, as the drawer looks almost identical to when it's open in desktop.This is rather minor, as we can certainly define our own mini-drawer hide/show CSS classes rather easily, although this would mean the original helper classes would be unusable for anyone needing to support both desktop and mobile browsers.
What did you expect to happen?
That
q-mini-drawer-only
elements are hidden andq-mini-drawer-hide
elements are shown in mobile, just like in desktop browsers when the drawer is openhttps://github.com/quasarframework/quasar/blob/78df1f4939936fdbf591d90addf950a8f42e665b/ui/src/components/layout/QLayout.sass#L105-L107
Or a small disclaimer in the documentation saying that these helper classes are not intended for usage in mobile browsers if this is expected behavior.
Reproduction URL
https://codepen.io/fjwong/pen/zYjeYVd
How to reproduce?
Flavour
Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)
Areas
Components (quasar), Style & Identity (quasar)
Platforms/Browsers
iOS, Android
Quasar info output
Relevant log output
No response
Additional context
No response