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:
parent
128866ead3
commit
be8a396ab6
4 changed files with 335 additions and 39 deletions
|
|
@ -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)]}>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue