From c2a4380b704703430d9f88db6768b0d0916abed0 Mon Sep 17 00:00:00 2001 From: Bernard Siebens Date: Sat, 8 Aug 2026 19:01:14 +0200 Subject: [PATCH] Lay the plan modal out in two columns instead of one tall one PlanForm grew to seven fields with the billing rework, three of them short day counts, and the modal ran off the bottom of the screen. _modal_form.html gains two optional knobs -- box_class to widen the box, two_columns to grid the fields -- so only the plan create/edit modals opt in and every other modal renders exactly as before. Textareas and file inputs still span the full width; below `sm` it stays single-column, since two columns of form fields on a phone is worse than a long scroll. PlanForm's field order is chosen to suit that grid: pairing name with duration and the two day-counts with each other fills every row rather than leaving half of one empty next to the full-width description. Rebuilt static/css/app.css (unminified, matching how it is committed) to pick up the new grid utilities. --- controlpanel/forms.py | 12 +++- .../templates/controlpanel/_form_fields.html | 18 ++++-- .../templates/controlpanel/_modal_form.html | 7 ++- .../templates/controlpanel/billing.html | 4 +- static/css/app.css | 63 +++++++++++++++++++ 5 files changed, 95 insertions(+), 9 deletions(-) diff --git a/controlpanel/forms.py b/controlpanel/forms.py index 4ebabe7..60d822a 100644 --- a/controlpanel/forms.py +++ b/controlpanel/forms.py @@ -83,9 +83,19 @@ class FlagForm(forms.ModelForm): class PlanForm(forms.ModelForm): + """Field order is chosen for the two-column modal (see _form_fields.html): description + spans both columns, so pairing name with duration and the two day-counts with each other + fills every row instead of leaving half of one empty. + + name | duration_months + description ....................... (spans both) + renewal_lead_days | grace_days + is_trial | is_active + """ + class Meta: model = Plan - fields = ["name", "description", "duration_months", "renewal_lead_days", "grace_days", "is_trial", "is_active"] + fields = ["name", "duration_months", "description", "renewal_lead_days", "grace_days", "is_trial", "is_active"] class PlanPriceForm(forms.ModelForm): diff --git a/controlpanel/templates/controlpanel/_form_fields.html b/controlpanel/templates/controlpanel/_form_fields.html index 75b4c70..d592f3c 100644 --- a/controlpanel/templates/controlpanel/_form_fields.html +++ b/controlpanel/templates/controlpanel/_form_fields.html @@ -4,14 +4,22 @@ The field loop every card-form and modal-form wrapper shares: label, daisyUI-styled widget, help text, errors — with checkboxes laid out label-beside-input instead of label-above. Included with `form`. + + Pass `two_columns` to lay the fields out in two columns instead of one — for a form with + several short fields (a handful of day counts, say) that would otherwise make a modal + taller than the screen. Textareas and file inputs always span the full width regardless: + half a row is not enough to type a description into. Single column below `sm`, since two + columns of form fields on a phone is worse than a long scroll. {% endcomment %} {% for error in form.non_field_errors %}
{{ error }}
{% endfor %} -{% for field in form %} -
- {% form_field field %} -
-{% endfor %} +
+ {% for field in form %} +
+ {% form_field field %} +
+ {% endfor %} +
diff --git a/controlpanel/templates/controlpanel/_modal_form.html b/controlpanel/templates/controlpanel/_modal_form.html index 9b545a1..414c582 100644 --- a/controlpanel/templates/controlpanel/_modal_form.html +++ b/controlpanel/templates/controlpanel/_modal_form.html @@ -7,10 +7,15 @@ tag (linked via the `form` attribute) so it can share the `modal-action` row with the dialog-closing Cancel button without nesting one
inside another. `enctype` is always multipart -- harmless for a form with no file field, required for one that has. + + Two optional knobs for a form with a lot of fields, which would otherwise run off the + bottom of the screen: `box_class` widens the box (e.g. "max-w-2xl"), and `two_columns` + lays the fields out in two columns -- growing sideways rather than downwards. They are + meant to be used together; widening alone just makes a tall modal wide as well. {% endcomment %} {% trans "Save" as default_submit_label %} -
+

{{ title }}

{% if blurb %}

{{ blurb }}

