mostly stuff for mobile

src/c3nav/site/static/site/css/c3nav.scss

@@ -21,6 +21,7 @@
     --color-button-border-hover: var(--color-quaternary);
     --color-button-hover: var(--color-quinary);
     --color-focus: var(--color-foreground);
+    --color-attribution-background: var(--color-overlay-background);
 
     --color-map-overlay: var(--color-primary);
     --color-route-dashes: #888888;
@@ -1039,7 +1040,7 @@ main:not([data-view=route-result]) #route-summary {
 }
 
 .leaflet-container .leaflet-control-attribution {
-    background-color: var(--color-overlay-background);
+    background-color: var(--color-attribution-background);
     color: var(--color-foreground);
 
     a {
@@ -1056,7 +1057,7 @@ main:not([data-view=route-result]) #route-summary {
     font-size: 20px;
 }
 
-.leaflet-bar, .leaflet-control-key {
+.leaflet-bar, .leaflet-touch .leaflet-bar, .leaflet-control-key {
     overflow: hidden;
     background-color: var(--color-control-background);
     border-radius: var(--border-radius-leaflet-control);
@@ -1099,7 +1100,7 @@ main:not([data-view=route-result]) #route-summary {
     margin-left: 10px;
 
     > .leaflet-control-scale-line {
-        background-color: var(--color-overlay-background);
+        background-color: var(--color-attribution-background);
         color: var(--color-foreground);
         border-color: var(--color-foreground);
     }
@@ -1584,7 +1585,7 @@ blink {
 }
 
 .leaflet-control-container {
-    .leaflet-bottom.leaflet-right {
+    > .leaflet-bottom.leaflet-right {
         max-height: 100%;
         display: flex;
         flex-direction: column;
@@ -1595,9 +1596,6 @@ blink {
 }
 
 @media screen and (max-width: 320px) {
-    .leaflet-control-container > .leaflet-bottom.leaflet-right {
-        max-height: calc(100% - 60px);
-    }
     header {
         height: 40px;
     }
@@ -1685,11 +1683,19 @@ blink {
     }
 
     > .collapsed-toggle {
+        display: block;
         width: 26px;
         height: 26px;
         line-height: 26px;
         text-align: center;
 
+        color: var(--color-control);
+
+        .leaflet-touch & {
+            width: 30px;
+            height: 30px;
+        }
+
         &::before {
             font-family: 'Material Symbols Outlined';
             content: 'legend_toggle';
@@ -1731,14 +1737,22 @@ blink {
 
     &.leaflet-control-key-expanded > .pin-toggle {
         display: block;
+        .leaflet-touch & {
+            display: none;
+        }
     }
 
+
     > .content {
         display: none;
         padding: 1rem 3rem 1rem 1rem;
         gap: 1rem;
         grid-template-columns: 2rem 1fr;
 
+        .leaflet-touch & {
+            padding: 1rem;
+        }
+
         > .key {
             display: grid;
             grid-column: span 2;
@@ -1757,4 +1771,30 @@ blink {
     &.leaflet-control-key-expanded > .content {
         display: grid;
     }
+}
+
+.leaflet-top.leaflet-right {
+    z-index: 2000;
+}
+
+
+@media (max-width: 500px) {
+    :root {
+        --control-container-minus-size: 100px;
+    }
+    main[data-view=search] {
+        --control-container-minus-size: 70px;
+    }
+    main[data-view^=route] {
+        --control-container-minus-size: 160px;
+    }
+
+
+    .leaflet-control-container > .leaflet-bottom.leaflet-right {
+        max-height: calc(100% - var(--control-container-minus-size) - 50px);
+    }
+
+    .leaflet-top.leaflet-right {
+        margin-top: var(--control-container-minus-size);
+    }
 }

src/c3nav/site/static/site/js/c3nav.js

@@ -2485,12 +2485,12 @@ KeyControl = L.Control.extend({
 
         this._container = L.DomUtil.create('div', 'leaflet-control-key ' + this.options.addClasses);
         this._container.classList.toggle('leaflet-control-key-expanded', pinned);
-        this._content = L.DomUtil.create('div', 'content');
+        this._content = L.DomUtil.create('div', 'content', this._container);
-        const collapsed = L.DomUtil.create('div', 'collapsed-toggle leaflet-control-key-toggle');
+        this._pin = L.DomUtil.create('div', 'pin-toggle material-symbols', this._container);
-        this._pin = L.DomUtil.create('div', 'pin-toggle material-symbols');
         this._pin.classList.toggle('active', pinned);
         this._pin.innerText = 'push_pin';
-        this._container.append(this._pin, this._content, collapsed);
+        this._collapsed = L.DomUtil.create('a', 'collapsed-toggle leaflet-control-key-toggle', this._container);
+        this._collapsed.href = '#';
         this._expanded = pinned;
         this._pinned = pinned;
 
@@ -2501,7 +2501,20 @@ KeyControl = L.Control.extend({
             }, this);
         }
 
-        if (!L.Browser.touch) {
+
+
+        if (L.Browser.touch) {
+            this._pinned = false;
+            console.log('installing touch handlers')
+            $(this._collapsed).click((e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.expand();
+            });
+            $(this._map).on('click', (e) => {
+                this.collapse();
+            });
+        } else {
             L.DomEvent.on(this._container, 'focus', this.expand, this);
             L.DomEvent.on(this._container, 'blur', this.collapse, this);
         }
@@ -2550,7 +2563,9 @@ KeyControl = L.Control.extend({
     },
 
     expand: function () {
+        console.log('expand')
         if (this._pinned) return;
+        console.log('expanding');
         this._expanded = true;
         this._container.classList.add('leaflet-control-key-expanded');
         return this;