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

fix: add preview modal

Browse Source
This commit is contained in:
Valery Grunenko
2025-12-04 13:45:28 +03:00
parent 1a49b3f8e2
commit 453ddb59a1
5 changed files with 76 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
.idea/workspace.xml generated
View File

@@ -5,26 +5,11 @@
</component>
<component name="ChangeListManager">
<list default="true" id="2a96f817-9dc2-4f3c-893a-c4974c750774" name="Changes" comment="">
<change afterPath="$PROJECT_DIR$/src/widgets/preview-modal/index.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/widgets/preview-modal/styles.module.scss" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/widgets/preview-modal/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$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/app/cookie/page.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/cookies/page.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/app/layout.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/layout.tsx" 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/feature/article/consultation-modal/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/widgets/consultation-modal/index.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/feature/article/consultation-modal/styles.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/widgets/consultation-modal/styles.module.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/feature/article/consultation-modal/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/widgets/consultation-modal/ui.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/feature/article/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/feature/article/index.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/feature/article/sidebar/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/feature/article/sidebar/ui.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/shared/ui/modal/modal-content.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/shared/ui/modal/modal-content.module.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/shared/ui/modal/modal.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/shared/ui/modal/modal.module.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/views/home/about/styles.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/home/about/styles.module.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/views/home/about/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/home/about/ui.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/views/home/call-us/styles.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/home/call-us/styles.module.scss" 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/widgets/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/widgets/index.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/widgets/mobile-callback/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/widgets/mobile-callback/ui.tsx" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -32,7 +17,7 @@
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="DarkyenusTimeTracker">
<option name="totalTimeSeconds" value="203480" />
<option name="totalTimeSeconds" value="206831" />
<option name="gitIntegration" value="true" />
<option name="naggedAbout" value="1" />
</component>
@@ -128,7 +113,7 @@
<workItem from="1764591867512" duration="4332000" />
<workItem from="1764657017067" duration="21490000" />
<workItem from="1764741053553" duration="18011000" />
<workItem from="1764825390464" duration="14873000" />
<workItem from="1764825390464" duration="18661000" />
</task>
<servers />
</component>

2
src/shared/ui/modal/modal-content.module.scss
View File

@@ -1,5 +1,5 @@
.ModalContent {
position: absolute;
position: fixed;
width: rem(360px);
padding: rem(40px) rem(20px) rem(20px);
border-radius: rem(20px);

2
src/shared/ui/modal/modal.module.scss
View File

@@ -1,6 +1,6 @@
.ModalBackdrop {
z-index: 1000;
position: absolute;
position: fixed;
top: 0;
left: 0;
bottom: 0;

53
src/views/home/about/styles.module.scss
View File

@@ -155,18 +155,19 @@
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.ModalContainer {
.VideoModalContainer {
background: $color-white;
width: 100%;
border-radius: rem(16px);
padding: rem(10px) rem(10px);
margin-bottom: 20px;
margin-bottom: rem(20px);
display: flex;
flex-direction: column;
max-width: 460px;
max-width: rem(460px);
justify-content: center;
align-self: center;
@@ -184,4 +185,50 @@
stroke-opacity: 0.8;
}
}
}
.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;
}
}
}

25
src/views/home/about/ui.tsx
View File

@@ -6,7 +6,7 @@ import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/grid';
import 'swiper/css/autoplay';
import Image from 'next/image';
import Image, { StaticImageData } from 'next/image';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Grid } from 'swiper/modules';
import lic0 from '@public/images/licence/dtr-strahovka.png';
@@ -66,9 +66,9 @@ const swiperBreakpoints = {
function About() {
const modal = useModal();
const openModal = () =>
const openVideoModal = () =>
modal.showModal(
<Preview className={s.ModalContainer}>
<Preview className={s.VideoModalContainer}>
<iframe
width='560'
height='315'
@@ -82,6 +82,15 @@ function About() {
</Preview>,
);
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 (
<section className={s.About}>
<div className={s.Inner}>
@@ -103,7 +112,7 @@ function About() {
</p>
</div>
<div className={s.Bottom}>
<Button className={s.Btn} onClick={openModal}>
<Button className={s.Btn} onClick={openVideoModal}>
<Icons.Youtube className={s.Icon} />
Посмотреть видео о нас
</Button>
@@ -121,7 +130,13 @@ function About() {
>
{slidesData.map(({ id, name, image }) => (
<SwiperSlide key={id} className={s.Slide}>
<Image src={image} alt={name} quality={75} width={200} />
<Image
src={image}
alt={name}
quality={75}
width={200}
onClick={openPreviewModal({ image, name })}
/>
</SwiperSlide>
))}
</Swiper>