diff --git a/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_stepper.scss b/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_stepper.scss index b9f23b8c..4b611253 100644 --- a/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_stepper.scss +++ b/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_stepper.scss @@ -8,7 +8,19 @@ .o_fp_stepper { display: flex; align-items: center; - margin-bottom: .35rem; + // Bottom space for the absolutely-positioned labels below each circle. + // ~2.2rem covers two short lines (title + time_label). + margin-bottom: 2.4rem; + + // Each unit holds one circle + its label. The label is absolutely + // positioned (see .o_fp_step_label below) so its horizontal centre + // lines up with the circle's centre even when text is wider than 24px. + .o_fp_step_unit { + position: relative; + flex-shrink: 0; + width: 24px; + height: 24px; + } .o_fp_step_circle { width: 24px; @@ -20,7 +32,6 @@ font-family: $fp-font; font-size: .65rem; font-weight: 700; - flex-shrink: 0; background: $fp-card-bg; border: 1.5px solid $fp-card-border; color: $fp-muted-light; @@ -58,6 +69,40 @@ &.o_fp_step_line_done { background: $fp-teal; } &.o_fp_step_line_warn { background: $fp-amber; } } + + // Label centred on its circle via absolute positioning. Wider text + // ("Inspected") overflows equally left + right instead of pushing + // the column or sitting in a separate flex slot. + .o_fp_step_label { + position: absolute; + top: calc(100% + .45rem); + left: 50%; + transform: translateX(-50%); + text-align: center; + white-space: nowrap; + font-size: .68rem; + + .o_fp_step_label_title { + color: $fp-muted-light; + font-weight: 500; + } + .o_fp_step_label_time { + color: $fp-disabled; + font-size: .6rem; + } + &.o_fp_step_label_done { + .o_fp_step_label_title { color: $fp-text-body; } + .o_fp_step_label_time { color: $fp-muted-light; } + } + &.o_fp_step_label_active { + .o_fp_step_label_title { color: $fp-teal; font-weight: 700; } + .o_fp_step_label_time { color: $fp-teal; } + } + &.o_fp_step_label_active_warn { + .o_fp_step_label_title { color: $fp-amber-text; font-weight: 700; } + .o_fp_step_label_time { color: $fp-amber-text; } + } + } } // Pulsing glow for the active step indicator. Kept subtle - the ring @@ -83,34 +128,5 @@ } } -// Step labels row below the stepper -.o_fp_step_labels { - display: flex; - justify-content: space-between; - font-size: .68rem; - - .o_fp_step_label { - text-align: center; - flex: 1; - .o_fp_step_label_title { - color: $fp-muted-light; - font-weight: 500; - } - .o_fp_step_label_time { - color: $fp-disabled; - font-size: .6rem; - } - &.o_fp_step_label_done { - .o_fp_step_label_title { color: $fp-text-body; } - .o_fp_step_label_time { color: $fp-muted-light; } - } - &.o_fp_step_label_active { - .o_fp_step_label_title { color: $fp-teal; font-weight: 700; } - .o_fp_step_label_time { color: $fp-teal; } - } - &.o_fp_step_label_active_warn { - .o_fp_step_label_title { color: $fp-amber-text; font-weight: 700; } - .o_fp_step_label_time { color: $fp-amber-text; } - } - } -} +// Legacy .o_fp_step_labels container removed — labels are now nested +// inside each .o_fp_step_unit (see above) so they centre on their circle. diff --git a/fusion_plating/fusion_plating_portal/views/fp_portal_macros.xml b/fusion_plating/fusion_plating_portal/views/fp_portal_macros.xml index 3cc7364d..872cba17 100644 --- a/fusion_plating/fusion_plating_portal/views/fp_portal_macros.xml +++ b/fusion_plating/fusion_plating_portal/views/fp_portal_macros.xml @@ -27,17 +27,29 @@
- -
- - - - + +
+
+ + + + +
+
+
+
+
-
- -
-
-
-
- -