chandlerswift/lawrencedeerclub
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Fix mobile popups to window

Browse source 
This doesn't really do all that great a job; Leaflet doesn't really seem
to be equipped to do this well (or, more likely, I'm just not figuring
out how to do it!).

The hack with the extra container is necessary because the transform on
the `.leaflet-map-pane` element creates a new stacking context, which
messes up even `position: fixed`. I wasn't able to figure out a way to
get around this.

Written on an airplane without an internet connection, so per the XKCD
I'd link but can't, "my apparent IQ goes down like 30 points when
[I don't have docs handy; orig "Wikipedia is down"]"!
This commit is contained in:
Chandler Swift 2024-11-30 12:26:39 -06:00
parent 6099269de2
commit 6d81afb395
Signed by: chandlerswift
GPG key ID: A851D929D52FB93F
1 changed files with 34 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
map.html
View file

@ -31,10 +31,36 @@
top: 10px; top: 10px;
text-shadow: 0 0 2px white; text-shadow: 0 0 2px white;
} }
.leaflet-popup-content-wrapper {
height: min(800px, 60vh);
overflow-y: auto;
}
#popupcontainer {
position: relative;
z-index: 1000;
}
#popupcontainer .leaflet-popup-content-wrapper {
height: unset;
}
#popupcontainer .leaflet-popup {
transform: none !important;
position: fixed;
width: 100vw;
height: 100vh;
right: 0;
left: 0 !important;
top: 1em;
bottom: 1em !important;
overflow: auto;
}
#popupcontainer .leaflet-popup-content {
width: initial;
}
</style> </style>
</head> </head>
<body> <body>
<div id="map"></div> <div id="map"></div>
<div id="popupcontainer" class="leaflet-container"></div>
<script> <script>
(async function() { (async function() {
const map = L.map('map').setView([94.505, -0.09], 13); const map = L.map('map').setView([94.505, -0.09], 13);
@ -90,7 +116,14 @@
<img style="width: min(80vw, 300px);" src="images/${stand.image}"> <img style="width: min(80vw, 300px);" src="images/${stand.image}">
${attributesString} ${attributesString}
`; `;
marker.bindPopup(popupContentWrapper); let popupOptions = {};
// TODO: evaluate this when creating popup instead of at
// page instantiation time -- if the page is resized, this
// won't keep up with those changes.
if (window.visualViewport.width < 600) {
popupOptions.pane = document.getElementById('popupcontainer');
}
marker.bindPopup(popupContentWrapper, popupOptions);
} }
} }