feat(routines): one game at a time in Catch up, with a way to reach it
Opening the panel gave one identical dropdown per game, naming none of them, at the bottom of a page the Checklist did not link to. Named chips show one game's titled rows and dated strips, and the Checklist's buttons land on the section. The page-change scroll reset now skips these arrivals: a child's effect runs first, so it was undoing the jump. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Lucas Winther
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
99af24e0d3
commit
3296784ca1
+139
-31
@@ -813,9 +813,6 @@ textarea {
|
||||
.routine-library-heading h2 {
|
||||
font: 600 26px var(--font-display);
|
||||
}
|
||||
.routines-page .routine-history {
|
||||
margin: 16px 24px;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.event-entry:hover {
|
||||
background: var(--color-surface);
|
||||
@@ -1206,32 +1203,6 @@ textarea {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
.routine-history {
|
||||
margin: 20px 0;
|
||||
border-top: 1px solid var(--color-hairline);
|
||||
padding-top: 16px;
|
||||
}
|
||||
.routine-history summary {
|
||||
cursor: pointer;
|
||||
color: var(--color-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
.history-days {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
.history-days button {
|
||||
padding: 6px 9px;
|
||||
font-size: 11px;
|
||||
border: 1px solid var(--color-hairline);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.history-days button[aria-pressed="true"] {
|
||||
color: var(--color-near);
|
||||
border-color: var(--color-near);
|
||||
}
|
||||
.code-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -2082,11 +2053,148 @@ textarea {
|
||||
display: block;
|
||||
font: 700 34px/1 var(--font-display);
|
||||
}
|
||||
.routine-histories {
|
||||
.catch-up {
|
||||
padding: 20px 24px;
|
||||
border-top: 1px solid var(--color-hairline);
|
||||
}
|
||||
.catch-up h2 {
|
||||
font: 600 26px var(--font-display);
|
||||
margin: 0;
|
||||
scroll-margin-top: 72px;
|
||||
}
|
||||
.catch-up h2:focus {
|
||||
outline: none;
|
||||
}
|
||||
.catch-up > .meta {
|
||||
margin: 2px 0 12px;
|
||||
color: var(--color-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
.catch-up > .focus-pills {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.cu-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
|
||||
gap: 8px 20px;
|
||||
align-items: start;
|
||||
padding: 12px 0;
|
||||
border-top: 1px solid var(--color-hairline);
|
||||
}
|
||||
.cu-name strong {
|
||||
display: block;
|
||||
font: 500 15px/1.35 var(--font-body);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
.cu-name small {
|
||||
color: var(--color-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
.cu-strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(14, minmax(0, 36px));
|
||||
gap: 4px;
|
||||
}
|
||||
.cu-day {
|
||||
display: block;
|
||||
padding: 4px 0 5px;
|
||||
border: 1px solid var(--color-hairline);
|
||||
border-radius: 6px;
|
||||
color: var(--color-muted);
|
||||
text-align: center;
|
||||
}
|
||||
.cu-day i {
|
||||
display: block;
|
||||
font: 500 10px/1.3 var(--font-body);
|
||||
}
|
||||
.cu-day b {
|
||||
display: block;
|
||||
font: 600 12px/1.3 var(--font-body);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.cu-day[aria-pressed="true"] {
|
||||
color: var(--color-ink);
|
||||
border-color: var(--hue);
|
||||
background: color-mix(in srgb, var(--hue) 28%, transparent);
|
||||
}
|
||||
.cu-day[data-today] {
|
||||
outline: 2px solid var(--color-ink);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.cu-day:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.cu-values ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.cu-values li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
max-width: 340px;
|
||||
padding: 2px 0;
|
||||
font-size: 13px;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
.cu-values b {
|
||||
color: var(--color-ink);
|
||||
font-weight: 500;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.cu-none {
|
||||
margin: 0;
|
||||
padding: 2px 0;
|
||||
font-size: 13px;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
.catch-up > .cu-none {
|
||||
padding: 12px 0;
|
||||
}
|
||||
.cu-earlier {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
.cu-earlier summary,
|
||||
.cu-older > summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
.cu-earlier .cu-strip {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.cu-older {
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--color-hairline);
|
||||
font-size: 13px;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
.cu-older h3 {
|
||||
margin: 14px 0 0;
|
||||
font: 600 14px var(--font-display);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
.cu-older .meta {
|
||||
margin: 0 0 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.heading-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex: none;
|
||||
}
|
||||
@media (max-width: 1050px) {
|
||||
.cu-row {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.cu-strip {
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.archive-view {
|
||||
padding: 24px 32px 0;
|
||||
display: flex;
|
||||
@@ -5393,7 +5501,7 @@ button.mark {
|
||||
.timeline-help,
|
||||
.checklist-display,
|
||||
.band-h,
|
||||
.routine-histories,
|
||||
.catch-up,
|
||||
.archive-view {
|
||||
padding-inline: var(--edge);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user