세션 평가와 교수자 분석 보강
This commit is contained in:
Yun Chan
parent
5c4ac04e06
commit
fe2796f05a
51 changed files with 4928 additions and 240 deletions
|
|
@ -5,6 +5,9 @@
|
|||
flex-direction:column;
|
||||
gap:16px;
|
||||
}
|
||||
.pf-root--analysis{
|
||||
max-width:1440px;
|
||||
}
|
||||
.pf-head{
|
||||
display:flex;
|
||||
align-items:flex-end;
|
||||
|
|
@ -171,13 +174,75 @@
|
|||
line-height:1.35;
|
||||
}
|
||||
.pf-workspace{
|
||||
order:2;
|
||||
order:4;
|
||||
display:grid;
|
||||
grid-template-columns:minmax(320px,390px) minmax(0,1fr);
|
||||
align-items:start;
|
||||
gap:14px;
|
||||
min-width:0;
|
||||
}
|
||||
.pf-analysis-shell{
|
||||
order:2;
|
||||
display:grid;
|
||||
grid-template-columns:minmax(300px,360px) minmax(0,1fr);
|
||||
align-items:start;
|
||||
gap:14px;
|
||||
min-width:0;
|
||||
}
|
||||
.pf-analysis-rail{
|
||||
position:sticky;
|
||||
top:16px;
|
||||
min-width:0;
|
||||
}
|
||||
.pf-analysis-workbench{
|
||||
min-width:0;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:10px;
|
||||
}
|
||||
.pf-depth-strip{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(4,minmax(0,1fr));
|
||||
min-width:0;
|
||||
border:1px solid var(--hair);
|
||||
border-radius:var(--radius);
|
||||
overflow:hidden;
|
||||
background:var(--bg-surface);
|
||||
box-shadow:var(--shadow-sm);
|
||||
}
|
||||
.pf-depth-strip span{
|
||||
min-width:0;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:7px;
|
||||
padding:10px 12px;
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-xs);
|
||||
font-weight:760;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.pf-depth-strip span + span{
|
||||
border-left:1px solid var(--hair);
|
||||
}
|
||||
.pf-depth-strip small{
|
||||
width:22px;
|
||||
height:22px;
|
||||
display:grid;
|
||||
place-items:center;
|
||||
border-radius:var(--radius-sm);
|
||||
color:var(--text-muted);
|
||||
background:var(--bg-surface-2);
|
||||
font-family:var(--font-num);
|
||||
line-height:1;
|
||||
}
|
||||
.pf-depth-strip .is-current{
|
||||
color:var(--text-strong);
|
||||
background:color-mix(in srgb,var(--accent-tint) 36%,var(--bg-surface));
|
||||
}
|
||||
.pf-depth-strip .is-current small{
|
||||
color:var(--text-on-accent);
|
||||
background:var(--accent);
|
||||
}
|
||||
.pf-queue-stack{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
|
|
@ -250,6 +315,10 @@
|
|||
justify-content:flex-end;
|
||||
}
|
||||
.pf-section--growth{
|
||||
order:2;
|
||||
min-width:0;
|
||||
}
|
||||
.pf-section--learner-analysis{
|
||||
order:3;
|
||||
min-width:0;
|
||||
}
|
||||
|
|
@ -265,7 +334,17 @@
|
|||
gap:12px;
|
||||
padding:12px;
|
||||
}
|
||||
.pf-analysis-rail .pf-growth-list{
|
||||
max-height:min(690px,calc(100vh - 250px));
|
||||
grid-template-columns:1fr;
|
||||
gap:9px;
|
||||
padding:10px;
|
||||
}
|
||||
.pf-growth-card{
|
||||
width:100%;
|
||||
font:inherit;
|
||||
text-align:left;
|
||||
color:inherit;
|
||||
min-width:0;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
|
|
@ -275,6 +354,33 @@
|
|||
border-radius:var(--radius-sm);
|
||||
background:color-mix(in srgb,var(--bg-surface) 82%,var(--bg-surface-2));
|
||||
box-shadow:none;
|
||||
cursor:pointer;
|
||||
}
|
||||
.pf-growth-card:hover{
|
||||
border-color:var(--accent);
|
||||
background:var(--bg-surface);
|
||||
}
|
||||
.pf-growth-card:focus-visible{
|
||||
outline:2px solid var(--accent);
|
||||
outline-offset:2px;
|
||||
}
|
||||
.pf-growth-card.is-selected{
|
||||
border-color:var(--accent);
|
||||
background:color-mix(in srgb,var(--accent-tint) 34%,var(--bg-surface));
|
||||
}
|
||||
.pf-analysis-rail .pf-growth-card{
|
||||
gap:9px;
|
||||
padding:11px;
|
||||
border-radius:var(--radius);
|
||||
}
|
||||
.pf-analysis-rail .pf-growth-card__points{
|
||||
display:none;
|
||||
}
|
||||
.pf-analysis-rail .pf-growth-card__tags{
|
||||
min-height:0;
|
||||
}
|
||||
.pf-analysis-rail .pf-growth-bars{
|
||||
height:54px;
|
||||
}
|
||||
.pf-growth-card__top{
|
||||
display:flex;
|
||||
|
|
@ -410,6 +516,262 @@
|
|||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.pf-analysis-panel{
|
||||
background:linear-gradient(180deg,var(--bg-surface),color-mix(in srgb,var(--bg-surface-2) 72%,var(--bg-surface)));
|
||||
}
|
||||
.pf-analysis{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
gap:12px;
|
||||
padding:12px;
|
||||
}
|
||||
.pf-analysis__top{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
grid-template-columns:minmax(210px,.42fr) minmax(0,1fr);
|
||||
gap:12px;
|
||||
align-items:stretch;
|
||||
}
|
||||
.pf-analysis__title{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
align-content:center;
|
||||
gap:5px;
|
||||
padding:12px;
|
||||
border:1px solid var(--paper-2);
|
||||
border-radius:var(--radius-sm);
|
||||
background:var(--bg-surface-2);
|
||||
}
|
||||
.pf-analysis__title b{
|
||||
color:var(--text-strong);
|
||||
font-size:var(--fs-body);
|
||||
line-height:1.35;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.pf-analysis__title span{
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-xs);
|
||||
line-height:1.45;
|
||||
overflow-wrap:anywhere;
|
||||
}
|
||||
.pf-analysis__metrics{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
grid-template-columns:repeat(6,minmax(0,1fr));
|
||||
border:1px solid var(--paper-2);
|
||||
border-radius:var(--radius-sm);
|
||||
background:var(--bg-surface-2);
|
||||
overflow:hidden;
|
||||
}
|
||||
.pf-analysis__metrics span{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
align-content:center;
|
||||
gap:4px;
|
||||
padding:10px 11px;
|
||||
}
|
||||
.pf-analysis__metrics span + span{
|
||||
border-left:1px solid var(--hair);
|
||||
}
|
||||
.pf-analysis__metrics small,
|
||||
.pf-stage-item small,
|
||||
.pf-timeline-row__metrics small{
|
||||
color:var(--text-muted);
|
||||
font-size:11px;
|
||||
line-height:1.2;
|
||||
}
|
||||
.pf-analysis__metrics b,
|
||||
.pf-stage-item b,
|
||||
.pf-timeline-row__metrics b{
|
||||
min-width:0;
|
||||
color:var(--text-strong);
|
||||
font-family:var(--font-num);
|
||||
font-size:15px;
|
||||
line-height:1.15;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
.pf-analysis__body{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
grid-template-columns:minmax(0,1.25fr) minmax(240px,.75fr);
|
||||
gap:12px;
|
||||
}
|
||||
.pf-analysis__chart,
|
||||
.pf-analysis__stages,
|
||||
.pf-analysis__timeline{
|
||||
min-width:0;
|
||||
border:1px solid var(--paper-2);
|
||||
border-radius:var(--radius-sm);
|
||||
background:color-mix(in srgb,var(--bg-surface) 84%,var(--bg-surface-2));
|
||||
overflow:hidden;
|
||||
}
|
||||
.pf-analysis__subhead{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:10px;
|
||||
min-width:0;
|
||||
padding:10px 12px;
|
||||
border-bottom:1px solid var(--hair);
|
||||
}
|
||||
.pf-analysis__subhead b{
|
||||
color:var(--text-strong);
|
||||
font-size:var(--fs-sm);
|
||||
line-height:1.35;
|
||||
}
|
||||
.pf-analysis__subhead span{
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-xs);
|
||||
white-space:nowrap;
|
||||
}
|
||||
.pf-analysis-bars{
|
||||
height:118px;
|
||||
display:flex;
|
||||
align-items:flex-end;
|
||||
gap:7px;
|
||||
padding:12px;
|
||||
overflow-x:auto;
|
||||
scrollbar-gutter:stable;
|
||||
}
|
||||
.pf-analysis-bars .pf-growth-bar{
|
||||
flex:0 0 34px;
|
||||
}
|
||||
.pf-stage-list{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(4,minmax(0,1fr));
|
||||
}
|
||||
.pf-stage-item{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
gap:4px;
|
||||
padding:12px;
|
||||
border-left:1px solid var(--hair);
|
||||
}
|
||||
.pf-stage-item:first-child{
|
||||
border-left:0;
|
||||
}
|
||||
.pf-stage-item span{
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-xs);
|
||||
font-weight:700;
|
||||
}
|
||||
.pf-timeline{
|
||||
max-height:min(520px,58vh);
|
||||
overflow:auto;
|
||||
scrollbar-gutter:stable;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
}
|
||||
.pf-timeline-row{
|
||||
width:100%;
|
||||
font:inherit;
|
||||
text-align:left;
|
||||
color:inherit;
|
||||
background:transparent;
|
||||
display:grid;
|
||||
grid-template-columns:38px minmax(170px,1fr) minmax(210px,.82fr) minmax(112px,.42fr) auto;
|
||||
gap:10px;
|
||||
align-items:center;
|
||||
padding:12px;
|
||||
border:0;
|
||||
border-top:1px solid var(--paper-2);
|
||||
cursor:pointer;
|
||||
}
|
||||
.pf-timeline-row:first-child{
|
||||
border-top:0;
|
||||
}
|
||||
.pf-timeline-row:hover{
|
||||
background:var(--bg-surface-2);
|
||||
}
|
||||
.pf-timeline-row:focus-visible{
|
||||
outline:2px solid var(--accent);
|
||||
outline-offset:-2px;
|
||||
}
|
||||
.pf-timeline-row__step{
|
||||
width:32px;
|
||||
height:32px;
|
||||
display:grid;
|
||||
place-items:center;
|
||||
border-radius:var(--radius-sm);
|
||||
color:var(--accent-deep);
|
||||
background:var(--accent-tint);
|
||||
font-family:var(--font-num);
|
||||
font-weight:800;
|
||||
}
|
||||
.pf-timeline-row__main{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
gap:3px;
|
||||
}
|
||||
.pf-timeline-row__main b{
|
||||
color:var(--text-strong);
|
||||
font-size:var(--fs-sm);
|
||||
line-height:1.35;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.pf-timeline-row__main span,
|
||||
.pf-timeline-row__main code,
|
||||
.pf-timeline-row__dates span{
|
||||
color:var(--text-muted);
|
||||
font-size:12px;
|
||||
line-height:1.35;
|
||||
}
|
||||
.pf-timeline-row__main span{
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.pf-timeline-row__main code{
|
||||
font-family:var(--font-num);
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.pf-timeline-row__metrics{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
grid-template-columns:minmax(58px,.8fr) minmax(58px,.8fr) minmax(86px,1.12fr);
|
||||
gap:7px;
|
||||
}
|
||||
.pf-timeline-row__metrics span{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
gap:3px;
|
||||
}
|
||||
.pf-timeline-row__metrics .vg-badge{
|
||||
justify-self:start;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.pf-timeline-row__dates{
|
||||
display:grid;
|
||||
gap:3px;
|
||||
min-width:0;
|
||||
font-family:var(--font-num);
|
||||
}
|
||||
.pf-timeline-row__open{
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
gap:4px;
|
||||
min-height:30px;
|
||||
padding:0 8px;
|
||||
border:1px solid var(--hair);
|
||||
border-radius:var(--radius-sm);
|
||||
color:var(--accent-deep);
|
||||
background:var(--accent-tint);
|
||||
font-size:var(--fs-xs);
|
||||
font-weight:760;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.pf-timeline-row:hover .pf-timeline-row__open{
|
||||
border-color:var(--accent);
|
||||
}
|
||||
.pf-empty{
|
||||
min-height:118px;
|
||||
display:grid;
|
||||
|
|
@ -763,9 +1125,13 @@
|
|||
}
|
||||
@media (max-width:1100px){
|
||||
.pf-signal-strip,
|
||||
.pf-workspace{
|
||||
.pf-workspace,
|
||||
.pf-analysis-shell{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.pf-analysis-rail{
|
||||
position:static;
|
||||
}
|
||||
.pf-triage{
|
||||
grid-template-columns:auto minmax(0,max-content) auto;
|
||||
justify-content:start;
|
||||
|
|
@ -778,6 +1144,33 @@
|
|||
.pf-growth-list{
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
}
|
||||
.pf-analysis-rail .pf-growth-list{
|
||||
max-height:360px;
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
}
|
||||
.pf-analysis__top{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.pf-analysis__metrics{
|
||||
grid-template-columns:repeat(3,minmax(0,1fr));
|
||||
}
|
||||
.pf-analysis__metrics span:nth-child(3n+1){
|
||||
border-left:0;
|
||||
}
|
||||
.pf-analysis__metrics span:nth-child(n+4){
|
||||
border-top:1px solid var(--hair);
|
||||
}
|
||||
.pf-analysis__body{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.pf-timeline-row{
|
||||
grid-template-columns:34px minmax(0,1fr) minmax(190px,.85fr) auto;
|
||||
}
|
||||
.pf-timeline-row__dates{
|
||||
grid-column:2 / 4;
|
||||
grid-row:2;
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
}
|
||||
.pf-list,
|
||||
.pf-personas{
|
||||
max-height:360px;
|
||||
|
|
@ -791,6 +1184,15 @@
|
|||
width:100%;
|
||||
justify-content:flex-start;
|
||||
}
|
||||
.pf-depth-strip{
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
}
|
||||
.pf-depth-strip span:nth-child(odd){
|
||||
border-left:0;
|
||||
}
|
||||
.pf-depth-strip span:nth-child(n+3){
|
||||
border-top:1px solid var(--hair);
|
||||
}
|
||||
.pf-triage{
|
||||
grid-template-columns:auto minmax(0,1fr);
|
||||
}
|
||||
|
|
@ -805,6 +1207,62 @@
|
|||
.pf-growth-list{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.pf-analysis-rail .pf-growth-list{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.pf-analysis{
|
||||
padding:10px;
|
||||
}
|
||||
.pf-analysis__metrics{
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
}
|
||||
.pf-analysis__metrics span,
|
||||
.pf-analysis__metrics span:nth-child(3n+1){
|
||||
border-left:0;
|
||||
}
|
||||
.pf-analysis__metrics span:nth-child(even){
|
||||
border-left:1px solid var(--hair);
|
||||
}
|
||||
.pf-analysis__metrics span:nth-child(n+3){
|
||||
border-top:1px solid var(--hair);
|
||||
}
|
||||
.pf-stage-list{
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
}
|
||||
.pf-stage-item,
|
||||
.pf-stage-item:first-child{
|
||||
border-left:0;
|
||||
}
|
||||
.pf-stage-item:nth-child(even){
|
||||
border-left:1px solid var(--hair);
|
||||
}
|
||||
.pf-stage-item:nth-child(n+3){
|
||||
border-top:1px solid var(--hair);
|
||||
}
|
||||
.pf-timeline{
|
||||
max-height:560px;
|
||||
}
|
||||
.pf-timeline-row{
|
||||
grid-template-columns:34px minmax(0,1fr);
|
||||
align-items:start;
|
||||
}
|
||||
.pf-timeline-row__main{
|
||||
grid-column:2;
|
||||
}
|
||||
.pf-timeline-row__metrics,
|
||||
.pf-timeline-row__dates,
|
||||
.pf-timeline-row__open{
|
||||
grid-column:2;
|
||||
}
|
||||
.pf-timeline-row__metrics{
|
||||
grid-template-columns:repeat(3,minmax(0,1fr));
|
||||
}
|
||||
.pf-timeline-row__dates{
|
||||
grid-row:auto;
|
||||
}
|
||||
.pf-timeline-row__open{
|
||||
justify-self:start;
|
||||
}
|
||||
.pf-recent-list{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
|
|
@ -877,12 +1335,50 @@
|
|||
.pf-persona__actions .vg-btn{
|
||||
width:100%;
|
||||
}
|
||||
.pf-depth-strip{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.pf-depth-strip span,
|
||||
.pf-depth-strip span:nth-child(odd){
|
||||
border-left:0;
|
||||
}
|
||||
.pf-depth-strip span:nth-child(n+2){
|
||||
border-top:1px solid var(--hair);
|
||||
}
|
||||
.pf-growth-list{
|
||||
padding:10px;
|
||||
}
|
||||
.pf-growth-card__metrics{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.pf-analysis__metrics{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.pf-analysis__metrics span,
|
||||
.pf-analysis__metrics span:nth-child(even),
|
||||
.pf-analysis__metrics span:nth-child(3n+1){
|
||||
border-left:0;
|
||||
}
|
||||
.pf-analysis__metrics span:nth-child(n+2){
|
||||
border-top:1px solid var(--hair);
|
||||
}
|
||||
.pf-stage-list{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.pf-stage-item,
|
||||
.pf-stage-item:nth-child(even),
|
||||
.pf-stage-item:first-child{
|
||||
border-left:0;
|
||||
}
|
||||
.pf-stage-item:nth-child(n+2){
|
||||
border-top:1px solid var(--hair);
|
||||
}
|
||||
.pf-timeline-row__metrics{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.pf-timeline-row__dates{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.pf-growth-point{
|
||||
grid-template-columns:1fr;
|
||||
gap:2px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue