sync: 2026-08-21 17:21:42

templates/index.html

@@ -204,7 +204,7 @@
 
             width: 410px;
 
-            max-height: 55vh;
+            max-height: 30vh;
 
             overflow-y: auto;
 
@@ -218,6 +218,49 @@
                 0 3px 12px rgba(0, 0, 0, 0.30);
         }
 
+        .results-header {
+            position: sticky;
+            top: 0;
+
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            padding: 6px 10px 6px 14px;
+
+            background: white;
+
+            border-bottom:
+                1px solid #eee;
+
+            font-size: 12px;
+            color: #5f6368;
+
+            z-index: 1;
+        }
+
+        .results-minimize {
+            width: 26px;
+            height: 26px;
+
+            border: none;
+
+            border-radius: 50%;
+
+            background: transparent;
+
+            cursor: pointer;
+
+            font-size: 16px;
+            line-height: 1;
+
+            color: #5f6368;
+        }
+
+        .results-minimize:hover {
+            background: #f1f3f4;
+        }
+
         .result {
             display: flex;
 
@@ -580,34 +623,23 @@
            ===================================================== */
 
         .location-button {
-            position: fixed;
+            width: 48px;
-
+            flex-shrink: 0;
-            z-index: 1500;
+            height: 50px;
-
-            right: 18px;
-            bottom: 25px;
-
-            width: 42px;
-            height: 42px;
 
             border: none;
 
-            border-radius: 50%;
+            background: transparent;
-
-            background: white;
-
-            box-shadow:
-                0 2px 7px rgba(0, 0, 0, 0.3);
 
             cursor: pointer;
 
-            font-size: 19px;
+            font-size: 20px;
 
             color: #5f6368;
         }
 
         .location-button:hover {
-            background: #f8f9fa;
+            background: #f1f3f4;
         }
 
 
@@ -655,23 +687,34 @@
          * zoom / pan animations on vector-tile maps.
          */
         .poi-dot {
-            width: 28px;
+            width: 34px;
-            height: 28px;
+            height: 34px;
             border-radius: 50%;
             border: 3px solid #fff;
-            box-shadow: 0 2px 6px rgba(0,0,0,0.4);
+            box-shadow:
+                0 3px 10px rgba(0,0,0,0.35),
+                inset 0 -2px 4px rgba(0,0,0,0.15);
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 14px;
+            font-size: 15px;
             cursor: pointer;
-            /* Prevent any CSS transition from fighting MapLibre's
+            /* No transform transitions — they fight MapLibre's
-               per-frame transform updates during camera moves. */
+               per-frame camera updates and cause wobble. */
             will-change: transform;
         }
 
+        .poi-dot:hover {
+            box-shadow:
+                0 5px 14px rgba(0,0,0,0.45),
+                inset 0 -2px 4px rgba(0,0,0,0.15);
+        }
+
         .poi-dot.selected {
-            box-shadow: 0 0 0 4px rgba(26,115,232,0.35), 0 2px 8px rgba(0,0,0,0.5);
+            box-shadow:
+                0 0 0 5px rgba(26,115,232,0.30),
+                0 4px 12px rgba(0,0,0,0.45),
+                inset 0 -2px 4px rgba(0,0,0,0.15);
         }
 
         /* User location marker (blue pulsing dot) */
@@ -679,10 +722,15 @@
             cursor: default;
         }
 
+        @keyframes loc-pulse {
+            0%   { transform: scale(1);   opacity: 0.6; }
+            100% { transform: scale(2.8); opacity: 0;   }
+        }
+
         .user-loc-dot {
             position: relative;
-            width: 18px;
+            width: 16px;
-            height: 18px;
+            height: 16px;
 
             border-radius: 50%;
 
@@ -691,22 +739,35 @@
             border: 3px solid white;
 
             box-shadow:
-                0 0 0 2px rgba(26, 115, 232, 0.35),
+                0 0 0 2px rgba(26, 115, 232, 0.4),
-                0 2px 6px rgba(0, 0, 0, 0.4);
+                0 2px 8px rgba(0, 0, 0, 0.35);
+        }
+
+        .user-loc-dot::before {
+            content: "";
+
+            position: absolute;
+            inset: -3px;
+
+            border-radius: 50%;
+
+            border: 2px solid rgba(26, 115, 232, 0.5);
+
+            animation: loc-pulse 2s ease-out infinite;
         }
 
         .user-loc-dot::after {
             content: "";
 
             position: absolute;
-            inset: -10px;
+            inset: -12px;
 
             border-radius: 50%;
 
             background:
                 radial-gradient(
                     circle,
-                    rgba(26, 115, 232, 0.25) 0%,
+                    rgba(26, 115, 232, 0.20) 0%,
                     rgba(26, 115, 232, 0) 70%
                 );
         }
@@ -752,10 +813,6 @@
                 max-height: 60vh;
             }
 
-            .location-button {
-                right: 12px;
-                bottom: 72px;
-            }
         }
     </style>
 </head>
@@ -842,6 +899,14 @@
 
     <div class="search-box">
 
+        <button
+            id="location-button"
+            class="location-button"
+            title="My location"
+        >
+            ◎
+        </button>
+
         <div class="search-icon">
             🔍
         </div>
@@ -906,19 +971,6 @@
 </div>
 
 
-<!-- =========================================================
-     LOCATION BUTTON
-     ========================================================= -->
-
-<button
-    id="location-button"
-    class="location-button"
-    title="My location"
->
-    ◎
-</button>
-
-
 <script src="https://unpkg.com/maplibre-gl@4/dist/maplibre-gl.js"></script>
 
 
@@ -1132,7 +1184,29 @@
         }
 
 
-            resultsCard.innerHTML = "";
+            resultsCard.innerHTML = `
+                <div class="results-header">
+                    <span>Results</span>
+                    <button
+                        id="results-minimize"
+                        class="results-minimize"
+                        title="Minimize"
+                    >
+                        \u2212
+                    </button>
+                </div>
+            `;
+
+            document
+                .getElementById(
+                    "results-minimize"
+                )
+                .addEventListener(
+                    "click",
+                    () => {
+                        resultsCard.style.display = "none";
+                    }
+                );
 
             const lngLats = [];
 
@@ -1397,12 +1471,12 @@
 
         // POIs: zoom in close to see the building/spot.
         if (kind === "poi") {
-            return 17;
+            return 15;
         }
 
         // Addresses: street-level view.
         if (kind === "address") {
-            return 18;
+            return 15;
         }
 
         // Areas: vary by administrative level.