redrockjs/ocenka-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add preview in contacts page

Browse Source
This commit is contained in:
Valery Grunenko
2025-12-15 13:32:42 +03:00
parent 5f786a2d6f
commit 692ae73cf0
3 changed files with 72 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
.idea/workspace.xml generated
View File

@@ -5,29 +5,9 @@
</component>
<component name="ChangeListManager">
<list default="true" id="2a96f817-9dc2-4f3c-893a-c4974c750774" name="Changes" comment="">
<change afterPath="$PROJECT_DIR$/src/views/experts/borodin/model/slider.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/experts/gulmamedov/model/slider.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/experts/kaminskiy/model/slider.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/experts/kolodiy/model/slider.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/experts/mikova/model/slider.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/experts/mityaev/model/slider.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/experts/polinov/model/slider.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/experts/volkova-goncharova/model/slider.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/experts/yancen/model/slider.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/widgets/expert-slider/index.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/widgets/expert-slider/styles.module.scss" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/widgets/expert-slider/ui.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/entities/beauty-button/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/entities/beauty-button/ui.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/views/experts/borodin/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/borodin/ui.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/views/experts/gulmamedov/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/gulmamedov/ui.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/views/experts/mikova/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/mikova/ui.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/views/experts/mityaev/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/mityaev/ui.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/views/experts/polinov/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/polinov/ui.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/views/experts/volkova-goncharova/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/volkova-goncharova/ui.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/views/experts/yancen/styles.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/yancen/styles.module.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/views/experts/yancen/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/yancen/ui.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/views/home/call-us/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/home/call-us/ui.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/feature/contacts/licence-slider/styles.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/feature/contacts/licence-slider/styles.module.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/feature/contacts/licence-slider/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/feature/contacts/licence-slider/ui.tsx" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -35,7 +15,7 @@
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="DarkyenusTimeTracker">
<option name="totalTimeSeconds" value="257682" />
<option name="totalTimeSeconds" value="258039" />
<option name="gitIntegration" value="true" />
<option name="naggedAbout" value="1" />
</component>
@@ -154,7 +134,7 @@
<workItem from="1765705636949" duration="904000" />
<workItem from="1765708416527" duration="881000" />
<workItem from="1765709337833" duration="2887000" />
<workItem from="1765782728360" duration="10274000" />
<workItem from="1765782728360" duration="10627000" />
</task>
<servers />
</component>

48
src/feature/contacts/licence-slider/styles.module.scss
View File

@@ -6,6 +6,7 @@
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.Image {
width: rem(200px);
@@ -13,3 +14,50 @@
}
}
}
.PreviewModalContainer {
background: $color-white;
width: max-content;
height: auto;
border-radius: rem(16px);
padding: rem(10px) rem(10px);
margin-bottom: rem(20px);
display: flex;
flex-direction: column;
//max-width: max-content;//rem(460px);
justify-content: center;
align-self: center;
overflow: visible;
@include iftablet{
max-width: unset;
align-self: unset;
width: max-content;
height: auto;
}
.Image{
object-fit: contain;
width: 80vw;
height: auto;
max-height: 90vh;
@include iftablet{
width: auto;
height: 90vh;
}
}
& > svg {
z-index: 1;
top: rem(5px);
right: rem(-25px);
@include iftablet{
right: rem(-40px);
}
path {
stroke: #FFFFFF;
stroke-opacity: 1;
}
}
}

21
src/feature/contacts/licence-slider/ui.tsx
View File

@@ -9,6 +9,8 @@ import s from './styles.module.scss';
import Image, { StaticImageData } from 'next/image';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Grid } from 'swiper/modules';
import { useModal } from '@core/providers/modal-provider';
import { Preview } from '@/widgets';
type LicenseSliderProps = {
slidesData: {
@@ -38,6 +40,17 @@ const swiperBreakpoints = {
};
function LicenceSlider({ slidesData }: LicenseSliderProps) {
const modal = useModal();
const openPreviewModal =
({ image, name }: { image: StaticImageData; name: string }) =>
() =>
modal.showModal(
<Preview className={s.PreviewModalContainer}>
<Image className={s.Image} src={image} alt={name} quality={75} />
</Preview>,
);
return (
<Swiper
className={s.Slider}
@@ -51,7 +64,13 @@ function LicenceSlider({ slidesData }: LicenseSliderProps) {
>
{slidesData.map(({ id, name, image }) => (
<SwiperSlide key={id} className={s.Slide}>
<Image className={s.Image} src={image} alt={name} quality={75} />
<Image
className={s.Image}
src={image}
alt={name}
quality={75}
onClick={openPreviewModal({ image, name })}
/>
</SwiperSlide>
))}
</Swiper>