Group cycle status buttons with DaisyUI join component

Wrap Paid/Suspended/Unpaid buttons in a <div class="join"> and add
join-item to each button. Delete button stays separate next to the group.
This commit is contained in:
Moritz 2026-02-24 10:34:17 +01:00
parent 0a59cf5c33
commit 2d01c70c16
Signed by: moritz
GPG key ID: 1020A035E5DD0824

View file

@ -214,47 +214,49 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
</:col> </:col>
<:action :let={cycle}> <:action :let={cycle}>
<div class="flex gap-1"> <div class="flex gap-2">
<%= if @can_update_cycle do %> <%= if @can_update_cycle do %>
<button <div class="join">
:if={cycle.status != :paid} <button
type="button" :if={cycle.status != :paid}
phx-click="mark_cycle_status" type="button"
phx-value-cycle_id={cycle.id} phx-click="mark_cycle_status"
phx-value-status="paid" phx-value-cycle_id={cycle.id}
phx-target={@myself} phx-value-status="paid"
class="btn btn-sm btn-success" phx-target={@myself}
title={gettext("Mark as paid")} class="join-item btn btn-sm btn-success"
> title={gettext("Mark as paid")}
<.icon name="hero-check-circle" class="size-4" /> >
{gettext("Paid")} <.icon name="hero-check-circle" class="size-4" />
</button> {gettext("Paid")}
<button </button>
:if={cycle.status != :suspended} <button
type="button" :if={cycle.status != :suspended}
phx-click="mark_cycle_status" type="button"
phx-value-cycle_id={cycle.id} phx-click="mark_cycle_status"
phx-value-status="suspended" phx-value-cycle_id={cycle.id}
phx-target={@myself} phx-value-status="suspended"
class="btn btn-sm btn-outline btn-warning" phx-target={@myself}
title={gettext("Mark as suspended")} class="join-item btn btn-sm btn-outline btn-warning"
> title={gettext("Mark as suspended")}
<.icon name="hero-pause-circle" class="size-4" /> >
{gettext("Suspended")} <.icon name="hero-pause-circle" class="size-4" />
</button> {gettext("Suspended")}
<button </button>
:if={cycle.status != :unpaid} <button
type="button" :if={cycle.status != :unpaid}
phx-click="mark_cycle_status" type="button"
phx-value-cycle_id={cycle.id} phx-click="mark_cycle_status"
phx-value-status="unpaid" phx-value-cycle_id={cycle.id}
phx-target={@myself} phx-value-status="unpaid"
class="btn btn-sm btn-error" phx-target={@myself}
title={gettext("Mark as unpaid")} class="join-item btn btn-sm btn-error"
> title={gettext("Mark as unpaid")}
<.icon name="hero-x-circle" class="size-4" /> >
{gettext("Unpaid")} <.icon name="hero-x-circle" class="size-4" />
</button> {gettext("Unpaid")}
</button>
</div>
<% end %> <% end %>
<%= if @can_destroy_cycle do %> <%= if @can_destroy_cycle do %>
<button <button