u
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user