feat(mobile): immersive header & footer (proof of concept)

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")

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;

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);