reza changed products design for mobile

master
Reza_ashrafi 4 years ago
parent 1fb55dd23f
commit e2c5bb9eb8
  1. 12
      src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
  2. 6
      src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss
  3. 2
      src/views/Home/Navbar/Mobile/index.scss
  4. 2
      src/views/Products/Filters/index.scss
  5. 58
      src/views/Products/Product/index.js
  6. 42
      src/views/Products/index.js

@ -82,7 +82,7 @@ class NavbarDrawer extends Component {
<div className="navbar-drawer__bottom--link d-flex"> <div className="navbar-drawer__bottom--link d-flex">
{item.icon} {item.icon}
<div>{item.name}</div> <div>{item.name}</div>
{item.badge && <div class="badge">{item.badge}</div>} {item.message && <div class="badge">{item.message}</div>}
</div> </div>
</Link> </Link>
))} ))}
@ -124,54 +124,63 @@ NavbarDrawer.defaultProps = {
link: "/", link: "/",
icon: <img src={mobileHome} alt="صفحه اصلی" />, icon: <img src={mobileHome} alt="صفحه اصلی" />,
toast: "", toast: "",
message : "",
}, },
{ {
name: "واقعیت افزوده", name: "واقعیت افزوده",
link: "/", link: "/",
icon: <img src={mobileAr} alt="واقعیت افزوده" />, icon: <img src={mobileAr} alt="واقعیت افزوده" />,
toast: "", toast: "",
message : "",
}, },
{ {
name: "بارکد خوان", name: "بارکد خوان",
link: "/qr-scan", link: "/qr-scan",
icon: <img src={qrcode} alt="بارکد خوان" />, icon: <img src={qrcode} alt="بارکد خوان" />,
toast: "", toast: "",
message : "",
}, },
{ {
name: "کتاب الکترونیک", name: "کتاب الکترونیک",
link: "/activation", link: "/activation",
icon: <img src={mobileBlog} alt="کتاب الکترونیک" />, icon: <img src={mobileBlog} alt="کتاب الکترونیک" />,
toast: "", toast: "",
message : "",
}, },
{ {
name: "فروشگاه", name: "فروشگاه",
link: "/products", link: "/products",
icon: <img src={mobileBasket} alt="فروشگاه" />, icon: <img src={mobileBasket} alt="فروشگاه" />,
toast: "", toast: "",
message : "",
}, },
{ {
name: "بلاگ", name: "بلاگ",
link: "/blog", link: "/blog",
icon: <img src={mobileBlog} alt="بلاگ" />, icon: <img src={mobileBlog} alt="بلاگ" />,
toast: "", toast: "",
message : "",
}, },
{ {
name: "پیام رسان", name: "پیام رسان",
link: "/chatroom", link: "/chatroom",
icon: <img src={mobileMail} alt="بلاگ" />, icon: <img src={mobileMail} alt="بلاگ" />,
toast: "", toast: "",
message : "",
}, },
{ {
name: "ویرایش مشخصات", name: "ویرایش مشخصات",
link: "/profile", link: "/profile",
icon: <img src={mobileProfile} alt="ویرایش مشخصات" />, icon: <img src={mobileProfile} alt="ویرایش مشخصات" />,
toast: "", toast: "",
message : "4 پیام",
}, },
{ {
name: "گزارش ایراد", name: "گزارش ایراد",
link: "/", link: "/",
icon: <img src={mobileDanger} alt="گزارش ایراد" />, icon: <img src={mobileDanger} alt="گزارش ایراد" />,
toast: "", toast: "",
message : "",
// onClick: this.props.logout, // onClick: this.props.logout,
}, },
{ {
@ -179,6 +188,7 @@ NavbarDrawer.defaultProps = {
link: "/", link: "/",
icon: <img src={mobileLogout} alt="خروج" />, icon: <img src={mobileLogout} alt="خروج" />,
toast: "", toast: "",
message : "",
// onClick: this.props.logout, // onClick: this.props.logout,
}, },
], ],

