admin/Odoo-Modules
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(configurator): tighten header spacing — remove row-span, smaller gaps

Browse Source 
User reported too much vertical air between fields. Two changes:

1. Removed grid-row: span 2 from the PO block. The row-span pattern
   stretched each grid row to half the PO block's height (~125px each),
   leaving empty space below Customer Job # / Job Sorting on row 2 and
   below Material/Lead Time on row 3.

   New layout:
   - Row 1: Customer (1-2) + Delivery Address (3-4)
   - Row 2: PO Block (1-2, naturally tall) + Customer Job # + Job Sorting
   - Row 3: Material/Process + Lead Time + Payment Terms + Delivery Method
   - Row 4: Pricelist + Quote Validity + Blanket SO + Invoice Strategy
   - Row 5 (conditional): Deposit % or Progress % (when invoice strategy uses them)

   PO block forces row 2 to be tall but cols 3-4 just sit at top — that
   was the original mockup pattern, and it's denser overall because
   rows 3+ are all the standard short height.

2. Tightened spacing in SCSS:
   - Grid row gap 14px → 6px
   - Cell label margin 0 (was 2px)
   - Input padding 5px → 2px vertical, min-height 30px → 24px
   - PO block padding 10px → 6/12/8px
   - PO row gap 2px padding → 0 (min-height 28px keeps clickable target)
   - PO chase text 11px → 10px, tighter line-height
This commit is contained in:
gsinghpal
2026-05-27 00:34:46 -04:00
parent 2b8d99f69d
commit b7f280141f
2 changed files with 33 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
fusion_plating/fusion_plating_configurator/static/src/scss/express_order.scss
View File

@@ -22,27 +22,28 @@
.o_fp_xpr_grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px 24px;
gap: 6px 20px; // tighter row gap (was 14px) — denser vertical packing
align-items: start;
margin: 16px 0;
margin: 12px 0;
}
// Each grid cell — label on top, field below
.o_fp_xpr_cell {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0; // allow Many2One to shrink within grid track
cursor: text; // hint that clicking the cell focuses the input
gap: 0;
min-width: 0;
cursor: text;
> label {
font-size: 11px;
font-size: 10px;
color: $xpr-text-muted;
text-transform: uppercase;
letter-spacing: 0.3px;
font-weight: 500;
margin-bottom: 0;
cursor: pointer; // label is explicitly clickable to focus input
line-height: 1.4;
cursor: pointer;
}
// The actual field input — kill Odoo's default block-level chrome.
@@ -75,12 +76,12 @@
border: none;
border-bottom: 1px solid $xpr-border-strong;
background: transparent;
padding: 5px 4px;
padding: 2px 4px;
border-radius: 0;
font-size: 14px;
font-size: 13px;
color: $xpr-text;
width: 100%;
min-height: 30px;
min-height: 24px;
box-sizing: border-box;
cursor: text;
@@ -192,8 +193,8 @@
border: 1px solid lighten(#d8b4d4, 5%);
border-left: 4px solid $xpr-accent;
border-radius: 4px;
padding: 10px 14px;
gap: 6px;
padding: 6px 12px 8px;
gap: 2px;
.o_fp_xpr_po_head {
color: $xpr-accent;
@@ -201,14 +202,15 @@
font-size: 11px;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 6px;
margin-bottom: 2px;
}
.o_fp_xpr_po_row {
display: grid;
grid-template-columns: 110px 1fr;
grid-template-columns: 100px 1fr;
align-items: center;
gap: 8px;
padding: 2px 0;
padding: 0;
min-height: 28px;
> label {
font-size: 12px;
@@ -264,11 +266,12 @@
}
.o_fp_xpr_po_chase {
color: $xpr-bake-text;
font-size: 11px;
font-size: 10px;
font-style: italic;
margin-top: 4px;
padding: 4px 0 0;
margin-top: 2px;
padding: 2px 0 0;
border-top: 1px dashed $xpr-bake-border;
line-height: 1.3;
}
}

23
fusion_plating/fusion_plating_configurator/views/fp_express_order_views.xml
View File

@@ -87,11 +87,11 @@
</div>
<!-- ============================================================
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).
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.
============================================================ -->
<div class="o_fp_xpr_cell span-2 row-span-2 o_fp_xpr_po_block">
<div class="o_fp_xpr_cell span-2 o_fp_xpr_po_block">
<div class="o_fp_xpr_po_head">
<span>CUSTOMER PO</span>
<field name="po_status" widget="badge"
@@ -127,7 +127,7 @@
</div>
</div>
<!-- Right-of-PO row 2 cols 3-4 — Customer Job # + Job Sorting -->
<!-- Row 2 right side: 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"/>
@@ -138,7 +138,8 @@
options="{'no_create_edit': False, 'no_open': True}"
placeholder="Type to create a new bucket..."/>
</div>
<!-- Right-of-PO row 3 cols 3-4 — Material/Process Tag + Lead Time -->
<!-- Row 3 — Material/Process + Lead Time + Payment + Delivery -->
<div class="o_fp_xpr_cell">
<label for="material_process">Material / Process</label>
<field name="material_process" nolabel="1"
@@ -155,8 +156,6 @@
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"
@@ -166,6 +165,8 @@
<label for="delivery_method">Delivery Method</label>
<field name="delivery_method" nolabel="1"/>
</div>
<!-- Row 4 — Pricelist + Quote Validity + Blanket + Invoice Strategy -->
<div class="o_fp_xpr_cell">
<label for="pricelist_id">Currency / Pricelist</label>
<field name="pricelist_id" nolabel="1"
@@ -176,8 +177,6 @@
<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">
@@ -185,13 +184,15 @@
<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>
invisible="not is_blanket_order">Block partial</span>
</div>
</div>
<div class="o_fp_xpr_cell">
<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"/>