Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Positioning Leaflet elements using CSS Grid #784

Open
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

modos189
Copy link
Contributor

@modos189 modos189 commented Nov 23, 2024

  • The element for selecting highlighting has been moved to leaflet-control-container. This allowed to apply the same indentation for all elements. For example, this fixes accessing the element on smartphones without using the app Unable to close "info screen" on Firefox on Android #781 (comment) close Unable to close "info screen" on Firefox on Android #781
  • Leaflet controls now use CSS Grid instead of complex indentation calculations
  • Use Leaflet's native attribution control for Google Maps layer
  • Always position scale bar in bottom right corner
  • Disabled closing the Info panel when closing the portal in the mobile version

Copy link

github-actions bot commented Nov 23, 2024

🤖 Pull request artifacts

file commit
IITC_Mobile-test.apk 9e89dc0
test-0.39.1.20241129.105636.zip 9e89dc0

See build on website

@modos189 modos189 marked this pull request as ready for review November 23, 2024 16:25
@xscreach
Copy link
Contributor

Tested mobile app, seems to have no effect which is expected 👍

@modos189
Copy link
Contributor Author

I've added another commit now. I forgot to send it earlier.
This also affects IITC Mobile, pressing “x” only closes the portal and does not go to the map. I noticed that I don't use this button in the mobile version and it would be useful to close the active portal if required. In the unofficial IITC for android this button is not visible at all.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could we benefit from making this a leaflet control ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For .leaflet-top, .leaflet-bottom, pointer-events: none; is set in the Leaflet styles
Except for .leaflet-control, it is set to pointer-events: auto; for clickability

Another option is to remove the leaflet-control class from the highlighting selection and set pointer-events: auto; for it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Unable to close "info screen" on Firefox on Android
3 participants