admin/shop-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

deploy

Browse Source
This commit is contained in:
@kirill.komarov
2026-05-11 20:20:36 +05:00
parent 7a92991cff
commit 212484d062
1 changed files with 53 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/widgets/catalog-slider/ui/CatalogSlider.tsx
+53 -40
View File
@@ -46,53 +46,66 @@ function CatalogSliderInner({ slides }: { slides: CatalogSliderSlide[] }) {
bgcolor: 'action.hover',
}}
>
{slides.map((slide, i) => (
<Box
key={slide.id}
sx={{
position: 'absolute',
inset: 0,
opacity: i === index ? 1 : 0,
transition: 'opacity 0.75s ease-in-out',
pointerEvents: 'none',
}}
>
{slides.map((slide, i) => {
const captionText = String(slide.caption ?? '')
.trim()
.replace(/\u00a0/g, ' ')
return (
<Box
component="img"
src={slide.url}
alt=""
loading={i === 0 ? 'eager' : 'lazy'}
key={slide.id}
sx={{
width: '100%',
height: '100%',
objectFit: 'cover',
display: 'block',
position: 'absolute',
inset: 0,
opacity: i === index ? 1 : 0,
transition: 'opacity 0.75s ease-in-out',
pointerEvents: 'none',
}}
/>
{slide.caption.trim() ? (
>
<Box
component="img"
src={slide.url}
alt={captionText || 'Слайд каталога'}
loading={i === 0 ? 'eager' : 'lazy'}
sx={{
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
px: 2,
pt: 4,
pb: slides.length > 1 ? 5 : 2,
background: 'linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 55%, transparent 100%)',
inset: 0,
width: '100%',
height: '100%',
objectFit: 'cover',
display: 'block',
zIndex: 0,
}}
>
<Typography
color="common.white"
variant="subtitle1"
sx={{ fontWeight: 700, textShadow: '0 1px 4px rgba(0,0,0,0.6)' }}
/>
{captionText ? (
<Box
sx={{
position: 'absolute',
left: 0,
right: 0,
top: slides.length > 1 ? 20 : 0,
zIndex: 4,
pt: 4,
pb: slides.length > 1 ? 2 : 2,
// background: 'linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.4) 50%, transparent 100%)',
}}
>
{slide.caption.trim()}
</Typography>
</Box>
) : null}
</Box>
))}
<Typography
color="common.white"
variant="subtitle1"
sx={{
fontWeight: 700,
textShadow: '0 1px 4px rgba(0,0,0,0.75)',
textAlign: 'center',
fontSize: { xs: '1.25rem', sm: '1.5rem' },
}}
>
{captionText}
</Typography>
</Box>
) : null}
</Box>
)
})}
{slides.length > 1 && (
<Stack
@@ -103,7 +116,7 @@ function CatalogSliderInner({ slides }: { slides: CatalogSliderSlide[] }) {
bottom: 12,
left: '50%',
transform: 'translateX(-50%)',
zIndex: 2,
zIndex: 3,
px: 1,
py: 0.5,
borderRadius: 2,