bernard/RosterChief
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lay the plan modal out in two columns instead of one tall one

Browse Source 
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.
This commit is contained in:
Bernard Siebens
2026-08-08 19:01:14 +02:00
parent fc6488ce55
commit c2a4380b70
5 changed files with 95 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
static/css/app.css
View File

@@ -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;