feat(configurator): reorganize header — PO block spans 2 grid rows, fill the right side

Wasted-space audit revealed:
1. PO Block occupied a wide 2-col span but its inner inputs didn't
   fill the available width (130px label column + narrow input area)
2. Customer Job # + Job Sorting placed in row 2 cols 3-4 next to the
   tall PO block left empty vertical space below them
3. Row 2 col 3-4 was sparse because the PO block forced row 2 to be tall

Reorganized:
- PO Block now spans 2 grid ROWS (.row-span-2 class → grid-row: span 2)
- Customer Job # / Job Sorting flow into row 2 cols 3-4 (alongside PO top)
- Material/Process Tag / Lead Time flow into row 3 cols 3-4 (alongside
  PO bottom) — filling the previously-empty space next to the PO block
- Row 4 (after PO ends): Payment Terms / Delivery Method / Pricelist /
  Quote Validity — full 4-col width back
- Row 5: Blanket Sales Order + Invoice Strategy + conditional Deposit % /
  Progress Initial % (only show when relevant invoice strategy picked)

Inside the PO block:
- Label column tightened 130px → 110px so the input takes more width
- Inputs + Many2One wrappers now have width: 100% propagated, so PO #
  and Expected By inputs fill the available row width
- Upload button restyled with the accent colour (was the green default)

Net effect: same field count but tighter packing, no empty vertical
or horizontal space next to the PO block.
This commit is contained in:
gsinghpal
2026-05-26 22:54:35 -04:00
parent faffdca592
commit 4c5ee6143c
2 changed files with 70 additions and 19 deletions

View File

@@ -133,6 +133,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.required > label::after {
content: " *";
color: $xpr-bad;
@@ -175,7 +176,7 @@
}
.o_fp_xpr_po_row {
display: grid;
grid-template-columns: 130px 1fr;
grid-template-columns: 110px 1fr;
align-items: center;
gap: 8px;
padding: 2px 0;
@@ -188,13 +189,48 @@
text-transform: none;
letter-spacing: 0;
}
input, .o_field_widget input {
// Make the field widget + its inner controls fill the right column
> .o_field_widget,
> .o_field_widget > div,
> .o_field_widget > .o-dropdown,
> .o_field_widget > .o-autocomplete,
> .o_field_binary,
> .o_field_char,
> .o_field_date {
width: 100%;
display: block;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select {
border: none;
border-bottom: 1px solid $xpr-border-strong;
background: transparent;
padding: 2px 0;
padding: 4px 4px;
font-size: 13px;
width: 100%;
min-height: 28px;
box-sizing: border-box;
&:focus {
border-bottom-color: $xpr-accent;
background: $xpr-cell-focus;
outline: none;
}
}
// File-upload widget: make the button look consistent
.o_field_binary {
.o_select_file_button,
button {
background: $xpr-accent;
color: #fff;
border: none;
padding: 4px 14px;
border-radius: 3px;
font-size: 12px;
font-weight: 500;
&:hover { background: $xpr-accent-hover; }
}
}
}
.o_fp_xpr_po_chase {

View File

@@ -86,8 +86,12 @@
invisible="not partner_id"/>
</div>
<!-- ROW 2 — PO block (span 2) + Job# + Job Sorting -->
<div class="o_fp_xpr_cell span-2 o_fp_xpr_po_block">
<!-- ============================================================
PO Block spans rows 2-3, cols 1-2.
Customer Job # / Job Sorting / Material / Lead Time
flow into cols 3-4 across rows 2-3 (next to PO block).
============================================================ -->
<div class="o_fp_xpr_cell span-2 row-span-2 o_fp_xpr_po_block">
<div class="o_fp_xpr_po_head">
<span>CUSTOMER PO</span>
<field name="po_status" widget="badge"
@@ -122,6 +126,8 @@
will fire on the expected date.
</div>
</div>
<!-- Right-of-PO row 2 cols 3-4 — 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"/>
@@ -132,8 +138,7 @@
options="{'no_create_edit': False, 'no_open': True}"
placeholder="Type to create a new bucket..."/>
</div>
<!-- ROW 3 — Material + Lead + Payment + Delivery -->
<!-- Right-of-PO row 3 cols 3-4 — Material/Process Tag + Lead Time -->
<div class="o_fp_xpr_cell">
<label for="material_process">Material / Process Tag</label>
<field name="material_process" nolabel="1"
@@ -149,6 +154,8 @@
class="o_fp_xpr_range_input"/>
</div>
</div>
<!-- Row 4 (after PO ends) — Payment / Delivery / Pricelist / Quote Valid -->
<div class="o_fp_xpr_cell">
<label for="payment_term_id">Payment Terms</label>
<field name="payment_term_id" nolabel="1"
@@ -158,18 +165,6 @@
<label for="delivery_method">Delivery Method</label>
<field name="delivery_method" nolabel="1"/>
</div>
<!-- ROW 4 — Blanket (with block partial) + Currency + Quote Valid + Invoice -->
<div class="o_fp_xpr_cell">
<label for="is_blanket_order">Blanket Sales Order</label>
<div class="o_fp_xpr_inline_pair">
<field name="is_blanket_order" nolabel="1"/>
<field name="block_partial_shipments" nolabel="1"
invisible="not is_blanket_order"/>
<span class="o_fp_xpr_inline_help"
invisible="not is_blanket_order">Block partial shipments</span>
</div>
</div>
<div class="o_fp_xpr_cell">
<label for="pricelist_id">Currency / Pricelist</label>
<field name="pricelist_id" nolabel="1"
@@ -180,10 +175,30 @@
<label for="validity_date">Quote Validity</label>
<field name="validity_date" nolabel="1"/>
</div>
<!-- Row 5 — Blanket SO (with inline Block Partial) + Invoice Strategy + Sales Rep + Tooling Charge -->
<div class="o_fp_xpr_cell">
<label for="is_blanket_order">Blanket Sales Order</label>
<div class="o_fp_xpr_inline_pair">
<field name="is_blanket_order" nolabel="1"/>
<field name="block_partial_shipments" nolabel="1"
invisible="not is_blanket_order"/>
<span class="o_fp_xpr_inline_help"
invisible="not is_blanket_order">Block partial shipments</span>
</div>
</div>
<div class="o_fp_xpr_cell">
<label for="invoice_strategy">Invoice Strategy</label>
<field name="invoice_strategy" nolabel="1"/>
</div>
<div class="o_fp_xpr_cell" invisible="invoice_strategy != 'deposit'">
<label for="deposit_percent">Deposit %</label>
<field name="deposit_percent" nolabel="1"/>
</div>
<div class="o_fp_xpr_cell" invisible="invoice_strategy != 'progress'">
<label for="progress_initial_percent">Progress Initial %</label>
<field name="progress_initial_percent" nolabel="1"/>
</div>
</div>