QDrawer: q-mini-drawer-hide elements are always hidden in mobile

fjwong commented 2 years ago

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 the q-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 and q-mini-drawer-hide elements are shown in mobile, just like in desktop browsers when the drawer is open

https://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?

Go to provided reproduction link
Open/expand the left panel drawer:
- On desktop, move the mouse over the panel.
- On mobile, click on the layout's header.
Note that the q-input at the bottom of the panel shows on desktop, but not on mobile when the panel opens.

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar), Style & Identity (quasar)

Platforms/Browsers

iOS, Android

Quasar info output

Operating System - Darwin(21.6.0) - darwin/x64
NodeJs - 16.15.1

Global packages
  NPM - 8.11.0
  yarn - 1.22.10
  @quasar/cli - 1.3.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.7.7 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.5.9 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.15.3 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.39 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.5
  pinia - 2.0.22 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.16.7 -- Babel compiler core.
  webpack - 5.72.1 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.9.3 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - 6.5.4 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.8.3 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  @quasar/quasar-app-extension-testing - 2.0.4 -- A Quasar App Extension for managing Test Harnesses
  @quasar/quasar-app-extension-testing-unit-jest - 3.0.0-alpha.10 -- A Quasar App Extension for running Jest tests
  @quasar/quasar-app-extension-testing-e2e-cypress - 4.2.1 -- A Quasar App Extension for Cypress e2e

Networking
  Host - MacBook-Pro.local
  en0 - 192.168.1.11

Relevant log output

No response

Additional context

No response

pdanpdan commented 2 years 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.

fjwong commented 2 years ago

@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.

rstoenescu commented 1 year ago

Enhancements to the docs examples will be available on next docs deployment. Thank you for this ticket.

quasarframework / quasar