This commit is contained in:
seb
2026-10-07 13:10:23 +02:00
parent e4927f5d8a
commit 6c0b1503e8
14 changed files with 2644 additions and 86 deletions

View File

@@ -18,7 +18,6 @@ import { thumb } from '../../api';
import {
GREEN,
GREEN_BRIGHT,
ICE,
INK_STRONG,
SCRIM_LABEL,
SCRIM_TILE,
@@ -409,69 +408,92 @@ export class ArticleTile extends Tile {
textShadow: TEXT_GLOW_DARK,
}}
>
{article?.brand?.name ? (
<BrandLabel
brand={article.brand}
name={article.brand.name}
size={14}
spacing={0.5}
typographyProps={{
variant: 'caption',
noWrap: true,
sx: {
color: ICE,
opacity: 1,
fontWeight: 500,
lineHeight: 1.1,
textShadow: TEXT_GLOW_DARK,
},
}}
sx={{ mb: 0.25 }}
/>
) : null}
{label ? (
<Typography
variant="body2"
fontWeight={600}
noWrap
sx={{
color: INK_STRONG,
lineHeight: 1.2,
textShadow: TEXT_GLOW_LIGHT,
}}
>
{label}
</Typography>
) : null}
{sku ? (
<Typography
variant="caption"
noWrap
sx={{
color: WHITE,
textShadow: TEXT_GLOW_DARK,
}}
>
{sku}
</Typography>
) : null}
{grossPrice != null && (
<Typography
variant="caption"
fontWeight={700}
component="div"
sx={{
color: GREEN_BRIGHT,
fontWeight: 700,
fontSize: '0.8rem',
lineHeight: 1.2,
mt: 0.25,
textShadow: TEXT_GLOW_DARK,
}}
>
{formatPrice(grossPrice)}
</Typography>
)}
{/* Row 1: Brand */}
<Box
sx={{
height: 18,
minHeight: 18,
display: 'flex',
alignItems: 'center',
mb: 0.25,
}}
>
{article?.brand?.name ? (
<BrandLabel
brand={article.brand}
name={article.brand.name}
size={14}
spacing={0.5}
typographyProps={{
variant: 'caption',
noWrap: true,
sx: {
color: INK_STRONG,
fontWeight: 600,
lineHeight: 1.2,
py: '2px',
textShadow: TEXT_GLOW_LIGHT,
},
}}
/>
) : null}
</Box>
{/* Rows 2 & 3: Name */}
<Typography
variant="body2"
fontWeight={600}
sx={{
color: INK_STRONG,
lineHeight: 1.2,
height: '2.4em',
textShadow: TEXT_GLOW_LIGHT,
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
overflow: 'hidden',
wordBreak: 'break-word',
}}
>
{label || article?.name?.trim() || '\u00A0'}
</Typography>
{/* Row 4: SKU */}
<Typography
variant="caption"
noWrap
component="div"
sx={{
color: WHITE,
textShadow: TEXT_GLOW_DARK,
lineHeight: 1.2,
height: '1.2em',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{sku || '\u00A0'}
</Typography>
{/* Row 5: Price */}
<Typography
variant="caption"
component="div"
sx={{
color: GREEN_BRIGHT,
fontWeight: 700,
fontSize: '0.8rem',
lineHeight: 1.2,
height: '1.2em',
mt: 0.25,
textShadow: TEXT_GLOW_DARK,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}}
>
{grossPrice != null ? formatPrice(grossPrice) : '\u00A0'}
</Typography>
</Box>
</ButtonBase>
);