muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

fixed flow hero appearance

Browse source
This commit is contained in:
Fedor Katurov 2023-10-27 11:21:04 +06:00
parent 4f89abda26
commit 291c3421bf
3 changed files with 26 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/flow/FlowSwiperHero/index.tsx
View file

@ -1,6 +1,7 @@
import React, { FC, useCallback, useMemo, useState } from 'react'; import React, { FC, useCallback, useMemo, useState } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import Image from 'next/image';
import SwiperCore, { Autoplay, EffectFade, Lazy, Navigation } from 'swiper'; import SwiperCore, { Autoplay, EffectFade, Lazy, Navigation } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react'; import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperClass from 'swiper/types/swiper-class'; import SwiperClass from 'swiper/types/swiper-class';
@ -36,6 +37,12 @@ const lazy = {
checkInView: true, checkInView: true,
}; };
const getSrcSet = (url?: string) =>
[
`${getURLFromString(url, imagePresets.cover)} 768w`,
`${getURLFromString(url, imagePresets.small_hero)}`,
].join(', ');
export const FlowSwiperHero: FC<Props> = ({ heroes }) => { export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
const { isTablet } = useWindowSize(); const { isTablet } = useWindowSize();
const { push } = useNavigation(); const { push } = useNavigation();
@ -140,7 +147,11 @@ export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
.map((node) => ( .map((node) => (
<SwiperSlide key={node.id}> <SwiperSlide key={node.id}>
<img <img
data-src={getURLFromString(node.thumbnail!, preset)} data-src={getURLFromString(
node.thumbnail,
imagePresets.small_hero,
)}
data-srcSet={getSrcSet(node.thumbnail)}
alt="" alt=""
className={classNames(styles.preview, 'swiper-lazy')} className={classNames(styles.preview, 'swiper-lazy')}
/> />

11
src/components/flow/FlowSwiperHero/styles.module.scss
View file

@ -9,6 +9,7 @@
.swiper { .swiper {
@include outer_shadow; @include outer_shadow;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: $radius; border-radius: $radius;
@ -17,7 +18,8 @@
object-fit: cover; object-fit: cover;
img { img {
min-width: 150%; min-width: 100%;
min-height: 120%;
} }
} }
} }
@ -67,13 +69,14 @@
} }
img.preview { img.preview {
transform: translate(-15%, 0); transform: translate(0, 0);
transition: transform 7s linear, opacity 1s linear; transition: transform 10s linear, opacity 1s linear;
opacity: 0; opacity: 0;
will-change: transform;
:global(.swiper-slide-active) &, :global(.swiper-slide-active) &,
:global(.swiper-slide-duplicate-active) & { :global(.swiper-slide-duplicate-active) & {
transform: translate(-15%, -20%); transform: translate(0, -20%);
opacity: 1; opacity: 1;
} }
} }

12
src/utils/dom.ts
View file

@ -70,15 +70,15 @@ export const describeArc = (
].join(' '); ].join(' ');
}; };
export const getURLFromString = (url?: string, size?: ImagePreset): string => { export const getURLFromString = (url = '', size?: ImagePreset): string => {
if (size) { if (!size) {
return (url || '').replace( return url.replace('REMOTE_CURRENT://', CONFIG.remoteCurrent);
}
return url.replace(
'REMOTE_CURRENT://', 'REMOTE_CURRENT://',
`${CONFIG.remoteCurrent}cache/${size}/`, `${CONFIG.remoteCurrent}cache/${size}/`,
); );
}
return (url || '').replace('REMOTE_CURRENT://', CONFIG.remoteCurrent);
}; };
export const getURL = ( export const getURL = (