refactor(portal): trim legacy catch-all SCSS, deduplicate vs new partials
Removed (now superseded by Phase 1-3 partials): - .o_fp_dashboard .o_fp_dashboard_card (-> .o_fp_job_card + .o_fp_panel) - .o_fp_seg_progress (-> .o_fp_stepper) - .o_fp_portal_status_dot (-> .o_fp_badge_dot) - .o_fp_portal_progress (-> .o_fp_timeline) - .o_fp_jobs_list (dashboard wraps in .o_fp_dashboard instead) - fp-portal-tint mixin (unused after refactor) Kept (still referenced by untouched templates): - .o_fp_portal_card (empty-state cards + configurator coating cards) - .o_fp_part_row + .o_fp_file_drop_zone (RFQ wizard JS-driven elements) - .o_fp_portal_form (configurator forms) - .nav-tabs (quote-request filter tabs) File goes from 304 to 124 lines (-59%). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,43 +1,25 @@
|
|||||||
// =============================================================================
|
// =============================================================================
|
||||||
// Fusion Plating -- Customer Portal styles
|
// Fusion Plating — Customer Portal · Legacy catch-all
|
||||||
// Copyright 2026 Nexa Systems Inc.
|
// Copyright 2026 Nexa Systems Inc.
|
||||||
// License OPL-1 (Odoo Proprietary License v1.0)
|
// License OPL-1 (Odoo Proprietary License v1.0)
|
||||||
//
|
//
|
||||||
// THEME AWARENESS
|
// This file holds the rules that pre-date the 2026-05-17 dashboard redesign
|
||||||
// ---------------
|
// AND are still referenced by templates that the redesign did NOT touch
|
||||||
// This stylesheet ships with the website / portal frontend bundle. It NEVER
|
// (RFQ wizard part rows, file drop zone, configurator forms, empty-state
|
||||||
// hardcodes hex values. Every colour comes from a Bootstrap CSS custom
|
// cards on the secondary portal pages). The redesigned surfaces use the
|
||||||
// property so the portal renders correctly in BOTH light and dark themes
|
// new component partials (_fp_portal_tokens, fp_portal_buttons, etc.).
|
||||||
// without any duplication:
|
|
||||||
//
|
//
|
||||||
// surface: var(--bs-body-bg)
|
// THEME AWARENESS: rules in this file still use Bootstrap CSS custom
|
||||||
// muted: var(--bs-secondary-bg)
|
// properties (var(--bs-*)) so they adapt to both light and dark portal
|
||||||
// foreground: var(--bs-body-color)
|
// themes. New component partials use the brand token system instead.
|
||||||
// muted text: var(--bs-secondary-color)
|
|
||||||
// border: var(--bs-border-color)
|
|
||||||
// success: var(--bs-success)
|
|
||||||
// info: var(--bs-info)
|
|
||||||
// warning: var(--bs-warning)
|
|
||||||
// danger: var(--bs-danger)
|
|
||||||
//
|
|
||||||
// Status tints use color-mix() against a theme token so a green dot is darker
|
|
||||||
// on a light background and brighter on a dark background -- one rule, two
|
|
||||||
// looks. We never use @media (prefers-color-scheme) or .o_dark overrides.
|
|
||||||
// =============================================================================
|
// =============================================================================
|
||||||
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------
|
||||||
// Local helper -- tint a semantic colour onto the current surface
|
// Generic portal card surface — used by empty-state messages on the secondary
|
||||||
// -----------------------------------------------------------------------------
|
// portal pages (quote requests, POs, invoices, certifications) and by the
|
||||||
@mixin fp-portal-tint($color-var, $amount: 14%) {
|
// configurator coating cards. Replaced by .o_fp_card on the redesigned
|
||||||
background-color: color-mix(in srgb, var(#{$color-var}) #{$amount}, transparent);
|
// surfaces (/my/home, /my/jobs, /my/jobs/<id>).
|
||||||
color: var(#{$color-var});
|
|
||||||
border: 1px solid color-mix(in srgb, var(#{$color-var}) 35%, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
// Generic portal card surface for plating-specific blocks
|
|
||||||
// -----------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------
|
||||||
.o_fp_portal_card {
|
.o_fp_portal_card {
|
||||||
background-color: var(--bs-body-bg);
|
background-color: var(--bs-body-bg);
|
||||||
@@ -57,153 +39,7 @@
|
|||||||
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------
|
||||||
// Dashboard layout
|
// RFQ Form — Part row card (dynamically inserted by fp_rfq_form.js)
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
.o_fp_dashboard {
|
|
||||||
.o_fp_dashboard_card {
|
|
||||||
border: 1px solid var(--bs-border-color);
|
|
||||||
border-radius: 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: border-color 120ms ease, box-shadow 120ms ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: color-mix(in srgb, var(--bs-primary) 40%, var(--bs-border-color));
|
|
||||||
box-shadow: 0 2px 12px color-mix(in srgb, var(--bs-primary) 8%, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-header {
|
|
||||||
background-color: var(--bs-body-bg);
|
|
||||||
border-bottom: 1px solid var(--bs-border-color);
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
|
|
||||||
h6 {
|
|
||||||
color: var(--bs-body-color);
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-body {
|
|
||||||
background-color: var(--bs-body-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.table {
|
|
||||||
margin-bottom: 0;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
|
|
||||||
thead th {
|
|
||||||
border-bottom-width: 1px;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.78rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.03em;
|
|
||||||
color: var(--bs-secondary-color);
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody td {
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
vertical-align: middle;
|
|
||||||
border-bottom: 1px solid var(--bs-border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr:last-child td {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
// Segmented progress bar (Receiving / In Progress / Shipping)
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
.o_fp_seg_progress {
|
|
||||||
border-radius: 5px;
|
|
||||||
overflow: hidden;
|
|
||||||
background: var(--bs-secondary-bg);
|
|
||||||
|
|
||||||
> div {
|
|
||||||
transition: opacity 300ms ease;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
// Job state -- small coloured dot used in the jobs list table
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
.o_fp_portal_status_dot {
|
|
||||||
display: inline-block;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: var(--bs-secondary-color);
|
|
||||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-secondary-color) 25%, transparent);
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
&[data-state="received"] {
|
|
||||||
background-color: var(--bs-info);
|
|
||||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-info) 25%, transparent);
|
|
||||||
}
|
|
||||||
&[data-state="in_progress"] {
|
|
||||||
background-color: var(--bs-primary);
|
|
||||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-primary) 25%, transparent);
|
|
||||||
}
|
|
||||||
&[data-state="quality_check"] {
|
|
||||||
background-color: var(--bs-warning);
|
|
||||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-warning) 25%, transparent);
|
|
||||||
}
|
|
||||||
&[data-state="ready_to_ship"] {
|
|
||||||
background-color: var(--bs-secondary-color);
|
|
||||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-secondary-color) 25%, transparent);
|
|
||||||
}
|
|
||||||
&[data-state="shipped"],
|
|
||||||
&[data-state="complete"] {
|
|
||||||
background-color: var(--bs-success);
|
|
||||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-success) 25%, transparent);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
// Job progress bar -- wraps Bootstrap .progress with state-aware fill colour
|
|
||||||
// (kept for backwards compatibility on job detail page)
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
.o_fp_portal_progress {
|
|
||||||
|
|
||||||
.progress {
|
|
||||||
background-color: color-mix(in srgb, var(--bs-secondary-color) 18%, transparent);
|
|
||||||
border: 1px solid var(--bs-border-color);
|
|
||||||
border-radius: 999px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
background-color: var(--bs-primary);
|
|
||||||
color: var(--bs-body-bg);
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.72rem;
|
|
||||||
line-height: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-state="received"] .progress-bar {
|
|
||||||
background-color: var(--bs-info);
|
|
||||||
}
|
|
||||||
&[data-state="quality_check"] .progress-bar {
|
|
||||||
background-color: var(--bs-warning);
|
|
||||||
}
|
|
||||||
&[data-state="ready_to_ship"] .progress-bar {
|
|
||||||
background-color: color-mix(in srgb, var(--bs-success) 70%, var(--bs-warning));
|
|
||||||
}
|
|
||||||
&[data-state="shipped"] .progress-bar,
|
|
||||||
&[data-state="complete"] .progress-bar {
|
|
||||||
background-color: var(--bs-success);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
// RFQ Form -- Part row card
|
|
||||||
// -----------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------
|
||||||
.o_fp_part_row {
|
.o_fp_part_row {
|
||||||
background-color: var(--bs-body-bg);
|
background-color: var(--bs-body-bg);
|
||||||
@@ -244,7 +80,7 @@
|
|||||||
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------
|
||||||
// Drag-drop file upload zone
|
// Drag-drop file upload zone (RFQ + configurator)
|
||||||
// -----------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------
|
||||||
.o_fp_file_drop_zone {
|
.o_fp_file_drop_zone {
|
||||||
border: 2px dashed var(--bs-border-color);
|
border: 2px dashed var(--bs-border-color);
|
||||||
@@ -270,7 +106,7 @@
|
|||||||
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------
|
||||||
// Portal form general
|
// Portal form general (form-label sizing)
|
||||||
// -----------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------
|
||||||
.o_fp_portal_form {
|
.o_fp_portal_form {
|
||||||
.form-label {
|
.form-label {
|
||||||
@@ -290,15 +126,3 @@
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
// Jobs list -- card-based layout
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
.o_fp_jobs_list {
|
|
||||||
.o_fp_portal_card {
|
|
||||||
.card-body {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user