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;