Skip to content

Commit

Permalink
feat(recipe page): added adaptive of recipe page and popup
Browse files Browse the repository at this point in the history
  • Loading branch information
@mmariaiv @jsapro
mmariaiv authored and jsapro committed Jan 15, 2024
1 parent ef15780 commit 47dfc5d
Show file tree
Hide file tree
Showing 10 changed files with 334 additions and 36 deletions.
19 changes: 19 additions & 0 deletions src/components/energy-value/energy-value.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
22 changes: 22 additions & 0 deletions src/components/popups/popup-recipe/popup-recipe.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,36 @@
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 {
display: grid;
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;
}
}
}
24 changes: 24 additions & 0 deletions src/components/recipes-components/ingredients-list-popup/ingredients-list-popup.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -23,6 +33,10 @@
display: flex;
flex-direction: column;
gap: 24px;

@media screen and (width <= 768px) {
background-color: transparent;
}
}

&__item {
Expand All @@ -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;
}
}
}
44 changes: 44 additions & 0 deletions src/components/recipes-components/ingredients-list/ingredients-list.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,22 @@
font-family: $ubuntu-font;
color: $active-text-color;

@media screen and (width <= 768px) {
max-width: 100%;
width: 100%;
}

&__head {
margin: 0;
font-size: 24px;
font-weight: 700;
line-height: 140%;
padding: 8px 16px 16px;
border-bottom: solid 1px $unactive-text-color;

@media screen and (width <= 768px) {
font-size: 15px;
}
}

&__list {
Expand All @@ -29,17 +38,33 @@
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;
overflow: hidden;
border-radius: 16px;
cursor: pointer;

@media screen and (width <= 768px) {
max-width: 60px;
width: 40px;
height: 40px;
}

& > img {
width: 100%;
height: 100%;
Expand All @@ -52,12 +77,31 @@
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 {
font-size: 20px;
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;
}
}
65 changes: 35 additions & 30 deletions src/components/recipes-components/products-list-popup/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@ 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<RecipeIngredientsProps> = ({
ingredients,
handleClick,
}) => {
const [products, setProducts] = useState<ReceipeIngredient[]>(Array);
const { updateCart, error, reset, successText, cartUpdating } = useCart();

const { width } = useResize();
const filterProducts = (index: number) => {
setProducts((prev) => prev.filter((_, i) => i !== index));
};
Expand Down Expand Up @@ -65,43 +66,47 @@ const ProductsListPopup: React.FC<RecipeIngredientsProps> = ({
alt={product.name}
/>
</div>
<p
className={styles.product__name}
onClick={() => handleClick(product.id)}
>{`${product.name}, ${product.amount}${product.measure_unit}`}</p>
<div className={styles.popup__container}>
<p
className={styles.product__name}
onClick={() => handleClick(product.id)}
>{`${product.name}`}</p>

<div className={clsx(styles.product__counter, styles.counter)}>
<button
className={styles.counter__button}
onClick={() =>
product.need_to_buy && changeAmount(index)(product.need_to_buy - 1)
}
>
<img src={minusIcon} alt="минус" />
</button>
<p className={styles.counter__value}>{product.need_to_buy}</p>
<button
className={styles.counter__button}
onClick={() =>
product.need_to_buy && changeAmount(index)(product.need_to_buy + 1)
}
>
<img src={plusIcon} alt="плюс" />
</button>
<div className={clsx(styles.product__counter, styles.counter)}>
<button
className={styles.counter__button}
onClick={() =>
product.need_to_buy && changeAmount(index)(product.need_to_buy - 1)
}
>
<img src={minusIcon} alt="минус" />
</button>
<p className={styles.counter__value}>{product.need_to_buy}</p>
<button
className={styles.counter__button}
onClick={() =>
product.need_to_buy && changeAmount(index)(product.need_to_buy + 1)
}
>
<img src={plusIcon} alt="плюс" />
</button>
</div>
</div>

{product.final_price && product.need_to_buy && (
<p className={styles.product__price}>{`${
product.final_price * product.need_to_buy
} руб.`}</p>
)}
<button
onClick={() => filterProducts(index)}
className={styles.product__delete}
type="button"
>
<img src={closeIcon} alt="удалить" />
</button>
{width >= 768 && (
<button
onClick={() => filterProducts(index)}
className={styles.product__delete}
type="button"
>
<img src={closeIcon} alt="удалить" />
</button>
)}
</li>
))}
</ul>
Expand Down
34 changes: 34 additions & 0 deletions src/components/recipes-components/products-list-popup/products-list-popup.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand All @@ -131,3 +159,9 @@
padding: 0;
}
}

.popup__container {
display: flex;
flex-direction: column;
gap: 4px;
}
Loading

0 comments on commit 47dfc5d

Please sign in to comment.