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

fix(shopfloor): plant-view card sizing — match the mockup proportions

Browse Source 
User feedback after live testing: cards were too cramped on the 9-column
board. Restoring the Variant C mockup proportions and letting the board
scroll horizontally on smaller viewports (user explicitly accepted
side-scrolling).

Changes:
  - .board grid: repeat(9, 1fr) → repeat(9, minmax(300px, 1fr))
    plus overflow-x: auto. Each column ~300px so the card has room to
    breathe. ~6 columns visible on 1920px desktop, ~4 on 1366px tablet,
    smooth horizontal scroll for the rest.
  - .col-scroll: gap 4→8, max-height eased so cards aren't packed.
  - .o_fp_plant_card: padding 8/10→12, gap 4→6, base font 11→12.
  - card-wo: 13→16 (matches mockup header size).
  - card-step: 12→14.
  - chips: padding 1/6→2/8, font 10→11, radius 10→12.
  - mini-timeline blocks: 8→16px tall (current step 11→22px), labels
    8→9px. Matches the mockup's punchy timeline strip.
  - progress bar: max-width 60→100, height 3→4.
  - operator pill / icon-row: bumped to match card scale.

No backend changes. SCSS-only. Asset cache cleared (3 attachments).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-05-23 21:20:01 -04:00
parent eb1fd50add
commit fd2b2908f3
3 changed files with 54 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
fusion_plating/fusion_plating_shopfloor/static/src/scss/components/_mini_timeline.scss
View File

@@ -8,21 +8,21 @@
.tl-row {
display: flex;
gap: 2px;
padding: 2px 0;
padding: 4px 0;
.tl-step {
flex: 1;
height: 8px;
height: 16px;
background: #e5e7eb;
border-radius: 1.5px;
border-radius: 3px;
cursor: help;
&.done { background: #28a745; }
&.current {
background: #f0a500;
height: 11px;
margin-top: -1.5px;
box-shadow: 0 0 0 1px rgba(240, 165, 0, 0.25);
height: 22px;
margin-top: -3px;
box-shadow: 0 0 0 2px rgba(240, 165, 0, 0.25);
&.hold { background: $plant-hold-border; }
&.locked { background: $plant-locked-border; }
&.bake { background: $plant-bake-border; }
@@ -39,10 +39,11 @@
.tl-labels {
display: flex;
gap: 2px;
font-size: 8px;
margin-top: 2px;
font-size: 9px;
color: $plant-muted;
text-transform: uppercase;
letter-spacing: 0.03em;
letter-spacing: 0.04em;
span {
flex: 1;
text-align: center;

59
fusion_plating/fusion_plating_shopfloor/static/src/scss/components/_plant_card.scss
View File

@@ -4,17 +4,17 @@
background: $plant-card-bg;
border: 1px solid $plant-card-border;
border-radius: 8px;
padding: 8px 10px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 4px;
gap: 6px;
cursor: pointer;
transition: transform 0.1s, box-shadow 0.1s;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
width: 100%;
box-sizing: border-box;
font-size: 11px;
line-height: 1.3;
font-size: 12px;
line-height: 1.35;
color: $plant-text;
&:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.12); }
@@ -72,26 +72,26 @@
}
// === Sub-elements ===
.card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.card-wo { font-size: 13px; font-weight: 700; color: $plant-text; }
.card-due { font-size: 10px; color: $plant-muted; white-space: nowrap; }
.card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.card-wo { font-size: 16px; font-weight: 700; color: $plant-text; letter-spacing: -0.01em; }
.card-due { font-size: 11px; color: $plant-muted; white-space: nowrap; }
.card-due.overdue { color: $plant-hold-border; font-weight: 700; }
.card-sub { font-size: 10px; color: $plant-muted; line-height: 1.3; }
.card-sub { font-size: 12px; color: $plant-muted; line-height: 1.35; }
.card-sub-em { color: $plant-text; font-weight: 600; }
.card-meta { font-size: 10px; color: $plant-muted; }
.card-step { font-size: 12px; font-weight: 600; color: $plant-text; margin-top: 2px; }
.card-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.card-meta { font-size: 11px; color: $plant-muted; }
.card-step { font-size: 14px; font-weight: 600; color: $plant-text; margin-top: 2px; }
.card-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
font-size: 10px;
padding: 1px 6px;
border-radius: 10px;
font-size: 11px;
padding: 2px 8px;
border-radius: 12px;
background: #f1f3f5;
color: #4e4e4e;
border: 1px solid #e5e7eb;
display: inline-flex;
align-items: center;
gap: 3px;
gap: 4px;
&.tank { background: #e7f1ff; color: #0d4a8c; border-color: #cfe2ff; }
&.kind-ready { background: #d1ecf1; color: #0c5460; border-color: #bee5eb; font-weight: 600; }
&.kind-running{ background: #fff3cd; color: #856404; border-color: #ffeeba; font-weight: 600; }
@@ -104,33 +104,34 @@
&.kind-no_parts { background: #e2e3e5; color: #383d41; border-color: #d6d8db; font-weight: 700; }
&.kind-done { background: #d4edda; color: #155724; border-color: #c3e6cb; font-weight: 700; }
&.kind-paperwork { background: #e8e0ff; color: #4a2db0; border-color: #d4c5ff; font-weight: 600; }
&.tag-rush { background: #ffe5e5; color: #b00; border-color: #ffcfcf; font-weight: 700; font-size: 9px; }
&.tag-fair { background: #fff0d9; color: #8a4a00; border-color: #ffe0b3; font-weight: 700; font-size: 9px; }
&.tag-vip { background: #e8e0ff; color: #4a2db0; border-color: #d4c5ff; font-weight: 700; font-size: 9px; }
&.tag-as9100 { background: #d4edda; color: #155724; border-color: #c3e6cb; font-weight: 700; font-size: 9px; }
&.tag-rush { background: #ffe5e5; color: #b00; border-color: #ffcfcf; font-weight: 700; font-size: 10px; }
&.tag-fair { background: #fff0d9; color: #8a4a00; border-color: #ffe0b3; font-weight: 700; font-size: 10px; }
&.tag-vip { background: #e8e0ff; color: #4a2db0; border-color: #d4c5ff; font-weight: 700; font-size: 10px; }
&.tag-as9100 { background: #d4edda; color: #155724; border-color: #c3e6cb; font-weight: 700; font-size: 10px; }
}
.card-bottom {
display: flex; align-items: center; justify-content: space-between;
gap: 6px; padding-top: 4px; margin-top: 2px;
gap: 8px; padding-top: 6px; margin-top: 2px;
border-top: 1px solid #f1f3f5;
font-size: 9px; color: $plant-muted;
font-size: 11px; color: $plant-muted;
}
.progress { display: flex; align-items: center; gap: 4px; flex: 1; }
.progress-bar { flex: 1; max-width: 60px; height: 3px; background: #e5e7eb; border-radius: 1.5px; overflow: hidden; }
.progress-fill { height: 100%; background: $plant-mine-border; border-radius: 1.5px; }
.progress { display: flex; align-items: center; gap: 6px; flex: 1; }
.progress-bar { flex: 1; max-width: 100px; height: 4px; background: #e5e7eb; border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; background: $plant-mine-border; border-radius: 2px; }
.operator-pill {
display: inline-flex; align-items: center;
background: #f1f3f5; border-radius: 8px;
padding: 0 4px 0 1px; font-size: 9px; border: 1px solid #e5e7eb;
background: #f1f3f5; border-radius: 10px;
padding: 1px 7px 1px 2px; font-size: 11px; border: 1px solid #e5e7eb;
gap: 4px;
}
.operator-avatar {
width: 12px; height: 12px; border-radius: 50%;
width: 14px; height: 14px; border-radius: 50%;
background: #4caf50; color: #fff;
font-size: 7px; font-weight: 700;
font-size: 9px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
}
.icon-row { display: flex; gap: 3px; font-size: 10px; }
.icon-row { display: flex; gap: 6px; font-size: 12px; }
}
@if $o-webclient-color-scheme == dark {

23
fusion_plating/fusion_plating_shopfloor/static/src/scss/plant_kanban.scss
View File

@@ -92,20 +92,27 @@
font-family: inherit;
}
// Board: fixed-width columns with horizontal scroll on smaller
// viewports. Each column is ~300px wide so the Variant C card
// (~280px) sits comfortably with breathing room. On a 1920px
// desktop ~6 columns visible; on a 1366px tablet ~4 visible with
// smooth horizontal scroll. User explicitly accepted side-scrolling.
.board {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 4px;
grid-template-columns: repeat(9, minmax(300px, 1fr));
gap: 8px;
min-height: 520px;
overflow-x: auto;
padding-bottom: 8px; // room for the horizontal scrollbar
}
.col {
background: $plant-bg;
border-radius: 8px;
padding: 4px;
padding: 6px;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 110px;
gap: 6px;
min-width: 0; // grid-track minmax handles sizing
&.mine {
background: linear-gradient(180deg, $plant-mine-bg 0%, $plant-card-bg 100%);
border: 1px solid $plant-mine-border;
@@ -115,10 +122,10 @@
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 4px;
gap: 8px;
padding: 2px;
max-height: calc(100vh - 280px);
min-height: 100px;
max-height: calc(100vh - 260px);
min-height: 200px;
}
.col-empty {
font-size: 10px;