search

nanawel / our-shopping-list

OSL is a simple shared list web-application based on Node and VueJS. Typical uses include shopping lists of course, and any other small todo-list that needs to be used collaboratively.
GNU Affero General Public License v3.0
82 stars 8 forks source link

Can't add item using mobile view #9

Closed tuxrinku closed 1 year ago

tuxrinku commented 1 year ago

When using the app on mobile, I can't see the block to add a new item. Screenshot below. Everything else works fine. Any idea on how to fix this ?

IMG_20221202_113529

nanawel commented 1 year ago

Sorry for that. What device are you using? What Android version?

tuxrinku commented 1 year ago

My bad I completely forgot to put details. I'm using a Poco F2 pro, on Android 11. I tried both firefox and brave browser, the same thing happens on both.

nanawel commented 1 year ago

I use both a Galaxy J5 (Android 5) and a Galaxy A51 (Android 12) with this app and I cannot reproduce this issue on either device. You might want to try yet another browser (Chrome?) just to be sure.

Sorry but atm I can't help :cry:

I'll let this issue open in case someone else can add more details that could help identify the cause.

tuxrinku commented 1 year ago

I think it's just "hiding" behind the android navigation bar, since I can see an element behind it. Probably because the navigation bar is on-screen and not physical. I'll try to play with some css and eventually figure a workaround. Merci !

nanawel commented 1 year ago

Probably because the navigation bar is on-screen and not physical.

On my Galaxy A51 the navigation bar is also on-screen but I don't have this issue :confused:

koeberlue commented 1 year ago

I'm having the same issue on a Fairphone 3 running Firefox 107.1.0 on LineageOS. My wife also has this issue on some Sony Xperia (will check the model and browser if it's important).

Some things I noticed:

It works when using the built-in browser

As a workaround I am currently using HomeApp to launch OurShoppingList. This opens the app in the built-in browser and everything works just fine.

It works when I create a new list

Whenever I create an additional list, everything works fine. I can see the bottom bar to add new items. I can then browse to existing lists and see the bottom bar as well. I can even refresh the site and the bottom bar is still visible.

But the very moment I close the tab and reopen it, the bottom bar is gone. I can only see the small grey bar as in the screenshot.

Changing to desktop view does not help

In firefox you can change the viewport to desktop view. This will of course render everything way smaller and allows you to zoom in and move around. But whatever I try, there is still just a small grey bar at the bottom.

Changing from desktop view back to mobile view works (kind of)

When I go into desktop view, zoom in a little bit, scroll down and then change back to mobile view, the bottom bar suddenly appears. But now the top bar suddenly is gone.

Switching between desktop view and mobile view multiple times while zooming and scrolling around will then at some point fix everything.

nanawel commented 1 year ago

I suspect this comes from these directives that always seemed like a wonky workaround to me:

https://github.com/nanawel/our-shopping-list/blob/6e6f3ba08548ac450a321b26d2ef069661f0f789/client/src/components/ListComponent.vue#L532-L536

Unfortunately my CSS skills are kinda poor so I would love to see what's the "proper way" to do that :thinking:

onjour commented 1 year ago

I have the same issue too on my Android 13 running Mull 108.1.1 and Brave 1.46.154 (Chromium 108.0.5359.128)

Adding on @koeberlue remarks, my best way to resolve this was to use Our Shopping List as a PWA. This way both browsers work flawlessly.

I believe that it is a big drawback for mobile users and that the docs might benefit from a note on that matter

nanawel commented 1 year ago

Hi @tuxrinku @koeberlue @onjour I've made a tiny change on the CSS and deployed a temporary version at https://dev.osl.lanterne-rouge.info.

Since I'm unable to reproduce the issue myself with my own devices, could you tell me how it's working with yours?

onjour commented 1 year ago

Hi @nanawel !

Thanks for the follow up! Well on my side it works very nicely. That did it for me on the two browsers I mentioned earlier 👍 I was totally able to add two items on the "test" list from my phone 😜

nanawel commented 1 year ago

The fix has been released: https://github.com/nanawel/our-shopping-list/releases/tag/2.5.1

nanawel commented 1 year ago

Reopening. The new version broke the rendering on my device instead :sob: (it was working fine on my computer though)

nanawel commented 1 year ago

Hi @onjour @tuxrinku @koeberlue

I'm trying a new approach, but I still need your help in confirming it works "not only on my computer" (or mobile): https://dev.osl.lanterne-rouge.info

Could you check again please? I need the results both in a browser and as a PWA, to be sure.

:x: Edit: Nope, it's buggy on my device when the on-screen keyboard is displayed. I'll keep digging.

onjour commented 1 year ago

Hi @nanawel!

Thanks for digging into this. I tried yesterday and everything was fine, sorry to read that there are still issues on your side. I hope you'll figure that soon enough 👍

nanawel commented 1 year ago

OK, found a lead: https://developer.chrome.com/blog/viewport-resize-behavior/

So this is new with recent versions of Chrome and derivatives. I could confirm this when I updated my browser (I scarcely do so).

nanawel commented 1 year ago

This time I'm almost 100% confident that it now should be fixed the right way.

@tuxrinku @koeberlue @onjour can I ask you to test it again on https://dev.osl.lanterne-rouge.info/ please?

Thanks

Edit: Well, it still breaks on my old Galaxy J5 running Android 5 with Vivaldi 3.7. The bottom search bar is no longer reachable when the list grows larger than the screen's height. I'll try to figure out if I can find an acceptable workaround for this case.

nanawel commented 1 year ago

For the record, the root of this issue seems to be about

So I've made a clean fix for recent browsers (it's the easiest), and also some workaround based on what I've read here and there on the web. So far I've managed to make it work on:

koeberlue commented 1 year ago

@tuxrinku @koeberlue @onjour can I ask you to test it again on https://dev.osl.lanterne-rouge.info/ please?

Just tested on my phone. Works great. Couldn't get it to make the search bar disappear :+1:

nanawel commented 1 year ago

Closing now that 2.5.2 is out.

Thanks @tuxrinku @koeberlue @onjour