search

publiclab / plots2

a collaborative knowledge-exchange platform in Rails; we welcome first-time contributors! :balloon:
https://publiclab.org
GNU General Public License v3.0
961 stars 1.83k forks source link

Menu icon disappears on tablets #7114

Open anthony-zhou opened 4 years ago

anthony-zhou commented 4 years ago

Please describe the problem (or idea)

What happened just before the problem occurred? Or what problem could this idea solve?

When the width of a device is exactly 768px (e.g. on an iPad), the menu icon in the top right corner disappears: image

Because of this, on devices of this width, users have no way to access the sign up, store, and donate options from the navbar. The problem is due to an overlap in several CSS media queries.

In-depth explanation:

I've managed to narrow down the problem to a bit of overlap in some CSS media queries: the expanded options only appear at min-width: 768, whereas the menu icon on medium-sized screens disappears at max-width: 768. This means that at width=768px, the expanded options appear but the menu icon does not. Another important media query affects the signup button itself, which is set to disappear starting at min-width: 768.

To fix this issue means editing these media queries so that they do not overlap, e.g., the expanded options might appear only starting at min-width: 769, and so on. The difficult part about this is that there are a lot of style rules that depend on the rule of 768px, so decisions will have to be made as to what kinds of menu options should be displayed where. Also, the style rules are hard to find; some of them are in bootstrap.min.css, and I'm not sure where many of the others are. If there was a way to track down where CSS rules came from that would be helpful.

What did you expect to see that you didn't?

The signup, store, and donate options were inaccessible on screens of 768px.

Please show us where to look

https://publiclab.org

What's your PublicLab.org username?

This can help us diagnose the issue:

anthony_zhou03

Browser, version, and operating system

Many bugs are related to these -- please help us track it down and reproduce what you're seeing! I am using Chrome v79.0.3945.88 (64-bit) Developer tools on Windows 10 to simulate a 768px-wide screen.

Thank you!

Your help makes Public Lab better! We deeply appreciate your helping refine and improve this site.

To learn how to write really great issues, which increases the chances they'll be resolved, see:

https://publiclab.org/wiki/developers#Contributing+for+non-coders

shipcy commented 4 years ago

I want to take this issue.

anthony-zhou commented 4 years ago

@shipcy Go for it! Note that PR #6998 made changes to the navbar that may affect the changes needed here. Not sure if these two are related though.

shipcy commented 4 years ago

@anthony-zhou sorry Sorry for the delay but can I start this issue tomorrow?

anthony-zhou commented 4 years ago

@shipcy Yes, that's fine. Let me know if you need any help!

NitinBhasneria commented 4 years ago

@anthony-zhou Please check it once more like this issue of not appearing of menu icon has already been solved just once check it on the server. @jywarren Can you please review this.