croma-app / huehive-mobile-app

[HueHive] : An open source react native app for web, iOS and android for color palette management
https://huehive.co
MIT License
61 stars 21 forks source link

Navigation Menu overlapping on Web Mobile #160

Closed highb33kay closed 1 year ago

highb33kay commented 2 years ago

Issue: the navigation Menu Discord overlaps the edit button on mobile.

OS: Android.

Screenshot_20221016-091212

kamalkishor1991 commented 2 years ago

Thanks @highb33kay for reporting. We need to only show 3 icons in the home screen and not show these icons in other screens. Please feel free to fix it if anyone is interested. This needs to be fixed in the web branch.

highb33kay commented 2 years ago

Assign me then. Thank you @kamalkishor1991

highb33kay commented 2 years ago

Can you point me in the right direction as to location the code source? @kamalkishor1991

highb33kay commented 2 years ago

I think I see it Navigation

kamalkishor1991 commented 2 years ago

Yes it is defined here https://github.com/croma-app/croma/blob/51f1793c20597d1463a4fb4314f25fb8bcc69d1d/navigation/NavigatorHelper.js#L161

highb33kay commented 2 years ago

Hi again @kamalkishor1991 . I don't know enough react to fix this alone. So any suggestions?

So here is what I have so far:

  1. I think the navigationHelper.js file is okay and the issue lies in the different screen the function is being called. A sure fix would be to remove any screen that isnt the home screen that calls this function.
  2. If 1 is not the case, another theory is that the navigation menus somehow got tangled together and are being bundled as one, which is causing the issue. a fix would be to untangle them (Sorry if i am not using the right words, I dont really understand how react works)

That is all I have as far as theories are concerned.

I tried using chrome inspect tools and I found out that doesn't work for react lol.

kamalkishor1991 commented 2 years ago

@highb33kay I think way to implement it is to remove it from navigation and implement a custom header. You can refer to custom header here. https://github.com/croma-app/croma/blob/51f1793c20597d1463a4fb4314f25fb8bcc69d1d/screens/ColorListScreen.js#L53

highb33kay commented 2 years ago

That is a big help, thank you.

nisilachandunu commented 1 year ago

is this issue fixed?

kamalkishor1991 commented 1 year ago

@nisilachandunu no.

willdelorm commented 1 year ago

Hi @kamalkishor1991, I'd like to take a stab at this. Is that alright? :)

kamalkishor1991 commented 1 year ago

@willdelorm sure. Thanks Let me know if you need any help

mtalhabaig3 commented 1 year ago

Hi @kamalkishor1991, I'd like to try to fix this issue, will that be alright?

kamalkishor1991 commented 1 year ago

@mtalhabaig3 the old website is getting deprecated and being replaced by https://huehive.co Closing this Since this is web mobile only issue and no longer applicable in the new website. If you want to contribute consider helping out with the mobile app. Let me know if you need help in getting started in our discord channel. https://discord.com/invite/ZSBVsBqDtg Thanks

mtalhabaig3 commented 1 year ago

@kamalkishor1991 yes sure! Thank you