kevinsivic/dawarich
1
0
Fork 0
mirror of https://github.com/Freika/dawarich.git synced 2026-01-10 17:21:38 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add collapsible map controls panel for mobile view

Browse source
This commit is contained in:
Eugene Burmakin 2025-10-14 14:21:48 +02:00
parent 9953c2fb88
commit 4d5088a014
9 changed files with 164 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/builds/tailwind.css
View file

File diff suppressed because one or more lines are too long

27
app/assets/stylesheets/leaflet_theme.css
View file

@ -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 {

1
app/assets/svg/icons/lucide/outline/chevron-down.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 272 B

1
app/assets/svg/icons/lucide/outline/chevron-up.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 270 B

5
app/javascript/controllers/add_visit_controller.js
View file

@ -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

25
app/javascript/controllers/map_controls_controller.js Normal file
View file

@ -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"/>'
}
}
}

14
app/javascript/maps/visits.js
View file

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

6
app/views/layouts/map.html.erb
View file

@ -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>

58
app/views/map/index.html.erb
View file

@ -1,11 +1,27 @@
<% content_for :title, 'Map' %>
<div class="flex flex-col lg:flex-row lg:space-x-4 w-full">
<div class='w-full'>
<div class="flex flex-col space-y-4 mb-4 w-full" style="margin-top: 5rem;">
<!-- Floating Date Navigation Controls -->
<div class="top-20 left-4 right-4 z-30" data-controller="map-controls">
<!-- 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="w-full sm:w-1/12 md:w-1/12 lg:w-1/12">
<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 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' %>