Skip to content

Commit e6dfe12

Browse files
hellodrfhellodrf
committed
bubble caption
1 parent e398d7d commit e6dfe12

2 files changed

Lines changed: 69 additions & 38 deletions

File tree

‎src/App.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3078,7 +3078,7 @@ function Dashboard() {
30783078
<div className="narrative-stage-expanded">
30793079
{stage.items.length ? (
30803080
<div className="narrative-stage-items">
3081-
{stage.items.map((item) => (
3081+
{stage.items.map((item, itemIndex) => (
30823082
<div
30833083
key={item.id}
30843084
className={cn(
@@ -3087,8 +3087,8 @@ function Dashboard() {
30873087
item.phase === 'done' && 'step-queue-item-done',
30883088
)}
30893089
>
3090-
<span className="step-queue-dot">
3091-
{item.phase === 'done' ? '✓' : item.phase === 'processing' ? '•' : ''}
3090+
<span className="step-queue-number">
3091+
{itemIndex + 1}
30923092
</span>
30933093
<div className="step-queue-copy">
30943094
<span className="step-queue-label">
@@ -3099,18 +3099,26 @@ function Dashboard() {
30993099
<div className="step-queue-description">{renderMessageBody(stage.body)}</div>
31003100
) : null}
31013101
</div>
3102+
<span className={cn(
3103+
'step-queue-status',
3104+
item.phase === 'processing' && 'step-queue-status-active',
3105+
item.phase === 'done' && 'step-queue-status-done',
3106+
)}>
3107+
{item.phase === 'done' ? '✓' : item.phase === 'processing' ? '•' : ''}
3108+
</span>
31023109
</div>
31033110
))}
31043111
</div>
31053112
) : stage.status === 'active' && stage.body ? (
31063113
<div className="narrative-stage-items">
31073114
<div className="step-queue-item step-queue-item-active">
3108-
<span className="step-queue-dot">•</span>
3115+
<span className="step-queue-number">1</span>
31093116
<div className="step-queue-copy">
31103117
<span className="step-queue-label">{t(locale, 'inProgress')}</span>
31113118
<span className="step-queue-value">{stage.summaryTitle}</span>
31123119
<div className="step-queue-description">{renderMessageBody(stage.body)}</div>
31133120
</div>
3121+
<span className="step-queue-status step-queue-status-active">•</span>
31143122
</div>
31153123
</div>
31163124
) : null}
@@ -3316,10 +3324,12 @@ function MissionNode({ data }: NodeProps<Node<DemoNodeData>>) {
33163324
</div>
33173325
)}
33183326
{data.message && (
3327+
!data.caption && (
33193328
<div className={cn("mission-node-bubble", data.messageState === 'done' && "mission-node-bubble-done", data.messageLeaving && "mission-node-bubble-leaving")}>
33203329
<BubbleIconGlyph icon={data.messageIcon} state={data.messageState} />
33213330
<span>{data.message}</span>
33223331
</div>
3332+
)
33233333
)}
33243334
<div className={cn("mission-node", data.active && "mission-node-active", data.flashActive && "mission-node-flash", data.transitioning && "mission-node-transitioning")}>
33253335
{isIllustratedDevice ? (

‎src/index.css‎

Lines changed: 55 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@ body {
257257

258258
.presentation-current-title {
259259
margin: 0;
260-
font-size: 2rem;
260+
font-size: 2.38rem;
261261
font-weight: 700;
262262
line-height: 1.04;
263263
letter-spacing: -0.04em;
@@ -335,7 +335,7 @@ body {
335335
}
336336

337337
.narrative-stage-summary {
338-
font-size: 0.92rem;
338+
font-size: 1.06rem;
339339
font-weight: 700;
340340
line-height: 1.35;
341341
letter-spacing: 0;
@@ -592,16 +592,16 @@ body {
592592

593593
.step-queue {
594594
display: grid;
595-
gap: 8px;
595+
gap: 10px;
596596
}
597597

598598
.step-queue-item {
599599
display: grid;
600-
grid-template-columns: 18px 1fr;
601-
gap: 10px;
600+
grid-template-columns: 28px minmax(0, 1fr) 20px;
601+
gap: 12px;
602602
align-items: start;
603-
padding: 10px 10px 10px 8px;
604-
border-radius: 12px;
603+
padding: 12px 12px 12px 10px;
604+
border-radius: 14px;
605605
border: 1px solid var(--color-border);
606606
background: rgba(255, 255, 255, 0.82);
607607
}
@@ -615,50 +615,71 @@ body {
615615
opacity: 0.72;
616616
}
617617

618-
.step-queue-item .step-queue-dot {
618+
.step-queue-item .step-queue-number {
619619
flex: 0 0 auto;
620620
}
621621

622-
.step-queue-dot {
622+
.step-queue-number {
623623
display: inline-flex;
624624
align-items: center;
625625
justify-content: center;
626-
width: 18px;
627-
height: 18px;
628-
border-radius: 999px;
629-
background: rgba(148, 163, 184, 0.16);
630-
color: var(--color-blue);
631-
font-size: 0.72rem;
626+
width: 28px;
627+
height: 28px;
628+
border-radius: 10px;
629+
background: rgba(59, 130, 246, 0.1);
630+
color: #2563eb;
631+
font-size: 0.9rem;
632632
font-weight: 800;
633633
}
634634

635635
.step-queue-copy {
636636
display: grid;
637-
gap: 2px;
637+
gap: 4px;
638+
min-width: 0;
638639
}
639640

640641
.step-queue-label {
641-
font-size: 0.56rem;
642+
font-size: 0.68rem;
642643
text-transform: uppercase;
643644
letter-spacing: 0.12em;
644645
color: var(--color-muted);
645646
font-weight: 700;
646647
}
647648

648649
.step-queue-value {
649-
font-size: 0.78rem;
650+
font-size: 1rem;
650651
font-weight: 700;
651652
color: var(--color-text);
652-
line-height: 1.25;
653+
line-height: 1.32;
653654
}
654655

655656
.step-queue-description {
656657
margin-top: 6px;
657-
font-size: 0.88rem;
658-
line-height: 1.55;
658+
font-size: 1.02rem;
659+
line-height: 1.62;
659660
color: #475569;
660661
}
661662

663+
.step-queue-status {
664+
display: inline-flex;
665+
align-items: center;
666+
justify-content: center;
667+
width: 20px;
668+
min-height: 28px;
669+
color: #94a3b8;
670+
font-size: 1rem;
671+
font-weight: 900;
672+
line-height: 1;
673+
}
674+
675+
.step-queue-status-active {
676+
color: #2563eb;
677+
}
678+
679+
.step-queue-status-done {
680+
color: #16a34a;
681+
}
682+
662683
.step-queue-description .presentation-chat-paragraph + .presentation-chat-paragraph {
663684
margin-top: 8px;
664685
}
@@ -1501,18 +1522,18 @@ body {
15011522

15021523
.mission-node-bubble {
15031524
position: absolute;
1504-
top: -30px;
1505-
right: -18px;
1506-
max-width: 156px;
1507-
padding: 7px 10px;
1508-
border-radius: 14px 14px 4px 14px;
1525+
top: -38px;
1526+
right: -22px;
1527+
max-width: 196px;
1528+
padding: 9px 13px;
1529+
border-radius: 16px 16px 5px 16px;
15091530
background: rgba(255, 255, 255, 0.96);
15101531
border: 1px solid rgba(148, 163, 184, 0.28);
15111532
box-shadow:
15121533
0 0 0 1px color-mix(in srgb, var(--node-tint) 18%, transparent),
15131534
0 12px 26px rgba(15, 23, 42, 0.1);
15141535
color: #475569;
1515-
font-size: calc(0.62rem * var(--graph-font-scale, 1));
1536+
font-size: calc(0.72rem * var(--graph-font-scale, 1));
15161537
font-weight: 700;
15171538
line-height: 1.25;
15181539
letter-spacing: 0.01em;
@@ -1527,13 +1548,13 @@ body {
15271548

15281549
.mission-node-caption {
15291550
position: absolute;
1530-
top: -96px;
1551+
top: -92px;
15311552
left: 50%;
15321553
transform: translateX(-50%);
1533-
min-width: 210px;
1534-
max-width: 280px;
1535-
padding: 12px 16px 13px;
1536-
border-radius: 20px 20px 8px 20px;
1554+
min-width: 240px;
1555+
max-width: 332px;
1556+
padding: 14px 18px 16px;
1557+
border-radius: 22px 22px 10px 22px;
15371558
background:
15381559
radial-gradient(circle at top left, color-mix(in srgb, var(--node-tint) 26%, white), transparent 56%),
15391560
linear-gradient(135deg, rgba(255, 255, 255, 0.99), color-mix(in srgb, var(--node-tint) 14%, white));
@@ -1565,15 +1586,15 @@ body {
15651586
}
15661587

15671588
.mission-node-caption-kicker {
1568-
font-size: calc(0.54rem * var(--graph-font-scale, 1));
1589+
font-size: calc(0.6rem * var(--graph-font-scale, 1));
15691590
font-weight: 900;
15701591
letter-spacing: 0.16em;
15711592
text-transform: uppercase;
15721593
color: color-mix(in srgb, var(--node-tint) 46%, #334155);
15731594
}
15741595

15751596
.mission-node-caption-title {
1576-
font-size: calc(0.94rem * var(--graph-font-scale, 1));
1597+
font-size: calc(1.08rem * var(--graph-font-scale, 1));
15771598
font-weight: 900;
15781599
line-height: 1.12;
15791600
letter-spacing: -0.02em;

0 commit comments

Comments
 (0)