Skip to content

Commit 43056bc

Browse files
rlorenzorlorenzo
committed
VPR-104 feat(cts): add 5 MyAssessments display styles for review
Adds a five-way display toggle to the My Assessments page so stakeholders can compare alternative visualizations side-by-side on TEST before we commit to one. The styles are: 1. Original circles — pre-redesign legacy palette 2. Current bubbles — the existing post-redesign view 3. Abbreviation pills — DNP / TDS / TIS / IRS / SJL 4. Timeline — per-EPA voice thread with smooth progression chart 5. Bar — chronological supervision-context bar with legend This is a temporary state. After the review pass on TEST, the unselected designs (and the toggle itself) will be removed.
1 parent c5f9bf4 commit 43056bc

7 files changed

Lines changed: 1159 additions & 76 deletions

File tree

‎VueApp/src/CTS/assets/cts.css‎

Lines changed: 364 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,40 @@
118118
color: #fff;
119119
}
120120

121+
/* Style 1 — legacy palette (size matches current bubble) */
122+
.assessmentBubble--legacy.assessmentBubble5_1 {
123+
background-color: rgba(174, 235, 255, 1);
124+
color: #212529;
125+
}
126+
.assessmentBubble--legacy.assessmentBubble5_2 {
127+
background-color: rgba(134, 198, 255, 1);
128+
color: #212529;
129+
}
130+
.assessmentBubble--legacy.assessmentBubble5_3 {
131+
background-color: rgba(62, 127, 238, 1);
132+
color: #000;
133+
}
134+
.assessmentBubble--legacy.assessmentBubble5_4 {
135+
background-color: rgba(0, 44, 219, 1);
136+
color: #fff;
137+
}
138+
.assessmentBubble--legacy.assessmentBubble5_5 {
139+
background-color: rgba(11, 3, 139, 1);
140+
color: #fff;
141+
}
142+
143+
/* Style 3 — abbreviation pill (keeps current palette, stretches shape) */
144+
.assessmentBubble--abbrev {
145+
width: auto;
146+
min-width: 1.5rem;
147+
padding: 0 0.45rem;
148+
border-radius: 0.75rem;
149+
font-size: 0.68rem;
150+
font-weight: 700;
151+
letter-spacing: 0.04em;
152+
white-space: nowrap;
153+
}
154+
121155
.assessmentBubbleCloser5_1 {
122156
color: rgba(2, 40, 150, 0.7);
123157
}
@@ -174,6 +208,336 @@
174208
font-style: italic;
175209
}
176210

211+
/* ── Style 4: Voices in the Margin ── */
212+
.epaThread {
213+
background: #ffffff;
214+
border: 1px solid #e8e4dc;
215+
border-radius: 0.5rem;
216+
padding: 1.375rem 1.75rem;
217+
margin-bottom: 1.125rem;
218+
}
219+
.epaThreadHeader {
220+
display: flex;
221+
align-items: baseline;
222+
justify-content: space-between;
223+
gap: 1rem;
224+
border-bottom: 1px solid #e8e4dc;
225+
padding-bottom: 0.75rem;
226+
margin-bottom: 1.125rem;
227+
}
228+
.epaThreadTitle {
229+
font-family: Georgia, "Times New Roman", serif;
230+
font-style: italic;
231+
font-weight: 500;
232+
font-size: 1.125rem;
233+
color: var(--ucdavis-blue-100, #022851);
234+
line-height: 1.3;
235+
}
236+
.epaThreadCount {
237+
font-size: 0.72rem;
238+
font-weight: 500;
239+
color: #6c757d;
240+
text-transform: lowercase;
241+
letter-spacing: 0.04em;
242+
white-space: nowrap;
243+
flex-shrink: 0;
244+
}
245+
.epaThreadEmpty {
246+
font-style: italic;
247+
font-size: 0.85rem;
248+
color: #616161;
249+
}
250+
.epaThreadContent {
251+
display: flex;
252+
align-items: flex-start;
253+
gap: 1.5rem;
254+
}
255+
.epaThreadBody {
256+
flex: 1;
257+
min-width: 0;
258+
display: grid;
259+
grid-template-columns: 2rem 1fr;
260+
position: relative;
261+
}
262+
.epaThreadGutter {
263+
grid-column: 1;
264+
grid-row: 1 / -1;
265+
position: relative;
266+
width: 2rem;
267+
}
268+
.epaThreadGutter svg {
269+
position: absolute;
270+
top: 0;
271+
left: 0;
272+
width: 2rem;
273+
overflow: visible;
274+
pointer-events: none;
275+
}
276+
.epaThread--sparse .epaThreadGutter::before {
277+
content: "";
278+
position: absolute;
279+
left: 0.8125rem;
280+
top: 1rem;
281+
bottom: 1rem;
282+
width: 0.1875rem;
283+
background: #ffc519;
284+
opacity: 0.45;
285+
border-radius: 0.125rem;
286+
}
287+
.epaVoice {
288+
grid-column: 2;
289+
padding: 0.875rem 0 0.875rem 1.25rem;
290+
}
291+
.epaVoice + .epaVoice {
292+
border-top: 1px solid #f0ece4;
293+
}
294+
.epaVoiceQuote {
295+
font-family: Georgia, "Times New Roman", serif;
296+
font-style: italic;
297+
font-size: 1rem;
298+
line-height: 1.6;
299+
color: #1a1a1a;
300+
margin: 0 0 0.5rem;
301+
}
302+
.epaVoiceNoComment {
303+
font-size: 0.85rem;
304+
color: #adb5bd;
305+
font-style: italic;
306+
margin-bottom: 0.5rem;
307+
}
308+
.epaVoiceByline {
309+
font-size: 0.8rem;
310+
color: #6c757d;
311+
line-height: 1.55;
312+
}
313+
.epaVoiceByline strong {
314+
color: var(--ucdavis-blue-100, #022851);
315+
font-weight: 600;
316+
}
317+
.epaVoiceSupervision {
318+
font-style: italic;
319+
display: block;
320+
}
321+
.epaThreadMore {
322+
grid-column: 2;
323+
margin: 0.5rem 0 0 1.25rem;
324+
font-size: 0.8rem;
325+
color: var(--ucdavis-blue-100, #022851);
326+
background: none;
327+
border: none;
328+
border-bottom: 1px dotted var(--ucdavis-blue-100, #022851);
329+
padding: 0 0 1px;
330+
cursor: pointer;
331+
text-align: left;
332+
opacity: 0.75;
333+
}
334+
.epaThreadMore:hover,
335+
.epaThreadMore:focus-visible {
336+
opacity: 1;
337+
}
338+
.epaThreadMore:focus-visible {
339+
outline: 2px solid var(--q-primary);
340+
outline-offset: 2px;
341+
}
342+
.epaChartPanel {
343+
flex-shrink: 0;
344+
padding-top: 0.125rem;
345+
}
346+
.epaChartPanel svg {
347+
display: block;
348+
overflow: visible;
349+
}
350+
.epaChartButton {
351+
flex-shrink: 0;
352+
padding: 0.25rem;
353+
background: none;
354+
border: 1px solid transparent;
355+
border-radius: 0.375rem;
356+
cursor: pointer;
357+
transition:
358+
border-color 0.12s,
359+
background-color 0.12s;
360+
}
361+
.epaChartButton:hover,
362+
.epaChartButton:focus-visible {
363+
border-color: var(--ucdavis-blue-100, #022851);
364+
background-color: rgba(2, 40, 81, 0.03);
365+
}
366+
.epaChartButton:focus-visible {
367+
outline: 2px solid var(--q-primary);
368+
outline-offset: 2px;
369+
}
370+
@media (max-width: 599px) {
371+
.epaThreadContent {
372+
flex-direction: column;
373+
gap: 1rem;
374+
}
375+
.epaChartButton {
376+
align-self: center;
377+
}
378+
}
379+
380+
/* Style toggle (segmented control on MyAssessments) */
381+
.assessmentStyleToggle {
382+
display: inline-flex;
383+
flex-wrap: wrap;
384+
gap: 0.25rem;
385+
}
386+
387+
/* ── Style 5: Supervision Blend ── */
388+
.epaBlend {
389+
background: #ffffff;
390+
border: 1px solid #e8e4dc;
391+
border-radius: 0.5rem;
392+
padding: 1.375rem 1.75rem;
393+
margin-bottom: 1.125rem;
394+
}
395+
.epaBlendHeader {
396+
display: flex;
397+
align-items: baseline;
398+
justify-content: space-between;
399+
gap: 1rem;
400+
border-bottom: 1px solid #e8e4dc;
401+
padding-bottom: 0.75rem;
402+
margin-bottom: 1.125rem;
403+
}
404+
.epaBlendTitle {
405+
font-family: Georgia, "Times New Roman", serif;
406+
font-style: italic;
407+
font-weight: 500;
408+
font-size: 1.125rem;
409+
color: var(--ucdavis-blue-100, #022851);
410+
line-height: 1.3;
411+
}
412+
.epaBlendCount {
413+
font-size: 0.72rem;
414+
font-weight: 500;
415+
color: #6c757d;
416+
text-transform: lowercase;
417+
letter-spacing: 0.04em;
418+
white-space: nowrap;
419+
flex-shrink: 0;
420+
}
421+
.epaBlendEmpty {
422+
font-style: italic;
423+
font-size: 0.85rem;
424+
color: #616161;
425+
}
426+
.epaBlendBar {
427+
display: flex;
428+
width: 100%;
429+
height: 1.5rem;
430+
border-radius: 0.5rem;
431+
overflow: hidden;
432+
background: #f0ece4;
433+
margin-bottom: 0.875rem;
434+
}
435+
.epaBlendSegment {
436+
height: 100%;
437+
box-shadow: inset -1px 0 0 #ffffff;
438+
transition: width 0.2s;
439+
}
440+
.epaBlendSegment:last-child {
441+
box-shadow: none;
442+
}
443+
.epaBlendSegment--lv-1 {
444+
background-color: rgba(62, 127, 238, 0.3);
445+
}
446+
.epaBlendSegment--lv-2 {
447+
background-color: rgba(62, 127, 238, 0.7);
448+
}
449+
.epaBlendSegment--lv-3 {
450+
background-color: rgba(62, 127, 238, 1);
451+
}
452+
.epaBlendSegment--lv-4 {
453+
background-color: rgba(0, 44, 175, 0.8);
454+
}
455+
.epaBlendSegment--lv-5 {
456+
background-color: rgba(11, 3, 139, 1);
457+
}
458+
.epaBlendLegend {
459+
list-style: none;
460+
margin: 0 0 1.25rem;
461+
padding: 0;
462+
display: flex;
463+
flex-wrap: wrap;
464+
gap: 0.5rem 1.25rem;
465+
}
466+
.epaBlendLegendItem {
467+
display: inline-flex;
468+
align-items: center;
469+
gap: 0.5rem;
470+
font-size: 0.85rem;
471+
color: #1a1d2e;
472+
}
473+
.epaBlendSwatch {
474+
width: 0.75rem;
475+
height: 0.75rem;
476+
border-radius: 0.1875rem;
477+
flex-shrink: 0;
478+
}
479+
.epaBlendLegendLabel {
480+
color: #1a1d2e;
481+
}
482+
.epaBlendLegendCount {
483+
color: #6c757d;
484+
font-variant-numeric: tabular-nums;
485+
}
486+
.epaBlendComments--withBar {
487+
border-top: 1px solid #f0ece4;
488+
padding-top: 0.875rem;
489+
}
490+
.epaBlendComment {
491+
padding: 0.625rem 0;
492+
border-top: 1px solid #f0ece4;
493+
}
494+
.epaBlendComment:first-child {
495+
border-top: none;
496+
padding-top: 0;
497+
}
498+
.epaBlendCommentText {
499+
font-family: Georgia, "Times New Roman", serif;
500+
font-style: italic;
501+
font-size: 1rem;
502+
line-height: 1.55;
503+
color: #1a1a1a;
504+
margin: 0 0 0.375rem;
505+
}
506+
.epaBlendCommentMissing {
507+
font-size: 0.85rem;
508+
color: #adb5bd;
509+
font-style: italic;
510+
margin-bottom: 0.375rem;
511+
}
512+
.epaBlendCommentMeta {
513+
font-size: 0.8rem;
514+
color: #6c757d;
515+
}
516+
.epaBlendCommentMeta strong {
517+
color: var(--ucdavis-blue-100, #022851);
518+
font-weight: 600;
519+
}
520+
.epaBlendMore {
521+
margin: 0.5rem 0 0;
522+
font-size: 0.8rem;
523+
color: var(--ucdavis-blue-100, #022851);
524+
background: none;
525+
border: none;
526+
border-bottom: 1px dotted var(--ucdavis-blue-100, #022851);
527+
padding: 0 0 1px;
528+
cursor: pointer;
529+
text-align: left;
530+
opacity: 0.75;
531+
}
532+
.epaBlendMore:hover,
533+
.epaBlendMore:focus-visible {
534+
opacity: 1;
535+
}
536+
.epaBlendMore:focus-visible {
537+
outline: 2px solid var(--q-primary);
538+
outline-offset: 2px;
539+
}
540+
177541
/*
178542
.assessmentbubble.ab5_1 {
179543
background-color: rgb(169, 208, 255)

0 commit comments

Comments
 (0)