reza added mobile cart

src/views/Cart/Item/index.js

@@ -30,57 +30,58 @@ export default function Item(props) {
   const { data, handleCounter, handleDelete } = props;
   return (
     <tr className="cart-item d-flex align-items-center">
-      <td className="cart-item__info d-flex">
+        <td className="cart-item__info d-flex">
-        <img src={data.image} alt={data.title} />
+          <img src={data.image} alt={data.title} />
-        <div className="d-flex flex-column justify-content-center">
+          <div className="d-flex flex-column justify-content-center">
-          <strong style={{ fontSize: fontSize.desktop.info.strong }}>
+            <strong style={{ fontSize: fontSize.desktop.info.strong }}>
-            {data.title}
+              {data.title}
-          </strong>
+            </strong>
-          <p style={{ fontSize: fontSize.desktop.info.p }}>{data.subTitle}</p>
+            <p style={{ fontSize: fontSize.desktop.info.p }}>{data.subTitle}</p>
-          <span style={{ fontSize: fontSize.desktop.info.span }}>
+            <span style={{ fontSize: fontSize.desktop.info.span }}>
-            {data.options}بسته الحاقی:
+              {data.options}بسته الحاقی:
-          </span>
+            </span>
-        </div>
+          </div>
-      </td>
+        </td>
-      <td className="cart-item__price d-flex flex-column justify-content-center align-items-center">
+        <td className="cart-item__price d-flex flex-column justify-content-center align-items-center">
-        <strong style={{ fontSize: fontSize.desktop.price.strong }}>
+            <strong style={{ fontSize: fontSize.desktop.price.strong }}>
-          {data.price} تومان
+              {data.price} تومان
-        </strong>
+            </strong>
-        <span style={{ fontSize: fontSize.desktop.price.span }}>
+            <span style={{ fontSize: fontSize.desktop.price.span }}>
-          {data.slicePrice} قیمت هر واحد
+              {data.slicePrice} قیمت هر واحد
-        </span>
+            </span>
-      </td>
+        </td>
-      <td className="cart-item__counter d-flex align-items-center">
+        <td className="cart-item__counter d-flex align-items-center">
-        <div className="cart-item__counter--box d-flex justify-content-around align-items-center">
+            <div className="cart-item__counter--box d-flex justify-content-around align-items-center">
-          <button
+              <button
-            onClick={() => handleCounter("increase", data.id)}
+                onClick={() => handleCounter("increase", data.id)}
-            style={{ fontSize: fontSize.desktop.counter.button }}
+                style={{ fontSize: fontSize.desktop.counter.button }}
-          >
+              >
-            +
+                +
-          </button>
+              </button>
-          <span style={{ fontSize: fontSize.desktop.counter.span }}>
+              <span style={{ fontSize: fontSize.desktop.counter.span }}>
-            {data.number}
+                {data.number}
-          </span>
+              </span>
-          <button
+              <button
-            onClick={() => data.number > 1 ? handleCounter("decrease", data.id) : handleDelete(data.id)}
+                onClick={() => data.number > 1 ? handleCounter("decrease", data.id) : handleDelete(data.id)}
-            style={{ fontSize: fontSize.desktop.counter.button }}
+                style={{ fontSize: fontSize.desktop.counter.button }}
-          >
+              >
-            -
+                -
-          </button>
+              </button>
-        </div>
+            </div>
-      </td>
+        </td>
-      <td className="cart-item__delete d-flex align-items-center justify-content-center">
+        <td className="cart-item__delete d-flex align-items-center justify-content-center">
-        <DeleteOutlineOutlinedIcon
+            <DeleteOutlineOutlinedIcon
-          style={{ color: "#FC120A", fontSize: 30, marginLeft: 5 }}
+              style={{ color: "#FC120A", fontSize: 30, marginLeft: 5 }}
-          onClick={() => handleDelete(data.id)}
+              onClick={() => handleDelete(data.id)}
-        />
+            />
-        <span
+            <span
-          onClick={() => handleDelete(data.id)}
+              onClick={() => handleDelete(data.id)}
-          style={{ fontSize: fontSize.desktop.delete.span }}
+              style={{ fontSize: fontSize.desktop.delete.span }}
-        >
+            >
-          حذف
+              حذف
-        </span>
+            </span>
-      </td>
+        </td>
+      
     </tr>
   );
 }

src/views/Cart/Item/index.scss

