feat(configurator): pack right column alongside tall PO block — no dead space
Previous tightening removed the row-span but reintroduced a worse
problem: the tall PO block (with PO Pending + Expected By + chase
warning visible = ~250px) had only 2 small cells next to it
(Customer Job # / Job Sorting). 200px+ of vertical air below them
before row 3 started.
Layout now:
- Row 1: Customer (1-2) + Delivery Address (3-4)
- Rows 2-5 left: PO Block spans 4 grid rows (cols 1-2)
- Rows 2-5 right: 4 PAIRS of fields fill cols 3-4 in DOM order:
Row 2: Customer Job # + Job Sorting
Row 3: Material/Process + Lead Time
Row 4: Payment Terms + Delivery Method
Row 5: Pricelist + Quote Validity
- Row 6: Blanket SO + Invoice Strategy + conditional Deposit % / Progress %
(full 4-col width, kicks in after the PO block ends)
CSS Grid auto-flow places the right-side cells in the open positions
next to the row-span-4 PO block. Each grid row auto-sizes to the max
of the cells in that row (PO block top portion or the right pair),
so PO block height naturally aligns with the 4 right rows — no dead
air on either side.
This commit is contained in:
@@ -164,6 +164,7 @@
|
||||
|
||||
.o_fp_xpr_cell.span-2 { grid-column: span 2; }
|
||||
.o_fp_xpr_cell.row-span-2 { grid-row: span 2; }
|
||||
.o_fp_xpr_cell.row-span-4 { grid-row: span 4; }
|
||||
.o_fp_xpr_cell.required > label::after {
|
||||
content: " *";
|
||||
color: $xpr-bad;
|
||||
|
||||
@@ -87,11 +87,16 @@
|
||||
</div>
|
||||
|
||||
<!-- ============================================================
|
||||
PO Block in row 2 cols 1-2 (naturally tall).
|
||||
Customer Job # / Job Sorting fill cols 3-4 of row 2;
|
||||
remaining fields go into compact rows below.
|
||||
PO Block fills LEFT half (cols 1-2) across rows 2-5.
|
||||
RIGHT half (cols 3-4) flows 4 pairs of fields
|
||||
alongside it — Customer Job #/Job Sorting, Material
|
||||
Process/Lead Time, Payment Terms/Delivery Method,
|
||||
Pricelist/Quote Validity.
|
||||
|
||||
Net: PO block ~250px height matches 4 × ~60px right
|
||||
stack — no dead air on either side.
|
||||
============================================================ -->
|
||||
<div class="o_fp_xpr_cell span-2 o_fp_xpr_po_block">
|
||||
<div class="o_fp_xpr_cell span-2 row-span-4 o_fp_xpr_po_block">
|
||||
<div class="o_fp_xpr_po_head">
|
||||
<span>CUSTOMER PO</span>
|
||||
<field name="po_status" widget="badge"
|
||||
@@ -127,7 +132,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 2 right side: Customer Job # + Job Sorting -->
|
||||
<!-- Right side row 2: Customer Job # + Job Sorting -->
|
||||
<div class="o_fp_xpr_cell">
|
||||
<label for="customer_job_number">Customer Job #</label>
|
||||
<field name="customer_job_number" nolabel="1"/>
|
||||
@@ -139,7 +144,7 @@
|
||||
placeholder="Type to create a new bucket..."/>
|
||||
</div>
|
||||
|
||||
<!-- Row 3 — Material/Process + Lead Time + Payment + Delivery -->
|
||||
<!-- Right side row 3: Material/Process + Lead Time -->
|
||||
<div class="o_fp_xpr_cell">
|
||||
<label for="material_process">Material / Process</label>
|
||||
<field name="material_process" nolabel="1"
|
||||
@@ -156,6 +161,8 @@
|
||||
class="o_fp_xpr_range_input"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right side row 4: Payment Terms + Delivery Method -->
|
||||
<div class="o_fp_xpr_cell">
|
||||
<label for="payment_term_id">Payment Terms</label>
|
||||
<field name="payment_term_id" nolabel="1"
|
||||
@@ -166,7 +173,7 @@
|
||||
<field name="delivery_method" nolabel="1"/>
|
||||
</div>
|
||||
|
||||
<!-- Row 4 — Pricelist + Quote Validity + Blanket + Invoice Strategy -->
|
||||
<!-- Right side row 5: Pricelist + Quote Validity -->
|
||||
<div class="o_fp_xpr_cell">
|
||||
<label for="pricelist_id">Currency / Pricelist</label>
|
||||
<field name="pricelist_id" nolabel="1"
|
||||
@@ -177,6 +184,8 @@
|
||||
<label for="validity_date">Quote Validity</label>
|
||||
<field name="validity_date" nolabel="1"/>
|
||||
</div>
|
||||
|
||||
<!-- Row 6 (after PO block ends) — Blanket + Invoice + conditional % -->
|
||||
<div class="o_fp_xpr_cell">
|
||||
<label for="is_blanket_order">Blanket Sales Order</label>
|
||||
<div class="o_fp_xpr_inline_pair">
|
||||
@@ -191,8 +200,6 @@
|
||||
<label for="invoice_strategy">Invoice Strategy</label>
|
||||
<field name="invoice_strategy" nolabel="1"/>
|
||||
</div>
|
||||
|
||||
<!-- Conditional row 5 — only renders when deposit/progress invoice strategy -->
|
||||
<div class="o_fp_xpr_cell" invisible="invoice_strategy != 'deposit'">
|
||||
<label for="deposit_percent">Deposit %</label>
|
||||
<field name="deposit_percent" nolabel="1"/>
|
||||
|
||||
Reference in New Issue
Block a user