From 3e47a83f9d30d111ef0994838b4dfe4b7c996d7a Mon Sep 17 00:00:00 2001 From: Graham McIntire Date: Wed, 18 Feb 2026 13:13:48 -0600 Subject: [PATCH] Fix sidebar panel layout and dark mode support - Remove duplicate slideover panel that was hidden behind the controls panel - Fix toggle button positioning (was rendered above viewport at top:-9px) - Remove conflicting high-specificity CSS that prevented mobile display:none - Remove width:100vw on map so it properly resizes when panel opens - Use theme-aware colors for panel background and navigation links - Wrap navigation links in proper ul.menu for valid HTML and DaisyUI styling --- lib/aprsme_web/components/core_components.ex | 28 +++++------ .../components/layouts/app.html.heex | 50 +------------------ lib/aprsme_web/live/map_live/index.ex | 25 +++------- 3 files changed, 23 insertions(+), 80 deletions(-) diff --git a/lib/aprsme_web/components/core_components.ex b/lib/aprsme_web/components/core_components.ex index eefe19a..baa840f 100644 --- a/lib/aprsme_web/components/core_components.ex +++ b/lib/aprsme_web/components/core_components.ex @@ -748,35 +748,35 @@ defmodule AprsmeWeb.CoreComponents do <%= if @variant == :horizontal do %> <% else %>
  • - <.link navigate={@home_url} class="text-gray-900 hover:text-gray-700"> + <.link navigate={@home_url} class="text-base-content hover:text-base-content/70"> {gettext("Home")}
    • -
  • <.link navigate="/api" class="text-gray-900 hover:text-gray-700">API
    • +
  • <.link navigate="/api" class="text-base-content hover:text-base-content/70">API
  • - <.link navigate="/about" class="text-gray-900 hover:text-gray-700">{gettext("About")} + <.link navigate="/about" class="text-base-content hover:text-base-content/70">{gettext("About")}
    • <%= if @current_user do %>
  • - <.link navigate="/users/settings" class="text-gray-900 hover:text-gray-700"> + <.link navigate="/users/settings" class="text-base-content hover:text-base-content/70"> {gettext("Settings")}
  • - <.link href="/users/log_out" method="delete" class="text-gray-900 hover:text-gray-700"> + <.link href="/users/log_out" method="delete" class="text-base-content hover:text-base-content/70"> {gettext("Log out")}
    • <% else %>
  • - <.link navigate="/users/register" class="text-gray-900 hover:text-gray-700"> + <.link navigate="/users/register" class="text-base-content hover:text-base-content/70"> {gettext("Register")}
  • - <.link navigate="/users/log_in" class="text-gray-900 hover:text-gray-700"> + <.link navigate="/users/log_in" class="text-base-content hover:text-base-content/70"> {gettext("Log in")}
    • diff --git a/lib/aprsme_web/components/layouts/app.html.heex b/lib/aprsme_web/components/layouts/app.html.heex index 77ea184..4357d7b 100644 --- a/lib/aprsme_web/components/layouts/app.html.heex +++ b/lib/aprsme_web/components/layouts/app.html.heex @@ -66,7 +66,6 @@ right: 0 !important; bottom: 0 !important; height: 100vh !important; - width: 100vw !important; z-index: 1 !important; transition: right 0.3s ease-in-out !important; } @@ -89,53 +88,6 @@ } } - /* Slideover toggle button styles */ - body.map-page .slideover-toggle { - position: fixed !important; - right: 10px; - top: 10px; - z-index: 1001; - background: white; - border: 2px solid rgba(0, 0, 0, 0.2); - border-radius: 8px; - padding: 10px; - cursor: pointer; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - transition: all 0.2s ease; - display: flex; - align-items: center; - justify-content: center; - } - - body.map-page .slideover-toggle:hover { - background: #f8fafc; - box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); - transform: translateY(-1px); - } - - body.map-page .slideover-toggle:active { - transform: translateY(0); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); - } - - /* Hide toggle on desktop when slideover is open */ - @media (min-width: 1024px) { - body.map-page .slideover-toggle.slideover-open { - display: none; - } - } - - /* Mobile toggle adjustments */ - @media (max-width: 1023px) { - body.map-page .slideover-toggle { - right: 15px; - top: 15px; - padding: 12px; - border-radius: 50%; - width: 48px; - height: 48px; - } - } /* Slideover panel responsive styles */ body.map-page .slideover-panel { @@ -144,7 +96,7 @@ right: 0; height: 100vh; width: 352px; - background: white; + background: var(--color-base-100); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15); z-index: 1000; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); diff --git a/lib/aprsme_web/live/map_live/index.ex b/lib/aprsme_web/live/map_live/index.ex index d0e0802..10ff42b 100644 --- a/lib/aprsme_web/live/map_live/index.ex +++ b/lib/aprsme_web/live/map_live/index.ex @@ -1021,16 +1021,6 @@ defmodule AprsmeWeb.MapLive.Index do <.locate_button /> - <.slideover_panel - slideover_open={@slideover_open} - loading={@loading} - connection_status={@connection_status} - packets={@packets} - show_all_packets={@show_all_packets} - tracked_callsign={@tracked_callsign} - tracked_callsign_latest_packet={@tracked_callsign_latest_packet} - /> - <.toggle_button slideover_open={@slideover_open} /> <.bottom_controls {assigns} /> @@ -1599,13 +1589,14 @@ defmodule AprsmeWeb.MapLive.Index do {gettext("Navigation")} - <.navigation - variant={:vertical} - class="text-sm" - current_user={@current_user} - map_state={%{lat: @map_center.lat, lng: @map_center.lng, zoom: @map_zoom}} - tracked_callsign={@tracked_callsign} - /> +