Add collapsible map controls panel for mobile view

app/assets/stylesheets/leaflet_theme.css

@@ -34,6 +34,7 @@
   color: var(--leaflet-text-color) !important;
   border-color: var(--leaflet-border-color) !important;
   box-shadow: 0 1px 4px var(--leaflet-shadow-color) !important;
+
 }
 
 /* Leaflet zoom buttons */
@@ -51,6 +52,32 @@
 .leaflet-control-layers-toggle {
   background-color: var(--leaflet-bg-color) !important;
   color: var(--leaflet-text-color) !important;
+  /* Replace default icon with custom SVG */
+  background-image: none !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+.leaflet-control-layers-toggle::before {
+  content: '' !important;
+  display: block !important;
+  width: 24px !important;
+  height: 24px !important;
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"/><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"/></svg>') !important;
+  background-size: contain !important;
+  background-repeat: no-repeat !important;
+  background-position: center !important;
+}
+
+/* Dark theme - use white stroke for the icon */
+[data-theme="dark"] .leaflet-control-layers-toggle::before {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"/><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"/></svg>') !important;
+}
+
+/* Light theme - use black stroke for the icon */
+[data-theme="light"] .leaflet-control-layers-toggle::before {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"/><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"/></svg>') !important;
 }
 
 .leaflet-control-layers-expanded {

app/assets/svg/icons/lucide/outline/chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>

app/assets/svg/icons/lucide/outline/chevron-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up-icon lucide-chevron-up"><path d="m18 15-6-6-6 6"/></svg>

app/javascript/controllers/add_visit_controller.js

@@ -84,9 +84,10 @@ export default class extends Controller {
         button.style.height = '48px';
         button.style.borderRadius = '4px';
         button.style.padding = '0';
-        button.style.lineHeight = '48px';
+        button.style.display = 'flex';
+        button.style.alignItems = 'center';
+        button.style.justifyContent = 'center';
         button.style.fontSize = '18px';
-        button.style.textAlign = 'center';
         button.style.transition = 'all 0.2s ease';
 
         // Disable map interactions when clicking the button

app/javascript/controllers/map_controls_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["panel", "toggleIcon"]
+
+  toggle() {
+    this.panelTarget.classList.toggle("hidden")
+
+    // Toggle the icon between chevron-down and chevron-up
+    const currentIcon = this.toggleIconTarget.querySelector('svg')
+    const isChevronDown = currentIcon.classList.contains('lucide-chevron-down')
+
+    if (isChevronDown) {
+      // Replace with chevron-up
+      currentIcon.classList.remove('lucide-chevron-down')
+      currentIcon.classList.add('lucide-chevron-up')
+      currentIcon.innerHTML = '<path d="m18 15-6-6-6 6"/>'
+    } else {
+      // Replace with chevron-down
+      currentIcon.classList.remove('lucide-chevron-up')
+      currentIcon.classList.add('lucide-chevron-down')
+      currentIcon.innerHTML = '<path d="m6 9 6 6 6-6"/>'
+    }
+  }
+}

app/javascript/maps/visits.js

@@ -71,16 +71,17 @@ export class VisitsManager {
     const DrawerControl = L.Control.extend({
       onAdd: (map) => {
         const button = L.DomUtil.create('button', 'leaflet-control-button drawer-button');
-        button.innerHTML = '⬅️'; // Left arrow icon
+        button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panel-right-open-icon lucide-panel-right-open"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/><path d="m10 15-3-3 3-3"/></svg>'; // Left arrow icon
         // Style the button with theme-aware styling
         applyThemeToButton(button, this.userTheme);
         button.style.width = '48px';
         button.style.height = '48px';
         button.style.borderRadius = '4px';
         button.style.padding = '0';
-        button.style.lineHeight = '48px';
+        button.style.display = 'flex';
+        button.style.alignItems = 'center';
+        button.style.justifyContent = 'center';
         button.style.fontSize = '18px';
-        button.style.textAlign = 'center';
 
         L.DomEvent.disableClickPropagation(button);
         L.DomEvent.on(button, 'click', () => {
@@ -113,9 +114,10 @@ export class VisitsManager {
         button.style.height = '48px';
         button.style.borderRadius = '4px';
         button.style.padding = '0';
-        button.style.lineHeight = '48px';
+        button.style.display = 'flex';
+        button.style.alignItems = 'center';
+        button.style.justifyContent = 'center';
         button.style.fontSize = '18px';
-        button.style.textAlign = 'center';
         button.onclick = () => this.toggleSelectionMode();
         return button;
       }
@@ -482,7 +484,7 @@ export class VisitsManager {
 
     const drawerButton = document.querySelector('.drawer-button');
     if (drawerButton) {
-      drawerButton.innerHTML = this.drawerOpen ? '➡️' : '⬅️';
+      drawerButton.innerHTML = this.drawerOpen ? '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panel-right-close-icon lucide-panel-right-close"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/><path d="m8 9 3 3-3 3"/></svg>' : '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panel-right-open-icon lucide-panel-right-open"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/><path d="m10 15-3-3 3-3"/></svg>';
     }
 
     const controls = document.querySelectorAll('.leaflet-control-layers, .toggle-panel-button, .leaflet-right-panel, .drawer-button, #selection-tool-button');

app/views/layouts/map.html.erb

@@ -31,16 +31,14 @@
     </div>
 
     <!-- Flash Messages - Fixed below navbar -->
-    <div class='fixed top-16 w-full z-40 h-8'>
+    <div class='fixed top-16 w-full z-40'>
       <div class='container mx-auto px-5'>
         <%= render 'shared/flash' %>
       </div>
     </div>
 
-    <!-- Date Navigation - Fixed below flash messages -->
-
     <!-- Full Screen Map Container -->
-    <div class='absolute top-40 left-0 right-0 bottom-0 w-full z-10 overflow-auto'>
+    <div class='absolute top-16 left-0 right-0 bottom-0 w-full z-10'>
       <%= yield %>
     </div>
 

app/views/map/index.html.erb

@@ -1,11 +1,27 @@
 <% content_for :title, 'Map' %>
 
-<div class="flex flex-col lg:flex-row lg:space-x-4 w-full">
+<!-- Floating Date Navigation Controls -->
-  <div class='w-full'>
+<div class="top-20 left-4 right-4 z-30" data-controller="map-controls">
-    <div class="flex flex-col space-y-4 mb-4 w-full" style="margin-top: 5rem;">
+  <!-- Mobile: Compact Toggle Button -->
+  <div class="lg:hidden">
+    <button
+      type="button"
+      data-action="click->map-controls#toggle"
+      class="btn btn-primary w-full shadow-lg">
+      <span data-map-controls-target="toggleIcon">
+        <%= icon 'chevron-down' %>
+      </span>
+      <span class="ml-2"><%= human_date(@start_at) %></span>
+    </button>
+  </div>
+
+  <!-- Expandable Panel (hidden on mobile by default, always visible on desktop) -->
+  <div
+    data-map-controls-target="panel"
+    class="hidden lg:!block bg-base-100 bg-opacity-95 rounded-lg shadow-lg p-4 mt-2 lg:mt-0">
     <%= form_with url: map_path(import_id: params[:import_id]), method: :get do |f| %>
-        <div class="flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4 sm:items-end">
+      <div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4 lg:items-end">
-          <div class="w-full sm:w-1/12 md:w-1/12 lg:w-1/12">
+        <div class="w-full lg:w-1/12">
           <div class="flex flex-col space-y-2">
             <span class="tooltip" data-tip="<%= human_date(@start_at - 1.day) %>">
               <%= link_to map_path(start_at: @start_at - 1.day, end_at: @end_at - 1.day, import_id: params[:import_id]), class: "btn border border-base-300 hover:btn-ghost w-full" do %>
@@ -14,19 +30,19 @@
             </span>
           </div>
         </div>
-          <div class="w-full sm:w-2/12 md:w-1/12 lg:w-2/12">
+        <div class="w-full lg:w-2/12">
           <div class="flex flex-col space-y-2">
             <%= f.label :start_at, class: "text-sm font-semibold" %>
             <%= f.datetime_local_field :start_at, include_seconds: false, class: "input input-bordered hover:cursor-pointer hover:input-primary", value: @start_at %>
           </div>
         </div>
-          <div class="w-full sm:w-2/12 md:w-1/12 lg:w-2/12">
+        <div class="w-full lg:w-2/12">
           <div class="flex flex-col space-y-2">
             <%= f.label :end_at, class: "text-sm font-semibold" %>
             <%= f.datetime_local_field :end_at, include_seconds: false, class: "input input-bordered hover:cursor-pointer hover:input-primary", value: @end_at %>
           </div>
         </div>
-          <div class="w-full sm:w-1/12 md:w-1/12 lg:w-1/12">
+        <div class="w-full lg:w-1/12">
           <div class="flex flex-col space-y-2">
             <span class="tooltip" data-tip="<%= human_date(@start_at + 1.day) %>">
               <%= link_to map_path(start_at: @start_at + 1.day, end_at: @end_at + 1.day, import_id: params[:import_id]), class: "btn border border-base-300 hover:btn-ghost w-full" do %>
@@ -35,34 +51,37 @@
             </span>
           </div>
         </div>
-          <div class="w-full sm:w-6/12 md:w-2/12 lg:w-1/12">
+        <div class="w-full lg:w-1/12">
           <div class="flex flex-col space-y-2">
-              <%= f.submit "Search", class: "btn btn-primary hover:btn-info" %>
+            <%= f.submit "Search", class: "btn btn-primary hover:btn-info w-full" %>
           </div>
         </div>
-          <div class="w-full sm:w-6/12 md:w-2/12 lg:w-1/12">
+        <div class="w-full lg:w-1/12">
           <div class="flex flex-col space-y-2 text-center">
             <%= link_to "Today",
               map_path(start_at: Time.current.beginning_of_day, end_at: Time.current.end_of_day, import_id: params[:import_id]),
-                class: "btn border border-base-300 hover:btn-ghost" %>
+              class: "btn border border-base-300 hover:btn-ghost w-full" %>
           </div>
         </div>
-          <div class="w-full sm:w-6/12 md:w-3/12 lg:w-2/12">
+        <div class="w-full lg:w-2/12">
           <div class="flex flex-col space-y-2 text-center">
-              <%= link_to "Last 7 days", map_path(start_at: 1.week.ago.beginning_of_day, end_at: Time.current.end_of_day, import_id: params[:import_id]), class: "btn border border-base-300 hover:btn-ghost" %>
+            <%= link_to "Last 7 days", map_path(start_at: 1.week.ago.beginning_of_day, end_at: Time.current.end_of_day, import_id: params[:import_id]), class: "btn border border-base-300 hover:btn-ghost w-full" %>
           </div>
         </div>
-          <div class="w-full sm:w-6/12 md:w-3/12 lg:w-2/12">
+        <div class="w-full lg:w-2/12">
           <div class="flex flex-col space-y-2 text-center">
-              <%= link_to "Last month", map_path(start_at: 1.month.ago.beginning_of_day, end_at: Time.current.end_of_day, import_id: params[:import_id]), class: "btn border border-base-300 hover:btn-ghost" %>
+            <%= link_to "Last month", map_path(start_at: 1.month.ago.beginning_of_day, end_at: Time.current.end_of_day, import_id: params[:import_id]), class: "btn border border-base-300 hover:btn-ghost w-full" %>
           </div>
         </div>
       </div>
     <% end %>
+  </div>
+</div>
 
+<!-- Full Screen Map -->
 <div
   id='map'
-        class="w-full z-0"
+  class="w-full h-full"
   data-controller="maps points add-visit family-members"
   data-points-target="map"
   data-api_key="<%= current_user.api_key %>"
@@ -77,12 +96,9 @@
   data-features='<%= @features.to_json.html_safe %>'
   data-family-members-features-value='<%= @features.to_json.html_safe %>'
   data-family-members-user-theme-value="<%= current_user&.theme || 'dark' %>">
-        <div data-maps-target="container" class="h-[25rem] rounded-lg w-full min-h-screen z-0">
+  <div data-maps-target="container" class="w-full h-full">
     <div id="fog" class="fog"></div>
   </div>
 </div>
-    </div>
-  </div>
-</div>
 
 <%= render 'map/settings_modals' %>