Graham McIntire
bc6fbbe3de
- Set map height to 100% instead of fixed 280px - Removed card-body padding to eliminate gap - Added h-full class to ensure cards fill available height - Added min-height of 320px for better UX - Removed redundant styling from map container The map now properly fills the entire card height and matches the position information card height on larger screens. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
37 lines
1 KiB
Elixir
37 lines
1 KiB
Elixir
defmodule AprsmeWeb.Components.InfoMapComponent do
|
|
@moduledoc """
|
|
A simple map component for showing a single station's location on the info page.
|
|
"""
|
|
use Phoenix.Component
|
|
|
|
@doc """
|
|
Renders a small map showing a single station's position.
|
|
"""
|
|
attr :id, :string, default: "info-map"
|
|
attr :lat, :float, required: true
|
|
attr :lon, :float, required: true
|
|
attr :callsign, :string, required: true
|
|
attr :symbol_html, :string, default: nil
|
|
attr :height, :string, default: "300px"
|
|
attr :zoom, :integer, default: 13
|
|
|
|
def info_map(assigns) do
|
|
~H"""
|
|
<div
|
|
id={@id}
|
|
class="info-map-container overflow-hidden h-full"
|
|
style={"height: #{@height}; min-height: 320px;"}
|
|
phx-hook="InfoMap"
|
|
data-lat={@lat}
|
|
data-lon={@lon}
|
|
data-zoom={@zoom}
|
|
data-callsign={@callsign}
|
|
data-symbol-html={@symbol_html}
|
|
>
|
|
<div class="h-full w-full bg-base-200 flex items-center justify-center">
|
|
<span class="loading loading-spinner loading-lg"></span>
|
|
</div>
|
|
</div>
|
|
"""
|
|
end
|
|
end
|