feat: cart styles

stardustmeg · Jun 11, 2024 · e9a198b · e9a198b
1 parent f5bc7a5
commit e9a198b
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 9 deletions.
diff --git a/src/entities/Coupon/view/couponView.module.scss b/src/entities/Coupon/view/couponView.module.scss
@@ -34,4 +34,8 @@
   font: var(--regular-font);
   color: var(--noble-gray-800);
   transition: all 0.2s;
+
+  @media (max-width: 768px) {
+    color: var(--noble-gray-1100);
+  }
 }
diff --git a/src/entities/Summary/view/summaryView.module.scss b/src/entities/Summary/view/summaryView.module.scss
@@ -26,6 +26,10 @@
   font: var(--regular-font);
   color: var(--noble-gray-800);
   transition: all 0.2s;
+
+  @media (max-width: 768px) {
+    color: var(--noble-gray-1100);
+  }
 }
 
 .couponsWrap:not(:empty)::after {

diff --git a/src/pages/CartPage/view/CartPageView.ts b/src/pages/CartPage/view/CartPageView.ts
@@ -128,6 +128,7 @@ class CartPageView {
   }
 
   private addTableHeader(): void {
+    const productsWrap = createBaseElement({ cssClasses: [styles.productsWrap], tag: 'div' });
     this.table = createBaseElement({ cssClasses: [styles.table], tag: 'table' });
     const thead = createBaseElement({ cssClasses: [styles.thead, styles.head], tag: 'thead' });
     const tr = createBaseElement({ cssClasses: [styles.tr, styles.head], tag: 'tr' });
@@ -161,10 +162,12 @@ class CartPageView {
     this.table.append(thead, this.tableBody);
     thead.append(tr);
     tr.append(thImage, thProduct, thPrice, thQuantity, thTotal, thDelete);
-    this.productWrap.append(this.table);
+    productsWrap.append(this.table);
+    this.productWrap.append(productsWrap);
   }
 
   private addTotalInfo(): void {
+    const totalBlockWrap = createBaseElement({ cssClasses: [styles.totalsWrap], tag: 'div' });
     const title = createBaseElement({
       cssClasses: [styles.totalTitle, styles.border, styles.mobileHide],
       innerContent: TITLE.CART_TOTAL[this.language],
@@ -189,19 +192,19 @@ class CartPageView {
     this.textElement.push({ element: finalButton, textItem: TITLE.BUTTON_CHECKOUT });
     const continueLink = this.createCatalogLinkHTML();
     continueLink.getHTML().classList.add(styles.mobileHide);
-    this.totalWrap.append(
+    totalBlockWrap.append(
       title,
       couponTitle,
       couponWrap,
       this.productCouponSummary.getHTML(),
       subtotalWrap,
-
       this.cartCouponSummary.getHTML(),
       discountWrap,
       totalWrap,
       finalButton,
       continueLink.getHTML(),
     );
+    this.totalWrap.append(totalBlockWrap);
   }
 
   private createCatalogLinkHTML(): LinkModel {

diff --git a/src/pages/CartPage/view/cartPageView.module.scss b/src/pages/CartPage/view/cartPageView.module.scss
@@ -3,8 +3,6 @@
 .cartPage {
   display: flex;
   flex-grow: 1;
-  overflow: hidden;
-  padding: 0 var(--small-offset);
   animation: show 0.2s ease-out forwards;
   gap: 2%;
 
@@ -33,19 +31,22 @@
 }
 
 .total {
+  position: sticky;
+  top: calc(var(--extra-small-offset) * 3.5);
   flex-shrink: 1;
+  height: max-content;
 
   @media (max-width: 768px) {
     position: sticky;
     left: 0;
     bottom: 0;
     z-index: 100;
+    margin: 0 var(--small-offset);
     margin-bottom: var(--tiny-offset);
     border-radius: var(--large-br);
     padding: var(--small-offset);
-    width: 100%;
     box-shadow: var(--mellow-shadow-700);
-    background-color: var(--white-tr);
+    background-color: var(--noble-gray-1000);
     backdrop-filter: blur(10px);
   }
 }
@@ -55,7 +56,14 @@
 }
 
 .thead {
+  position: sticky;
+  top: calc(var(--extra-small-offset) * 3.5);
   width: 100%;
+  background: var(--noble-white-100);
+
+  @media (max-width: 768px) {
+    position: static;
+  }
 }
 
 .mainText {
@@ -101,6 +109,10 @@
   padding: var(--tiny-offset) 0;
   font: var(--bold-font);
   color: var(--noble-gray-800);
+
+  @media (max-width: 768px) {
+    color: var(--noble-gray-1100);
+  }
 }
 
 .border {
@@ -112,6 +124,10 @@
   font: var(--regular-font);
   color: var(--noble-gray-800);
   transition: all 0.2s;
+
+  @media (max-width: 768px) {
+    color: var(--noble-gray-1100);
+  }
 }
 
 .totalWrap {
@@ -264,3 +280,22 @@ $color: var(--steam-green-800);
   display: flex;
   align-items: center;
 }
+
+.productsWrap {
+  padding-left: var(--small-offset);
+
+  @media (max-width: 768px) {
+    overflow: hidden;
+    padding: 0 var(--small-offset);
+  }
+}
+
+.totalsWrap {
+  display: flex;
+  flex-direction: column;
+  padding-right: var(--small-offset);
+
+  @media (max-width: 768px) {
+    padding: 0;
+  }
+}
diff --git a/src/widgets/ProductOrder/view/productOrderView.module.scss b/src/widgets/ProductOrder/view/productOrderView.module.scss
@@ -18,11 +18,11 @@
 }
 
 .swipeRow {
-  transform: translateX(calc(var(--extra-large-offset) * -1));
+  transform: translateX(-25%);
 }
 
 .swipeDelete {
-  transform: translateX(calc(var(--extra-large-offset) * 1.5));
+  transform: translateX(85%);
 }
 
 .deleteCell {