Jens/VacatureRadar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add automation activity and employer intelligence

Browse Source
This commit is contained in:
Jens
2026-07-22 20:17:20 +02:00
parent 4fa2a34447
commit afe18e5b96
16 changed files with 679 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/pages.css
+78
View File
@@ -221,3 +221,81 @@
.platform-catalog > summary span { display: grid; }
.platform-grid { margin-top: 18px; }
.platform-grid article { align-items: flex-start; flex-direction: column; }
.activity-filterbar { display: grid; grid-template-columns: minmax(260px, 1fr) 220px auto; align-items: end; gap: 10px; margin-bottom: 28px; padding: 14px; border: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); background: var(--surface-low); }
.activity-timeline { position: relative; display: grid; gap: 16px; padding-left: 78px; }
.activity-timeline::before { position: absolute; inset: 0 auto 0 28px; width: 1px; content: ""; background: linear-gradient(var(--cyan), var(--outline) 70%, transparent); opacity: .45; }
.activity-event { position: relative; }
.activity-marker { position: absolute; top: 0; left: -78px; display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid var(--outline); background: var(--surface-low); color: var(--text-muted); }
.activity-marker.is-positive { border-color: color-mix(in srgb, var(--emerald) 45%, var(--outline)); color: var(--emerald); }
.activity-marker.is-attention { border-color: color-mix(in srgb, var(--coral) 45%, var(--outline)); color: var(--coral); }
.activity-card { padding: 20px; border: 1px solid color-mix(in srgb, var(--outline) 44%, transparent); background: var(--surface-container); }
.activity-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.activity-card-head h2 { margin: 9px 0 0; }
.activity-card-head time { color: var(--text-faint); font: 11px var(--font-mono); }
.activity-object { color: var(--text-muted); }
.decision-note { margin: 14px 0; padding: 12px 14px; border-left: 2px solid var(--cyan); background: var(--surface-high); }
.decision-note p { margin: 7px 0 0; }
.employer-kpis { display: flex; gap: 8px; }
.employer-kpis > div { min-width: 130px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); background: var(--surface-low); }
.employer-kpis span, .employer-kpis strong { display: block; }
.employer-kpis span { color: var(--text-faint); font: 9px var(--font-mono); text-transform: uppercase; }
.employer-kpis strong { margin-top: 5px; color: var(--text-strong); font: 650 22px var(--font-headline); }
.employer-radar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; align-items: start; border: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); background: var(--surface-container); }
.employer-table-panel { min-width: 0; padding: 18px; }
.employer-table td:first-child a { display: flex; align-items: center; gap: 10px; }
.employer-table td:first-child strong, .employer-table td:first-child small { display: block; }
.employer-table tr.is-selected { background: color-mix(in srgb, var(--cyan) 6%, var(--surface-high)); }
.employer-mark { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb, var(--cyan) 35%, var(--outline)); background: var(--surface-lowest); color: var(--cyan); font: 650 10px var(--font-mono); }
.employer-mark.large { width: 54px; height: 54px; margin-bottom: 14px; font-size: 15px; }
.employer-mark.hero-mark { width: 112px; height: 112px; font-size: 26px; }
.signal-number { color: var(--emerald); }
.employer-intelligence-rail { position: sticky; top: calc(var(--topbar-height) + 18px); overflow: hidden; border-left: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); background: var(--surface-low); }
.employer-intel-header { padding: 22px; border-bottom: 1px solid color-mix(in srgb, var(--outline) 35%, transparent); }
.employer-intel-header h2 { font-size: 26px; }
.employer-intel-section { padding: 17px; border-top: 1px solid color-mix(in srgb, var(--outline) 35%, transparent); }
.employer-job-link, .employer-source { display: flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid color-mix(in srgb, var(--outline) 28%, transparent); }
.employer-job-link strong, .employer-job-link small { display: block; }
.employer-job-link b { color: var(--cyan); font: 650 15px var(--font-mono); }
.employer-intelligence-rail > .button { margin: 17px; width: calc(100% - 34px); }
.employer-detail-hero { min-height: 230px; }
.employer-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 16px; }
.employer-job-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.employer-job-grid article { padding: 15px; border: 1px solid color-mix(in srgb, var(--outline) 38%, transparent); background: var(--surface-low); }
.employer-job-grid h3 { margin: 10px 0 4px; }
.match-history { display: grid; gap: 7px; }
.match-history > div { display: grid; grid-template-columns: 42px minmax(100px, 1fr) 40px minmax(160px, 1.3fr); align-items: center; gap: 9px; }
.match-history span { color: var(--text-faint); font: 10px var(--font-mono); }
.match-history i { position: relative; display: block; height: 5px; background: var(--surface-highest); }
.match-history i::after { position: absolute; inset: 0 auto 0 0; width: var(--match); content: ""; background: linear-gradient(90deg, var(--cyan-dim), var(--emerald)); }
.match-history strong { color: var(--cyan); font: 12px var(--font-mono); }
.automation-status { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 22px; border: 1px solid var(--outline); background: var(--surface-container); }
.automation-status.is-healthy { border-color: color-mix(in srgb, var(--emerald) 30%, var(--outline)); }
.automation-status h2 { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; }
.automation-status dl { display: flex; margin: 0; }
.automation-status dl > div { min-width: 150px; padding: 0 16px; border-left: 1px solid var(--outline); }
.automation-status dt { color: var(--text-faint); font: 9px var(--font-mono); text-transform: uppercase; }
.automation-status dd { margin: 5px 0 0; }
.automation-pipeline { display: grid; grid-template-columns: repeat(8, minmax(112px, 1fr)); gap: 4px; overflow-x: auto; margin: 28px 0 16px; padding-top: 28px; }
.automation-pipeline > .section-kicker { position: absolute; margin-top: -27px; }
.automation-pipeline article { position: relative; display: grid; min-height: 130px; place-items: center; align-content: center; padding: 11px; border: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); border-bottom: 2px solid var(--cyan-dim); background: var(--surface-high); text-align: center; }
.automation-pipeline article::after { position: absolute; z-index: 1; top: 50%; right: -8px; width: 12px; content: ""; border-top: 1px solid var(--cyan); }
.automation-pipeline article:last-child::after { display: none; }
.automation-pipeline .icon { color: var(--cyan); }
.automation-pipeline strong { margin-top: 8px; font: 600 10px var(--font-mono); text-transform: uppercase; }
.automation-pipeline b { margin-top: 7px; color: var(--text-strong); font: 650 20px var(--font-headline); }
.automation-pipeline small { font: 9px var(--font-mono); }
.pipeline-phase-index { position: absolute; top: 7px; left: 8px; color: var(--text-faint); font: 9px var(--font-mono); }
.automation-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 17px 0 28px; }
.automation-kpis article { min-height: 120px; padding: 17px; border: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); background: var(--surface-container); }
.automation-kpis strong, .automation-kpis small { display: block; }
.automation-kpis strong { margin: 15px 0 4px; color: var(--text-strong); font: 650 32px var(--font-headline); }
.automation-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .5fr); align-items: start; gap: 14px; }
.automation-source-table, .technical-log-panel { padding: 18px; border: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); background: var(--surface-container); }
.technical-log-panel { background: var(--surface-lowest); }
.live-log { display: grid; max-height: 520px; overflow-y: auto; margin-bottom: 15px; }
.live-log article { display: grid; grid-template-columns: 68px 62px 1fr; gap: 7px; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--outline) 27%, transparent); font: 10px/1.5 var(--font-mono); }
.live-log time { color: var(--text-faint); }
.live-log strong { color: var(--indigo); }
.live-log article.is-success strong { color: var(--emerald); }
.live-log article.is-error strong { color: var(--coral); }
.live-log small { grid-column: 2 / -1; }