Improve payment data box layout and translations

Change 'Payment Cycle' to 'Payment Interval' for accuracy.
Adjust width constraints to use min-w-* instead of fixed w-*
for better responsiveness. Use flex-wrap for better layout.
This commit is contained in:
Moritz 2025-12-16 17:24:30 +01:00
parent 128866ead3
commit be8a396ab6
Signed by: moritz
GPG key ID: 1020A035E5DD0824
4 changed files with 335 additions and 39 deletions

View file

@ -165,26 +165,26 @@ defmodule MvWeb.MemberLive.Show do
</div>
<%!-- Payment Data Section --%>
<div class="max-w-xl">
<div class="w-full">
<.section_box title={gettext("Payment Data")}>
<%= if @member.membership_fee_type do %>
<div class="flex gap-6 flex-nowrap overflow-x-auto">
<div class="flex gap-6 flex-wrap">
<.data_field
label={gettext("Type")}
value={@member.membership_fee_type.name}
class="w-32"
class="min-w-32"
/>
<.data_field
label={gettext("Membership Fee")}
value={MembershipFeeHelpers.format_currency(@member.membership_fee_type.amount)}
class="w-24"
class="min-w-24"
/>
<.data_field
label={gettext("Payment Cycle")}
label={gettext("Payment Interval")}
value={MembershipFeeHelpers.format_interval(@member.membership_fee_type.interval)}
class="w-28"
class="min-w-32"
/>
<.data_field label={gettext("Last Cycle")} class="w-28 whitespace-nowrap">
<.data_field label={gettext("Last Cycle")} class="min-w-32">
<%= if @member.last_cycle_status do %>
<% status = @member.last_cycle_status %>
<span class={["badge", MembershipFeeHelpers.status_color(status)]}>
@ -194,7 +194,7 @@ defmodule MvWeb.MemberLive.Show do
<span class="badge badge-ghost">{gettext("No cycles")}</span>
<% end %>
</.data_field>
<.data_field label={gettext("Current Cycle")} class="w-32 whitespace-nowrap">
<.data_field label={gettext("Current Cycle")} class="min-w-36">
<%= if @member.current_cycle_status do %>
<% status = @member.current_cycle_status %>
<span class={["badge", MembershipFeeHelpers.status_color(status)]}>