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.span-2 { grid-column: span 2; }
|
||||||
.o_fp_xpr_cell.row-span-2 { grid-row: 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 {
|
.o_fp_xpr_cell.required > label::after {
|
||||||
content: " *";
|
content: " *";
|
||||||
color: $xpr-bad;
|
color: $xpr-bad;
|
||||||
|
|||||||
@@ -87,11 +87,16 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ============================================================
|
<!-- ============================================================
|
||||||
PO Block in row 2 cols 1-2 (naturally tall).
|
PO Block fills LEFT half (cols 1-2) across rows 2-5.
|
||||||
Customer Job # / Job Sorting fill cols 3-4 of row 2;
|
RIGHT half (cols 3-4) flows 4 pairs of fields
|
||||||
remaining fields go into compact rows below.
|
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">
|
<div class="o_fp_xpr_po_head">
|
||||||
<span>CUSTOMER PO</span>
|
<span>CUSTOMER PO</span>
|
||||||
<field name="po_status" widget="badge"
|
<field name="po_status" widget="badge"
|
||||||
@@ -127,7 +132,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Row 2 right side: Customer Job # + Job Sorting -->
|
<!-- Right side row 2: Customer Job # + Job Sorting -->
|
||||||
<div class="o_fp_xpr_cell">
|
<div class="o_fp_xpr_cell">
|
||||||
<label for="customer_job_number">Customer Job #</label>
|
<label for="customer_job_number">Customer Job #</label>
|
||||||
<field name="customer_job_number" nolabel="1"/>
|
<field name="customer_job_number" nolabel="1"/>
|
||||||
@@ -139,7 +144,7 @@
|
|||||||
placeholder="Type to create a new bucket..."/>
|
placeholder="Type to create a new bucket..."/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Row 3 — Material/Process + Lead Time + Payment + Delivery -->
|
<!-- Right side row 3: Material/Process + Lead Time -->
|
||||||
<div class="o_fp_xpr_cell">
|
<div class="o_fp_xpr_cell">
|
||||||
<label for="material_process">Material / Process</label>
|
<label for="material_process">Material / Process</label>
|
||||||
<field name="material_process" nolabel="1"
|
<field name="material_process" nolabel="1"
|
||||||
@@ -156,6 +161,8 @@
|
|||||||
class="o_fp_xpr_range_input"/>
|
class="o_fp_xpr_range_input"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Right side row 4: Payment Terms + Delivery Method -->
|
||||||
<div class="o_fp_xpr_cell">
|
<div class="o_fp_xpr_cell">
|
||||||
<label for="payment_term_id">Payment Terms</label>
|
<label for="payment_term_id">Payment Terms</label>
|
||||||
<field name="payment_term_id" nolabel="1"
|
<field name="payment_term_id" nolabel="1"
|
||||||
@@ -166,7 +173,7 @@
|
|||||||
<field name="delivery_method" nolabel="1"/>
|
<field name="delivery_method" nolabel="1"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Row 4 — Pricelist + Quote Validity + Blanket + Invoice Strategy -->
|
<!-- Right side row 5: Pricelist + Quote Validity -->
|
||||||
<div class="o_fp_xpr_cell">
|
<div class="o_fp_xpr_cell">
|
||||||
<label for="pricelist_id">Currency / Pricelist</label>
|
<label for="pricelist_id">Currency / Pricelist</label>
|
||||||
<field name="pricelist_id" nolabel="1"
|
<field name="pricelist_id" nolabel="1"
|
||||||
@@ -177,6 +184,8 @@
|
|||||||
<label for="validity_date">Quote Validity</label>
|
<label for="validity_date">Quote Validity</label>
|
||||||
<field name="validity_date" nolabel="1"/>
|
<field name="validity_date" nolabel="1"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Row 6 (after PO block ends) — Blanket + Invoice + conditional % -->
|
||||||
<div class="o_fp_xpr_cell">
|
<div class="o_fp_xpr_cell">
|
||||||
<label for="is_blanket_order">Blanket Sales Order</label>
|
<label for="is_blanket_order">Blanket Sales Order</label>
|
||||||
<div class="o_fp_xpr_inline_pair">
|
<div class="o_fp_xpr_inline_pair">
|
||||||
@@ -191,8 +200,6 @@
|
|||||||
<label for="invoice_strategy">Invoice Strategy</label>
|
<label for="invoice_strategy">Invoice Strategy</label>
|
||||||
<field name="invoice_strategy" nolabel="1"/>
|
<field name="invoice_strategy" nolabel="1"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Conditional row 5 — only renders when deposit/progress invoice strategy -->
|
|
||||||
<div class="o_fp_xpr_cell" invisible="invoice_strategy != 'deposit'">
|
<div class="o_fp_xpr_cell" invisible="invoice_strategy != 'deposit'">
|
||||||
<label for="deposit_percent">Deposit %</label>
|
<label for="deposit_percent">Deposit %</label>
|
||||||
<field name="deposit_percent" nolabel="1"/>
|
<field name="deposit_percent" nolabel="1"/>
|
||||||
|
|||||||
Reference in New Issue
Block a user