From b5a0c0338abe06a2164f92b5aeef79559e1b5395 Mon Sep 17 00:00:00 2001 From: Yuriy Plotnikov Date: Fri, 15 May 2026 14:42:51 +0300 Subject: [PATCH] Fix components --- src/app/categories/[categories-detail]/page.tsx | 1 + src/app/in-stock/[in-stock-detail]/page.tsx | 1 + src/app/news/[news-detail]/page.tsx | 1 + src/app/works/[works-detail]/page.tsx | 1 + src/components/AboutPage/AboutPage.module.scss | 10 ++++++++++ src/components/AboutPage/AboutPage.tsx | 1 + src/components/Detail/Detail.module.scss | 6 ++++++ src/components/GalleryBlock/GalleryBlock.tsx | 2 +- src/components/Main/InStock/InStock.module.scss | 4 ++-- src/components/Main/Process/Process.module.scss | 3 +++ .../Main/Restoration/Restoration.module.scss | 4 ++-- src/components/Payment/Payment.module.scss | 10 ++++++++++ src/types/types.ts | 1 + 13 files changed, 40 insertions(+), 5 deletions(-) diff --git a/src/app/categories/[categories-detail]/page.tsx b/src/app/categories/[categories-detail]/page.tsx index 490dac53..99fd44ba 100644 --- a/src/app/categories/[categories-detail]/page.tsx +++ b/src/app/categories/[categories-detail]/page.tsx @@ -84,6 +84,7 @@ export default async function Page({ params }: PageProps): Promise const slidesList: SlideItem[] = category.slider?.map((image) => ({ id: image._id, image: getImageUrl(image._id, 800, 500), + imageFull: getImageUrl(image._id, 1600, 1000, { mode: 'bestFit' }), alt: image.title || category.title, })) diff --git a/src/app/in-stock/[in-stock-detail]/page.tsx b/src/app/in-stock/[in-stock-detail]/page.tsx index 39bb35a4..9c3c312c 100644 --- a/src/app/in-stock/[in-stock-detail]/page.tsx +++ b/src/app/in-stock/[in-stock-detail]/page.tsx @@ -75,6 +75,7 @@ export default async function Page({ params }: PageProps): Promise work.slider?.map((image) => ({ id: image._id, image: getImageUrl(image._id, 800, 500), + imageFull: getImageUrl(image._id, 1600, 1000, { mode: 'bestFit' }), alt: image.title || work.title, })) || [] diff --git a/src/app/news/[news-detail]/page.tsx b/src/app/news/[news-detail]/page.tsx index 399bab72..247eb7e5 100644 --- a/src/app/news/[news-detail]/page.tsx +++ b/src/app/news/[news-detail]/page.tsx @@ -75,6 +75,7 @@ export default async function Page({ params }: PageProps): Promise news.slider?.map((image) => ({ id: image._id, image: getImageUrl(image._id, 800, 500), + imageFull: getImageUrl(image._id, 1600, 1000, { mode: 'bestFit' }), alt: image.title || news.title, })) || [] diff --git a/src/app/works/[works-detail]/page.tsx b/src/app/works/[works-detail]/page.tsx index b84bd2d8..0f68e916 100644 --- a/src/app/works/[works-detail]/page.tsx +++ b/src/app/works/[works-detail]/page.tsx @@ -75,6 +75,7 @@ export default async function Page({ params }: PageProps): Promise work.slider?.map((image) => ({ id: image._id, image: getImageUrl(image._id, 800, 500), + imageFull: getImageUrl(image._id, 1600, 1000, { mode: 'bestFit' }), alt: image.title || work.title, })) || [] diff --git a/src/components/AboutPage/AboutPage.module.scss b/src/components/AboutPage/AboutPage.module.scss index 745a3b5c..433e1806 100644 --- a/src/components/AboutPage/AboutPage.module.scss +++ b/src/components/AboutPage/AboutPage.module.scss @@ -24,4 +24,14 @@ .about__text { font-size: 22px; + + @media (max-width: $desktop-min-width) { + font-size: 20px; + } + @media (max-width: $tablet-min-width) { + font-size: 18px; + } + @media (max-width: $mobile-mid-width) { + font-size: 16px; + } } diff --git a/src/components/AboutPage/AboutPage.tsx b/src/components/AboutPage/AboutPage.tsx index cd55323d..41691628 100644 --- a/src/components/AboutPage/AboutPage.tsx +++ b/src/components/AboutPage/AboutPage.tsx @@ -18,6 +18,7 @@ export default async function AboutPage(): Promise { const slidesList: SlideItem[] = about.slider?.map((image) => ({ id: image._id, image: getImageUrl(image._id, 800, 500), + imageFull: getImageUrl(image._id, 1600, 1000, { mode: 'bestFit' }), alt: image.title || about.title, })) diff --git a/src/components/Detail/Detail.module.scss b/src/components/Detail/Detail.module.scss index aaa3a483..5532a463 100644 --- a/src/components/Detail/Detail.module.scss +++ b/src/components/Detail/Detail.module.scss @@ -22,9 +22,15 @@ .detail__text { font-size: 22px; + @media (max-width: $desktop-min-width) { + font-size: 20px; + } @media (max-width: $tablet-min-width) { font-size: 18px; } + @media (max-width: $mobile-mid-width) { + font-size: 16px; + } } .detail__price-block { diff --git a/src/components/GalleryBlock/GalleryBlock.tsx b/src/components/GalleryBlock/GalleryBlock.tsx index 47a58e7e..d976942c 100644 --- a/src/components/GalleryBlock/GalleryBlock.tsx +++ b/src/components/GalleryBlock/GalleryBlock.tsx @@ -35,7 +35,7 @@ export default function GalleryBlock({ if (!containerRef.current) return const dynamicEl = hasSlides - ? slidesList.map((item) => ({ src: item.image, thumb: item.image, alt: item.alt })) + ? slidesList.map((item) => ({ src: item.imageFull || item.image, thumb: item.image, alt: item.alt })) : [{ src: imageFullSrc, thumb: imageSrc, alt: imageAlt }] lgInstanceRef.current = lightGallery(containerRef.current, { diff --git a/src/components/Main/InStock/InStock.module.scss b/src/components/Main/InStock/InStock.module.scss index 917e2c3b..dbaf8f2a 100644 --- a/src/components/Main/InStock/InStock.module.scss +++ b/src/components/Main/InStock/InStock.module.scss @@ -9,13 +9,13 @@ grid-auto-rows: 1fr; gap: 30px; - @media (max-width: $desktop-min-width) { + @media (max-width: $desktop-mid-width) { grid-template-columns: 1fr 1fr 1fr; } @media (max-width: $tablet-mid-width) { grid-template-columns: 1fr 1fr; } - @media (max-width: $tablet-min-width) { + @media (max-width: $mobile-mid-width + 100) { grid-template-columns: 1fr; } } diff --git a/src/components/Main/Process/Process.module.scss b/src/components/Main/Process/Process.module.scss index becbf3d2..d8f19a45 100644 --- a/src/components/Main/Process/Process.module.scss +++ b/src/components/Main/Process/Process.module.scss @@ -79,6 +79,9 @@ border-radius: 40px; aspect-ratio: 4 / 3; + @media (max-width: $desktop-mid-width) { + max-height: 400px; + } @media (max-width: $tablet-min-width) { grid-row: 1 / 2; max-height: 300px; diff --git a/src/components/Main/Restoration/Restoration.module.scss b/src/components/Main/Restoration/Restoration.module.scss index a8b5ab4f..08fa7024 100644 --- a/src/components/Main/Restoration/Restoration.module.scss +++ b/src/components/Main/Restoration/Restoration.module.scss @@ -45,7 +45,7 @@ height: 500px; @media (max-width: $tablet-min-width) { - grid-row: 3 / 4; + grid-row: 2 / 3; grid-column: 1 / -1; height: 100%; } @@ -66,7 +66,7 @@ font-size: 20px; } @media (max-width: $tablet-min-width) { - grid-row: 2 / 3; + grid-row: 3 / 4; grid-column: 1 / -1; font-size: 18px; diff --git a/src/components/Payment/Payment.module.scss b/src/components/Payment/Payment.module.scss index d489ce02..8c7e47ad 100644 --- a/src/components/Payment/Payment.module.scss +++ b/src/components/Payment/Payment.module.scss @@ -5,4 +5,14 @@ .payment__info { font-size: 22px; + + @media (max-width: $desktop-min-width) { + font-size: 20px; + } + @media (max-width: $tablet-min-width) { + font-size: 18px; + } + @media (max-width: $mobile-mid-width) { + font-size: 16px; + } } diff --git a/src/types/types.ts b/src/types/types.ts index ae0f7001..a5b16bd3 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -50,6 +50,7 @@ export type SlideItem = { id: string image: string alt: string + imageFull?: string href?: string }