Move back button into sidebar, remove close button, reorder counties, add TODO notes

2026-04-21 22:26:05 -07:00
parent 32cd6cba59
commit f35bc2dd9d
5 changed files with 92 additions and 50 deletions
@@ -199,34 +199,12 @@
            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;
@@ -276,30 +254,23 @@
            cursor: crosshair !important;
        }

-        /* Back button */
-        .back-button {
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            z-index: 1000;
-            padding: 6px 12px;
+        .btn-back {
+            display: block;
+            margin-bottom: 12px;
+            padding: 5px 10px;
            background: #1a1a2e;
            color: #ddd;
-            border: none;
-            border-radius: 5px;
+            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
-            cursor: pointer;
            text-decoration: none;
-            display: inline-block;
-            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+            text-align: center;
        }
-        .back-button:hover { background: #2d2d4e; color: #fff; }
+        .btn-back:hover { background: #2d2d4e; color: #fff; }
    </style>
 </head>
 <body>
    <div id="map"></div>
-    <a href="/" class="back-button">&#8592; Back</a>

    <!-- Hamburger menu button for mobile -->
    <button class="hamburger-button" id="hamburgerButton" aria-label="Toggle menu">
@@ -312,7 +283,7 @@
    <div class="overlay" id="overlay"></div>

    <div class="controls" id="controls">
-        <button class="close-button" id="closeButton" aria-label="Close menu">&times;</button>
+        <a href="/" class="btn-back">&#8592; Back</a>
        <h3>Layer Controls (top to bottom)</h3>
        <div id="layerList">
            <div class="layer-item" draggable="true" data-layer="diff">