diff --git a/src/components/energy-value/energy-value.module.scss b/src/components/energy-value/energy-value.module.scss index dbdb0f4c..d805f289 100644 --- a/src/components/energy-value/energy-value.module.scss +++ b/src/components/energy-value/energy-value.module.scss @@ -35,3 +35,22 @@ } } } + +@media screen and (width <= 768px) { + .energy-value { + width: calc(100% - 16px); + max-width: 100%; + padding: 4px 8px; + font-size: 14px; + font-weight: 500; + margin-bottom: 28px; + } + + .energy-value__item { + max-width: calc(100% / 4 - 8px * 3); + width: 100%; + align-self: center; + margin: 0 auto; + font-size: 14px; + } +} diff --git a/src/components/popups/popup-recipe/popup-recipe.module.scss b/src/components/popups/popup-recipe/popup-recipe.module.scss index fd64cdef..d0b407e5 100644 --- a/src/components/popups/popup-recipe/popup-recipe.module.scss +++ b/src/components/popups/popup-recipe/popup-recipe.module.scss @@ -7,8 +7,22 @@ font-family: $ubuntu-font; color: $active-text-color; + @media screen and (width <= 768px) { + max-width: 768px; + width: 100%; + padding: 36px 0; + } + &__title { margin-bottom: 62px; + + @media screen and (width <= 768px) { + font-size: 24px; + font-weight: 700; + width: calc(100% - 20px * 2); + margin: 0 auto; + margin-bottom: 28px; + } } &__content { @@ -16,5 +30,13 @@ grid-template-columns: repeat(2, auto); gap: 24px; align-items: start; + + @media screen and (width <= 768px) { + width: calc(100% - 20px * 2); + display: flex; + flex-direction: column; + align-items: center; + margin: 0 auto; + } } } diff --git a/src/components/recipes-components/ingredients-list-popup/ingredients-list-popup.module.scss b/src/components/recipes-components/ingredients-list-popup/ingredients-list-popup.module.scss index 651ff19a..8f6356ab 100644 --- a/src/components/recipes-components/ingredients-list-popup/ingredients-list-popup.module.scss +++ b/src/components/recipes-components/ingredients-list-popup/ingredients-list-popup.module.scss @@ -8,11 +8,21 @@ border: 1px solid $footer-background-color; max-width: 280px; + @media screen and (width <= 768px) { + max-width: 100%; + width: 100%; + } + &__title { margin: 8px 8px 20px; font-size: 22px; font-weight: 500; line-height: 140%; + + @media screen and (width <= 768px) { + font-size: 15px; + font-weight: 700; + } } &__list { @@ -23,6 +33,10 @@ display: flex; flex-direction: column; gap: 24px; + + @media screen and (width <= 768px) { + background-color: transparent; + } } &__item { @@ -37,10 +51,20 @@ font-size: 20px; line-height: 140%; cursor: pointer; + + @media screen and (width <= 768px) { + font-size: 14px; + font-weight: 500; + } } &__weight { font-size: 20px; font-weight: 500; + + @media screen and (width <= 768px) { + font-size: 14px; + font-weight: 500; + } } } diff --git a/src/components/recipes-components/ingredients-list/ingredients-list.module.scss b/src/components/recipes-components/ingredients-list/ingredients-list.module.scss index 33a4f9b8..82d474e7 100644 --- a/src/components/recipes-components/ingredients-list/ingredients-list.module.scss +++ b/src/components/recipes-components/ingredients-list/ingredients-list.module.scss @@ -7,6 +7,11 @@ font-family: $ubuntu-font; color: $active-text-color; + @media screen and (width <= 768px) { + max-width: 100%; + width: 100%; + } + &__head { margin: 0; font-size: 24px; @@ -14,6 +19,10 @@ line-height: 140%; padding: 8px 16px 16px; border-bottom: solid 1px $unactive-text-color; + + @media screen and (width <= 768px) { + font-size: 15px; + } } &__list { @@ -29,10 +38,20 @@ grid-template-columns: subgrid; grid-column: span 3; padding: 8px 0; + + @media screen and (width <= 768px) { + // width: 100%; + display: flex; + justify-content: space-between; + } } } .ingredient { + @media screen and (width <= 768px) { + width: 100%; + } + &__image { width: 74px; height: 74px; @@ -40,6 +59,12 @@ border-radius: 16px; cursor: pointer; + @media screen and (width <= 768px) { + max-width: 60px; + width: 40px; + height: 40px; + } + & > img { width: 100%; height: 100%; @@ -52,6 +77,13 @@ line-height: 140%; margin: 0; cursor: pointer; + + @media screen and (width <= 768px) { + font-size: 14px; + font-weight: 500; + text-align: center; + text-wrap: wrap; + } } &__weight { @@ -59,5 +91,17 @@ font-weight: 500; line-height: 100%; margin: 0; + + @media screen and (width <= 768px) { + font-size: 14px; + font-weight: 500; + } + } +} + +@media screen and (width <= 768px) { + .ingredients__list { + gap: 16px; + margin: 8px; } } diff --git a/src/components/recipes-components/products-list-popup/index.tsx b/src/components/recipes-components/products-list-popup/index.tsx index e3552094..b874f320 100644 --- a/src/components/recipes-components/products-list-popup/index.tsx +++ b/src/components/recipes-components/products-list-popup/index.tsx @@ -6,6 +6,7 @@ import closeIcon from '@images/profile/close.svg'; import plusIcon from '@images/plus_button.svg'; import minusIcon from '@images/minus_button.svg'; import styles from './products-list-popup.module.scss'; +import { useResize } from '@hooks/use-resize'; const ProductsListPopup: React.FC = ({ ingredients, @@ -13,7 +14,7 @@ const ProductsListPopup: React.FC = ({ }) => { const [products, setProducts] = useState(Array); const { updateCart, error, reset, successText, cartUpdating } = useCart(); - + const { width } = useResize(); const filterProducts = (index: number) => { setProducts((prev) => prev.filter((_, i) => i !== index)); }; @@ -65,29 +66,31 @@ const ProductsListPopup: React.FC = ({ alt={product.name} /> -

handleClick(product.id)} - >{`${product.name}, ${product.amount}${product.measure_unit}`}

+
+

handleClick(product.id)} + >{`${product.name}`}

