[busy.org] Clicking on busy icon should take user to feed on mobile screen

mightypanda (64)in #utopian-io • 7 years ago

Project Information

Repository : https://github.com/busyorg/busy
Platform : http://busy.org

Expected behavior

When I click anywhere on the busy icon (lightening bolt along with word busy) should take me to the feed on mobile phones.

Actual behavior

Click area on busy icon is very inconsistent based on which mobile phone you are using. In some phones, only lightening bolt is clickable and in some its clickable upto bus and not y.

How to reproduce

On mobile devices, go to your profile page. You can use google dev toolbar to verify this issue.
Try clicking on the busy text. This issue is easily reproducible on iphone 5/se size and galaxy s8.

Technical analysis

This is occurring because of top nav menu container. It has a width of 270px set which overflows part of busy icon on mobile devices and makes it unclickable. Refer image below:

Phone 1

Phone 2

Solution

Removing width entirely fixes the issue and has no implication on existing UI.

Device : Samsung S8
System Operating : 8.0.0 Oreo
Browser : Google Chrome ( 66.0.3359.158 Version)

Proof Of Work Done

Github profile
Problem Report

#bug-hunting #busy

7 years ago in #utopian-io by mightypanda (64)

$13.86

Sort:

Trending

[-]

tobias-g (69) 7 years ago

Thanks for your contribution.

I was able to replicate the issue your discuss and was unable to find a duplicate. I can see that this has been picked up by a contributor and will be resolved upon the success of their pull request being merged.

Firstly of all, it's great that you have taken my feedback from a previous post surrounding looking for the cause of the issue and providing a possible solution. I believe you could have been more detailed with this, but have scoring full points of this questions because A) I believe this would resolve the issue and as you mention I couldn't see a negative effect on the UI by removing the width and B) you've took my feedback onboard to help provide more value to the open source community. I will provide some extra feedback on how you could improve this further later in this reply.

Your title was of good quality, well done.
Your expected and actual behavior was clear enough to understand the issue without reading the rest of the post, this is a great and exactly what I'm looking for when I review a contribution. It's great that you provide devices as it provides real-world use cases where this will be an issue, but overall it's a certain width where this will become an issue, you could have pinpointed this issue a bit more here by mentioned the width where it starts to become an issue. This is around 395px btw.
Your steps could have been improved, I would have liked to have seen more here, with actual steps. Your post assumes prior knowledge of the UI, which although when reporting to current developers is fine, you should provide a little more detail. For example, a pre-requisite of testing is that you're not already on the feed page.
A video wouldn't have hurt here, although your images are good and I like that they clearly show the issue within your technical analysis so it doesn't negatively affect this contribution not having them on this occasion.
Within your solution, you should have really defined the class which needs to be changed rather than relating back to previous sections. For example .topnav-layout .right
I'm not sure why you mentioned "Device: Samsung S8" or "System Operating: 8.0.0 Oreo" in your contribution as you conducted the testing on desktop, I believe this is a copy from a previous post and not see how it relates.
Great to see you reported this on GitHub, as mentioned at the started this issue is awaiting a fix. Thanks, keep it up.

Once again, thanks for your contribution and look forward to your future contributions.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.

Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

$3.09

2 votes

[-]

mightypanda (64) 7 years ago

Thanks for your review. I did keep in my mind your last review comments where finding information for this issue.

I did not include lot of reproducible steps because it was a difficult to explain issue to non technical person.
px size is not really a standard i think because it will depend on pixel density.
Added image to show the exact class and property.
I added device because I can reproduce it on my phone but it was difficult to record and show issue with technical details in the device, so i did it on desktop to show the real issue.