Unify the utility layer with Balanced Breakfast
.row was a flex utility here and the list-row component in BB. audiofiles
breaks the tie the same way BB does, selectable_row being a row, so the
utility is the misnamed one. Its six users move to .row-flex, which also
centres them, and .row is left free to mean the component in both apps.
Adds the bound tier to both gap families, completing makeover-geometry's
relational set (bound, peer, group, section); .recurrence-interval-row
retires onto it.
Drops .text-sm-secondary. The two apps defined it differently, GO at
--font-size-base and BB at --font-size-sm, and the name agreed with BB.
Its two call sites take text-base text-secondary, which keeps what GO
actually rendered and removes the disagreement.
8 files changed,
+11 insertions,
-16 deletions
| 355 |
355 |
|
/* Compose: .row-flex + .row-flex-{2,3,4} for align-items:center rows.
|
| 356 |
356 |
|
.row for raw flex with no align. .flex-1 to grow a child. */
|
| 357 |
357 |
|
.flex-1 { flex: 1; }
|
| 358 |
|
- |
.row { display: flex; }
|
| 359 |
|
- |
.text-sm-secondary { font-size: var(--font-size-base); color: var(--content-secondary); }
|
| 360 |
358 |
|
.text-accent-red { color: var(--danger); }
|
| 361 |
359 |
|
.mb-section { margin-bottom: var(--gap-section); }
|
| 362 |
360 |
|
.mb-peer { margin-bottom: var(--gap-peer); }
|
| 1905 |
1903 |
|
display: flex;
|
| 1906 |
1904 |
|
flex-direction: column;
|
| 1907 |
1905 |
|
}
|
|
1906 |
+ |
.stack-bound { gap: var(--gap-bound); }
|
| 1908 |
1907 |
|
.stack-peer { gap: var(--gap-peer); }
|
| 1909 |
1908 |
|
.stack-group { gap: var(--gap-group); }
|
| 1910 |
1909 |
|
.stack-section { gap: var(--gap-section); }
|
| 1913 |
1912 |
|
display: flex;
|
| 1914 |
1913 |
|
align-items: center;
|
| 1915 |
1914 |
|
}
|
|
1915 |
+ |
.row-flex-bound { gap: var(--gap-bound); }
|
| 1916 |
1916 |
|
.row-flex-peer { gap: var(--gap-peer); }
|
| 1917 |
1917 |
|
.row-flex-group { gap: var(--gap-group); }
|
| 1918 |
1918 |
|
.row-flex-section { gap: var(--gap-section); }
|
| 2413 |
2413 |
|
}
|
| 2414 |
2414 |
|
.recurrence-row { margin-bottom: var(--gap-peer); }
|
| 2415 |
2415 |
|
.recurrence-row.recurrence-hidden { display: none; }
|
| 2416 |
|
- |
.recurrence-interval-row {
|
| 2417 |
|
- |
display: flex;
|
| 2418 |
|
- |
align-items: center;
|
| 2419 |
|
- |
gap: var(--gap-bound);
|
| 2420 |
|
- |
}
|
| 2421 |
2416 |
|
.recurrence-num { width: 4rem; }
|
| 2422 |
2417 |
|
.recurrence-weekdays {
|
| 2423 |
2418 |
|
display: flex;
|
| 65 |
65 |
|
title="${escAttrVal(a.filename)}">${esc(a.filename)}</div>
|
| 66 |
66 |
|
<div class="text-sm text-muted">${esc(a.fileSizeFormatted)}</div>
|
| 67 |
67 |
|
</div>
|
| 68 |
|
- |
<div class="row row-flex-peer">
|
|
68 |
+ |
<div class="row-flex row-flex-peer">
|
| 69 |
69 |
|
${a.hasLocalBlob ? `
|
| 70 |
70 |
|
<button class="btn btn-sm btn-secondary" data-act="attachments.open" data-a1="${escAttr(a.id)}" title="Open">Open</button>
|
| 71 |
71 |
|
<button class="btn btn-sm btn-secondary" data-act="attachments.saveAs" data-a1="${escAttr(a.id)}" data-a2="${escAttr(a.filename)}" title="Save As">Save</button>
|
| 211 |
211 |
|
|
| 212 |
212 |
|
const content = `
|
| 213 |
213 |
|
<p class="bulk-modal-prompt bulk-modal-prompt--wide">Set priority for ${selectedTaskIds.size} tasks:</p>
|
| 214 |
|
- |
<div class="row row-flex-peer">
|
|
214 |
+ |
<div class="row-flex row-flex-peer">
|
| 215 |
215 |
|
<button class="btn btn-sm" data-act="bulk._applyPriority" data-a1="High">High</button>
|
| 216 |
216 |
|
<button class="btn btn-sm" data-act="bulk._applyPriority" data-a1="Medium">Medium</button>
|
| 217 |
217 |
|
<button class="btn btn-sm" data-act="bulk._applyPriority" data-a1="Low">Low</button>
|
| 32 |
32 |
|
<div class="focus-overlay-content">
|
| 33 |
33 |
|
<div class="focus-header">
|
| 34 |
34 |
|
<span class="focus-label">Focus Mode</span>
|
| 35 |
|
- |
<div class="row row-flex-peer">
|
|
35 |
+ |
<div class="row-flex row-flex-peer">
|
| 36 |
36 |
|
<button class="btn btn-sm focus-preset-btn" data-preset="standard">25/5</button>
|
| 37 |
37 |
|
<button class="btn btn-sm focus-preset-btn" data-preset="deep">50/10</button>
|
| 38 |
38 |
|
</div>
|
| 55 |
55 |
|
<div id="${prefix}-recurrence-preview" class="recurrence-preview"></div>
|
| 56 |
56 |
|
<div class="form-group recurrence-row">
|
| 57 |
57 |
|
<label class="form-label recurrence-sublabel">Every</label>
|
| 58 |
|
- |
<div class="recurrence-interval-row">
|
|
58 |
+ |
<div class="row-flex row-flex-bound">
|
| 59 |
59 |
|
<input type="number" class="form-input recurrence-num" name="${prefix}-interval" value="${interval}" min="1" max="99">
|
| 60 |
60 |
|
<span id="${prefix}-interval-unit" class="recurrence-unit">time(s)</span>
|
| 61 |
61 |
|
</div>
|
| 161 |
161 |
|
|
| 162 |
162 |
|
const progressBar = totalCount > 0 ? `
|
| 163 |
163 |
|
<div class="mb-section">
|
| 164 |
|
- |
<div class="text-sm-secondary" style="display: flex; justify-content: space-between; margin-bottom: var(--gap-bound);">
|
|
164 |
+ |
<div class="text-base text-secondary" style="display: flex; justify-content: space-between; margin-bottom: var(--gap-bound);">
|
| 165 |
165 |
|
<span>Progress</span>
|
| 166 |
166 |
|
<span>${completedCount}/${totalCount} (${progress}%)</span>
|
| 167 |
167 |
|
</div>
|
| 262 |
262 |
|
}).join('');
|
| 263 |
263 |
|
|
| 264 |
264 |
|
const content = `
|
| 265 |
|
- |
<p class="text-sm-secondary mb-section">Link the commit(s) that advanced this task. Amber = associated but not pushed; green = pushed. Mark the one that resolved it as primary.</p>
|
|
265 |
+ |
<p class="text-base text-secondary mb-section">Link the commit(s) that advanced this task. Amber = associated but not pushed; green = pushed. Mark the one that resolved it as primary.</p>
|
| 266 |
266 |
|
<div style="margin-bottom: var(--gap-section); max-height: 300px; overflow-y: auto;">
|
| 267 |
267 |
|
${list}
|
| 268 |
268 |
|
</div>
|
| 26 |
26 |
|
<div class="timer-widget-inner">
|
| 27 |
27 |
|
<span class="timer-task-name"></span>
|
| 28 |
28 |
|
<span class="timer-elapsed"></span>
|
| 29 |
|
- |
<div class="row row-flex-peer">
|
|
29 |
+ |
<div class="row-flex row-flex-peer">
|
| 30 |
30 |
|
<button class="btn btn-sm btn-primary timer-stop-btn" title="Stop timer">Stop</button>
|
| 31 |
31 |
|
<button class="btn btn-sm btn-ghost timer-discard-btn" title="Discard timer">Discard</button>
|
| 32 |
32 |
|
</div>
|
| 216 |
216 |
|
<span class="timer-active-task">${esc(activeResult.taskDescription)}</span>
|
| 217 |
217 |
|
</div>
|
| 218 |
218 |
|
<span class="timer-active-elapsed" id="timer-subview-elapsed">${fmtElapsed(activeResult.session.startedAt)}</span>
|
| 219 |
|
- |
<div class="row row-flex-peer">
|
|
219 |
+ |
<div class="row-flex row-flex-peer">
|
| 220 |
220 |
|
<button class="btn btn-sm btn-primary" data-act="timeTracking.stopAndRefreshTimerView">Stop</button>
|
| 221 |
221 |
|
<button class="btn btn-sm btn-ghost" data-act="timeTracking.discardAndRefreshTimerView">Discard</button>
|
| 222 |
222 |
|
</div>
|
| 408 |
408 |
|
<div class="card-header">
|
| 409 |
409 |
|
<span class="card-title">Days Off</span>
|
| 410 |
410 |
|
</div>
|
| 411 |
|
- |
<div class="row row-flex-peer">
|
|
411 |
+ |
<div class="row-flex row-flex-peer">
|
| 412 |
412 |
|
${dayLabels.map((label, i) => `
|
| 413 |
413 |
|
<button class="vacation-toggle ${vacationDays.includes(i) ? 'active' : ''}"
|
| 414 |
414 |
|
data-act="weeklyReview.toggleVacationDay" data-args='[${i}]'
|