Danovin
/
danovin
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reza added mobile cart

Browse Source
master
ravino 3 years ago
parent bcebb1ba33
commit a6aee96c79
6 changed files with 321 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 103
      src/views/Cart/Item/index.js
  2. 10
      src/views/Cart/Item/index.scss
  3. 144
      src/views/Cart/Table/index.js
  4. 68
      src/views/Cart/Table/index.scss
  5. 37
      src/views/Cart/index.js
  6. 14
      src/views/Cart/index.scss

103
src/views/Cart/Item/index.js
Unescape View File

@ -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">
<img src={data.image} alt={data.title} />
<div className="d-flex flex-column justify-content-center">
<strong style={{ fontSize: fontSize.desktop.info.strong }}>
{data.title}
</strong>
<p style={{ fontSize: fontSize.desktop.info.p }}>{data.subTitle}</p>
<span style={{ fontSize: fontSize.desktop.info.span }}>
{data.options}بسته الحاقی:
</span>
</div>
</td>
<td className="cart-item__price d-flex flex-column justify-content-center align-items-center">
<strong style={{ fontSize: fontSize.desktop.price.strong }}>
{data.price} تومان
</strong>
<span style={{ fontSize: fontSize.desktop.price.span }}>
{data.slicePrice} قیمت هر واحد
</span>
</td>
<td className="cart-item__counter d-flex align-items-center">
<div className="cart-item__counter--box d-flex justify-content-around align-items-center">
<button
onClick={() => handleCounter("increase", data.id)}
style={{ fontSize: fontSize.desktop.counter.button }}
>
+
</button>
<span style={{ fontSize: fontSize.desktop.counter.span }}>
{data.number}
</span>
<button
onClick={() => data.number > 1 ? handleCounter("decrease", data.id) : handleDelete(data.id)}
style={{ fontSize: fontSize.desktop.counter.button }}
>
-
</button>
</div>
</td>
<td 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.desktop.delete.span }}
>
حذف
</span>
</td>
<td className="cart-item__info d-flex">
<img src={data.image} alt={data.title} />
<div className="d-flex flex-column justify-content-center">
<strong style={{ fontSize: fontSize.desktop.info.strong }}>
{data.title}
</strong>
<p style={{ fontSize: fontSize.desktop.info.p }}>{data.subTitle}</p>
<span style={{ fontSize: fontSize.desktop.info.span }}>
{data.options}بسته الحاقی:
</span>
</div>
</td>
<td className="cart-item__price d-flex flex-column justify-content-center align-items-center">
<strong style={{ fontSize: fontSize.desktop.price.strong }}>
{data.price} تومان
</strong>
<span style={{ fontSize: fontSize.desktop.price.span }}>
{data.slicePrice} قیمت هر واحد
</span>
</td>
<td className="cart-item__counter d-flex align-items-center">
<div className="cart-item__counter--box d-flex justify-content-around align-items-center">
<button
onClick={() => handleCounter("increase", data.id)}
style={{ fontSize: fontSize.desktop.counter.button }}
>
+
</button>
<span style={{ fontSize: fontSize.desktop.counter.span }}>
{data.number}
</span>
<button
onClick={() => data.number > 1 ? handleCounter("decrease", data.id) : handleDelete(data.id)}
style={{ fontSize: fontSize.desktop.counter.button }}
>
-
</button>
</div>
</td>
<td 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.desktop.delete.span }}
>
حذف
</span>
</td>
</tr>
);
}

10
src/views/Cart/Item/index.scss
Unescape View File

@ -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;

144
src/views/Cart/Table/index.js
Unescape View File

@ -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>
);
}

68
src/views/Cart/Table/index.scss
Unescape View File

@ -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;
}

37
src/views/Cart/index.js
Unescape View File

@ -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: "ریاضیات گسسته خیلی پیشرفته",
subTitle: "در این قسمت توضیح بسیار کوتاهی قرار می گیرد",
options: "بسته‌های الحاقی: کیف، کفش و کوله پشتی",
title: " گسسته ",
subTitle: " گیرد",
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
}
</>
);
}
}

14
src/views/Cart/index.scss
Unescape View File

@ -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;
}
}
Write Preview
Loading…
Cancel
Save