From 8a8179ea4fdd089bd1081b12e399c745973e806a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 8 Feb 2025 12:29:02 +0200
Subject: [PATCH] feat(mobile): immersive header & footer (proof of concept)

---
 src/public/app/layouts/mobile_layout.ts |  1 +
 src/public/app/widgets/geo_map.ts       | 12 ++++++++++++
 src/public/stylesheets/style.css        | 16 ++++++++++++++++
 3 files changed, 29 insertions(+)

diff --git a/src/public/app/layouts/mobile_layout.ts b/src/public/app/layouts/mobile_layout.ts
index 6ded38ae4..a18a557dc 100644
--- a/src/public/app/layouts/mobile_layout.ts
+++ b/src/public/app/layouts/mobile_layout.ts
@@ -147,6 +147,7 @@ export default class MobileLayout {
                             .css("position", "relative")
                             .child(
                                 new FlexContainer("row")
+                                    .id("title-bar")
                                     .contentSized()
                                     .css("font-size", "larger")
                                     .css("align-items", "center")
diff --git a/src/public/app/widgets/geo_map.ts b/src/public/app/widgets/geo_map.ts
index d4b7a1792..5d061b8e6 100644
--- a/src/public/app/widgets/geo_map.ts
+++ b/src/public/app/widgets/geo_map.ts
@@ -12,6 +12,18 @@ const TPL = `\
             overflow: hidden;
         }
 
+        .geo-map-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+        }
+
+        .leaflet-top {
+            margin-top: calc(env(safe-area-inset-top) + var(--mobile-title-bar-height));
+        }
+
         .leaflet-top,
         .leaflet-bottom {
             z-index: 900;
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index a85b87e62..816be4158 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -23,6 +23,7 @@
     --submenu-opening-delay: 300ms;
     --launcher-pane-size: 53px;
     --mobile-bottom-offset: calc(env(safe-area-inset-bottom) * 0.75);
+    --mobile-title-bar-height: 36px;
 }
 
 html {
@@ -66,6 +67,21 @@ body.mobile #root-widget {
     padding-bottom: var(--mobile-bottom-offset);
 }
 
+#title-bar {
+    position: fixed;
+    top: 0;   
+    left: 0;
+    right: 0;    
+    z-index: 9999; 
+    padding-top: env(safe-area-inset-top);
+}
+
+#title-bar,
+#mobile-bottom-bar {
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(16px);
+}
+
 body.desktop #root-widget.horizontal-layout {
     padding-top: env(safe-area-inset-top);
     background-color: var(--launcher-pane-background-color);