@ -74,14 +74,18 @@
width: 100%; width: 100%;
align-items: center; align-items: center;
padding: 15px 10px; padding: 15px 10px;
position: relative;
& img { & img {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-left: 20px; margin-left: 20px;
} }
& .badge { & .badge {
background-color: rgb(160, 60, 209); background-color: red;
margin: 5px; margin: 5px;
position: absolute;
left: 5px;
top: 12px;
} }
} }
&--button { &--button {

@ -6,7 +6,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background-color: white; background-color: white;
z-index: 200; z-index: 400;
padding: 15px 10px; padding: 15px 10px;
&__menu{ &__menu{
img{ img{

@ -1,3 +1,5 @@
.products-filters{ .products-filters{
flex: 1; flex: 1;
position: sticky;
top: 0px;
} }

@ -1,6 +1,8 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import basket from "../../../assets/icons/basket.png";
import "./index.scss"; import "./index.scss";
const maxMobileSize = 550; const maxMobileSize = 550;
@ -21,36 +23,41 @@ const fontSize = {
} }
export default class Product extends Component { export default class Product extends Component {
render() { render() {
const { product } = this.props; const { product, id } = this.props;
return ( return (
<> <>
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<article className="mobile-products-product d-flex flex-column"> <div
<Link to={`/products/${product.id}`}> className="mobile-mybooks__item d-flex flex-column"
<img src={product.image} alt={product.title} /> style={{
<h1 style={{ fontSize: fontSize.mobile.h1 }}>{product.title}</h1> borderBottomLeftRadius: Number(id) % 2 === 1 ? 30 : 0,
<h2 style={{ fontSize: fontSize.mobile.h2 }}>{product.subTitle}</h2> borderBottomRightRadius: Number(id) % 2 === 0 ? 30 : 0,
{product.price ? ( }}
<div className="mobile-products-product__price d-flex flex-column align-items-center"> >
{product.oldPrice ? ( <img src={product.image} alt={"عکس مجصول"} />
<div> <div className="mobile-mybooks__item--buttons d-flex flex-column">
<div style={{ fontSize: fontSize.mobile.div }} className="mobile-products-product__price--old d-flex"> <Link
{product.oldPrice} تومان style={{
<span></span> background: product.status.digital ? "#FFEE00" : "#FFFFFF",
</div> fontSize: fontSize.mobile.a,
</div> color: product.status.ar ? "#4D4D4F" : "#4D4D4F",
) : null} }}
<div style={{ fontSize: fontSize.mobile.div }} className="mobile-products-product__price--price"> >
{product.price} تومان کتاب دیجیتال
</div> { !product.status.digital ? <img src={basket} alt="افزودن به سبد خرید" /> : null}
</Link>
<Link
style={{
background: product.status.ar ? "#00CC69" : "#FFFFFF",
color: product.status.ar ? "#FFFFFF" : "#4D4D4F",
fontSize: fontSize.mobile.a,
}}
>
واقعیت افزوده
{ !product.status.ar ? <img src={basket} alt="افزودن به سبد خرید" /> : null}
</Link>
</div> </div>
) : (
<div style={{ fontSize: fontSize.mobile.div }} className="mobile-products-product__notAvailabe">
ناموجود
</div> </div>
)}
</Link>
</article>
) : null} ) : null}
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<article className="products-product d-flex flex-column align-items"> <article className="products-product d-flex flex-column align-items">
@ -83,3 +90,4 @@ export default class Product extends Component {
); );
} }
} }

@ -75,7 +75,7 @@ export default class Products extends Component {
</div> </div>
<div className="mobile-products__list d-flex flex-wrap"> <div className="mobile-products__list d-flex flex-wrap">
{this.props.products.map((item, i) => ( {this.props.products.map((item, i) => (
<Product product={item} key={i} /> <Product product={item} key={i} id={i} />
))} ))}
</div> </div>
</div> </div>
@ -118,6 +118,10 @@ Products.defaultProps = {
price: "78.000", price: "78.000",
oldPrice: "", oldPrice: "",
date: new Date(), date: new Date(),
status: {
digital: true,
ar: true,
},
}, },
{ {
id: 1, id: 1,
@ -127,6 +131,10 @@ Products.defaultProps = {
price: "39.000", price: "39.000",
oldPrice: "59.000", oldPrice: "59.000",
date: new Date(), date: new Date(),
status: {
digital: true,
ar: true,
},
}, },
{ {
id: 2, id: 2,
@ -135,6 +143,10 @@ Products.defaultProps = {
subTitle: "پایه ششم ابتدایی", subTitle: "پایه ششم ابتدایی",
price: "21.000", price: "21.000",
oldPrice: "", oldPrice: "",
status: {
digital: true,
ar: true,
},
}, },
{ {
id: 3, id: 3,
@ -143,6 +155,10 @@ Products.defaultProps = {
subTitle: "پایه دهم ابتدایی", subTitle: "پایه دهم ابتدایی",
price: "", price: "",
oldPrice: "", oldPrice: "",
status: {
digital: true,
ar: true,
},
}, },
{ {
id: 4, id: 4,
@ -151,6 +167,10 @@ Products.defaultProps = {
subTitle: "پایه هفتم ابتدایی", subTitle: "پایه هفتم ابتدایی",
price: "59.000", price: "59.000",
oldPrice: "", oldPrice: "",
status: {
digital: true,
ar: true,
},
}, },
{ {
id: 5, id: 5,
@ -160,6 +180,10 @@ Products.defaultProps = {
price: "78.000", price: "78.000",
oldPrice: "", oldPrice: "",
date: new Date(), date: new Date(),
status: {
digital: true,
ar: true,
},
}, },
{ {
id: 6, id: 6,
@ -169,6 +193,10 @@ Products.defaultProps = {
price: "39.000", price: "39.000",
oldPrice: "59.000", oldPrice: "59.000",
date: new Date(), date: new Date(),
status: {
digital: true,
ar: true,
},
}, },
{ {
id: 7, id: 7,
@ -178,6 +206,10 @@ Products.defaultProps = {
price: "21.000", price: "21.000",
oldPrice: "", oldPrice: "",
date: new Date(), date: new Date(),
status: {
digital: true,
ar: true,
},
}, },
{ {
id: 8, id: 8,
@ -187,6 +219,10 @@ Products.defaultProps = {
price: "", price: "",
oldPrice: "", oldPrice: "",
date: new Date(), date: new Date(),
status: {
digital: true,
ar: true,
},
}, },
{ {
id: 9, id: 9,
@ -196,6 +232,10 @@ Products.defaultProps = {
price: "59.000", price: "59.000",
oldPrice: "", oldPrice: "",
date: new Date(), date: new Date(),
status: {
digital: true,
ar: true,
},
}, },
], ],
}; };

Loading…
Cancel
Save