pc: grouped ×N cards list each item on its own line, shared brand in label
All checks were successful
Deploy production / deploy (push) Successful in 1m14s
All checks were successful
Deploy production / deploy (push) Successful in 1m14s
This commit is contained in:
@@ -38,6 +38,16 @@
|
||||
const qty = $derived(parts.reduce((s, p) => s + (isAddOn(p) ? 0 : units(p)), 0));
|
||||
const image = $derived(parts.flatMap((p) => p.imageUrls)[0] ?? null);
|
||||
const names = $derived([...new Set(parts.map(displayName))]);
|
||||
// Grouped (×N) cards list each item on its own line; a brand shared by all moves to the label.
|
||||
const brands = $derived([...new Set(parts.map((p) => p.brand ?? ''))]);
|
||||
const sharedBrand = $derived(
|
||||
names.length > 1 && brands.length === 1 && brands[0] ? brands[0] : null
|
||||
);
|
||||
const lines = $derived(
|
||||
sharedBrand
|
||||
? [...new Set(parts.map((p) => displayName({ brand: null, model: p.model })))]
|
||||
: names
|
||||
);
|
||||
const spec = $derived(keySpec(first));
|
||||
const badges = $derived([...new Set(parts.flatMap(usageBadges))]);
|
||||
const flag = $derived(badges.find((b) => b !== 'long ago') ?? null);
|
||||
@@ -63,12 +73,19 @@
|
||||
>{/if}
|
||||
<span class="min-w-0 flex-1">
|
||||
<span class="label">
|
||||
{slotLabel(slot, first.category)}{#if qty > 1}<span class="qty">×{qty}</span>{/if}
|
||||
{slotLabel(slot, first.category)}{#if qty > 1}<span class="qty">×{qty}</span
|
||||
>{/if}{#if sharedBrand}<span class="brand">· {sharedBrand}</span>{/if}
|
||||
{#if !compact}{#each badges as b (b)}<span class="badge" class:warn={b === 'model TBD'}
|
||||
>{b}</span
|
||||
>{/each}{/if}
|
||||
</span>
|
||||
<span class="name" title={names.join(' + ')}>{names.join(' + ')}</span>
|
||||
{#if lines.length > 1}
|
||||
<span class="lines">
|
||||
{#each lines as l (l)}<span class="line">{l}</span>{/each}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="name" title={names[0]}>{names[0]}</span>
|
||||
{/if}
|
||||
{#if spec && !compact}<span class="spec">{spec}</span>{/if}
|
||||
</span>
|
||||
</button>
|
||||
@@ -210,6 +227,29 @@
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.brand {
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.lines {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
margin-top: 0.05rem;
|
||||
}
|
||||
.line {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.line + .line {
|
||||
padding-top: 0.1rem;
|
||||
border-top: 1px solid color-mix(in srgb, var(--site-border) 60%, transparent);
|
||||
}
|
||||
.compact .line {
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
.compact .label {
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user