Adaptive have been added

mate-academy · Aug 6, 2023 · 40d3874 · 40d3874
1 parent f4a634f
commit 40d3874
Show file tree

Hide file tree

Showing 18 changed files with 508 additions and 80 deletions.
diff --git a/src/pages/CardPage.tsx b/src/pages/CardPage.tsx
@@ -19,43 +19,48 @@ export const CardPage: FC = () => {
 
   return (
     <div className="card-page">
-      {popUpState && (<PopUp setPopUpState={setPopUpState} />)}
+      <div className="card-page__container">
+        {popUpState && (<PopUp setPopUpState={setPopUpState} />)}
 
-      <Link className="card-page__back-link" to="..">
-        <img
-          className="card-page__back-link--img"
-          src="images/icons/ArrowLeft.svg"
-          alt="Back-button"
-        />
-        Back
-      </Link>
-      <h1 className="card-page__title">Cart</h1>
-      {cardedPhones.length < 0 ? (
-        <h1 className="info-messages">Add something to card...</h1>
-      ) : (
-        <div className="card-page__order-content order-content">
-          <ul className="order-content__list-ored">
-            {cardedPhones.map(card => (
-              <li className="order-content__item-ored item-ored" key={card.id}>
-                <CardedProduct
-                  card={card}
-                />
-              </li>
-            ))}
-          </ul>
-          <div className="order-content__checkout-block checkout-block">
-            <p className="checkout-block__total-price-amout">{`$${cardedPhones.reduce((a, i) => a + (i.amount * i.value.price), 0)}`}</p>
-            <p className="checkout-block__total-items-amout">{`Total for ${cardedPhones.reduce((a, i) => a + i.amount, 0)} items`}</p>
-            <button
-              type="button"
-              className="checkout-block__checkout-button"
-              onClick={() => handlePopUp()}
-            >
-              Checkout
-            </button>
+        <Link className="card-page__back-link" to="..">
+          <img
+            className="card-page__back-link--img"
+            src="images/icons/ArrowLeft.svg"
+            alt="Back-button"
+          />
+          Back
+        </Link>
+        <h1 className="card-page__title">Cart</h1>
+        {cardedPhones.length < 0 ? (
+          <h1 className="info-messages">Add something to card...</h1>
+        ) : (
+          <div className="card-page__order-content order-content">
+            <ul className="order-content__list-ored">
+              {cardedPhones.map(card => (
+                <li
+                  className="order-content__item-ored item-ored"
+                  key={card.id}
+                >
+                  <CardedProduct
+                    card={card}
+                  />
+                </li>
+              ))}
+            </ul>
+            <div className="order-content__checkout-block checkout-block">
+              <p className="checkout-block__total-price-amout">{`$${cardedPhones.reduce((a, i) => a + (i.amount * i.value.price), 0)}`}</p>
+              <p className="checkout-block__total-items-amout">{`Total for ${cardedPhones.reduce((a, i) => a + i.amount, 0)} items`}</p>
+              <button
+                type="button"
+                className="checkout-block__checkout-button"
+                onClick={() => handlePopUp()}
+              >
+                Checkout
+              </button>
+            </div>
           </div>
-        </div>
-      )}
+        )}
+      </div>
     </div>
   );
 };
diff --git a/src/pages/FavoritesPage.tsx b/src/pages/FavoritesPage.tsx
@@ -15,12 +15,14 @@ export const FavoritesPage: FC = () => {
 
   return (
     <div className="favorites-page">
-      <Breadcrumbs />
-      <h1 className="favorites-page__title">Favourites</h1>
-      <p className="favorites-page__items-amount">
-        {`${favoritesPhones.length} items`}
-      </p>
-      <ProductsList products={phonesSearched} />
+      <div className="container-favorite-page">
+        <Breadcrumbs />
+        <h1 className="favorites-page__title">Favourites</h1>
+        <p className="favorites-page__items-amount">
+          {`${favoritesPhones.length} items`}
+        </p>
+        <ProductsList products={phonesSearched} />
+      </div>
     </div>
   );
 };
