job folders, selection

2026-02-25 10:25:48 -08:00
parent d617750a46
commit de7789442d
5 changed files with 975 additions and 217 deletions
@@ -149,12 +149,143 @@
        .load-button:hover {
            background: #218838 !important;
        }
+
+        .selection-box {
+            position: absolute;
+            border: 2px dashed #007bff;
+            background: rgba(0, 123, 255, 0.1);
+            pointer-events: none;
+            z-index: 1000;
+        }
+
+        .hamburger-button {
+            display: none;
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            z-index: 1001;
+            background: white;
+            border: none;
+            border-radius: 4px;
+            padding: 10px;
+            cursor: pointer;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+            width: 44px;
+            height: 44px;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .hamburger-button span {
+            display: block;
+            width: 24px;
+            height: 3px;
+            background: #333;
+            border-radius: 2px;
+            transition: all 0.3s ease;
+        }
+
+        .hamburger-button.active span:nth-child(1) {
+            transform: rotate(45deg) translate(6px, 6px);
+        }
+
+        .hamburger-button.active span:nth-child(2) {
+            opacity: 0;
+        }
+
+        .hamburger-button.active span:nth-child(3) {
+            transform: rotate(-45deg) translate(6px, -6px);
+        }
+
+        .close-button {
+            display: none;
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: transparent;
+            border: none;
+            font-size: 24px;
+            cursor: pointer;
+            padding: 5px;
+            line-height: 1;
+            color: #666;
+        }
+
+        .close-button:hover {
+            color: #333;
+        }
+
+        /* Mobile styles */
+        @media (max-width: 768px) {
+            .hamburger-button {
+                display: flex;
+            }
+
+            .close-button {
+                display: block;
+            }
+
+            .controls {
+                position: fixed;
+                top: 0;
+                right: -100%;
+                width: 80%;
+                max-width: 320px;
+                height: 100vh;
+                overflow-y: auto;
+                transition: right 0.3s ease;
+                border-radius: 0;
+                box-shadow: -2px 0 10px rgba(0,0,0,0.2);
+                padding-top: 50px;
+            }
+
+            .controls.open {
+                right: 0;
+            }
+
+            .controls h3 {
+                font-size: 13px;
+            }
+
+            .controls label {
+                font-size: 12px;
+            }
+        }
+
+        /* Overlay for mobile */
+        .overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.5);
+            z-index: 999;
+        }
+
+        .overlay.active {
+            display: block;
+        }
    </style>
 </head>
 <body>
    <div id="map"></div>

-    <div class="controls">
+    <!-- Hamburger menu button for mobile -->
+    <button class="hamburger-button" id="hamburgerButton" aria-label="Toggle menu">
+        <span></span>
+        <span></span>
+        <span></span>
+    </button>
+
+    <!-- Overlay for mobile -->
+    <div class="overlay" id="overlay"></div>
+
+    <div class="controls" id="controls">
+        <button class="close-button" id="closeButton" aria-label="Close menu">&times;</button>
        <h3>Layer Controls (top to bottom)</h3>
        <div id="layerList">
            <div class="layer-item" draggable="true" data-layer="diff">
@@ -185,6 +316,14 @@
            Hide highway=service
        </label>

+        <h3 style="margin-top: 15px;">Selection Mode</h3>
+        <button id="multiSelectToggle" style="width: 100%; padding: 8px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 13px;">
+            Multi-Select: OFF
+        </button>
+        <div style="margin-top: 8px; padding: 8px; background: #e7f3ff; border-radius: 4px; font-size: 11px; color: #004085;">
+            <strong>Tip:</strong> Enable multi-select or hold Shift to select multiple features by clicking or dragging a box
+        </div>
+
        <h3 style="margin-top: 15px;">Load Data</h3>
        <div class="file-input-group">
            <label for="countySelect">County:</label>