graham/aprs.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix sidebar panel layout and dark mode support

Browse source 
- 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
This commit is contained in:
Graham McIntire 2026-02-18 13:13:48 -06:00
parent 3148b241da
commit 3e47a83f9d
No known key found for this signature in database
3 changed files with 23 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
lib/aprsme_web/components/core_components.ex
View file

@ -748,35 +748,35 @@ defmodule AprsmeWeb.CoreComponents do
<%= if @variant == :horizontal do %> <%= if @variant == :horizontal do %>
<ul class="menu menu-horizontal px-1"> <ul class="menu menu-horizontal px-1">
<li> <li>
<.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")} {gettext("Home")}
</.link> </.link>
</li> </li>
<li><.link navigate="/api" class="text-gray-900 hover:text-gray-700">API</.link></li> <li><.link navigate="/api" class="text-base-content hover:text-base-content/70">API</.link></li>
<li> <li>
<.link navigate="/about" class="text-gray-900 hover:text-gray-700"> <.link navigate="/about" class="text-base-content hover:text-base-content/70">
{gettext("About")} {gettext("About")}
</.link> </.link>
</li> </li>
<%= if @current_user do %> <%= if @current_user do %>
<li> <li>
<.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")} {gettext("Settings")}
</.link> </.link>
</li> </li>
<li> <li>
<.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")} {gettext("Log out")}
</.link> </.link>
</li> </li>
<% else %> <% else %>
<li> <li>
<.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")} {gettext("Register")}
</.link> </.link>
</li> </li>
<li> <li>
<.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")} {gettext("Log in")}
</.link> </.link>
</li> </li>
@ -784,33 +784,33 @@ defmodule AprsmeWeb.CoreComponents do
</ul> </ul>
<% else %> <% else %>
<li> <li>
<.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")} {gettext("Home")}
</.link> </.link>
</li> </li>
<li><.link navigate="/api" class="text-gray-900 hover:text-gray-700">API</.link></li> <li><.link navigate="/api" class="text-base-content hover:text-base-content/70">API</.link></li>
<li> <li>
<.link navigate="/about" class="text-gray-900 hover:text-gray-700">{gettext("About")}</.link> <.link navigate="/about" class="text-base-content hover:text-base-content/70">{gettext("About")}</.link>
</li> </li>
<%= if @current_user do %> <%= if @current_user do %>
<li> <li>
<.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")} {gettext("Settings")}
</.link> </.link>
</li> </li>
<li> <li>
<.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")} {gettext("Log out")}
</.link> </.link>
</li> </li>
<% else %> <% else %>
<li> <li>
<.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")} {gettext("Register")}
</.link> </.link>
</li> </li>
<li> <li>
<.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")} {gettext("Log in")}
</.link> </.link>
</li> </li>

50
lib/aprsme_web/components/layouts/app.html.heex
View file

@ -66,7 +66,6 @@
right: 0 !important; right: 0 !important;
bottom: 0 !important; bottom: 0 !important;
height: 100vh !important; height: 100vh !important;
width: 100vw !important;
z-index: 1 !important; z-index: 1 !important;
transition: right 0.3s ease-in-out !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 */ /* Slideover panel responsive styles */
body.map-page .slideover-panel { body.map-page .slideover-panel {
@ -144,7 +96,7 @@
right: 0; right: 0;
height: 100vh; height: 100vh;
width: 352px; width: 352px;
background: white; background: var(--color-base-100);
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
z-index: 1000; z-index: 1000;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

25
lib/aprsme_web/live/map_live/index.ex
View file

@ -1021,16 +1021,6 @@ defmodule AprsmeWeb.MapLive.Index do
<.locate_button /> <.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} /> <.toggle_button slideover_open={@slideover_open} />
<.bottom_controls {assigns} /> <.bottom_controls {assigns} />
@ -1599,13 +1589,14 @@ defmodule AprsmeWeb.MapLive.Index do
</svg> </svg>
<span class="font-medium">{gettext("Navigation")}</span> <span class="font-medium">{gettext("Navigation")}</span>
</div> </div>
<.navigation <ul class="menu menu-sm text-sm">
variant={:vertical} <.navigation
class="text-sm" variant={:vertical}
current_user={@current_user} current_user={@current_user}
map_state={%{lat: @map_center.lat, lng: @map_center.lng, zoom: @map_zoom}} map_state={%{lat: @map_center.lat, lng: @map_center.lng, zoom: @map_zoom}}
tracked_callsign={@tracked_callsign} tracked_callsign={@tracked_callsign}
/> />
</ul>
</div> </div>
<!-- Last Update --> <!-- Last Update -->