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

feat(portal): vertical timeline + detail-page wrapper SCSS

Browse Source 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-05-17 02:49:50 -04:00
parent 4da123c2d3
commit 55ac05667c
1 changed files with 160 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_timeline.scss Normal file
View File

@@ -0,0 +1,160 @@
// ============================================================================
// Fusion Plating — Portal · Vertical timeline (job detail page)
// ============================================================================
.o_fp_timeline {
position: relative;
// Spine (gray default)
&::before {
content: '';
position: absolute;
left: 9px;
top: 10px;
bottom: 10px;
width: 2px;
background: $fp-card-border;
}
// Active portion (filled to height of completed stages, set inline by template)
.o_fp_timeline_spine_active {
position: absolute;
left: 9px;
top: 10px;
width: 2px;
background: $fp-teal;
// height set inline via style attribute
}
.o_fp_timeline_item {
position: relative;
padding-left: 2rem;
padding-bottom: 1.1rem;
&:last-child { padding-bottom: 0; }
.o_fp_timeline_dot {
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
border-radius: $fp-radius-pill;
background: $fp-card-bg;
border: 2px solid $fp-card-border;
}
&.o_fp_timeline_done .o_fp_timeline_dot {
background: $fp-gradient-primary;
border: none;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: .65rem;
font-weight: 700;
}
&.o_fp_timeline_active .o_fp_timeline_dot {
background: $fp-card-bg;
border: 2.5px solid $fp-teal;
box-shadow: $fp-glow-ring-teal;
}
.o_fp_timeline_title {
font-size: .92rem;
color: $fp-text;
font-weight: 500;
line-height: 1.2;
}
&.o_fp_timeline_active .o_fp_timeline_title {
color: $fp-teal;
font-weight: 700;
font-size: .95rem;
}
&.o_fp_timeline_pending .o_fp_timeline_title {
color: $fp-muted;
}
.o_fp_timeline_time {
font-size: .78rem;
color: $fp-muted;
margin-top: .2rem;
}
&.o_fp_timeline_active .o_fp_timeline_time { color: $fp-teal; }
&.o_fp_timeline_pending .o_fp_timeline_time { color: $fp-disabled; }
.o_fp_timeline_note {
font-size: .74rem;
color: $fp-text-body;
margin-top: .35rem;
padding: .4rem .6rem;
background: $fp-page-bg;
border-radius: 6px;
display: inline-block;
&.o_fp_timeline_note_success { background: $fp-success-bg; color: $fp-success-text; }
&.o_fp_timeline_note_active { background: #eff6ff; color: $fp-teal-dark; line-height: 1.4; }
}
}
}
// Detail-page outer wrapper
.o_fp_job_detail {
background: $fp-page-bg;
padding: $fp-space-6;
border-radius: $fp-radius-card;
border: 1px solid $fp-card-border;
font-family: $fp-font;
.o_fp_job_detail_hero {
@extend .o_fp_card;
margin-bottom: $fp-space-5;
padding-bottom: $fp-space-4;
h2 { margin: 0 0 .35rem 0; font-size: 1.5rem; color: $fp-text; font-weight: 600; }
.o_fp_detail_label {
font-size: .7rem;
color: $fp-muted;
letter-spacing: .05em;
text-transform: uppercase;
font-weight: 500;
margin-bottom: .25rem;
}
.o_fp_detail_subtitle {
color: $fp-text-body;
font-size: .92rem;
margin-bottom: .7rem;
}
.o_fp_detail_facts {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
color: $fp-text-body;
font-size: .82rem;
.o_fp_fact_label { color: $fp-muted-light; }
.o_fp_fact_value { color: $fp-text; font-weight: 600; }
}
}
.o_fp_job_detail_grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: $fp-space-5;
@media (max-width: 768px) {
grid-template-columns: 1fr;
}
}
.o_fp_job_detail_footer {
@extend .o_fp_card;
margin-top: $fp-space-5;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
.o_fp_related_links {
font-size: .82rem;
color: $fp-text-body;
a { color: $fp-teal; text-decoration: none; margin: 0 .55rem; }
a.disabled { color: $fp-muted-light; }
}
}
}