@@ -1,8 +1,10 @@
 .cart-item{
-  justify-content: space-between;
+  // justify-content: space-between;
   border-top: 1px solid #eee;
   padding: 15px 0px;
   &__info{
+    flex: 3;
+    // flex-shrink: 1;
     img{
       height: 100px;
       border-radius: 10px;
@@ -27,6 +29,8 @@
     }
   }
   &__price{
+    flex: 1.5;
+    flex-shrink: 1;
     color: #4D4D4F;
     strong{
       font-family: numeralBold;
@@ -36,6 +40,9 @@
     }
   }
   &__counter{
+    flex: 1.5;
+    flex-shrink: 1;
+    justify-content:  center;
     &--box{
       padding: 5px 10px;
       border: 1px solid rgb(177, 177, 177);
@@ -54,6 +61,7 @@
     
   }
   &__delete{
+    flex: 1;
     margin-left: 20px;
     span{
       font-family: numeralLight;

src/views/Cart/Table/index.js

@@ -0,0 +1,144 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Paper from '@material-ui/core/Paper';
+import DeleteOutlineOutlinedIcon from "@material-ui/icons/DeleteOutlineOutlined";
+
+import './index.scss';
+const useStyles = makeStyles({
+  table: {
+  },
+});
+
+const maxMobileSize = 550;
+
+const fontSize = {
+  mobile: {
+    info: {
+      strong: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 28,
+      p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36,
+      span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36,
+    },
+    price: {
+      strong: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 22,
+      span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 40,
+    },
+    counter: {
+      button: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 25,
+      span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 25,
+    },
+    delete: {
+      span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 28,
+    },
+  },
+};
+
+
+
+export default function BasicTable(props) {
+  const classes = useStyles();
+  const {list, handleCounter, handleDelete} = props;
+
+  return (
+    <>
+      {
+        window.innerWidth < 1000 ?
+        <TableContainer component={Paper}>
+          <Table className={classes.table} aria-label="simple table">
+            <TableHead>
+              <TableRow>
+                <TableCell align="right">محصولات</TableCell>
+                <TableCell align="center">قیمت</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              { list.map((row,i) => (
+                <Item data={row} key={i} handleCounter={handleCounter} handleDelete={handleDelete} />
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer> : null 
+      }
+    </>
+    
+  );
+}
+
+// id: 1,
+// title: "ریاضیات گسسته خیلی پیشرفته",
+// subTitle: "در این قسمت توضیح بسیار کوتاهی قرار می گیرد",
+// options: "بسته‌های الحاقی: کیف، کفش و کوله پشتی",
+// image: book1,
+// slicePrice: 300000,
+// number: 1,
+// price: 2500000,
+
+const Item = (props) => {
+  const {data, handleCounter, handleDelete} = props;
+  return(
+    <TableRow key={data.name}>
+      <TableCell align="right" component="th" scope="row">
+        <div className="mobile-cart-table-product d-flex align-items-center">
+          
+          <img src={data.image} alt={data.title} />
+          <div className="mobile-cart-table-product__info d-flex flex-column p-1">
+            <strong style={{ fontSize: fontSize.mobile.info.strong }}>
+              {data.title}
+            </strong>
+            <p style={{ fontSize: fontSize.mobile.info.p }}>{data.subTitle}</p>
+            <span style={{ fontSize: fontSize.mobile.info.span }}>
+              {data.options}
+            </span>
+            <div className="cart-item__delete d-flex align-items-center justify-content-center">
+              <DeleteOutlineOutlinedIcon
+                style={{ color: "#FC120A", fontSize: 30, marginLeft: 5 }}
+                onClick={() => handleDelete(data.id)}
+              />
+              <span
+                onClick={() => handleDelete(data.id)}
+                style={{ fontSize: fontSize.mobile.delete.span, color: "#FC120A"}}
+              >
+                حذف
+            </span>
+          </div>
+          </div>
+        </div>
+      </TableCell>
+      <TableCell>
+        <div className="mobile-cart-table-price d-flex flex-column align-items-center">
+          <div className="mobile-cart-table-price__price d-flex flex-column justify-content-center align-items-center">
+              <strong style={{ fontSize: fontSize.mobile.price.strong }}>
+                {data.price}
+              </strong>
+              <span style={{ fontSize: fontSize.mobile.price.span }}>
+                {data.slicePrice} قیمت هر واحد
+              </span>
+          </div>
+          <div className="mobile-cart-table-price__counter d-flex justify-content-around align-items-center">
+            <button
+              onClick={() => handleCounter("increase", data.id)}
+              style={{ fontSize: fontSize.mobile.counter.button }}
+            >
+              +
+            </button>
+            <span style={{ fontSize: fontSize.mobile.counter.span }}>
+              {data.number}
+            </span>
+            <button
+              onClick={() => data.number > 1 ? handleCounter("decrease", data.id) : handleDelete(data.id)}
+              style={{ fontSize: fontSize.mobile.counter.button }}
+            >
+              -
+            </button>
+          </div>
+        </div>
+            
+      </TableCell>
+    </TableRow>
+  );
+}

src/views/Cart/Table/index.scss

@@ -0,0 +1,68 @@
+.mobile-cart-table-product{
+  width: 100%;
+  img{
+    height: 100px;
+    width: 70px;
+    border-radius: 10px;
+  }
+  &__info{
+    strong, p , span{
+      margin: 0px;
+      font-family: numeralLight;
+    }
+    p{
+      color: #00CC69;
+    }
+    span{
+      color: #2580EC;
+    }
+  }
+}
+
+.mobile-cart-table-price{
+  text-align: center;
+  &__price{
+    strong, span{
+      font-family: numeralLight;
+    }
+    strong{
+      color: #4D4D4F;
+    }
+    span{
+      color: #4D4D4F;
+      letter-spacing: -1px;
+    }
+  }
+  &__info{
+    strong, p , span{
+      margin: 0px;
+      font-family: numeralLight;
+    }
+    p{
+      color: #00CC69;
+    }
+    span{
+      color: #2580EC;
+    }
+  }
+  &__counter{
+    padding: 5px 5px;
+    border: 1px solid rgb(177, 177, 177);
+    border-radius: 8px;
+    margin-top: 10px;
+    button{
+      border: 0px;
+      background-color: white;
+      color: #4D4D4F;
+    }
+    span{
+      margin: 0px 15px;
+      color: #4D4D4F;
+
+    }
+  }
+}
+
+.MuiTableCell-root{
+  padding: 10px 0px !important;
+}

src/views/Cart/index.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import Navbar from "../Home/Navbar/index";
 import Footer from "../Home/Footer/index";
 import Item from "./Item/index";
+import Table from "./Table/index";
 
 import book1 from "../../assets/images/book1.png";
 
@@ -18,6 +19,9 @@ const fontSize = {
     strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
     span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95,
   },
+  mobile: {
+    h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 18,
+  }
 };
 export default class Cart extends Component {
   state = {
@@ -25,9 +29,9 @@ export default class Cart extends Component {
     list: [
       {
         id: 0,
-        title: "ریاضیات گسسته خیلی پیشرفته",
+        title: " گسسته ",
-        subTitle: "در این قسمت توضیح بسیار کوتاهی قرار می گیرد",
+        subTitle: " گیرد",
-        options: "بسته‌های الحاقی: کیف، کفش و کوله پشتی",
+        options: "بپشتی",
         image: book1,
         slicePrice: 200000,
         number: 1,
@@ -91,6 +95,18 @@ export default class Cart extends Component {
                     <h1 style={{ fontSize: fontSize.desktop.h1 }}>سبد خرید</h1>
                   </header>
                   <table>
+                    <thead>
+                      <tr>
+                        <div className="d-flex align-items-center">
+                        <th style={{ flex: 3, textAlign: 'center'}}>1</th>
+                        <th style={{ flex: 1.5, textAlign: 'center' }}>2</th>
+                        <th style={{ flex: 1.5, textAlign: 'center'}}>3</th>
+                        <th style={{ flex: 1, textAlign: 'center'}}>4</th>
+                        </div>
+                      </tr>
+                    </thead>
+                    <tbody>
+              
                     {this.state.list.map((item, i) => (
                       <Item
                         handleDelete={this.handleDelete}
@@ -99,6 +115,7 @@ export default class Cart extends Component {
                         key={i}
                       />
                     ))}
+                    </tbody>
                   </table>
                   {this.state.totalPrice ? (
                     <div className="cart__right--price d-flex justify-content-end">
@@ -127,7 +144,21 @@ export default class Cart extends Component {
             <Footer />
           </>
         ) : null}
+        {
+          window.innerWidth < 1000 ?
+          <div className="mobile-cart d-flex flex-column">
+            <Navbar />
+            <h1 style={{ fontSize: fontSize.mobile.h1 }}>سبد خرید</h1>
+            <div className="d-flex">
+              <Table list={this.state.list} handleCounter={this.handleCounter} handleDelete={this.handleDelete} />
+            </div>
+            
+
+          </div> : null
+        }
+
       </>
+
     );
   }
 }

src/views/Cart/index.scss

@@ -67,3 +67,17 @@
     }
   }
 }
+
+.mobile-cart{
+  width: 100vw;
+  max-width: 650px;
+  margin: 0px auto;
+  padding : 0px 10px 40px;
+  direction: rtl;
+  padding-top: 60px;
+  overflow-x: hidden;
+  h1{
+    font-family: numeralBold;
+    color: #373737;
+  }
+}