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

feat: personalize scoring and add skills radar

Browse Source
This commit is contained in:
Jens
2026-07-22 19:33:29 +02:00
parent 029df89265
commit a30ecbc553
33 changed files with 1529 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/app.css
+95
View File
@@ -293,6 +293,12 @@ textarea { resize: vertical; }
.choice-field label { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.choice-field label:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 62%, var(--border)); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.choice-field small { display: block; margin-top: 7px; }
.choice-field > .grouped-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.choice-field .grouped-choices > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 7px; padding: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-low); }
.choice-field .grouped-choices > div > label { grid-column: 1 / -1; min-height: 0; margin: 0 0 3px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text-soft); font-size: 12px; font-weight: 800; letter-spacing: .02em; cursor: default; }
.choice-field .grouped-choices > div > label:has(input:checked) { border: 0; background: transparent; }
.choice-field .grouped-choices > div > div { min-width: 0; }
.choice-field .grouped-choices > div > div > label { height: 100%; }
.form-section { grid-column: 1 / -1; margin: 12px 0 -2px; padding-top: 18px; border-top: 1px solid var(--border); }
.form-section h2 { margin: 0; font-size: 17px; }
.form-section p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
@@ -391,6 +397,8 @@ textarea { resize: vertical; }
.source-card-head { flex-direction: column; }
.source-actions { width: 100%; justify-content: space-between; }
.choice-field > div { grid-template-columns: 1fr; }
.choice-field > .grouped-choices { grid-template-columns: 1fr; }
.choice-field .grouped-choices > div { grid-template-columns: 1fr; }
.form-actions { bottom: 8px; }
}
@@ -681,3 +689,90 @@ textarea { resize: vertical; }
.result-heading h2 { font-size: 20px; }
.score-block small { max-width: none; text-align: left; }
}
/* VR-208: personal market-demand and learning radar. */
.skills-page-header { align-items: center; }
.insight-hero {
position: relative;
display: grid;
grid-template-columns: 126px minmax(0, 1fr) auto;
align-items: center;
gap: 24px;
margin-bottom: 16px;
padding: 26px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border));
border-radius: var(--radius);
background:
radial-gradient(circle at 8% 50%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 30%),
linear-gradient(125deg, color-mix(in srgb, var(--primary) 5%, var(--surface)), var(--surface));
box-shadow: 0 18px 48px rgba(0, 0, 0, .12);
}
.insight-hero h2 { margin: 7px 0; font-size: clamp(22px, 2vw, 31px); letter-spacing: -.025em; }
.insight-hero p { max-width: 80ch; margin: 0; color: var(--muted); }
.insight-orbit { position: relative; width: 104px; height: 104px; display: grid; place-items: center; }
.insight-orbit span { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--primary) 50%, transparent); border-radius: 50%; }
.insight-orbit span:nth-child(2) { inset: 13px; opacity: .65; }
.insight-orbit span:nth-child(3) { inset: 26px; opacity: .4; }
.insight-orbit strong { z-index: 1; color: var(--primary-strong); font-size: 24px; }
.skill-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.skill-metrics article { display: grid; gap: 5px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.skill-metrics article.metric-accent { border-color: color-mix(in srgb, var(--warning) 38%, var(--border)); background: linear-gradient(145deg, var(--warning-soft), var(--surface)); }
.skill-metrics span { color: var(--text-soft); font-size: 12px; }
.skill-metrics strong { font-size: 28px; line-height: 1; }
.skill-metrics small { color: var(--muted); }
.skills-filter-console { grid-template-columns: minmax(220px, 1fr) minmax(190px, .65fr) auto auto; }
.skills-insight-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.skill-demand-list { display: grid; gap: 12px; }
.skill-demand-card { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 12px 32px rgba(0, 0, 0, .08); }
.skill-demand-card.is-gap { border-left: 3px solid var(--warning); }
.skill-demand-main { min-width: 0; display: grid; gap: 13px; padding: 20px 22px; }
.skill-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.skill-card-heading h3 { margin: 4px 0 0; font-size: 21px; }
.skill-category { color: var(--muted); font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; letter-spacing: .07em; }
.demand-meter { height: 7px; overflow: hidden; border-radius: 999px; background: var(--surface-high); }
.demand-meter span { display: block; min-width: 3px; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--primary-strong)); }
.skill-demand-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: 12px; }
.skill-demand-stats strong { color: var(--text); }
.learning-focus { display: grid; gap: 3px; margin: 0; padding: 12px 14px; border-left: 2px solid var(--warning); background: var(--warning-soft); color: var(--text-soft); font-size: 13px; }
.skill-job-examples { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.skill-job-examples li { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding-top: 7px; border-top: 1px solid var(--border); font-size: 12px; }
.skill-job-examples a, .skill-job-examples span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-job-examples span { color: var(--muted); }
.skill-demand-action { min-width: 174px; display: grid; place-content: center; padding: 20px; border-left: 1px solid var(--border); background: var(--surface-low); }
.skills-method-rail { position: sticky; top: calc(var(--utility) + 20px); display: grid; gap: 14px; }
.legend-list { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.legend-list li { display: flex; align-items: start; gap: 10px; }
.legend-list li > div { display: grid; gap: 2px; }
.legend-list small { color: var(--muted); line-height: 1.4; }
.legend-dot { width: 9px; height: 9px; flex: 0 0 auto; margin-top: 5px; border-radius: 50%; }
.legend-dot.exact { background: var(--positive); }
.legend-dot.inferred { border: 2px solid var(--primary); }
@media (min-width: 1850px) {
.skills-insight-layout { grid-template-columns: minmax(0, 1fr) 370px; gap: 34px; }
.skill-demand-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.skill-demand-card { height: 100%; grid-template-columns: 1fr; }
.skill-demand-action { min-width: 0; place-content: stretch; padding: 0 22px 20px; border: 0; background: transparent; }
}
@media (max-width: 1020px) {
.insight-hero { grid-template-columns: 104px minmax(0, 1fr); }
.insight-hero > .button { grid-column: 2; justify-self: start; }
.skill-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.skills-insight-layout { grid-template-columns: 1fr; }
.skills-method-rail { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
.insight-hero { grid-template-columns: 1fr; padding: 20px; }
.insight-orbit { width: 88px; height: 88px; }
.insight-hero > .button { grid-column: auto; justify-self: stretch; }
.skill-metrics, .skills-method-rail { grid-template-columns: 1fr; }
.skills-filter-console { grid-template-columns: 1fr; }
.skill-demand-card { grid-template-columns: 1fr; }
.skill-demand-main { padding: 18px; }
.skill-demand-action { min-width: 0; place-content: stretch; padding: 0 18px 18px; border: 0; background: var(--surface); }
.skill-card-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
.skill-job-examples li { grid-template-columns: 1fr; gap: 2px; }
}