운영 화면과 회기 리뷰 UI 갱신
This commit is contained in:
Yun Chan
parent
e7ebb38177
commit
3a9f70a97b
18 changed files with 2210 additions and 137 deletions
|
|
@ -120,6 +120,7 @@
|
|||
"overview flow rubric"
|
||||
"overview transcript good"
|
||||
"overview transcript growth"
|
||||
"overview transcript prepost"
|
||||
"overview transcript worksheet"
|
||||
"overview transcript feedback"
|
||||
"session session session";
|
||||
|
|
@ -133,10 +134,59 @@
|
|||
"overview flow rubric"
|
||||
"overview transcript good"
|
||||
"overview transcript growth"
|
||||
"overview transcript prepost"
|
||||
"overview transcript worksheet"
|
||||
"overview transcript feedback"
|
||||
"session session session";
|
||||
}
|
||||
.sr-cols--learner {
|
||||
grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
|
||||
grid-template-areas:
|
||||
"transcript overview"
|
||||
"transcript chart"
|
||||
"transcript flow"
|
||||
"transcript rubric"
|
||||
"transcript good"
|
||||
"transcript growth"
|
||||
"transcript prepost"
|
||||
"transcript worksheet"
|
||||
"transcript feedback"
|
||||
"session session";
|
||||
}
|
||||
.sr-cols--learner .sr-overview {
|
||||
position: static;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
scrollbar-gutter: auto;
|
||||
}
|
||||
.sr-root--empty .sr-cols {
|
||||
grid-template-columns: minmax(236px, 300px) minmax(0, 1fr);
|
||||
grid-template-areas:
|
||||
"overview chart"
|
||||
"overview flow"
|
||||
"overview transcript"
|
||||
"overview rubric"
|
||||
"overview good"
|
||||
"overview growth"
|
||||
"overview prepost"
|
||||
"overview worksheet"
|
||||
"overview feedback"
|
||||
"session session";
|
||||
}
|
||||
.sr-root--empty .sr-cols--supervisor {
|
||||
grid-template-areas:
|
||||
"overview chart"
|
||||
"overview flow"
|
||||
"overview teacher"
|
||||
"overview transcript"
|
||||
"overview rubric"
|
||||
"overview good"
|
||||
"overview growth"
|
||||
"overview prepost"
|
||||
"overview worksheet"
|
||||
"overview feedback"
|
||||
"session session";
|
||||
}
|
||||
.sr-left,
|
||||
.sr-right {
|
||||
display: contents;
|
||||
|
|
@ -175,6 +225,9 @@
|
|||
.sr-card--growth {
|
||||
grid-area: growth;
|
||||
}
|
||||
.sr-card--prepost {
|
||||
grid-area: prepost;
|
||||
}
|
||||
.sr-card--worksheet {
|
||||
grid-area: worksheet;
|
||||
}
|
||||
|
|
@ -353,6 +406,146 @@
|
|||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.sr-prepost__head {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--sp-3);
|
||||
}
|
||||
.sr-prepost__head > div {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
.sr-prepost__head b {
|
||||
color: var(--text-strong);
|
||||
font-size: var(--fs-sm);
|
||||
line-height: 1.35;
|
||||
}
|
||||
.sr-prepost__badge {
|
||||
flex: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
padding: 0 9px;
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border-subtle));
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--accent-deep);
|
||||
background: var(--accent-tint);
|
||||
font-family: var(--font-num);
|
||||
font-size: 11px;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sr-prepost__note {
|
||||
margin: var(--sp-3) 0 0;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--fs-xs);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.sr-prepost__table {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
margin-top: var(--sp-4);
|
||||
}
|
||||
.sr-prepost__row {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) repeat(2, minmax(58px, 68px));
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.sr-prepost__row--head {
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-num);
|
||||
font-size: 10.5px;
|
||||
font-weight: 750;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.sr-prepost__row--head span:not(:first-child) {
|
||||
text-align: center;
|
||||
}
|
||||
.sr-prepost__measure {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
.sr-prepost__measure b {
|
||||
min-width: 0;
|
||||
color: var(--text-strong);
|
||||
font-size: var(--fs-xs);
|
||||
line-height: 1.35;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.sr-prepost__measure small {
|
||||
min-width: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 10.5px;
|
||||
line-height: 1.35;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.sr-prepost__field {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
}
|
||||
.sr-prepost__field span {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sr-prepost__field input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 36px;
|
||||
padding: 0 7px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-strong);
|
||||
font-family: var(--font-num);
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: 650;
|
||||
text-align: center;
|
||||
}
|
||||
.sr-prepost__field input:focus {
|
||||
outline: 2px solid var(--accent-tint);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.sr-prepost__field input[aria-invalid="true"] {
|
||||
border-color: color-mix(in srgb, var(--crit-text) 44%, var(--border-subtle));
|
||||
background: var(--crit-tint);
|
||||
}
|
||||
.sr-prepost__error {
|
||||
margin: var(--sp-3) 0 0;
|
||||
color: var(--crit-text);
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.sr-prepost__actions {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--sp-3);
|
||||
margin-top: var(--sp-4);
|
||||
padding-top: var(--sp-3);
|
||||
border-top: 1px solid var(--hair);
|
||||
}
|
||||
.sr-prepost__actions span {
|
||||
min-width: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--fs-xs);
|
||||
line-height: 1.35;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.sr-chart {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
|
@ -692,6 +885,15 @@
|
|||
.sr-nonverbal--audio .sr-nonverbal__dot {
|
||||
background: var(--accent);
|
||||
}
|
||||
.sr-nonverbal--paralinguistic .sr-nonverbal__dot {
|
||||
background: var(--good-solid);
|
||||
}
|
||||
.sr-nonverbal--prosody .sr-nonverbal__dot {
|
||||
background: var(--ink-soft);
|
||||
}
|
||||
.sr-nonverbal--audio_quality .sr-nonverbal__dot {
|
||||
background: var(--text-muted);
|
||||
}
|
||||
|
||||
.sr-note {
|
||||
max-width: 68ch;
|
||||
|
|
@ -1187,6 +1389,7 @@
|
|||
[data-theme="dark"] .sr-empty,
|
||||
[data-theme="dark"] .sr-chip-toggle,
|
||||
[data-theme="dark"] .sr-ws-item,
|
||||
[data-theme="dark"] .sr-prepost__field input,
|
||||
[data-theme="dark"] .sr-feedback,
|
||||
[data-theme="dark"] .sr-nextline {
|
||||
background: rgba(255, 255, 255, 0.055);
|
||||
|
|
@ -1196,6 +1399,7 @@
|
|||
[data-theme="dark"] .sr-turn + .sr-turn,
|
||||
[data-theme="dark"] .sr-readiness,
|
||||
[data-theme="dark"] .sr-ws-limitations,
|
||||
[data-theme="dark"] .sr-prepost__actions,
|
||||
[data-theme="dark"] .sr-feedback__src {
|
||||
border-color: rgba(203, 227, 220, 0.1);
|
||||
}
|
||||
|
|
@ -1225,6 +1429,20 @@
|
|||
"rubric rubric"
|
||||
"good growth"
|
||||
"transcript transcript"
|
||||
"prepost prepost"
|
||||
"feedback feedback"
|
||||
"worksheet worksheet"
|
||||
"session session";
|
||||
}
|
||||
.sr-root--empty .sr-cols {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-areas:
|
||||
"overview overview"
|
||||
"chart flow"
|
||||
"transcript transcript"
|
||||
"rubric rubric"
|
||||
"good growth"
|
||||
"prepost prepost"
|
||||
"feedback feedback"
|
||||
"worksheet worksheet"
|
||||
"session session";
|
||||
|
|
@ -1237,6 +1455,20 @@
|
|||
"rubric rubric"
|
||||
"good growth"
|
||||
"transcript transcript"
|
||||
"prepost prepost"
|
||||
"feedback feedback"
|
||||
"worksheet worksheet"
|
||||
"session session";
|
||||
}
|
||||
.sr-root--empty .sr-cols--supervisor {
|
||||
grid-template-areas:
|
||||
"overview overview"
|
||||
"chart flow"
|
||||
"teacher teacher"
|
||||
"transcript transcript"
|
||||
"rubric rubric"
|
||||
"good growth"
|
||||
"prepost prepost"
|
||||
"feedback feedback"
|
||||
"worksheet worksheet"
|
||||
"session session";
|
||||
|
|
@ -1283,12 +1515,28 @@
|
|||
"rubric"
|
||||
"good"
|
||||
"growth"
|
||||
"prepost"
|
||||
"transcript"
|
||||
"feedback"
|
||||
"worksheet"
|
||||
"session";
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
.sr-root--empty .sr-cols {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-areas:
|
||||
"overview"
|
||||
"chart"
|
||||
"flow"
|
||||
"transcript"
|
||||
"rubric"
|
||||
"good"
|
||||
"growth"
|
||||
"prepost"
|
||||
"feedback"
|
||||
"worksheet"
|
||||
"session";
|
||||
}
|
||||
.sr-cols--supervisor {
|
||||
grid-template-areas:
|
||||
"overview"
|
||||
|
|
@ -1298,11 +1546,27 @@
|
|||
"rubric"
|
||||
"good"
|
||||
"growth"
|
||||
"prepost"
|
||||
"transcript"
|
||||
"feedback"
|
||||
"worksheet"
|
||||
"session";
|
||||
}
|
||||
.sr-root--empty .sr-cols--supervisor {
|
||||
grid-template-areas:
|
||||
"overview"
|
||||
"chart"
|
||||
"flow"
|
||||
"teacher"
|
||||
"transcript"
|
||||
"rubric"
|
||||
"good"
|
||||
"growth"
|
||||
"prepost"
|
||||
"feedback"
|
||||
"worksheet"
|
||||
"session";
|
||||
}
|
||||
.sr-summary {
|
||||
font-size: 20px;
|
||||
line-height: 1.45;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue