From fd2b2908f3de485fadc8cc2d048c804d2ba37559 Mon Sep 17 00:00:00 2001 From: gsinghpal Date: Sat, 23 May 2026 21:20:01 -0400 Subject: [PATCH] =?UTF-8?q?fix(shopfloor):=20plant-view=20card=20sizing=20?= =?UTF-8?q?=E2=80=94=20match=20the=20mockup=20proportions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- .../src/scss/components/_mini_timeline.scss | 17 +++--- .../src/scss/components/_plant_card.scss | 59 ++++++++++--------- .../static/src/scss/plant_kanban.scss | 23 +++++--- 3 files changed, 54 insertions(+), 45 deletions(-) diff --git a/fusion_plating/fusion_plating_shopfloor/static/src/scss/components/_mini_timeline.scss b/fusion_plating/fusion_plating_shopfloor/static/src/scss/components/_mini_timeline.scss index d6cca0a4..733a626b 100644 --- a/fusion_plating/fusion_plating_shopfloor/static/src/scss/components/_mini_timeline.scss +++ b/fusion_plating/fusion_plating_shopfloor/static/src/scss/components/_mini_timeline.scss @@ -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; diff --git a/fusion_plating/fusion_plating_shopfloor/static/src/scss/components/_plant_card.scss b/fusion_plating/fusion_plating_shopfloor/static/src/scss/components/_plant_card.scss index ef6f5676..4f8cc585 100644 --- a/fusion_plating/fusion_plating_shopfloor/static/src/scss/components/_plant_card.scss +++ b/fusion_plating/fusion_plating_shopfloor/static/src/scss/components/_plant_card.scss @@ -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 { diff --git a/fusion_plating/fusion_plating_shopfloor/static/src/scss/plant_kanban.scss b/fusion_plating/fusion_plating_shopfloor/static/src/scss/plant_kanban.scss index 63da69fb..ea9ffdf8 100644 --- a/fusion_plating/fusion_plating_shopfloor/static/src/scss/plant_kanban.scss +++ b/fusion_plating/fusion_plating_shopfloor/static/src/scss/plant_kanban.scss @@ -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;