{% endif %} diff --git a/controlpanel/templates/controlpanel/billing.html b/controlpanel/templates/controlpanel/billing.html index 248bb59..f8af31e 100644 --- a/controlpanel/templates/controlpanel/billing.html +++ b/controlpanel/templates/controlpanel/billing.html @@ -9,7 +9,7 @@ {% block panel %} {% url 'controlpanel:plan_create' as plan_create_url %} - {% include "controlpanel/_modal_form.html" with modal_id="plan_create_modal" title="New plan" form=plan_form action_url=plan_create_url submit_label="Create plan" submit_icon="plus" %} + {% include "controlpanel/_modal_form.html" with modal_id="plan_create_modal" title="New plan" form=plan_form action_url=plan_create_url submit_label="Create plan" submit_icon="plus" box_class="max-w-2xl" two_columns=True %}
@@ -84,7 +84,7 @@ {% include "controlpanel/_modal_form.html" with modal_id=plan.pk|dom_id:"plan_price_modal" title="New price — "|add:plan.name form=plan.price_form action_url=plan_price_url submit_label="Add price" submit_icon="euro" %} {% url 'controlpanel:plan_update' plan.pk as plan_update_url %} - {% include "controlpanel/_modal_form.html" with modal_id=plan.pk|dom_id:"plan_edit_modal" title="Edit "|add:plan.name form=plan.edit_form action_url=plan_update_url submit_label="Save" submit_icon="check" %} + {% include "controlpanel/_modal_form.html" with modal_id=plan.pk|dom_id:"plan_edit_modal" title="Edit "|add:plan.name form=plan.edit_form action_url=plan_update_url submit_label="Save" submit_icon="check" box_class="max-w-2xl" two_columns=True %} {% endfor %}
diff --git a/static/css/app.css b/static/css/app.css index d6686ea..8a11fc5 100644 --- a/static/css/app.css +++ b/static/css/app.css @@ -938,6 +938,58 @@ } } } + .countdown { + &.countdown { + line-height: 1em; + } + @layer daisyui.l1.l2.l3 { + display: inline-flex; + & > * { + visibility: hidden; + position: relative; + display: inline-block; + overflow-y: clip; + transition: width 0.4s ease-out 0.2s; + height: 1em; + --value-v: calc(mod(max(0, var(--value)), 1000)); + --value-hundreds: calc(round(to-zero, var(--value-v) / 100, 1)); + --value-tens: calc(round(to-zero, mod(var(--value-v), 100) / 10, 1)); + --value-ones: calc(mod(var(--value-v), 100)); + --show-hundreds: clamp(clamp(0, var(--digits, 1) - 2, 1), var(--value-hundreds), 1); + --show-tens: clamp( + clamp(0, var(--digits, 1) - 1, 1), + var(--value-tens) + var(--show-hundreds), + 1 + ); + --first-digits: calc(round(to-zero, var(--value-v) / 10, 1)); + width: calc(1ch + var(--show-tens) * 1ch + var(--show-hundreds) * 1ch); + direction: ltr; + &:before, &:after { + visibility: visible; + position: absolute; + overflow-x: clip; + --tw-content: "00\A 01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99\A"; + content: var(--tw-content); + font-variant-numeric: tabular-nums; + white-space: pre; + text-align: end; + direction: rtl; + transition: all 1s cubic-bezier(1, 0, 0, 1), width 0.2s ease-out 0.2s, opacity 0.2s ease-out 0.2s; + } + &:before { + width: calc(1ch + var(--show-hundreds) * 1ch); + top: calc(var(--first-digits) * -1em); + inset-inline-end: 0; + opacity: var(--show-tens); + } + &:after { + width: 1ch; + top: calc(var(--value-ones) * -1em); + inset-inline-start: 0; + } + } + } + } .collapse { &:not(td, tr, colgroup) { visibility: revert-layer; @@ -3298,6 +3350,9 @@ margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); } } + .gap-x-4 { + column-gap: calc(var(--spacing) * 4); + } .gap-y-2 { row-gap: calc(var(--spacing) * 2); } @@ -3758,6 +3813,9 @@ .text-warning { color: var(--color-warning); } + .uppercase { + text-transform: uppercase; + } .tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); @@ -3989,6 +4047,11 @@ } } } + .sm\:col-span-2 { + @media (width >= 40rem) { + grid-column: span 2 / span 2; + } + } .sm\:hidden { @media (width >= 40rem) { display: none;