kevinsivic/dawarich
1
0
Fork 0
mirror of https://github.com/Freika/dawarich.git synced 2026-01-11 09:41:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Open side panel on the left of controls

Browse source
This commit is contained in:
Eugene Burmakin 2025-11-08 16:05:46 +01:00
parent 2a8522272d
commit 4a022d9695
3 changed files with 16 additions and 20 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/application.tailwind.css
View file

@ -76,33 +76,34 @@
/* Drawer Panel Styles */ /* Drawer Panel Styles */
.leaflet-drawer { .leaflet-drawer {
position: absolute; position: absolute;
top: 0; top: 10px;
right: 0; right: 70px; /* Position to the left of the control buttons with margin */
width: 338px; width: 338px;
height: 100%; max-height: calc(100% - 20px);
background: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.5);
transform: translateX(100%); border-radius: 8px;
transition: transform 0.3s ease-in-out; opacity: 0;
visibility: hidden;
transform: scale(0.95);
transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s;
z-index: 450; z-index: 450;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
height: auto; /* Make height fit content */
} }
.leaflet-drawer.open { .leaflet-drawer.open {
transform: translateX(0); opacity: 1;
visibility: visible;
transform: scale(1);
} }
/* Controls transition */ /* Controls remain in place - no transition needed */
.leaflet-control-layers, .leaflet-control-layers,
.leaflet-control-button, .leaflet-control-button,
.toggle-panel-button { .toggle-panel-button {
transition: right 0.3s ease-in-out;
z-index: 500; z-index: 500;
} }
.controls-shifted {
right: 338px !important;
}
/* Selection Tool Styles */ /* Selection Tool Styles */
.leaflet-control-custom { .leaflet-control-custom {
background-color: white; background-color: white;

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

@ -626,11 +626,6 @@ export class VisitsManager {
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>'; 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');
controls.forEach(control => {
control.classList.toggle('controls-shifted');
});
// Update the drawer content if it's being opened - but don't fetch visits automatically // Update the drawer content if it's being opened - but don't fetch visits automatically
// Only show the "no data" message if there's no selection active // Only show the "no data" message if there's no selection active
if (this.drawerOpen && !this.isSelectionActive) { if (this.drawerOpen && !this.isSelectionActive) {