hidden 'make report' instructions on mobile devices #101
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ow message telling mobile users to 'double click' to add a new report
danwillett
changed the title
…t having an effect
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
For mobile users, the instructions creating a report by tapping twice is mostly hidden at the top of the map.
Solution
I edited the styling for the tip-msg class in common.css file in the mapApp/css folder. The styling for the banner was set to have an absolute position 60px from the top of the screen. I changed this value to 80px which now makes the instruction banner fully visible.
I also fixed the bootstrap classname of directions element from ".alert-dismissable" to ".alert-dismissible" which now adds extra padding to the element's close button.
Testing
Open the staging server on your phone, where this branch is now deployed as of 09/27/2023. You can also open up the staging server on your computer, open up the inspector, and change the device view. Make sure to clear your browser cache after resetting the device view.
You should see a blue banner with instructions and a close button. Clicking the close button should remove the instructions.