feat(portal): jobs-forward dashboard layout SCSS
Welcome strip + 4-tile KPI row + jobs hero + secondary 3-panel strip. Responsive at 768px (KPI grid -> 2x2, secondary -> stacked). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,169 @@
|
||||
// ============================================================================
|
||||
// Fusion Plating — Portal · Dashboard layout
|
||||
// Jobs-forward grid: welcome strip → KPI tile row → hero jobs section →
|
||||
// secondary panel strip.
|
||||
// ============================================================================
|
||||
|
||||
.o_fp_dashboard {
|
||||
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_welcome {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
margin-bottom: $fp-space-4;
|
||||
flex-wrap: wrap;
|
||||
gap: $fp-space-3;
|
||||
|
||||
.o_fp_welcome_title {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 600;
|
||||
color: $fp-text;
|
||||
margin-bottom: .18rem;
|
||||
}
|
||||
.o_fp_welcome_sub {
|
||||
font-size: .82rem;
|
||||
color: $fp-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.o_fp_kpi_row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: $fp-space-3;
|
||||
margin-bottom: $fp-space-5;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.o_fp_jobs_hero {
|
||||
margin-bottom: $fp-space-5;
|
||||
|
||||
.o_fp_section_header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: $fp-space-3;
|
||||
|
||||
.o_fp_section_title {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: $fp-text;
|
||||
}
|
||||
}
|
||||
|
||||
// Status filter tabs on the jobs hero
|
||||
.o_fp_status_tabs {
|
||||
display: flex;
|
||||
gap: .35rem;
|
||||
font-size: .74rem;
|
||||
align-items: center;
|
||||
background: $fp-card-bg;
|
||||
border: 1px solid $fp-card-border;
|
||||
border-radius: $fp-radius-button;
|
||||
padding: .2rem;
|
||||
|
||||
.o_fp_status_tab {
|
||||
padding: .25rem .6rem;
|
||||
border-radius: 6px;
|
||||
color: $fp-muted;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
&.active {
|
||||
background: $fp-gradient-tab;
|
||||
color: $fp-teal-dark;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o_fp_view_all {
|
||||
text-align: center;
|
||||
padding: .45rem;
|
||||
a { @extend .o_fp_btn_mint; }
|
||||
}
|
||||
}
|
||||
|
||||
.o_fp_job_card {
|
||||
@extend .o_fp_card;
|
||||
padding: $fp-space-4;
|
||||
border-radius: $fp-radius-tile;
|
||||
margin-bottom: $fp-space-3;
|
||||
box-shadow: $fp-shadow-card;
|
||||
|
||||
.o_fp_job_header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: $fp-space-3;
|
||||
|
||||
.o_fp_job_ref {
|
||||
font-weight: 600;
|
||||
color: $fp-text;
|
||||
font-size: .98rem;
|
||||
}
|
||||
.o_fp_job_meta {
|
||||
color: $fp-muted;
|
||||
font-size: .8rem;
|
||||
margin-left: .65rem;
|
||||
}
|
||||
}
|
||||
|
||||
.o_fp_job_docs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .35rem;
|
||||
margin-top: $fp-space-3;
|
||||
padding-top: .6rem;
|
||||
border-top: 1px solid $fp-section-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.o_fp_secondary_panels {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: $fp-space-3;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.o_fp_panel {
|
||||
@extend .o_fp_card_compact;
|
||||
|
||||
.o_fp_panel_title {
|
||||
font-weight: 600;
|
||||
font-size: .82rem;
|
||||
color: $fp-text;
|
||||
margin-bottom: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .4rem;
|
||||
|
||||
.o_fp_panel_icon {
|
||||
background: $fp-gradient-icon;
|
||||
color: $fp-teal-dark;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: $fp-radius-icon;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: .78rem;
|
||||
}
|
||||
}
|
||||
.o_fp_panel_row {
|
||||
font-size: .72rem;
|
||||
color: $fp-muted;
|
||||
margin-top: .2rem;
|
||||
&:first-of-type { margin-top: 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user