chore: remove 'In motion right now' strip — one signal, one place
The .rr-current marker on the current shipping milestone already says 'this is where we are' through colour + ring + dot scale. A second surface saying the same thing in different words diluted both. One signal, one place. Removed: - src/components/RoadmapInMotion.astro (component file) - The import and render slot in /roadmap.astro - The 'For shipping items: the first sentence appears on /roadmap as the "In motion right now" line' helper text on the admin description field (the field stays; only the helper copy goes). The firstSentenceOf helper lived inside RoadmapInMotion only and was never re-exported, so it dies with the file. Banner margin-bottom restores from 40 → 56px now that nothing sits between the dispatch banner and the route header. The route flows directly out of the dispatch beat. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
83503fe7a3
commit
d85583b4a3
3 changed files with 6 additions and 77 deletions
|
|
@ -1,69 +0,0 @@
|
|||
---
|
||||
import type { RoadmapItemWithAttribution } from '../lib/db';
|
||||
|
||||
interface Props {
|
||||
items: RoadmapItemWithAttribution[];
|
||||
}
|
||||
|
||||
const { items } = Astro.props;
|
||||
|
||||
/** First sentence of a description — naive but matches the user's needs.
|
||||
* Returns '' for null/empty input. Falls back to a 200-char slice if no
|
||||
* sentence-ending punctuation is found in a reasonable window. */
|
||||
function firstSentenceOf(text: string | null): string {
|
||||
if (!text) return '';
|
||||
const trimmed = text.trim();
|
||||
const match = trimmed.match(/^[^.!?]*[.!?](?=\s|$)/);
|
||||
return match ? match[0] : trimmed.slice(0, 200);
|
||||
}
|
||||
|
||||
// Most recent shipping item, in display_order (same selection rule as
|
||||
// the .rr-current marker on the route).
|
||||
let currentItem: RoadmapItemWithAttribution | null = null;
|
||||
items.forEach((it) => { if (it.status === 'shipping') currentItem = it; });
|
||||
|
||||
const line = currentItem ? firstSentenceOf(currentItem.description) : '';
|
||||
const visible = !!currentItem && line.length > 0;
|
||||
---
|
||||
{visible && (
|
||||
<div class="rr-in-motion">
|
||||
<span class="rr-in-motion-eyebrow">In motion right now</span>
|
||||
<p class="rr-in-motion-line">{line}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<style>
|
||||
.rr-in-motion {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 18px;
|
||||
margin-bottom: 36px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.rr-in-motion-eyebrow {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 10px;
|
||||
letter-spacing: 1.4px;
|
||||
text-transform: uppercase;
|
||||
color: var(--on-surface-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.rr-in-motion-line {
|
||||
font-family: var(--font-serif);
|
||||
font-style: italic;
|
||||
font-size: 18px;
|
||||
line-height: 1.4;
|
||||
color: var(--on-surface);
|
||||
margin: 0;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.rr-in-motion {
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.rr-in-motion-line { font-size: 16px; }
|
||||
}
|
||||
</style>
|
||||
|
|
@ -64,7 +64,6 @@ const grouped: Record<Status, RoadmapItemWithAttribution[]> = {
|
|||
<div class="field">
|
||||
<label for="description" class="label-sm field-label">Description</label>
|
||||
<textarea id="description" name="description" class="input body-md" rows="3">{editing?.description ?? ''}</textarea>
|
||||
<span class="body-sm muted">For shipping items: the first sentence appears on /roadmap as the "In motion right now" line. Make it count.</span>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
import AppLayout from '../layouts/AppLayout.astro';
|
||||
import LatestDispatchBanner from '../components/LatestDispatchBanner.astro';
|
||||
import RoadmapInMotion from '../components/RoadmapInMotion.astro';
|
||||
import RoadmapRoute from '../components/RoadmapRoute.astro';
|
||||
import { getAllRoadmapItems } from '../lib/db';
|
||||
|
||||
|
|
@ -26,8 +25,6 @@ const items = getAllRoadmapItems()
|
|||
|
||||
<LatestDispatchBanner />
|
||||
|
||||
<RoadmapInMotion items={items} />
|
||||
|
||||
<RoadmapRoute items={items} />
|
||||
</div>
|
||||
</AppLayout>
|
||||
|
|
@ -66,14 +63,16 @@ const items = getAllRoadmapItems()
|
|||
max-width: 540px;
|
||||
}
|
||||
|
||||
/* In-motion strip lives between banner and route; banner margin
|
||||
tightens to 40px because the strip carries its own 36px below. */
|
||||
.page :global(.banner) { margin-bottom: 40px; }
|
||||
/* Banner sits directly above the route now — restore the original
|
||||
56px gap so the editorial banner reads as its own beat. */
|
||||
.page :global(.banner),
|
||||
.page :global(.rr-dispatch) { margin-bottom: 56px; }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.page { padding: 32px 24px 64px; }
|
||||
.page-title { font-size: 36px; }
|
||||
.page-header { margin-bottom: 28px; }
|
||||
.page :global(.banner) { margin-bottom: 28px; }
|
||||
.page :global(.banner),
|
||||
.page :global(.rr-dispatch) { margin-bottom: 40px; }
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue