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 qty = $derived(parts.reduce((s, p) => s + (isAddOn(p) ? 0 : units(p)), 0));
|
||||||
const image = $derived(parts.flatMap((p) => p.imageUrls)[0] ?? null);
|
const image = $derived(parts.flatMap((p) => p.imageUrls)[0] ?? null);
|
||||||
const names = $derived([...new Set(parts.map(displayName))]);
|
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 spec = $derived(keySpec(first));
|
||||||
const badges = $derived([...new Set(parts.flatMap(usageBadges))]);
|
const badges = $derived([...new Set(parts.flatMap(usageBadges))]);
|
||||||
const flag = $derived(badges.find((b) => b !== 'long ago') ?? null);
|
const flag = $derived(badges.find((b) => b !== 'long ago') ?? null);
|
||||||
@@ -63,12 +73,19 @@
|
|||||||
>{/if}
|
>{/if}
|
||||||
<span class="min-w-0 flex-1">
|
<span class="min-w-0 flex-1">
|
||||||
<span class="label">
|
<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'}
|
{#if !compact}{#each badges as b (b)}<span class="badge" class:warn={b === 'model TBD'}
|
||||||
>{b}</span
|
>{b}</span
|
||||||
>{/each}{/if}
|
>{/each}{/if}
|
||||||
</span>
|
</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}
|
{#if spec && !compact}<span class="spec">{spec}</span>{/if}
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
@@ -210,6 +227,29 @@
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 1.2;
|
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 {
|
.compact .label {
|
||||||
letter-spacing: 0.03em;
|
letter-spacing: 0.03em;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user