-
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
v-ripple.early on cards is not mobile-friendly #7474
Comments
Please do a small test form me: replace in package.json "quasar": "^1...." with Cleanup node_modules and yarn.lock / package-lock.json and do yarn/npm install. |
I made the change, deleted package-lock.json and node_modules/, then ran npm install and got the following error upon running
I do like the new multi-color progress bar so far though.. |
Btw, it also told me but when I ran the command I got: |
Ok I got it working with IT WORKS!!! That's fantastic. |
nit: I'd probably tune it to be slightly less sensitive still to make it comparable with other apps (e.g. currently you have to scroll very quickly for it to be disabled; it should disable even if scrolling less quickly). But this is great! Thank you |
Just to check, what versions of quasars packages you have? (do a quasar info in the project folder and paste here, please). |
Can you try a new one? |
Operating System - Darwin(17.3.0) - darwin/x64 Global packages Important local packages |
you might get into trouble with nodejs 14 - better stay with 12 until a solution is found for file watchers meanwhile test :) |
Ok trying now.. |
In this version it seems to be triggering every time again (from my quick scrolling test)? I was hoping it could trigger even less often than your previous version. |
You could probably create a simple feed of lorem ipsum cards to test on your end since it may require a few iterations to get it in tune with other apps (e.g. google news). Btw, this is a different issue, but to make the rippling super mobile friendly (or at least more in line with existing apps), the default opacity could be lower to make the ripple less dark. On my end, I manually added .q-ripple { to my CSS. Maybe ideal is even lower like 0.2. Thanks for all your help! This will be a big improvement for people using Quasar for mobile. |
hmm, are you sure it's not ok with beta.10? I tested both on android and ios and it's fine for me on what device are you testing? |
Is your feature request related to a problem? Please describe.
I'm a big fan of Quasar and greatly appreciate that it offers v-ripple and v-ripple.early (which I assume was intended for touch screens). However, it triggers every time you lightly touch, even if you're scrolling quickly. On most native mobile apps that feature cards with rippling (e.g. many news apps or social network apps), the rippling effect won't trigger if scrolling quickly.
Describe the solution you'd like
If scrolling quickly, don't trigger v-ripple, or in my case it is specifically when using QCard or QCardSection, so it could be tailored specifically to that use-case.
Describe alternatives you've considered
The main alternative for me as a mobile app developer would be to either use a flat UI that doesn't use rippling for cards, or to find a way to engineer this feature.
Additional context
Add any other context or screenshots about the feature request here.
The text was updated successfully, but these errors were encountered: