Skip to content

Stack header buttons on mobile so cross-link fits #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fleveque merged 1 commit into from
May 25, 2026
Merged

Stack header buttons on mobile so cross-link fits #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 46 additions & 40 deletions lib/pulse_web/live/portfolio_live.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,46 +66,52 @@ defmodule PulseWeb.PortfolioLive do
</div>

<div :if={!@not_found && @portfolio}>
<%!-- Navigation --%>
<div class="flex items-center justify-end gap-2 mb-4">
<.link
:if={@has_radar}
navigate={~p"/r/#{@slug}"}
class="btn btn-ghost btn-sm"
>
<.icon name="hero-eye" class="size-4" /> {gettext("View radar")}
</.link>
<button
id="save-image-btn"
phx-hook="SaveImage"
data-filename={"#{@slug}-portfolio"}
data-label-default={gettext("Save Image")}
data-label-capturing={gettext("Capturing...")}
data-label-saved={gettext("Saved!")}
data-label-failed={gettext("Failed")}
class="btn btn-ghost btn-sm"
>
<.icon name="hero-camera-micro" class="size-4" />
<span data-label>{gettext("Save Image")}</span>
</button>
<button
id="share-link-btn"
phx-hook="ShareLink"
data-filename={"#{@slug}-portfolio"}
data-url={url(~p"/p/#{@slug}")}
data-title={"#{@slug}'s Portfolio · Pulse"}
data-text={"Check out #{@slug}'s dividend portfolio on Pulse"}
data-label-default={gettext("Share Link")}
data-label-capturing={gettext("Capturing...")}
data-label-copied={gettext("Copied!")}
class="btn btn-ghost btn-sm"
>
<.icon name="hero-share-micro" class="size-4" />
<span data-label>{gettext("Share Link")}</span>
</button>
<.link navigate="/" class="btn btn-ghost btn-sm">
<.icon name="hero-arrow-left-micro" class="size-4" /> {gettext("Dashboard")}
</.link>
<%!-- Navigation. Two groups (share / navigation) so the header
wraps cleanly on narrow screens: stacked on mobile (share on
top, nav on bottom), inline on sm+. --%>
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-end gap-2 mb-4">
<div class="flex items-center justify-end gap-2">
<button
id="save-image-btn"
phx-hook="SaveImage"
data-filename={"#{@slug}-portfolio"}
data-label-default={gettext("Save Image")}
data-label-capturing={gettext("Capturing...")}
data-label-saved={gettext("Saved!")}
data-label-failed={gettext("Failed")}
class="btn btn-ghost btn-sm"
>
<.icon name="hero-camera-micro" class="size-4" />
<span data-label>{gettext("Save Image")}</span>
</button>
<button
id="share-link-btn"
phx-hook="ShareLink"
data-filename={"#{@slug}-portfolio"}
data-url={url(~p"/p/#{@slug}")}
data-title={"#{@slug}'s Portfolio · Pulse"}
data-text={"Check out #{@slug}'s dividend portfolio on Pulse"}
data-label-default={gettext("Share Link")}
data-label-capturing={gettext("Capturing...")}
data-label-copied={gettext("Copied!")}
class="btn btn-ghost btn-sm"
>
<.icon name="hero-share-micro" class="size-4" />
<span data-label>{gettext("Share Link")}</span>
</button>
</div>
<div class="flex items-center justify-end gap-2">
<.link
:if={@has_radar}
navigate={~p"/r/#{@slug}"}
class="btn btn-ghost btn-sm"
>
<.icon name="hero-eye" class="size-4" /> {gettext("View radar")}
</.link>
<.link navigate="/" class="btn btn-ghost btn-sm">
<.icon name="hero-arrow-left-micro" class="size-4" /> {gettext("Dashboard")}
</.link>
</div>
</div>

<%!-- Capturable portfolio content --%>
Expand Down
88 changes: 47 additions & 41 deletions lib/pulse_web/live/radar_live.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,47 +149,53 @@ defmodule PulseWeb.RadarLive do
</div>

<div :if={!@not_found && @radar}>
<%!-- Navigation: matches PortfolioLive ordering exactly. --%>
<div class="flex items-center justify-end gap-2 mb-4">
<.link
:if={@has_portfolio}
navigate={~p"/p/#{@slug}"}
class="btn btn-ghost btn-sm"
>
<.icon name="hero-briefcase" class="size-4" />
{gettext("View portfolio")}
</.link>
<button
id="save-image-btn"
phx-hook="SaveImage"
data-filename={"#{@slug}-radar"}
data-label-default={gettext("Save Image")}
data-label-capturing={gettext("Capturing...")}
data-label-saved={gettext("Saved!")}
data-label-failed={gettext("Failed")}
class="btn btn-ghost btn-sm"
>
<.icon name="hero-camera-micro" class="size-4" />
<span data-label>{gettext("Save Image")}</span>
</button>
<button
id="share-link-btn"
phx-hook="ShareLink"
data-filename={"#{@slug}-radar"}
data-url={url(~p"/r/#{@slug}")}
data-title={"#{@slug}'s Radar · Pulse"}
data-text={"Check out #{@slug}'s stock radar on Pulse"}
data-label-default={gettext("Share Link")}
data-label-capturing={gettext("Capturing...")}
data-label-copied={gettext("Copied!")}
class="btn btn-ghost btn-sm"
>
<.icon name="hero-share-micro" class="size-4" />
<span data-label>{gettext("Share Link")}</span>
</button>
<.link navigate="/" class="btn btn-ghost btn-sm">
<.icon name="hero-arrow-left-micro" class="size-4" /> {gettext("Dashboard")}
</.link>
<%!-- Navigation: matches PortfolioLive ordering exactly. Two
groups (share / navigation) so the header wraps cleanly on
narrow screens: stacked on mobile, inline on sm+. --%>
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-end gap-2 mb-4">
<div class="flex items-center justify-end gap-2">
<button
id="save-image-btn"
phx-hook="SaveImage"
data-filename={"#{@slug}-radar"}
data-label-default={gettext("Save Image")}
data-label-capturing={gettext("Capturing...")}
data-label-saved={gettext("Saved!")}
data-label-failed={gettext("Failed")}
class="btn btn-ghost btn-sm"
>
<.icon name="hero-camera-micro" class="size-4" />
<span data-label>{gettext("Save Image")}</span>
</button>
<button
id="share-link-btn"
phx-hook="ShareLink"
data-filename={"#{@slug}-radar"}
data-url={url(~p"/r/#{@slug}")}
data-title={"#{@slug}'s Radar · Pulse"}
data-text={"Check out #{@slug}'s stock radar on Pulse"}
data-label-default={gettext("Share Link")}
data-label-capturing={gettext("Capturing...")}
data-label-copied={gettext("Copied!")}
class="btn btn-ghost btn-sm"
>
<.icon name="hero-share-micro" class="size-4" />
<span data-label>{gettext("Share Link")}</span>
</button>
</div>
<div class="flex items-center justify-end gap-2">
<.link
:if={@has_portfolio}
navigate={~p"/p/#{@slug}"}
class="btn btn-ghost btn-sm"
>
<.icon name="hero-briefcase" class="size-4" />
{gettext("View portfolio")}
</.link>
<.link navigate="/" class="btn btn-ghost btn-sm">
<.icon name="hero-arrow-left-micro" class="size-4" /> {gettext("Dashboard")}
</.link>
</div>
</div>

<%!-- Capturable card — id="portfolio-capture" so the SaveImage hook
Expand Down
Loading