search

waterthetrees / wtt_front

Water the Trees React frontend
https://waterthetrees.com
Creative Commons Zero v1.0 Universal
9 stars 24 forks source link

[Tree Details - Bug] Maintenance Mobile View Clipped Title #792

Open ri0nardo opened 11 months ago

ri0nardo commented 11 months ago

Quick summary:

When going into maintenance, the title section is clipped. The section cannot be read, and needs to be adjusted so it can be read by the user.

Get Started:

Get started with our onboarding, https://github.com/waterthetrees/waterthetrees/wiki/Onboarding and read through the epic for relevant details of this ticket. https://github.com/waterthetrees/wtt_front/issues/433

Resources:

Current State

image0

ri0nardo commented 11 months ago

@arc6789 would this be a quick fix? Found this small issue when trying to use the mobile version of wtt.

arc6789 commented 11 months ago

I don't see this issue on desktop when I change the screen width to mobile size. I am trying to test it on a mobile device and see if I can reproduce this bug. In general you should be able to see the Tree Details header at all for the maintenance popup.

I am not sure how to get past the sign in screen because on mobile there is no google auth. Do I need to use a test account to sign into Water the Trees on mobile?

@ri0nardo

ri0nardo commented 11 months ago

I don't see this issue on desktop when I change the screen width to mobile size. I am trying to test it on a mobile device and see if I can reproduce this bug. In general you should be able to see the Tree Details header at all for the maintenance popup.

Regarding the developer tool on chrome, it won't show for some reason. I found the issue when using Safari on my phone. I just tried using Chrome to see if the clipping occurred there and it did. I am not sure how to bring in the full mobile view with the url at the top and the other features at the bottom for chrome.

Is the "Tree details" and close button a separate container from the main content? As in there are two containers or div blocks? And the "tree details" is sticky which forces it to be on top and overlap the other container with the main content?

I just noticed on desktop that the "Tree details" container does not appear. So essentially there are 2 buttons to go back or close the section. For the redesign, the sticky section at the top of the screen are unique per screen so how you did it on the "maintenance" screen is correct. If we could remove the sticky section from the maintenance view, then we are fine since there is a back button already included with the tree name title section. If you have a different view then we can discuss!

image0 (1)

desktop

I am not sure how to get past the sign in screen because on mobile there is no google auth. Do I need to use a test account to sign into Water the Trees on mobile?

@zoobot how to resolve the testing?

arc6789 commented 11 months ago

@ri0nardo I can't see the bug on Safari as well as Chrome. The UI is supposed to look as per your mockups. Here is my PR where I dropped screenshots of how they look like after working on this feature https://github.com/waterthetrees/wtt_front/pull/782

Do you only see this on mobile or desktop as well? Also have you tried to open the website up with an incognito window? It could be a problem with caching the previous UI

If you are online tomorrow maybe we can have a quick chat because I am not sure why you are seeing the Tree Details sticky header at all. Also my mistake on my last message, looks like I need a testing account for the prod site not anything specifically for mobile.

ri0nardo commented 11 months ago

@ri0nardo I can't see the bug on Safari as well as Chrome. The UI is supposed to look as per your mockups. Here is my PR where I dropped screenshots of how they look like after working on this feature #782

Do you only see this on mobile or desktop as well? Also have you tried to open the website up with an incognito window? It could be a problem with caching the previous UI

The desktop is perfect! No issues with desktop.

The bug comes when viewing on a mobile device. I only tested it on Chrome and Safari on an iPhone, not sure about other mobile browsers. The issue doesn't occur when using the developer tools or any other tool to view a mobile screen size when on desktop. The issue crops out a certain area below the screen that is unforeseen without using a mobile device (iPhone, Samsung, etc.) I tried using incognito on a mobile device, but the issue still occurs.

I am attaching a markup of cropped areas that are only seen on a mobile device. I am not sure how to resolve the issue. This is a web app issue. One solution is that when the screen gets to a certain dimension size, there is a padding that occurs where it pushes the components up above the Safari URL tab component.

I found that in maintenance when viewing on a mobile device that there is no submit or cancel button that is visible. I force scrolled on my phone, but I did not see it.

Let me know if this is still confusing or an issue you can't find. I am just bringing this up as an bug and you were able to move the modal into the sidebar. So you are the most familiar with how its setup. Can tag others if they know better solutions. Ignore the "Map View" issues, I am just adding this because the issue is not just maintenance.

Tree Care Comparison

Map View Comparison

If you are online tomorrow maybe we can have a quick chat because I am not sure why you are seeing the Tree Details sticky header at all. Also my mistake on my last message, looks like I need a testing account for the prod site not anything specifically for mobile.