-
- -

{product.need_to_buy}

- +
+ +

{product.need_to_buy}

+ +
{product.final_price && product.need_to_buy && ( @@ -95,13 +98,15 @@ const ProductsListPopup: React.FC = ({ product.final_price * product.need_to_buy } руб.`}

)} - + {width >= 768 && ( + + )} ))} diff --git a/src/components/recipes-components/products-list-popup/products-list-popup.module.scss b/src/components/recipes-components/products-list-popup/products-list-popup.module.scss index 06056cde..22ebd03a 100644 --- a/src/components/recipes-components/products-list-popup/products-list-popup.module.scss +++ b/src/components/recipes-components/products-list-popup/products-list-popup.module.scss @@ -18,10 +18,21 @@ border: 1px solid $unactive-text-color; row-gap: 40px; margin-bottom: 20px; + + @media screen and (width <= 768px) { + width: calc(100% - 8px); + padding: 8px 4px; + row-gap: 16px; + grid-template-columns: repeat(3, 1fr); + } } &__item { grid-column: span 5; + + @media screen and (width <= 768px) { + justify-items: center; + } } &__button { @@ -76,12 +87,22 @@ line-height: 140%; margin: 0; cursor: pointer; + + @media screen and (width <= 768px) { + font-size: 14px; + font-weight: 500; + } } &__price { font-size: 20px; font-weight: 500; margin: 0; + + @media screen and (width <= 768px) { + font-size: 15px; + font-weight: 700; + } } &__delete { @@ -119,6 +140,13 @@ font-size: 20px; align-items: center; + @media screen and (width <= 768px) { + gap: 8px; + font-size: 12px; + font-weight: 400; + padding: 4px 8px; + } + &__value { margin: 0; } @@ -131,3 +159,9 @@ padding: 0; } } + +.popup__container { + display: flex; + flex-direction: column; + gap: 4px; +} diff --git a/src/components/recipes-components/recipe-info/recipe-info.module.scss b/src/components/recipes-components/recipe-info/recipe-info.module.scss index 90772092..f709048b 100644 --- a/src/components/recipes-components/recipe-info/recipe-info.module.scss +++ b/src/components/recipes-components/recipe-info/recipe-info.module.scss @@ -11,10 +11,26 @@ border-radius: 16px; margin-bottom: 16px; + @media screen and (width <= 768px) { + max-width: 100%; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + & > img { width: 100%; height: auto; object-fit: cover; + + @media screen and (width <= 768px) { + width: 100%; + object-fit: cover; + object-position: center; + border-radius: 16px; + } } } @@ -24,6 +40,16 @@ font-weight: 500; line-height: 140%; margin-bottom: 8px; + + @media screen and (width <= 768px) { + font-size: 15px; + font-weight: 700; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } } &__description { @@ -32,5 +58,13 @@ font-size: 20px; font-weight: 400; line-height: 140%; + + @media screen and (width <=768px) { + max-width: 100%; + width: 100%; + font-size: 14px; + font-weight: 500; + text-align: left; + } } } diff --git a/src/hooks/use-resize.ts b/src/hooks/use-resize.ts new file mode 100644 index 00000000..aa1bd809 --- /dev/null +++ b/src/hooks/use-resize.ts @@ -0,0 +1,20 @@ +import { useState, useEffect } from 'react'; + +export const useResize = () => { + const [width, setWidth] = useState(window.innerWidth); + + useEffect(() => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const handleResize = (event: any) => { + setWidth(event.target.innerWidth); + }; + window.addEventListener('resize', handleResize); + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); + + return { + width, + }; +}; diff --git a/src/pages/recipe/index.tsx b/src/pages/recipe/index.tsx index ec64ae67..3de39cb6 100644 --- a/src/pages/recipe/index.tsx +++ b/src/pages/recipe/index.tsx @@ -7,6 +7,7 @@ import Preloader from '@components/preloader'; import RecipeInfo from '@components/recipes-components/recipe-info'; import IngredientsList from '@components/recipes-components/ingredients-list'; import PopupRecipe from '@components/popups/popup-recipe'; +import { useResize } from '@hooks/use-resize'; import type { ReceipeIngredient, @@ -23,7 +24,7 @@ import styles from './recipe.module.scss'; const Recipe: React.FC = () => { const { id } = useParams(); const { handleOpenPopup, handleClosePopup } = usePopup(); - + const { width } = useResize(); const navigate = useNavigate(); const [isLoading, setIsLoading] = useState(true); const [recipeInfo, setRecipeInfo] = useState(Object); @@ -159,8 +160,12 @@ const Recipe: React.FC = () => {
-

{recipeInfo.name}

-

+

+ {recipeInfo.name} +

+

Время приготовления {' '} @@ -174,7 +179,7 @@ const Recipe: React.FC = () => { type="button" onClick={handleAddToCart} > - Добавить все в корзину + Добавить в корзину

* Продукты добавляются в корзину в минимальной фасовке, которая доступна @@ -182,6 +187,17 @@ const Recipe: React.FC = () => {

+ {width <= 768 && ( +
+

{recipeInfo.name}

+

+ + Время приготовления + {' '} + {`${recipeInfo.cooking_time} ${numeralizeWord}`} +

+
+ )} {
-

Инструкция приготовления

+

Инструкция по приготовлению

{recipeByLines.slice(2).map((line, index) => (

diff --git a/src/pages/recipe/recipe.module.scss b/src/pages/recipe/recipe.module.scss index b4feb160..1306d527 100644 --- a/src/pages/recipe/recipe.module.scss +++ b/src/pages/recipe/recipe.module.scss @@ -4,16 +4,40 @@ .recipes { font-family: $ubuntu-font; color: $active-text-color; + width: calc(100% - 20px * 2); + + @media screen and (width <= 768px) { + max-width: calc(100% - 20px * 2); + width: 100%; + margin: 0 auto; + } &__container { - max-width: 1024px; + max-width: calc(1024px - 40px * 2); margin: 0 auto; + + @media screen and (width <= 768px) { + width: calc(100% - 20px * 2); + max-width: 100%; + margin: 0 auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } } &__content { display: grid; grid-template-columns: 500px auto; column-gap: 107px; + + @media screen and (width <= 768px) { + width: 100%; + margin: 0 auto; + display: flex; + flex-direction: column-reverse; + } } &__info { @@ -24,11 +48,41 @@ grid-column: span 2; margin-top: 40px; } + + @media screen and (width <= 768px) { + max-width: 768px; + width: 100%; + display: flex; + flex-direction: column; + } } .ingredients { + @media screen and (width <= 768px) { + max-width: 100%; + } + &__title { margin-bottom: 16px; + + @media screen and (width <= 768px) { + font-size: 24px; + display: flex; + flex-direction: column; + margin-bottom: 8px; + } + } + + &__title_s { + @media screen and (width <= 768px) { + display: none; + } + } + + &__text_s { + @media screen and (width <= 768px) { + display: none; + } } &__text { @@ -38,14 +92,28 @@ font-weight: 400; line-height: 140%; + @media screen and (width <= 768px) { + font-size: 14px; + font-weight: 500; + } + &_black { font-size: 22px; font-weight: 500; + + @media screen and (width <= 768px) { + font-size: 12px; + font-weight: 400; + } } &_small { line-height: 140%; margin: 0; + + @media screen and (width <= 768px) { + font-size: 10px; + } } } @@ -77,6 +145,11 @@ font-weight: 500; line-height: 140%; margin-bottom: 17px; + + @media screen and (width <= 768px) { + font-size: 14px; + font-weight: 500; + } } &__list { @@ -88,6 +161,13 @@ &__item { margin: 0; margin-bottom: 25px; + + @media screen and (width <= 768px) { + font-size: 12px; + font-weight: 400; + line-height: 140%; + margin-bottom: 15px; + } } &__item:last-child {