diff --git a/src/pages/ProductDetailsPage.tsx b/src/pages/ProductDetailsPage.tsx
@@ -251,7 +251,16 @@ export const ProductDetailsPage: FC = () => {
                 <dt className="tech-specs-list--title">Zoom</dt>
                 <dd className="tech-specs-list--value">{phoneDetails.zoom}</dd>
                 <dt className="tech-specs-list--title">Cell</dt>
-                <dd className="tech-specs-list--value">{phoneDetails.cell}</dd>
+                <dd className="tech-specs-list--value">
+                  {
+                    phoneDetails.cell.map((item, index) => (
+                      <p key={item} className="tech-specs-list--value-cell">
+                        {`${item}${index !== phoneDetails.cell.length - 1 ? ',' : ''}`}
+                      </p>
+                    ))
+                  }
+
+                </dd>
               </dl>
             </article>
           </section>

diff --git a/src/pages/components/CardedProduct.tsx b/src/pages/components/CardedProduct.tsx
@@ -37,40 +37,44 @@ export const CardedProduct: FC<Props> = ({
 
   return (
     <>
-      <button
-        className="item-ored__delete-button"
-        type="button"
-        onClick={() => handleUnsetProduct()}
-      >
+      <div className="img-container">
+        <button
+          className="item-ored__delete-button"
+          type="button"
+          onClick={() => handleUnsetProduct()}
+        >
+          <img
+            className="item-ored__delete-button--icon"
+            src="images/icons/CloseButton.svg"
+            alt="Close"
+          />
+        </button>
         <img
-          className="item-ored__delete-button--icon"
-          src="images/icons/CloseButton.svg"
-          alt="Close"
+          className="item-ored__product-img"
+          src={card.value.image || card.value.imageUrl}
+          alt="Phone"
         />
-      </button>
-      <img
-        className="item-ored__product-img"
-        src={card.value.image || card.value.imageUrl}
-        alt="Phone"
-      />
+      </div>
       <h2 className="item-ored__product-name">
         {card.value.name}
       </h2>
-      <button
-        className="item-ored__product-count-deg"
-        type="button"
-        onClick={() => handleCounter('decrease')}
-      >
-        -
-      </button>
-      <p className="item-ored__count-value">{card.amount}</p>
-      <button
-        type="button"
-        className="item-ored__product-count-inc"
-        onClick={() => handleCounter('increase')}
-      >
-        +
-      </button>
+      <div className="count-container">
+        <button
+          className="item-ored__product-count-deg"
+          type="button"
+          onClick={() => handleCounter('decrease')}
+        >
+          -
+        </button>
+        <p className="item-ored__count-value">{card.amount}</p>
+        <button
+          type="button"
+          className="item-ored__product-count-inc"
+          onClick={() => handleCounter('increase')}
+        >
+          +
+        </button>
+      </div>
       <p className="item-ored__price-product">{`$${card.value.price}`}</p>
     </>
   );

diff --git a/src/pages/components/Footer.tsx b/src/pages/components/Footer.tsx
@@ -21,8 +21,19 @@ export const Footer: FC = () => {
           <img src="images/logo.jpg" alt="Logo" />
         </Link>
         <div className="footer__container">
-          <Link to="/" className="footer__link">Github</Link>
-          <Link to="/" className="footer__link">Contacts</Link>
+          <Link
+            to="https://github.com/MykolaButylkov/react_phone-catalog"
+            className="footer__link"
+            target="_blank"
+          >
+            Github
+          </Link>
+          <Link
+            to="mailto:mykola.butylkov@gmail.com"
+            className="footer__link"
+          >
+            Contacts
+          </Link>
           <Link to="/" className="footer__link">rights</Link>
         </div>
         <button

diff --git a/src/pages/components/Header.tsx b/src/pages/components/Header.tsx
@@ -24,9 +24,9 @@ export const Header: FC = () => {
 
   useEffect(() => {
     if (isBurgerMenu) {
-      document.body.style.overflow = 'hidden'; // Disable scrolling
+      document.body.style.overflow = 'hidden';
     } else {
-      document.body.style.overflow = 'auto'; // Enable scrolling
+      document.body.style.overflow = 'auto';
     }
   }, [isBurgerMenu]);
 

diff --git a/src/styles/blocks/burger-menu.scss b/src/styles/blocks/burger-menu.scss
@@ -60,5 +60,9 @@
     line-height: 22px; /* 91.667% */
     letter-spacing: 0.48px;
     text-transform: uppercase;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 }
diff --git a/src/styles/blocks/card-page-media.scss b/src/styles/blocks/card-page-media.scss
@@ -0,0 +1,90 @@
+@include desktop() {
+  .card-page {
+    @include paddingInline($paddingLaptop);
+    width: $breakpoint__l;
+  }
+  .order-content__item-ored {
+    width: 602px;
+  }
+  .order-content__checkout-block {
+    width: 298px;
+  }
+  .checkout-block__checkout-button {
+    width: 90%;
+  }
+}
+@include laptop() {
+  .card-page {
+    @include paddingInline(0);
+    width: $breakpoint__m;
+  }
+  .order-content__item-ored {
+    width: 513px;
+    height: 100px;
+  }
+  .order-content__checkout-block {
+    width: 234px;
+  }
+  .checkout-block__checkout-button {
+    width: 90%;
+  }
+  .item-ored__product-img {
+    margin-left: 15px;
+  }
+  .item-ored__delete-button {
+    margin-left: 15px;
+  }
+  .item-ored__product-name {
+    margin-left: 20px;
+    width: 178px;
+  }
+  .item-ored__price-product {
+    margin-inline: 21px 20px;
+  }
+}
+@include tablet() {
+  .card-page {
+    @include paddingInline(10);
+    @include width($breakpoint__s);
+  }
+  .card-page__order-content {
+    flex-direction: column;
+  }
+  .order-content__item-ored {
+    width: 100%;
+  }
+  .order-content__checkout-block {
+    width: 100%;
+  }
+}
+@include mobile() {
+  .card-page {
+    @include paddingInline(10);
+    @include width($breakpoint__sx);
+  }
+  .order-content__item-ored {
+    flex-direction: column;
+    height: 328px;
+    justify-content: center;
+    gap: 10px;
+    padding-top: 10px;
+  }
+  .item-ored__product-name {
+    margin-left: 49px;
+  }
+  .img-container {
+    flex-direction: row-reverse;
+    gap: 10px;
+  }
+  .item-ored__product-img {
+    margin-top: 30px;
+    width: 100px;
+    height: 100px;
+  }
+  .item-ored__product-name {
+    margin-block: 5px;
+  }
+  .item-ored__price-product {
+    margin-block: 5px;
+  }
+}
diff --git a/src/styles/blocks/cart-page.scss b/src/styles/blocks/cart-page.scss
@@ -1,7 +1,8 @@
 .card-page {
   @include pageMaxWidth;
+  width: 1440px;
+  margin: auto;
   padding-block: 40px 87px;
-  margin: 0;
   flex-grow: 1;
   &__back-link {
     display: flex;
@@ -113,6 +114,13 @@
   }
 }
 
+.count-container {
+  display: flex;
+  align-items: center;
+}
+.img-container {
+  display: flex;
+}
 .checkout-block {
   &__total-price-amout {
     margin: 0;
@@ -128,7 +136,7 @@
   }
   &__total-items-amout {
     box-sizing: border-box;
-    width: 321px;
+    width: 90%;
     margin: 0;
     padding-bottom: 24px;
     margin-bottom: 24px;

diff --git a/src/styles/blocks/favorites-page-media.scss b/src/styles/blocks/favorites-page-media.scss
@@ -0,0 +1,24 @@
+@include desktop() {
+  .favorites-page {
+    @include paddingInline($paddingLaptop);
+    width: $breakpoint__l;
+  }
+}
+@include laptop() {
+  .favorites-page {
+    @include paddingInline(0);
+    width: $breakpoint__m;
+  }
+}
+@include tablet() {
+  .favorites-page {
+    @include paddingInline(10);
+    @include width($breakpoint__s);
+  }
+}
+@include mobile() {
+  .favorites-page {
+    @include paddingInline(10);
+    @include width($breakpoint__sx);
+  }
+}