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

fix(plant-kanban): full-height bordered columns + viewport-pinned scrollbar

Browse Source 
Two layout polish fixes after persona-walk feedback on the new Plant
Kanban surface (`fp_plant_kanban`).

1. Columns now run full board height with visible borders
   Was: `.col` had `background: $plant-bg` (= page bg, invisible) and
   no border, so only the header card (`.o_fp_col_header`) drew any
   outline. Empty columns (BAKING / DE-RACKING / SHIPPING) looked
   unbounded — operators couldn't tell where one column ended and
   another began.

   Now: `.col` is the bordered white card (Trello / Asana style),
   stretches full height via grid + flex. `.o_fp_col_header` drops
   its standalone border / radius / background and is just a bottom-
   divider band inside the column card.

2. Horizontal scrollbar pinned to viewport bottom
   Was: `.o_fp_plant_kanban` was `min-height: 100vh` (block flow) +
   `.board` had `min-height: 520px; overflow-x: auto`. Scrollbar
   showed at the bottom of the .board element (~520px from top of
   board), floating mid-page below the empty columns.

   Now: parent is `height: 100vh; display: flex; flex-direction:
   column`. Header is `flex: 0 0 auto`; `.board` is `flex: 1 1 auto;
   min-height: 0` so it fills all remaining vertical and its
   scrollbar sits at the viewport bottom.

`.col-scroll` switched from `max-height: calc(100vh - 260px)` to
`flex: 1 1 auto; min-height: 0` so it expands inside the now-full-
height column instead of being capped at a magic number.

Version: fusion_plating_shopfloor 19.0.33.1.13.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-05-24 20:40:41 -04:00
parent 80f80fb707
commit 5d5964a327
3 changed files with 43 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
fusion_plating/fusion_plating_shopfloor/__manifest__.py
View File

@@ -5,7 +5,7 @@
{
'name': 'Fusion Plating — Shop Floor',
'version': '19.0.33.1.12',
'version': '19.0.33.1.13',
'category': 'Manufacturing/Plating',
'summary': 'Shop-floor tablet stations, QR scanning, bake window enforcer, '
'first-piece inspection gates.',

16
fusion_plating/fusion_plating_shopfloor/static/src/scss/components/_column_header.scss
View File

@@ -1,19 +1,21 @@
// _column_header.scss — depends on _plant_tokens.scss
.o_fp_col_header {
padding: 6px 8px;
padding: 8px 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
background: $plant-card-bg;
border: 1px solid $plant-card-border;
border-radius: 6px 6px 0 0;
border-bottom: 0;
// No own background or outer border — the parent .col carries them
// (full-height column-as-card layout). Just a bottom divider so the
// header reads as a distinct band above the scrollable body.
background: transparent;
border-bottom: 1px solid $plant-card-border;
flex: 0 0 auto;
&.mine {
background: linear-gradient(180deg, $plant-mine-bg 0%, $plant-card-bg 100%);
border-color: $plant-mine-border;
// .col already paints the mine gradient + gold border.
border-bottom-color: $plant-mine-border;
}
.col-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

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

@@ -3,7 +3,13 @@
.o_fp_plant_kanban {
padding: 8px;
background: $plant-bg;
min-height: 100vh;
// Full viewport height + flex column so .board can grow to fill all
// remaining vertical space. min-height: 100vh would let .board's
// intrinsic height bubble up and put the horizontal scrollbar
// mid-page; height + flex pins the scrollbar to the viewport bottom.
height: 100vh;
display: flex;
flex-direction: column;
color: $plant-text;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
@@ -14,9 +20,8 @@
padding: 8px 12px;
margin-bottom: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
position: sticky;
top: 0;
z-index: 10;
// Keep header at natural height; board takes remaining space.
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 8px;
@@ -97,35 +102,49 @@
// (~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.
//
// flex: 1 + min-height: 0 — the board fills all remaining vertical
// space below the sticky header, so the horizontal scrollbar pins
// to the viewport bottom (not mid-page where the board's natural
// height would have ended).
.board {
display: grid;
grid-template-columns: repeat(9, minmax(300px, 1fr));
gap: 8px;
min-height: 520px;
flex: 1 1 auto;
min-height: 0;
overflow-x: auto;
padding-bottom: 8px; // room for the horizontal scrollbar
padding-bottom: 4px; // room for the horizontal scrollbar
}
// Each .col is now a proper bordered card that runs full board
// height — same visual treatment as Trello / Asana columns. The
// header (.o_fp_col_header) sits at the top with a divider; the
// scrollable body (.col-scroll) takes the rest. Previously .col
// had bg = page-bg (invisible) so columns visually ended at the
// header card — empty columns looked unbounded.
.col {
background: $plant-bg;
background: $plant-card-bg;
border: 1px solid $plant-card-border;
border-radius: 8px;
padding: 6px;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0; // grid-track minmax handles sizing
min-width: 0; // grid-track minmax handles sizing
min-height: 0; // allow flex children to scroll inside
overflow: hidden; // contain rounded corners over inner content
&.mine {
background: linear-gradient(180deg, $plant-mine-bg 0%, $plant-card-bg 100%);
border: 1px solid $plant-mine-border;
border-color: $plant-mine-border;
}
}
.col-scroll {
flex: 1 1 auto;
min-height: 0; // critical — without this the children
// push the column past its parent height
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px;
padding: 2px;
max-height: calc(100vh - 260px);
min-height: 200px;
padding: 6px;
}
.col-empty {
font-size: 10px;