#835 Close Safari buttom bar for fullscreen map

activist-org · Sep 26, 2024 · c0272f3 · c0272f3
1 parent 2958f1f
commit c0272f3
Showing 1 changed file with 24 additions and 0 deletions.
diff --git a/frontend/components/media/MediaMap.vue b/frontend/components/media/MediaMap.vue
@@ -29,6 +29,13 @@ const isTouchDevice =
   "ontouchstart" in window ||
   navigator.maxTouchPoints > 0;
 
+const applyMaxWindowHeight = () => {
+  document.documentElement.style.setProperty(
+    "--app-height",
+    `${window.innerHeight}px`
+  );
+};
+
 function isWebglSupported() {
   if (window.WebGLRenderingContext) {
     const canvas = document.createElement("canvas");
@@ -242,6 +249,8 @@ onMounted(() => {
           })
         );
 
+        map.on("fullscreenchange", applyMaxWindowHeight);
+
         const popup = new maplibregl.Popup({
           offset: 25,
         }).setHTML(
@@ -433,3 +442,18 @@ onMounted(() => {
     });
 });
 </script>
+
+<style scoped>
+:root {
+  --app-height: 100%;
+}
+html,
+body {
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  height: var(--app-height);
+}
+</style>