fix(recipe_page): fixed an adaptive for the recipe-page between 768 a…

…nd 1024 px
healthy-food-and-dietary-products · Jan 16, 2024 · 2c9aede · 2c9aede
1 parent 707fd57
commit 2c9aede
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 11 deletions.
diff --git a/src/components/energy-value/energy-value.module.scss b/src/components/energy-value/energy-value.module.scss
@@ -36,7 +36,7 @@
 	}
 }
 
-@media screen and (width <= 768px) {
+@media screen and (width <= 1024px) {
 	.energy-value {
 		width: calc(100% - 16px);
 		max-width: 100%;

diff --git a/src/components/recipes-components/ingredients-list-popup/index.tsx b/src/components/recipes-components/ingredients-list-popup/index.tsx
@@ -17,7 +17,7 @@ const IngredientsListPopup: React.FC<RecipeIngredientsProps> = ({
 								onClick={() => handleClick(ingredient.id)}
 								className={styles['popup-ingredients__name']}
 							>
-								{ingredient?.name}
+								{`${ingredient?.name}`}
 							</span>
 							<span className={styles['popup-ingredients__weight']}>
 								{ingredient.quantity_in_recipe_measure}

diff --git a/src/components/recipes-components/ingredients-list/index.tsx b/src/components/recipes-components/ingredients-list/index.tsx
@@ -33,7 +33,7 @@ const IngredientsList: React.FC<RecipeIngredientsProps> = ({
 						<p
 							onClick={() => handleClick(ingredient.id)}
 							className={styles.ingredient__name}
-						>{`${ingredient.name}, ${ingredient.amount + ingredient.measure_unit}`}</p>
+						>{`${ingredient.name}`}</p>
 						<p className={styles.ingredient__weight}>
 							{ingredient.quantity_in_recipe_measure}
 						</p>

diff --git a/src/components/recipes-components/ingredients-list/ingredients-list.module.scss b/src/components/recipes-components/ingredients-list/ingredients-list.module.scss
@@ -7,7 +7,7 @@
 	font-family: $ubuntu-font;
 	color: $active-text-color;
 
-	@media screen and (width <= 768px) {
+	@media screen and (width <= 1024px) {
 		max-width: 100%;
 		width: 100%;
 	}
@@ -39,7 +39,7 @@
 		grid-column: span 3;
 		padding: 8px 0;
 
-		@media screen and (width <= 768px) {
+		@media screen and (width <= 1024px) {
 			// width: 100%;
 			display: flex;
 			justify-content: space-between;
@@ -48,7 +48,7 @@
 }
 
 .ingredient {
-	@media screen and (width <= 768px) {
+	@media screen and (width <= 1024px) {
 		width: 100%;
 	}
 
@@ -99,9 +99,12 @@
 	}
 }
 
-@media screen and (width <= 768px) {
+@media screen and (width <= 1024px) {
 	.ingredients__list {
+		display: flex;
+		flex-direction: column;
 		gap: 16px;
-		margin: 8px;
+		padding: 8px;
+		margin: 0;
 	}
 }
diff --git a/src/components/recipes-components/products-list-popup/index.tsx b/src/components/recipes-components/products-list-popup/index.tsx
@@ -70,7 +70,7 @@ const ProductsListPopup: React.FC<RecipeIngredientsProps> = ({
 								<p
 									className={styles.product__name}
 									onClick={() => handleClick(product.id)}
-								>{`${product.name}`}</p>
+								>{`${product.name}, ${product.amount + product.measure_unit}`}</p>
 
 								<div className={clsx(styles.product__counter, styles.counter)}>
 									<button

diff --git a/src/pages/recipe/recipe.module.scss b/src/pages/recipe/recipe.module.scss
@@ -5,17 +5,23 @@
 	font-family: $ubuntu-font;
 	color: $active-text-color;
 	width: calc(100% - 20px * 2);
+	margin: 0 auto;
 
 	@media screen and (width <= 768px) {
-		max-width: calc(100% - 20px * 2);
+		max-width: 100%;
 		width: 100%;
 		margin: 0 auto;
 	}
 
 	&__container {
-		max-width: calc(1024px - 40px * 2);
+		max-width: calc(1024px - 20px * 2);
 		margin: 0 auto;
 
+		@media screen and (width <= 1024px) {
+			width: calc(100% - 20px * 2);
+			margin: 0 auto;
+		}
+
 		@media screen and (width <= 768px) {
 			width: calc(100% - 20px * 2);
 			max-width: 100%;
@@ -32,6 +38,11 @@
 		grid-template-columns: 500px auto;
 		column-gap: 107px;
 
+		@media screen and (width <= 1024px) {
+			column-gap: 15px;
+			grid-template-columns: 2fr 1fr;
+		}
+
 		@media screen and (width <= 768px) {
 			width: 100%;
 			margin: 0 auto;